/* ==========================================================================
   1 年 10 班 班親會 — 進站前的等待畫面「雅典的一天」
   只服務 index.html；不影響站內其他頁面。
   風格延續 style.css：象牙白、赤陶紅、橄欖綠、古金線、回紋邊框。
   （天空與海是風景畫，允許柔和漸層；介面本身仍不用漸層、發光、圓角膠囊。）
   ========================================================================== */

:root {
  --ivory: #F5F0E6;
  --ink: #2A2724;
  --terracotta: #9E4A2F;
  --olive: #6B7A3A;
  --gold: #B08D4F;

  /* 由 intro.js 依時間循環改寫 */
  --sky-top: #9FBAC0;
  --sky-mid: #C9CDB4;
  --sky-hor: #EFE3C4;
  --sea-far: #6E8C93;
  --sea-near: #52757F;
  --land: #CBBB8E;
  --tint: #FFFFFF;
  --star-a: 0;
  --lamp-a: 0;
  --win-a: 0;

  --meander-h: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 18 H40 M6 18 V6 H34 V14 H14 V10 H26' fill='none' stroke='%23B08D4F' stroke-width='2'/%3E%3C/svg%3E");
  --meander-v: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40'%3E%3Cpath d='M18 0 V40 M18 6 H6 V34 H14 V14 H10 V26' fill='none' stroke='%23B08D4F' stroke-width='2'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  -webkit-text-size-adjust: 100%;
  cursor: pointer;
}

#intro {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #EFE3C4;
  transition: opacity .6s ease;
}
body.leaving #intro { opacity: 0; }

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  isolation: isolate;
}

/* ---------- 場景動畫 ----------
   SVG 元素一律先指定 transform-box: fill-box，否則 transform-origin
   會以整張畫布原點計算，旋轉軸會跑掉。 */
.cloud    { animation: drift 190s linear infinite; }
.cloud.c1 { --cy: 150px; animation-duration: 240s; animation-delay: -34s; }
.cloud.c2 { --cy: 96px;  animation-duration: 168s; animation-delay: -96s; }
.cloud.c3 { --cy: 214px; animation-duration: 290s; animation-delay: -190s; }
@keyframes drift {
  from { transform: translate(-280px, var(--cy)); }
  to   { transform: translate(2200px, var(--cy)); }
}

#stars { opacity: var(--star-a); }
#stars circle { animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.waves path { animation: swell 11s ease-in-out infinite; }
@keyframes swell { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-46px); } }

.oars { animation: oar 2.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0%; }
@keyframes oar { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
.sail { animation: luff 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 50%; }
@keyframes luff { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.86); } }

.canopy { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

.smoke ellipse { animation: puff 7s ease-out infinite; opacity: 0;
                 transform-box: fill-box; transform-origin: 50% 100%; }
.smoke .p2 { animation-delay: -2.4s; }
.smoke .p3 { animation-delay: -4.8s; }
@keyframes puff {
  0%   { transform: translate(0, 0) scale(.35); opacity: 0; }
  14%  { opacity: .52; }
  100% { transform: translate(-42px, -152px) scale(1.7); opacity: 0; }
}

.jet path { animation: jet 2.6s ease-in-out infinite; }
@keyframes jet { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

#temple .fire { opacity: var(--lamp-a); }
.flame { animation: flicker 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.flame.f2 { animation-duration: .78s; animation-delay: -.3s; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1); }
  35%      { transform: scale(.86, 1.16); }
  70%      { transform: scale(1.1, .9); }
}

.win { fill-opacity: var(--win-a); }

.hoist { animation: hoist 9s ease-in-out infinite; }
.rope  { animation: rope 9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0%; }
@keyframes hoist { 0%, 8% { transform: translateY(74px); } 55%, 100% { transform: translateY(0); } }
@keyframes rope  { 0%, 8% { transform: scaleY(3.1); } 55%, 100% { transform: scaleY(1); } }

/* 單位：兩幀腿部交替（遊戲 sprite 感） */
.unit .fB { opacity: 0; }
.unit[data-f="1"] .fA { opacity: 0; }
.unit[data-f="1"] .fB { opacity: 1; }
.unit[data-s="1"] .fA { opacity: 0; }
.unit[data-s="1"] .fB { opacity: 1; }

.unit .arm { transform-box: fill-box; transform-origin: 0% 20%; }
.unit[data-s="1"] .arm { animation: gesture 3.4s ease-in-out infinite; }
@keyframes gesture { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }

.unit .head { transform-box: fill-box; transform-origin: 0% 60%; }
.unit[data-s="1"] .head { transform: rotate(30deg); }

.wheel { animation: roll 1.7s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes roll { to { transform: rotate(360deg); } }

.owl .eyes { animation: blink 5.2s steps(1) infinite; }
@keyframes blink { 0%, 96% { opacity: 1; } 97%, 100% { opacity: .05; } }

.cheer .load { animation: cheer 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes cheer { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-6deg); } }

/* ==========================================================================
   介面覆蓋層
   ========================================================================== */
#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- 回紋邊框 ---------- */
.frame-t, .frame-b {
  position: absolute; left: 0; right: 0; height: 22px;
  background: rgba(245, 240, 230, .78) var(--meander-h) repeat-x center;
}
.frame-t { top: 0; }
.frame-b { bottom: 0; transform: scaleY(-1); }
.frame-l, .frame-r {
  position: absolute; top: 0; bottom: 0; width: 22px;
  background: rgba(245, 240, 230, .78) var(--meander-v) repeat-y center;
}
.frame-l { left: 0; transform: scaleX(-1); }
.frame-r { right: 0; }
.frame-inner {
  position: absolute; inset: 30px;
  border: 1px solid rgba(176, 141, 79, .55);
}

/* ---------- 石板標題 ---------- */
.slab {
  position: absolute;
  top: 7vh;
  left: 4.4vw;
  max-width: 50vw;
  padding: .55em .9em .7em;
  background: rgba(245, 240, 230, .91);
  border: 1px solid var(--gold);
}
.slab h1 {
  margin: 0;
  font-family: "Noto Serif TC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(28px, 3.95vw, 78px);
  line-height: 1.24;
  white-space: nowrap;
  letter-spacing: .04em;
  color: var(--ink);
}
.slab h1 .t2 { margin-left: .62em; }
.slab-rule {
  height: 1px;
  background: rgba(176, 141, 79, .8);
  margin: .46em 0 .4em;
}
.slab-sub {
  margin: 0;
  font-size: clamp(16px, 1.85vw, 36px);
  letter-spacing: .1em;
  color: var(--olive);
}

/* ---------- 資源列 ---------- */
.res {
  position: absolute;
  top: 6vh;
  right: 4.4vw;
  display: flex;
  align-items: center;
  gap: 1.4vw;
  padding: .34em .95em;
  background: rgba(245, 240, 230, .74);
  border: 1px solid rgba(176, 141, 79, .6);
  font-size: clamp(13px, 1.02vw, 21px);
  letter-spacing: .06em;
  color: var(--ink);
}
.res-item { display: inline-flex; align-items: center; }
.res svg { width: 1.5em; height: 1.5em; margin-right: .34em; }
.res b { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.2ch; }

/* ---------- 事件記錄 ---------- */
.log {
  position: absolute;
  left: 4.4vw;
  bottom: 3.2vh;
  max-width: 29vw;
  display: flex;
  align-items: flex-start;
  gap: .55em;
  padding: .52em .95em .58em;
  background: rgba(245, 240, 230, .8);
  border: 1px solid rgba(176, 141, 79, .5);
  border-left: 4px solid var(--terracotta);
  font-size: clamp(15px, 1.34vw, 27px);
  line-height: 1.6;
}
.log-mark {
  flex: none;
  width: .52em; height: .52em;
  margin-top: .58em;
  background: var(--olive);
}
.log-text { flex: 1 1 auto; min-width: 0; transition: opacity .38s ease; }
.log.fading .log-text { opacity: 0; }
.log-who { color: var(--terracotta); }

/* ---------- 進入提示 ---------- */
.hint {
  position: absolute;
  left: 50%;
  bottom: 3.2vh;
  transform: translateX(-50%);
  margin: 0;
  padding: .38em 1.2em .44em;
  white-space: nowrap;
  background: rgba(245, 240, 230, .74);
  border: 1px solid rgba(176, 141, 79, .55);
  font-size: clamp(17px, 1.72vw, 34px);
  letter-spacing: .18em;
  color: var(--ink);
  animation: breathe 4.6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .52; } 50% { opacity: 1; } }

/* ---------- 手機直向 ---------- */
@media (max-width: 860px) {
  .res { display: none; }
  .frame-t, .frame-b { height: 14px; background-size: 26px 13px; }
  .frame-l, .frame-r { width: 14px; background-size: 13px 26px; }
  .frame-inner { inset: 19px; }
  .slab {
    left: 5vw; right: 5vw; max-width: none; top: 2.2vh;
    padding: .42em .6em .5em;
    text-align: center;
  }
  .slab h1 { font-size: clamp(22px, 7.2vw, 42px); white-space: normal; }
  .slab h1 .t1, .slab h1 .t2 { display: block; margin: 0; }
  .slab-rule { margin: .35em 0 .3em; }
  .slab-sub { font-size: clamp(14px, 3.5vw, 20px); }
  .log {
    left: 5vw; right: 5vw; max-width: none;
    bottom: calc(4vh + 4.4em);
    font-size: clamp(14px, 3.7vw, 20px);
  }
  .hint {
    bottom: 4vh;
    font-size: clamp(15px, 4vw, 22px);
    letter-spacing: .12em;
  }
}

/* ---------- 減少動態：只留太陽與船 ---------- */
@media (prefers-reduced-motion: reduce) {
  #scene * { animation: none !important; }
  #scene .oars { animation: oar 2.1s ease-in-out infinite !important; }
  #scene .sail { animation: luff 5.5s ease-in-out infinite !important; }
  .hint { animation: none !important; opacity: .95; }
}