/* ===== トップの物語演出 ===== */
.world{height:460vh}
.w-stage{background:#05030f}
.worlds{position:absolute;inset:0;z-index:0}
.wl{position:absolute;inset:0;will-change:clip-path}
.wl svg{width:100%;height:100%;display:block}
#sea{z-index:2;pointer-events:none;mix-blend-mode:screen}
.vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(2,4,14,.55) 100%)}
.bring{position:absolute;z-index:1;border-radius:50%;pointer-events:none;opacity:0;border:2px solid rgba(235,253,255,.9);box-shadow:0 0 40px 8px rgba(127,243,255,.55),inset 0 0 40px 6px rgba(127,243,255,.4)}

/* SVG内の動き */
.girl .walk{animation:gwalk 3.2s ease-in-out infinite}
@keyframes gwalk{50%{transform:translateY(-4px)}}
.girl .lamp{animation:lamp 2.6s ease-in-out infinite}
@keyframes lamp{50%{opacity:.6}}
.thread{fill:none;stroke:#e9fdff;stroke-linecap:round;stroke-dasharray:2 14;animation:flow 1.6s linear infinite}
.thread-glow{fill:none;stroke:#5ee7ff;stroke-linecap:round;opacity:.22}
@keyframes flow{to{stroke-dashoffset:-32}}
.twinkle{animation:tw 3s ease-in-out infinite}
.twinkle:nth-child(3n){animation-delay:-1s}.twinkle:nth-child(4n){animation-delay:-2s}
@keyframes tw{50%{opacity:.15}}
.drift{animation:drift 14s ease-in-out infinite alternate}
.drift2{animation:drift 19s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translateX(-40px)}}
.ray{animation:rayf 7s ease-in-out infinite alternate}
@keyframes rayf{to{opacity:.02}}
.sway{animation:sway2 8s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes sway2{50%{transform:skewX(3deg)}}
.bob{animation:bob2 6s ease-in-out infinite}
@keyframes bob2{50%{transform:translateY(-22px)}}
.fall{animation:fall 1.2s linear infinite}
@keyframes fall{50%{opacity:.35}}
.flap{animation:flap .9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes flap{50%{transform:scaleY(.4)}}
.aurora{animation:aur 12s ease-in-out infinite alternate}
@keyframes aur{to{transform:translateX(-80px) skewX(-6deg);opacity:.7}}
.deerG .antler{animation:lamp 3.4s ease-in-out infinite}
.ray-line{stroke:#7ff3ff;stroke-width:1.6;opacity:.5;stroke-dasharray:3 22;animation:flow 2.4s linear infinite}
.node{animation:lamp 2.2s ease-in-out infinite}
.beam{animation:lamp 4s ease-in-out infinite}
.orbit ellipse{animation:flow 2.2s linear infinite}
.orbit2 ellipse{animation:flow 3.4s linear infinite reverse}

/* 上空からの地図（CSS 3Dでカメラを引く） */
.mapwrap{position:absolute;inset:0;z-index:1;perspective:1100px;perspective-origin:50% 30%;display:grid;place-items:center;opacity:0;visibility:hidden;background:radial-gradient(80% 80% at 50% 50%,#0b1430,#02040b)}
.map{width:min(86vh,92vw);aspect-ratio:1;transform-style:preserve-3d;will-change:transform}
.map svg{width:100%;height:100%;overflow:visible}
.net{stroke:#7ff3ff;stroke-width:1.4;opacity:.55;stroke-dasharray:4 18;animation:flowo 2s linear infinite}
@keyframes flowo{to{stroke-dashoffset:-44}}
.river{animation:lamp 3s ease-in-out infinite}
.core{animation:lamp 2s ease-in-out infinite}

/* 文字 */
.s-kicker{font-family:var(--f-en);letter-spacing:.32em;font-size:12px;color:#bff8ff;margin:0 0 14px}
.s-title{position:absolute;z-index:6;left:clamp(40px,8vw,140px);top:calc(var(--hd) + 9vh);color:#fff;max-width:760px;pointer-events:none}
.s-title h1{font-family:var(--f-serif);font-weight:700;font-size:clamp(40px,5.2vw,78px);white-space:nowrap;line-height:1.16;margin:0 0 22px;letter-spacing:.06em;text-shadow:0 6px 40px rgba(30,20,70,.55)}
.s-lead{font-size:clamp(14px,1.25vw,17px);line-height:2;margin:0;color:#fff;text-shadow:0 2px 16px rgba(30,20,70,.6)}
.s-reveal{position:absolute;z-index:6;left:clamp(40px,6vw,110px);top:50%;transform:translateY(-50%);width:min(470px,30vw);color:#fff;opacity:0;pointer-events:none}
.s-reveal-t{font-family:var(--f-serif);font-size:clamp(18px,1.75vw,26px);line-height:1.6;margin:0;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.s-entry{position:absolute;z-index:7;left:50%;top:48%;transform:translate(-50%,-50%);width:min(680px,calc(100% - 32px));text-align:center;color:#fff;opacity:0;pointer-events:none}
.s-entry.is-on{pointer-events:auto}
.s-entry h2{font-family:var(--f-serif);font-size:clamp(26px,3.2vw,44px);margin:0 0 22px;letter-spacing:.06em;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.s-entry .w-choices{text-align:left}

.chap{position:absolute;z-index:6;left:clamp(40px,8vw,140px);top:calc(var(--hd) + 26px);display:flex;align-items:baseline;gap:12px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.chap span{font-family:var(--f-en);font-size:13px;letter-spacing:.2em;opacity:.8}
.chap b{font-family:var(--f-serif);font-size:15px;letter-spacing:.3em;font-weight:500}
.chap-dots{position:absolute;z-index:7;right:22px;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:grid;gap:10px}
.chap-dots button{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:transparent;padding:0;display:block}
.chap-dots button[aria-current="step"]{background:#fff;box-shadow:0 0 10px #7ff3ff}
.sub{position:absolute;z-index:7;left:50%;bottom:11vh;transform:translateX(-50%);width:min(860px,calc(100% - 40px));margin:0;text-align:center;font-family:var(--f-serif);font-size:clamp(18px,1.9vw,27px);letter-spacing:.12em;line-height:1.7;color:#fff;text-shadow:0 0 18px rgba(0,0,0,.8),0 2px 4px rgba(0,0,0,.6);opacity:0}
.sub.is-on{animation:subin 1.1s ease forwards}
@keyframes subin{from{opacity:0;filter:blur(6px);transform:translate(-50%,8px)}to{opacity:1;filter:blur(0);transform:translate(-50%,0)}}
.w-demo{top:auto;bottom:22px;left:clamp(40px,8vw,140px)}
.w-ctrl{position:absolute;z-index:8;right:24px;top:calc(var(--hd) + 16px);display:flex;gap:8px}
.w-ctrl .w-skip{position:static}
.w-auto{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#fff;padding:8px 14px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(5,10,30,.45)}
.w-auto i{font-style:normal;font-size:10px}
.w-auto[aria-pressed="true"]{border-color:#7ff3ff;color:#7ff3ff}
.w-hint{left:auto;right:28px;transform:none;bottom:auto;top:calc(100% - 110px)}

@media (max-width:760px){
  .world{height:440vh}
  .s-title{left:20px;right:20px;top:calc(var(--hd) + 70px);transform:none}
  .s-title h1{font-size:clamp(34px,10vw,46px)}
  .chap{left:20px;top:calc(var(--hd) + 14px)}
  .chap-dots{right:10px}
  .w-ctrl{top:auto;bottom:20px;right:16px;left:16px;justify-content:space-between}
  .w-ctrl .w-skip,.w-auto{font-size:12px;padding:7px 11px}
  .sub{bottom:84px;font-size:17px;letter-spacing:.06em}
  .w-demo{display:none}
  .s-entry .w-choices{grid-template-columns:1fr 1fr}
  .map{width:94vw}
  .w-hint{display:none}
  .w-ctrl .w-skip,.w-auto{font-size:11px;padding:7px 10px;white-space:nowrap;flex:1;justify-content:center;text-align:center}
  .s-reveal{left:16px;right:16px;width:auto;top:calc(var(--hd) + 44px);transform:none;text-align:center}
  .s-reveal-s{font-size:11px;letter-spacing:.08em}
  .anno{display:none}
  .s-entry h2{font-size:clamp(22px,6.2vw,28px);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.sub.is-on{animation:none;opacity:1}}

.s-reveal-s{margin:12px 0 0;font-size:13.5px;line-height:1.9;letter-spacing:.08em;color:#ffd27f;font-family:var(--f-sans)}