/* PELAGIC — 滚动掀海面 + 观景厅
   大标题：Cormorant Garamond（沿用最初三张参考图）。
   其余所有功能性文字：IBM Plex Mono，像潜水仪表上的读数。 */

:root{
  color-scheme: dark;
  --ink:    #f3ece0;
  --ink-2:  rgba(243,236,224,.72);
  --ink-3:  rgba(243,236,224,.45);
  --navy:   #0b1a28;
  --deep:   #04121f;
  --abyss:  #020a12;
  --signal: #f5c542;                 /* 信号黄：付费、VIP、翻牌字 */
  --serif: "Cormorant Garamond", Cormorant, Garamond,
           "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Songti SC", "Noto Serif JP", "Noto Serif SC",
           Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
           "Hiragino Sans", "Yu Gothic", YuGothic, "PingFang SC", "Noto Sans JP", "Noto Sans SC", monospace;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --pad-y: clamp(1.1rem, 2.6vw, 2.3rem);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ background: var(--abyss); }
body{
  margin: 0; background: var(--abyss); color: var(--ink);
  font-family: var(--serif); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.skip-link{
  position: fixed; left: 50%; top: -100px; transform: translateX(-50%); z-index: 60;
  padding: .6rem 1.2rem; border-radius: 999px;
  background: var(--ink); color: var(--navy); text-decoration: none;
  font: 600 .85rem var(--mono);
}
.skip-link:focus-visible{ top: 1rem; }
:where(a,button):focus-visible{ outline: 2px solid var(--signal); outline-offset: 3px; }

/* ── 顶栏 ───────────────────────────────────────────────── */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: var(--pad-y) var(--pad-x);
  pointer-events: none;
}
.site-header > *{ pointer-events: auto; }

.brand{ display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); line-height: 1; }
.brand__wave{ width: clamp(58px, 5.6vw, 100px); height: auto; margin-bottom: clamp(.3rem, .5vw, .55rem); opacity: .92; }
.brand__word{ font-size: clamp(1.05rem, 1.46vw, 1.7rem); letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; }
.brand__sub{
  margin-top: clamp(.42rem, .7vw, .7rem);
  font: 500 clamp(.5rem, .52vw, .62rem) var(--mono); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: var(--ink-2);
}

.header-actions{ display: flex; align-items: center; gap: .7rem; padding-top: clamp(.2rem, 1vw, .8rem); }

/* 语言：分段开关，选中的那一格是实心的 */
.seg{
  display: flex; padding: 3px; border-radius: 999px;
  background: rgba(4,14,26,.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(243,236,224,.14);
}
.seg button{
  appearance: none; border: 0; cursor: pointer; background: none;
  padding: .5em .95em; border-radius: 999px;
  font: 500 .78rem var(--mono); letter-spacing: .03em; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.seg button:hover{ color: var(--ink); }
.seg button[aria-pressed="true"]{ background: var(--ink); color: var(--navy); }

/* Play the journey：实心胶囊 + 圆形播放键 */
.pill{
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .45em 1.15em .45em .45em; border-radius: 999px;
  background: var(--ink); color: var(--navy);
  font: 600 .84rem var(--mono); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(2,10,18,.25);
  transition: background-color .2s ease, transform .1s ease;
}
.pill:hover{ background: #fff; }
.pill:active{ transform: translateY(1px); }
.pill__icon{ display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--navy); color: var(--ink); }
.pill__icon svg{ width: .75em; height: .75em; }

/* ── 滚动区与舞台 ───────────────────────────────────────── */
.reveal{ position: relative; height: 360vh; background: var(--abyss); }   /* 行程 260vh，约 2.6 屏 */
.reveal__anchor{ position: absolute; left: 0; top: calc(100% - 100vh); width: 1px; height: 1px; }

.stage{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden; background: var(--deep);
  touch-action: pan-y;               /* 手机上竖着划照样能滚，点击照样能敲玻璃 */
  -webkit-user-select: none; user-select: none;
}
.stage__media{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage__poster, .stage__backdrop{ object-fit: cover; object-position: 50% 50%; }
.stage__frames{ opacity: 0; transition: opacity .4s ease; }
.stage__frames[data-live="1"]{ opacity: 1; }
.stage__backdrop{ opacity: 0; }

.caustics{
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  mix-blend-mode: screen; opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 38%, transparent 72%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 38%, transparent 72%);
}
[data-state="aquarium"] .caustics{ opacity: .16; }
.caustics i{
  position: absolute; left: -800px; top: -800px; right: -800px; bottom: -800px;
  background-repeat: repeat; background-size: 520px 520px;
  animation: caust-a 30s linear infinite; will-change: transform;
}
.caustics i + i{ background-size: 740px 740px; opacity: .7; animation: caust-b 43s linear infinite; }
@keyframes caust-a{ to{ transform: translate3d(520px,520px,0) } }
@keyframes caust-b{ to{ transform: translate3d(-740px,740px,0) } }

.stage__fish{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.glass{
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background:
    linear-gradient(118deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(118deg, transparent 56%, rgba(255,255,255,.035) 62%, transparent 69%),
    radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(2,10,18,.22) 100%);
}
[data-state="aquarium"] .glass{ opacity: 1; }

.stage__scrim{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,14,26,.42) 0%, rgba(4,14,26,.08) 18%, transparent 32%),
    linear-gradient(96deg, rgba(4,14,26,.42) 0%, rgba(4,14,26,.16) 32%, transparent 54%);
}

.stage.is-thud{ animation: thud .2s ease-out; }
@keyframes thud{
  30%{ transform: translate3d(3px,-2px,0) }
  60%{ transform: translate3d(-2px,1px,0) }
}

/* ── 三句大标题 ─────────────────────────────────────────── */
.captions{ position: absolute; inset: 0; pointer-events: none; }
.caption{
  position: absolute; left: 6%; right: 6%; top: var(--top);
  opacity: 0; transform: translate3d(0, 14px, 0); will-change: opacity, transform;
}
.caption[data-caption="1"]{ --top: 31%; }
.caption[data-caption="2"]{ --top: 25%; }
.caption[data-caption="3"]{ --top: 25%; }
.headline{
  margin: 0; max-width: 14ch; font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 8rem); line-height: .98; letter-spacing: .004em;
  text-wrap: balance; text-shadow: 0 2px 34px rgba(2,10,18,.45);
}

/* ── 展品：透明按钮 + 铭牌，鱼本身画在 canvas 上 ────────── */
.exhibit{
  position: absolute; appearance: none; background: none; border: 0; padding: 0;
  cursor: pointer; border-radius: 14px; color: var(--ink);
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s;
}
.exhibit.is-on{ opacity: 1; visibility: visible; transition: opacity .5s ease; }
.exhibit:focus-visible{ outline: 2px dashed var(--signal); outline-offset: 2px; }
.exhibit__label{
  position: absolute; left: 50%; top: var(--label-top, 100%); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5em;
  padding: .38em .8em; border-radius: 999px;
  background: rgba(4,14,26,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(243,236,224,.16);
  font: 600 clamp(.7rem, .95vw, .92rem) var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease;
}
[data-lang="ja"] .exhibit__label,
[data-lang="zh"] .exhibit__label{ letter-spacing: .05em; font-size: clamp(.78rem, 1.05vw, 1.02rem); }
.exhibit:hover .exhibit__label,
.exhibit:focus-visible .exhibit__label{ background: var(--ink); color: var(--navy); }
.exhibit--soon .exhibit__label{ color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(243,236,224,.16); border: 0; }
.exhibit--soon .exhibit__label::before{
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: var(--signal); animation: pulse 1.6s ease-in-out infinite;
}
.exhibit--soon:hover .exhibit__label{ background: rgba(4,14,26,.7); color: var(--ink); }
@keyframes pulse{ 50%{ opacity: .3 } }

/* ── 玻璃上的搪瓷铭牌，两头各一颗螺丝 ───────────────────── */
.plaque{
  position: absolute; left: 50%; bottom: clamp(1.1rem, 3.4vh, 2.2rem);
  transform: translate(-50%, 6px);
  display: flex; align-items: center; gap: .85em;
  margin: 0; padding: .55em .8em; border-radius: 6px;
  background: linear-gradient(#10263a, #0b1c2c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(243,236,224,.14), 0 6px 18px rgba(0,0,0,.35);
  color: var(--ink);
  font: 500 clamp(.62rem, .72vw, .76rem) var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .9s ease, transform .9s ease;
}
.plaque.is-on{ opacity: 1; transform: translate(-50%, 0); }
.plaque i{ width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e3e8ec, #7d8892); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
[data-lang="ja"] .plaque,
[data-lang="zh"] .plaque{ letter-spacing: .08em; font-size: clamp(.72rem, .8vw, .86rem); }

/* ── 右侧深度计 ─────────────────────────────────────────── */
.depth{ position: absolute; right: calc(var(--pad-x) * .6); top: 30%; height: 42%; width: 4.2rem; pointer-events: none; }
.depth__scale{ position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: rgba(243,236,224,.3); }
.depth__tick{ position: absolute; right: 0; width: 5px; height: 1px; background: rgba(243,236,224,.35); }
.depth__tick.is-major{ width: 10px; background: rgba(243,236,224,.6); }
.depth__num{
  position: absolute; right: 16px; transform: translateY(-50%);
  font: 500 .6rem var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.depth__marker{
  position: absolute; right: -4px; top: 0; transform: translateY(0);
  display: flex; align-items: center; gap: .15em;
  margin-top: -.72em; padding: .22em .5em .22em .55em; border-radius: 999px;
  background: var(--ink); color: var(--navy);
  font: 600 .68rem var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(2,10,18,.35);
}
.depth__marker::after{
  content: ""; position: absolute; right: -4px; top: 50%; margin-top: -4px;
  border: 4px solid transparent; border-left-color: var(--ink); border-right: 0;
}
.depth__unit{ font-weight: 500; opacity: .7; }

/* ── 往下滚的提示：一只鼠标，滚轮在动 ───────────────────── */
.hint{
  position: absolute; left: 50%; bottom: clamp(1.6rem, 4.5vh, 2.8rem); transform: translateX(-50%);
  width: 22px; height: 34px; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(243,236,224,.75);
  pointer-events: none; opacity: 0; transition: opacity .6s ease;
}
[data-ready="1"] .hint{ opacity: 1; }
.hint i{ position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); animation: wheel 1.7s ease-in-out infinite; }
@keyframes wheel{ 0%{ transform: translateY(0); opacity: 1 } 70%{ transform: translateY(10px); opacity: 0 } 100%{ opacity: 0 } }

.loader{
  position: absolute; left: 50%; bottom: clamp(1.6rem, 4.5vh, 2.8rem); transform: translateX(-50%);
  width: clamp(90px, 10vw, 150px); height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(243,236,224,.18); transition: opacity .5s ease;
}
.loader i{ display: block; height: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(0); transition: transform .3s ease; }
.loader[data-done="1"]{ opacity: 0; }
.failure{ position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); }
.failure[hidden]{ display: none; }

.noscript{ position: fixed; inset: auto 0 0 0; padding: 1rem var(--pad-x); background: var(--deep); color: var(--ink-2); font-family: var(--mono); }

/* ── 手机与竖屏 ─────────────────────────────────────────── */
@media (max-width: 760px){
  .site-header{ flex-direction: column; align-items: center; gap: .75rem; }
  .header-actions{ padding-top: 0; gap: .5rem; }
  .seg button{ padding: .45em .75em; font-size: .72rem; }
  .pill{ font-size: .76rem; }

  .stage__poster, .stage__backdrop{ object-position: 64% 50%; }
  .caption{ left: 7%; right: 7%; }
  .caption[data-caption="1"]{ --top: 22%; }
  .caption[data-caption="2"]{ --top: 20%; }
  .caption[data-caption="3"]{ --top: 20%; }
  .headline{ font-size: clamp(2.1rem, 10.4vw, 3.6rem); max-width: 12ch; }
  .stage__scrim{
    background: linear-gradient(180deg, rgba(4,14,26,.66) 0%, rgba(4,14,26,.38) 26%, rgba(4,14,26,.08) 44%, transparent 56%);
  }
  .depth{ right: 8px; width: 3rem; transition: opacity .5s ease; }
  .depth__num{ display: none; }
  [data-state="aquarium"] .depth{ opacity: 0; }        /* 窄屏到了观景厅就收起，别挤着展品铭牌 */
  .exhibit__label{ font-size: .6rem; letter-spacing: .08em; }
  [data-lang="ja"] .exhibit__label, [data-lang="zh"] .exhibit__label{ font-size: .7rem; }
}

@media (max-height: 460px) and (orientation: landscape){
  .site-header{ padding: .7rem var(--pad-x); }
  .brand__wave{ display: none; }
  .caption{ top: 24%; }
  .headline{ font-size: clamp(1.8rem, 5.4vw, 3rem); }
  .depth, .plaque{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .caption{ transition: none !important; transform: none !important; }
  .caustics i, .hint i, .exhibit--soon .exhibit__label::before{ animation: none; }
  .stage.is-thud{ animation: none; }
  .stage__frames, .plaque, .glass, .exhibit{ transition: none; }
}