/* ========================================================================
   ① 首屏
   3D 舞台 + 首屏文案 + 博主卡片轮播 + 滚动提示 + 夜晚叙事文字。
   首屏区高 300vh，舞台固定在画面上，内容随滚动进度变化
   （进度逻辑见 js/modules/scroll-story.js，3D 见 js/scene/hero-scene.js）。
   ======================================================================== */

/* ---- 首屏区与固定舞台（3D 画布失效时，显示下面的渐变背景） ---- */
.top-anchor{position:absolute;top:0}
.dive{position:relative;height:300vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(55% 35% at 20% 60%,rgba(255,240,245,.65),transparent 70%),
             linear-gradient(180deg,#b6a5e2 0%,#dbbfe3 36%,#f7d8cf 54%,#e7bfd3 55%,#c9b3de 100%)}
.stage::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0c0a1e 0%,#2a1838 56%,#1b1230 100%);opacity:var(--night,0);pointer-events:none}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s ease}
#gl.ready{opacity:1}
.stage.no-webgl #gl{display:none}
.veil{position:absolute;inset:0;z-index:3;background:var(--night);opacity:0;pointer-events:none}

/* ---- 首屏文案 + 按钮组 ---- */
.hero-copy{position:absolute;z-index:2;left:0;bottom:0;width:min(100%,700px);padding:0 var(--gutter) clamp(28px,7vh,72px);color:var(--dusk-ink);will-change:opacity,transform}
.hero-copy .eyebrow{color:var(--dusk-mute)}
.hero-copy h1{margin:16px 0 18px;font-weight:300;font-size:clamp(40px,6.2vw,96px);line-height:1.04;letter-spacing:.01em;text-wrap:balance}
.hero-copy .sub{margin:0 0 26px;max-width:30em;font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:var(--dusk-ink);opacity:.85}
.actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---- 博主卡片轮播：所有卡片叠在同一位置，按 data-slot（front / left / right / hidden）移动。--x / --r / --s 是各位置的偏移、角度、缩放；--dx / --dr 是拖动时的跟手位移（由 hero-deck.js 设置） ---- */
.deck{position:absolute;z-index:2;right:var(--gutter);bottom:clamp(96px,13vh,132px);--f:clamp(200px,19vw,290px);width:calc(var(--f) * 1.9);height:calc(var(--f) * 16 / 9);touch-action:pan-y;-webkit-user-select:none;user-select:none;will-change:opacity,transform}
.deck-float{position:absolute;inset:0;animation:floatF 6s ease-in-out infinite}
.dcard{position:absolute;top:0;left:calc(var(--f) * .45);width:var(--f);display:block;overflow:hidden;aspect-ratio:9/16;border-radius:calc(var(--f) * .1);background:#3a2750;color:#fff;text-decoration:none;cursor:grab;-webkit-user-drag:none;
  box-shadow:0 34px 60px -20px rgba(58,20,72,.6),0 12px 26px -12px rgba(58,20,72,.45);
  --x:0px;--r:0deg;--s:1;--dx:0px;--dr:0deg;transform:translate3d(calc(var(--x) + var(--dx)),0,0) rotate(calc(var(--r) + var(--dr))) scale(var(--s));
  transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease,filter .45s ease;will-change:transform}
.dcard.dragging{transition:none;cursor:grabbing}
.dcard[data-slot="front"]{z-index:3}
.dcard[data-slot="left"]{z-index:2;--x:calc(var(--f) * -.55);--r:-7deg;--s:.8;filter:saturate(.9) brightness(.94);cursor:pointer}
.dcard[data-slot="right"]{z-index:2;--x:calc(var(--f) * .55);--r:7deg;--s:.8;filter:saturate(.9) brightness(.94);cursor:pointer}
.dcard[data-slot="hidden"]{z-index:1;--s:.62;opacity:0;pointer-events:none}
.dcard::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.6);pointer-events:none}
.dcard video,.dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.dcard .shade{position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(180deg,rgba(26,12,36,0),rgba(26,12,36,.78))}
.dinfo{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;padding:calc(var(--f) * .06)}
.dname{font-weight:500;font-size:clamp(12px,calc(var(--f) * .066),19px);line-height:1.3}
.did{font-size:clamp(10px,calc(var(--f) * .045),13px);opacity:.78;font-variant-numeric:tabular-nums}
.dcta{margin-top:calc(var(--f) * .04);display:flex;align-items:center;justify-content:center;gap:6px;height:clamp(28px,calc(var(--f) * .13),38px);border-radius:12px;background:#fff;color:var(--dusk-ink);font-weight:500;font-size:clamp(11px,calc(var(--f) * .05),14px)}
.dcard .vbadge,.dcard .dcta{transition:opacity .3s ease}
.dcard:not([data-slot="front"]) .vbadge,.dcard:not([data-slot="front"]) .dcta{opacity:0}
.deck-ctrl{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);display:grid;grid-template-columns:auto auto auto;justify-items:center;align-items:center;gap:8px 10px;white-space:nowrap}
.dk-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.32);color:var(--dusk-ink);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .2s}
.dk-btn:hover{background:rgba(255,255,255,.62)}
.dk-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dk-dots{display:flex;gap:6px}
.dk-dots i{width:6px;height:6px;border-radius:3px;background:rgba(42,26,60,.28);transition:width .3s ease,background-color .3s ease}
.dk-dots i.on{width:18px;background:var(--dusk-ink)}
.dk-hint{grid-column:1 / -1;font-size:12.5px;color:var(--dusk-mute)}

/* ---- 轮播整体轻微上下漂浮 ---- */
@keyframes floatF{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- 平板 / 手机：卡片移到文案上方居中 ---- */
@media (max-width:1000px){
  .deck{--f:clamp(118px,calc((100svh - 500px) * .5625),46vw);right:auto;bottom:auto;left:calc(50% - var(--f) * .95);top:calc(env(safe-area-inset-top,0px) + 78px)}
  .dcta{display:none}
  .deck-ctrl{top:calc(100% + 12px)}
  .vbadge{font-size:10.5px;padding:4px 8px 4px 5px}
  .hero-copy h1{font-size:clamp(36px,9.6vw,64px);margin:12px 0 14px}
  .hero-copy .sub{margin-bottom:20px}
}
@media (max-width:1000px) and (max-height:720px){.hero-copy .sub{display:none}}
@media (max-width:560px){.hero-copy .sub br{display:none}}

/* ---- 「向下滚动，走进今夜」提示（窄屏隐藏，避免和卡片重叠） ---- */
.cue{position:absolute;z-index:2;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.65);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--dusk-ink);font-size:13px;text-decoration:none;white-space:nowrap}
.cue svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:bob 2.2s ease-in-out infinite}
@media (max-width:1180px){.cue{display:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---- 夜晚叙事文字（两段，随滚动淡入淡出） ---- */
.chapter{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 var(--gutter) 17vh;text-align:center;color:var(--ink);opacity:0;pointer-events:none;text-shadow:0 2px 40px rgba(12,6,30,.65)}
.chapter .eyebrow{color:var(--peach);padding:8px 16px 8px 13px;border-radius:999px;background:rgba(20,10,32,.45);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:none}
.chapter h2{margin:16px 0 0;font-weight:300;font-size:clamp(40px,7.4vw,112px);line-height:1.06;text-wrap:balance}

/* ---- 「不再一个人／不再孤单」两行等宽：中文每个字宽 1em，5 × 0.8em = 4 × 1em ---- */
.chapter h2.fit{font-size:clamp(44px,8vw,124px);line-height:1.1;letter-spacing:0}
.chapter h2.fit span{display:block}
.chapter h2.fit span:first-child{font-size:.8em}

/* ---- 夜晚文字下的说明段落 ---- */
.chapter p{margin:20px 0 0;max-width:30em;font-size:clamp(15px,1.3vw,18px);color:var(--ink);opacity:.82}