.wv-page { background: #05050a; }

.wv-open, .wv-ch { position: relative; min-height: 100vh; min-height: 100svh; display: flex; overflow: hidden; background: #05050a; }
.wv-open-media, .wv-ch-media { position: absolute; inset: -7% 0; margin: 0; }
.wv-open-media img, .wv-ch-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wv-open-media img { object-position: 62% 26%; }
.wv-ch-1 .wv-ch-media img { object-position: 46% 26%; }
.wv-ch-2 .wv-ch-media img { object-position: 50% 34%; }
.wv-ch-3 .wv-ch-media img { object-position: 47% 38%; }
.wv-ch-4 .wv-ch-media img { object-position: 56% 30%; }

/* 抜け素材（foreground レイヤー）※現案では未使用。world/saki-nemesis.webp・world/saki-alt.webp は生成済み */
.wv-open-fig {
  position: absolute; z-index: 2; right: 5%; bottom: -3%; height: 74%;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.72));
  pointer-events: none;
}

/* 覆い：上下を地色で消して band 境界を目立たせず、文字の可読性も確保 */
.wv-open-veil, .wv-ch-veil { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.wv-open-veil {
  background:
    linear-gradient(180deg, rgba(5,5,10,.88) 0%, rgba(5,5,10,.10) 24%, rgba(5,5,10,.22) 50%, rgba(5,5,10,.90) 88%, #05050a 100%),
    linear-gradient(90deg, rgba(5,5,10,.80) 0%, rgba(5,5,10,.12) 56%, transparent 96%);
}
.wv-ch-veil {
  background:
    linear-gradient(90deg, rgba(5,5,10,.93) 0%, rgba(5,5,10,.66) 32%, rgba(5,5,10,.05) 68%, transparent 100%),
    linear-gradient(180deg, #05050a 0%, rgba(5,5,10,.34) 15%, rgba(5,5,10,.16) 60%, rgba(5,5,10,.86) 88%, #05050a 100%);
}
.wv-ch.is-rev .wv-ch-veil {
  background:
    linear-gradient(270deg, rgba(5,5,10,.93) 0%, rgba(5,5,10,.66) 32%, rgba(5,5,10,.05) 68%, transparent 100%),
    linear-gradient(180deg, #05050a 0%, rgba(5,5,10,.34) 15%, rgba(5,5,10,.16) 60%, rgba(5,5,10,.86) 88%, #05050a 100%);
}
/* 走査光（motion on のときだけ・既存 hero-scan と同じ言語） */
.wv-open-scan { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px); }

/* ---- コピー基調 ---- */
.wv-kicker, .wv-ch-no, .wv-ch-meta, .wv-fin-kicker, .wv-cue {
  font-family: var(--font-mono); text-transform: uppercase; color: var(--accent-bright);
  letter-spacing: .32em; font-size: .72rem; margin: 0;
}
.wv-ch-meta { color: var(--text-dim); letter-spacing: .24em; font-size: .68rem; }
.wv-open-copy { position: relative; z-index: 5; align-self: flex-end; width: 100%; padding: 0 clamp(24px, 7vw, 110px) clamp(70px, 12vh, 130px); }
.wv-open-line {
  font-family: var(--font-jp); font-weight: 800; color: #fff;
  font-size: clamp(2.1rem, 6.4vw, 5.2rem); line-height: 1.3; letter-spacing: .04em;
  margin: .42em 0 .3em; text-shadow: 0 2px 44px rgba(0,0,0,.8), 0 0 70px rgba(23,49,143,.34);
}
.wv-open-en { font-size: clamp(.92rem, 1.5vw, 1.1rem); letter-spacing: .07em; color: #c7cfda; margin: 0; }
.wv-cue { display: flex; align-items: center; gap: 12px; margin-top: clamp(28px, 5vh, 54px); color: var(--text-dim); }
.wv-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, var(--accent-bright), transparent); }

a.wv-cue { text-decoration: none; cursor: pointer; transition: color .3s; }
a.wv-cue:hover, a.wv-cue:focus-visible { color: var(--accent-bright); outline: none; }
a.wv-cue:hover i, a.wv-cue:focus-visible i { background: linear-gradient(180deg, #fff, rgba(90,162,255,.2)); }
.wv-cue i { position: relative; overflow: hidden; }
.wv-cue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 42%;
  background: linear-gradient(180deg, transparent, #eaf2ff, transparent);
  animation: wvCueDrop 2.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes wvCueDrop {
  0%   { transform: translateY(-110%); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(250%); opacity: 0; }
}
html[data-motion="off"] .wv-cue i::after { display: none; }
#members, #wv-state { scroll-margin-top: 84px; }

/* ---- line-mask reveal（1画面目のタイトルは preloader 消去と同時に立ち上がる） ---- */
.wv-l { display: block; overflow: hidden; }
.wv-l > span { display: block; }
html.wv-js[data-motion="on"] body:not(.is-ready) .wv-open-line .wv-l > span { transform: translateY(112%); }
.wv-open-line .wv-l > span { transition: transform 1.15s cubic-bezier(.16,1,.3,1); }
.wv-open-line .wv-l:nth-child(2) > span { transition-delay: .14s; }
html.wv-js[data-motion="on"] .wv-open-en,
html.wv-js[data-motion="on"] .wv-cue { opacity: 0; transform: translateY(16px); transition: opacity 1s ease .55s, transform 1s ease .55s; }
html[data-motion="on"] .wv-cue { transition-delay: .8s; }
html[data-motion="on"] body.is-ready .wv-open-en,
html[data-motion="on"] body.is-ready .wv-cue { opacity: 1; transform: none; }
html[data-motion="off"] .wv-open-scan { display: none; }

/* ---- STATEMENT ---- */
.wv-state { padding: clamp(96px, 16vh, 190px) 24px clamp(90px, 14vh, 170px); }
.wv-state-inner { max-width: 940px; margin: 0 auto; padding-left: 36px; border-left: 1px solid rgba(90,162,255,.30); }
.wv-state-lead {
  font-family: var(--font-jp); font-weight: 800; color: #fff;
  font-size: clamp(1.16rem, 2.05vw, 1.62rem); line-height: 2.1; letter-spacing: .05em; margin: 0;
}
.wv-state-p { font-family: var(--font-jp); font-size: clamp(.98rem, 1.35vw, 1.1rem); line-height: 2.2; color: #c7cfda; margin: 26px 0 0; }
.wv-state-en { margin: 34px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.wv-state-en p { font-size: .86rem; line-height: 2.0; letter-spacing: .02em; color: var(--text-dim); margin: 0 0 12px; }
.wv-state-en p:last-child { margin-bottom: 0; }

/* ---- CHAPTER ---- */
.wv-ch-body { position: relative; z-index: 5; align-self: center; width: min(660px, 82vw); margin: 0 0 0 clamp(24px, 7vw, 110px); }
.wv-ch.is-rev .wv-ch-body { margin: 0 clamp(24px, 7vw, 110px) 0 auto; text-align: right; }
.wv-ch-title {
  font-family: var(--font-display); font-weight: 900; color: #fff;
  font-size: clamp(2.5rem, 8.2vw, 6.2rem); line-height: 1; letter-spacing: .045em;
  margin: .14em 0 .2em; text-shadow: 0 0 70px rgba(23,49,143,.42), 0 8px 34px rgba(0,0,0,.72);
}
.wv-q-jp { font-family: var(--font-jp); font-weight: 700; color: #fff; font-size: clamp(1.08rem, 2vw, 1.5rem); line-height: 2.15; letter-spacing: .05em; margin: 30px 0 0; text-shadow: 0 2px 26px rgba(0,0,0,.85); }
.wv-q-en { margin: 16px 0 0; font-size: .9rem; line-height: 1.95; letter-spacing: .03em; color: #aab4c4; }
.wv-ch-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 34px;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent-bright); transition: color .3s;
}
.wv-ch-link i { font-style: normal; transition: transform .3s; }
.wv-ch-link:hover { color: #fff; }
.wv-ch-link:hover i { transform: translateX(7px); }

/* motion on のときだけ章の中身が後から立ち上がる（JS が .is-in を付ける） */
html.wv-js[data-motion="on"] .wv-ch-media img { opacity: 0; }
html.wv-js[data-motion="on"] .wv-ch.is-in .wv-ch-media img { opacity: 1; transition: opacity 1.6s ease; }
html.wv-js[data-motion="on"] .wv-ch-body > * { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); }
html.wv-js[data-motion="on"] .wv-ch.is-in .wv-ch-body > * { opacity: 1; transform: none; }
html.wv-js[data-motion="on"] .wv-ch.is-in .wv-ch-body > *:nth-child(2) { transition-delay: .1s; }
html.wv-js[data-motion="on"] .wv-ch.is-in .wv-ch-body > *:nth-child(3) { transition-delay: .18s; }
html.wv-js[data-motion="on"] .wv-ch.is-in .wv-ch-body > *:nth-child(4) { transition-delay: .26s; }
html.wv-js[data-motion="on"] .wv-ch.is-in .wv-ch-body > *:nth-child(5) { transition-delay: .34s; }
html.wv-js[data-motion="on"] .wv-ch-title .wv-l > span { transform: translateY(112%); transition: transform 1.15s cubic-bezier(.16,1,.3,1) .12s; }
html.wv-js[data-motion="on"] .wv-ch.is-in .wv-ch-title .wv-l > span { transform: none; }
html.wv-js[data-motion="on"] .wv-state-inner > * { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); }
html.wv-js[data-motion="on"] .wv-state.is-in .wv-state-inner > * { opacity: 1; transform: none; }
html.wv-js[data-motion="on"] .wv-state.is-in .wv-state-inner > *:nth-child(2) { transition-delay: .14s; }
html.wv-js[data-motion="on"] .wv-state.is-in .wv-state-inner > *:nth-child(3) { transition-delay: .26s; }

/* ---- FINALE ---- */
.wv-fin { padding: clamp(90px, 14vh, 170px) 24px clamp(80px, 12vh, 140px);
  background: radial-gradient(130% 100% at 50% 0%, rgba(23,49,143,.20), transparent 62%), #05050a; }
.wv-fin-inner { max-width: 1160px; margin: 0 auto; }
.wv-fin .members-grid { margin-top: 26px; }
.wv-fin-close { margin-top: clamp(64px, 11vh, 120px); text-align: center; }
.wv-fin-line { font-family: var(--font-jp); font-weight: 800; color: #fff; font-size: clamp(1.5rem, 3.6vw, 2.6rem); letter-spacing: .08em; margin: 0; }
.wv-fin-line-en { margin: 14px 0 0; font-size: .95rem; letter-spacing: .1em; color: var(--text-dim); }
.wv-fin-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }
html.wv-js[data-motion="on"] .wv-fin-close > * { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); }
html.wv-js[data-motion="on"] .wv-fin-close.is-in > * { opacity: 1; transform: none; }
html.wv-js[data-motion="on"] .wv-fin-close.is-in > *:nth-child(2) { transition-delay: .12s; }
html.wv-js[data-motion="on"] .wv-fin-close.is-in > *:nth-child(3) { transition-delay: .24s; }

/* ---- モバイル（WORLD 案）---- */
@media (max-width: 900px) {
  .wv-open, .wv-ch { min-height: 96vh; min-height: 96svh; }
  .wv-open-fig { display: none; }
  .wv-open-media img { object-position: 58% 22%; }
  .wv-ch-1 .wv-ch-media img { object-position: 46% 22%; }
  .wv-ch-2 .wv-ch-media img { object-position: 48% 26%; }
  .wv-ch-3 .wv-ch-media img { object-position: 47% 30%; }
  .wv-ch-4 .wv-ch-media img { object-position: 52% 24%; }
  .wv-ch-veil, .wv-ch.is-rev .wv-ch-veil {
    background: linear-gradient(180deg, rgba(5,5,10,.62) 0%, rgba(5,5,10,.36) 34%, rgba(5,5,10,.90) 76%, #05050a 100%);
  }
  .wv-open-veil {
    background: linear-gradient(180deg, rgba(5,5,10,.82) 0%, rgba(5,5,10,.22) 36%, rgba(5,5,10,.92) 84%, #05050a 100%);
  }
  .wv-open-copy { padding: 0 22px 84px; }
  .wv-cue { padding: 12px 14px; margin-left: -14px; }   /* タップ領域を確保 */
  .wv-ch-body, .wv-ch.is-rev .wv-ch-body { width: 100%; margin: 0 auto; padding: 0 22px; text-align: left; }
  .wv-ch-body { align-self: flex-end; padding-bottom: 54px; }
  .wv-state { padding: 84px 22px 76px; }
  .wv-state-inner { padding-left: 20px; }
  .wv-fin-cta .btn { flex: 1 1 auto; justify-content: center; }
}

@keyframes wv-breathe {
  from { transform: translate3d(.8%, .6%, 0) scale(1.005); }
  to   { transform: translate3d(-1.2%, -1.1%, 0) scale(1.085); }
}
/* 1画面目タイトル: 文字そのものは動かさず、**ノイズ（ザザ…っとした走査）と色ズレ**で擦れるように見せる。
   （TOP 初期案の .hero-noise / .glitch と同じ SVG  turbulence 言語。振動系は使わない） */
.wv-open-line { position: relative; }
.wv-open-line .wv-grain {

  position: absolute; left: -16%; right: -16%; top: -44%; bottom: -44%; z-index: 7; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 70% 66% at var(--grainCx, 50%) 50%, #000 34%, rgba(0,0,0,.5) 58%, transparent 82%);
          mask-image: radial-gradient(ellipse 70% 66% at var(--grainCx, 50%) 50%, #000 34%, rgba(0,0,0,.5) 58%, transparent 82%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

html.wv-js[data-motion="on"] .wv-open-line .wv-grain.is-glitching,
html.wv-js[data-motion="on"] .wv-ch-title .wv-grain.is-glitching { animation: wv-grain .42s steps(1, end) 1 both; }
@keyframes wv-grain {

  0%        { opacity: 0;   background-position: 0 0; }
  14%       { opacity: .42; background-position: 0 0; }
  36%       { opacity: .26; background-position: -46px 34px; }
  58%       { opacity: .34; background-position: 38px -52px; }
  78%       { opacity: .16; background-position: -18px -14px; }
  100%      { opacity: 0;   background-position: -18px -14px; }
}

.wv-gtxt { position: relative; }
.wv-gtxt::before, .wv-gtxt::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; z-index: 8;
  pointer-events: none; opacity: 0; text-shadow: none; white-space: pre;
}
.wv-gtxt::before { color: #eef2f7; }   /* 明るい側（TOP の glitchLayerA に対応） */
.wv-gtxt::after { color: #5f6a78; }   /* 暗い側（TOP の glitchLayerB に対応）。本文が白文字なのでここは沈めて破片として見せる */
/* AVALON / NEMESIS（右寄せの章）で「エフェクトがズレ」て見えた原因：
   .wv-l > span は display:block（上昇マスク用）なので箱が本文幅 660px いっぱいになり、
   重ね版（left:0 / top:0）は箱の左端に張り付いていた。実測で AVALON は文字が 204px 右、NEMESIS が 147px 右。
   → 右寄せの章だけ重ね版を箱の右端に付け替える（mobile は .wv-ch-body が text-align:left なので左のままで正しい） */
@media (min-width: 901px) {
  .wv-ch.is-rev .wv-gtxt::before, .wv-ch.is-rev .wv-gtxt::after { left: auto; right: 0; }
}
/* 発火するのは JS（about で TOP と同じ周期を回す）が .is-glitching を灯した瞬間だけ。
   keyframes と長さ（.34s / steps(2)）は TOP のヒーローと同じ glitchLayerA / glitchLayerB を参照 */
html.wv-js[data-motion="on"] .wv-gtxt.is-glitching::before { animation: glitchLayerA .34s steps(2) 1 both; }
html.wv-js[data-motion="on"] .wv-gtxt.is-glitching::after { animation: glitchLayerB .34s steps(2) 1 both; }
/* 章タイトル：入った瞬間に一度だけノイズが走る（文字は動かさない） */
.wv-ch-title { position: relative; }
.wv-ch-title .wv-grain {
  position: absolute; left: -16%; right: -16%; top: -44%; bottom: -44%; z-index: 7; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 70% 66% at var(--grainCx, 50%) 50%, #000 34%, rgba(0,0,0,.5) 58%, transparent 82%);
          mask-image: radial-gradient(ellipse 70% 66% at var(--grainCx, 50%) 50%, #000 34%, rgba(0,0,0,.5) 58%, transparent 82%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
/* 章タイトルも同じレイヤー（text 自体は動かさない）。発火は .is-glitching（JS が章の出現時にも一度灯す） */

.wv-open-line .wv-grain { --grainCx: 34%; }
.wv-ch:not(.is-rev) .wv-ch-title .wv-grain { --grainCx: 42%; }
.wv-ch.is-rev .wv-ch-title .wv-grain { --grainCx: 63%; }

html[data-motion="on"] .wv-open-media { animation: wv-breathe 17s cubic-bezier(.16,1,.3,1) infinite alternate; will-change: transform; }
html[data-motion="on"] .wv-ch-media { animation: none; }
/* ※ prefers-reduced-motion の追加除外は置かない：このサイトの動きは html[data-motion] で一元管理しており、
   初期値は OS 設定を追従するが、ユーザーがトグルで明示的に ON にすることもできる（既存の約束事に合わせる） */