/* ══════════════════════════════════════════
   四小姐 — Four of a Kind
   Apple 風格捲動網站 / 純 CSS
   ══════════════════════════════════════════ */

:root{
  --bg:        #000000;
  --bg-soft:   #0a0a0c;
  --bg-panel:  #111114;
  --fg:        #f5f5f7;
  --fg-dim:    #a1a1a8;
  --fg-faint:  #5a5a62;
  --accent:    #7fb3ff;   /* 藍髮飾 */
  --accent-2:  #b79dff;   /* 紫瞳 */
  --accent-3:  #ff6b7a;   /* 紅蝴蝶結 */
  --line:      rgba(255,255,255,.09);
  --ease:      cubic-bezier(.22,1,.36,1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
          "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}

/* Lenis 接管捲動後的必要樣式。原本 html 上的 scroll-behavior:smooth
   會跟 Lenis 的補間打架（兩者同時想改 scrollTop），必須關掉。 */
html.lenis, html.lenis body{ height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

body{
  font-family:var(--font);
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
  line-height:1.5;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ── 捲動進度條 ───────────────────────── */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:100;
  background:transparent; pointer-events:none;
}
/* 用 scaleX 而非 width 推進度：只跑合成執行緒，不觸發版面重排。
   縮放值每一幀由 GSAP 覆寫，所以刻意不設 transition。 */
.progress span{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  will-change:transform;
}

/* ── 導覽列 ───────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:rgba(0,0,0,0);
  border-bottom:1px solid transparent;
  transform:translateY(-100%);
  transition:transform .5s var(--ease), background .4s ease, border-color .4s ease;
}
.nav.is-visible{ transform:translateY(0); background:rgba(10,10,12,.72); border-bottom-color:var(--line); }
.nav-inner{
  max-width:1180px; margin:0 auto; padding:0 24px; height:52px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo{ font-size:16px; font-weight:600; letter-spacing:.06em; }
.nav-links{ display:flex; gap:28px; list-style:none; }
.nav-links a{
  font-size:12.5px; color:var(--fg-dim); transition:color .25s ease;
  position:relative;
}
.nav-links a:hover{ color:var(--fg); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px; height:1px;
  background:var(--accent); transition:right .35s var(--ease);
}
.nav-links a:hover::after{ right:0; }

/* ── 通用 ─────────────────────────────── */
.eyebrow{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.chapter-no{
  font-size:13px; letter-spacing:.3em; color:var(--fg-faint);
  font-weight:600; margin-bottom:18px;
}

/* 進場動畫：位移與錯開時間都改由 GSAP 負責（首屏走 timeline，
   其餘走 ScrollTrigger.batch），這裡只留初始隱藏，不設 transition。 */
.reveal{ opacity:0; will-change:transform,opacity; }

/* 素材外框（含缺檔提示） */
/* 01 / 03 是去背，02 / 04 帶場景背景。圓角只對後者看得見，
   去背的角色不受影響，所以保留；但外圈那條細邊框會在去背角色
   周圍畫出可見的方框，已移除。 */
.gif{
  width:100%; height:auto;
  border-radius:18px;
  image-rendering:-webkit-optimize-contrast;
}
.ph{ display:none; }
figure.is-missing .gif{ display:none; }
figure.is-missing .ph{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; width:100%;
  border:1px dashed rgba(255,255,255,.22); border-radius:20px;
  background:
    linear-gradient(135deg,rgba(127,179,255,.10),rgba(183,157,255,.10)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px);
  color:var(--fg-faint); font-size:13px; letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:center; padding:16px;
}

/* ══ HERO ══════════════════════════════ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:grid; place-items:center;
  padding:104px 24px 140px;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(127,179,255,.20), transparent 70%),
    radial-gradient(50% 45% at 82% 70%, rgba(183,157,255,.16), transparent 70%),
    radial-gradient(45% 40% at 15% 78%, rgba(255,107,122,.10), transparent 70%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(0,-3%,0) scale(1.08); }
}
.hero-content{
  position:relative; z-index:2; text-align:center; max-width:820px;
  will-change:transform,opacity;   /* 捲離首屏時整塊上飄淡出 */
}
.hero-title{
  font-size:clamp(48px,10.5vw,132px);
  font-weight:700; line-height:1.02; letter-spacing:-.03em;
  margin:20px 0 26px;
}
.line{ display:block; overflow:hidden; }
/* 標題被外層 overflow:hidden 裁切，起始位移由 GSAP 設成 yPercent:105 */
.line-in{ display:block; }
.hero-title .line:nth-child(2) .line-in{
  background:linear-gradient(100deg,var(--accent),var(--accent-2) 55%,var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size:clamp(15px,2vw,20px); color:var(--fg-dim);
  line-height:1.7;
}
.hero-figure{
  position:relative; z-index:1;
  width:min(260px,46vw); margin:38px auto 0;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  will-change:transform;
}

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:10px; letter-spacing:.34em; color:var(--fg-faint);
}
.scroll-hint i{
  width:1px; height:44px; background:linear-gradient(var(--fg-faint),transparent);
  animation:pulse 2.1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.25; transform:scaleY(.55); transform-origin:top} 50%{opacity:1; transform:scaleY(1)} }

/* ══ 章節：sticky 舞台 ══════════════════ */
.chapter{ position:relative; padding:0 0 clamp(80px,12vw,180px); }
.chapter.alt{ background:linear-gradient(180deg,transparent,var(--bg-soft) 22%,var(--bg-soft) 78%,transparent); }

.sticky-stage{
  position:relative;
  /* 可捲距離 152vh（1383px @ 910vh），剛好等於 script.js 那條
     時間軸的總長。改這個值等於等比縮放全部配文的絕對時間。 */
  min-height:252vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,5vw,80px);
  align-items:start;
  max-width:1180px; margin:0 auto; padding:0 24px;
}
.sticky-stage.reverse .stage-visual{ order:2; }
.sticky-stage.reverse .stage-copy{ order:1; }

.stage-visual{
  position:sticky; top:0; height:100vh; height:100svh;
  display:grid; place-items:center;
}
.frame{
  position:relative;
  width:min(400px,72%);
  will-change:transform;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55));
}
.frame::before{
  content:''; position:absolute; inset:-14% -14% -6%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(127,179,255,.20),transparent 70%);
  z-index:-1; border-radius:50%;
}

.stage-copy{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
}
.big{
  font-size:clamp(34px,5.2vw,68px);
  font-weight:700; line-height:1.12; letter-spacing:-.02em;
  /* 中窄欄寬時避免斷成「名 / 字。」這種孤字尾行 */
  text-wrap:balance;
}
.big .float{ display:block; }
.big em{
  font-style:normal; color:var(--fg-faint);
  /* 副標小一級，讓「她只喊自己的名字。」這種長句在窄欄也能單行放下。
     中文可在任意字元斷行，一旦換行就可能把詞拆開，不如不換。 */
  font-size:.8em;
}

/* 捲動連續驅動：初始狀態由 JS 每一幀覆寫，
   不設 transition，否則會跟捲動打架變得遲滯。 */
.float, .float-y{
  opacity:0; will-change:transform,opacity;
}
/* JS 沒跑起來、或 vendor/ 的 GSAP / Lenis 載不進來時的保險：
   script.js 只有在三個全域都就緒後才移除 .no-js，內容不會整片空白。 */
.no-js .float, .no-js .float-y, .no-js .reveal{ opacity:1; transform:none; }
.no-js .progress span{ display:none; }

/* 章節內容卡片 */
.panels{
  max-width:1180px; margin:clamp(20px,6vw,90px) auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,28px);
}
.panel{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:clamp(26px,3.4vw,44px);
  transition:border-color .4s ease, background .4s ease;
}
.panel:hover{ border-color:rgba(127,179,255,.35); background:#141419; }
.panel h3{
  font-size:clamp(21px,2.5vw,30px); font-weight:650;
  line-height:1.3; letter-spacing:-.01em; margin-bottom:14px;
}
.panel p{ color:var(--fg-dim); font-size:15.5px; line-height:1.8; }

/* ══ 大字宣言 ══════════════════════════ */
.statement{
  min-height:96vh; min-height:96svh; display:grid; place-items:center;
  padding:clamp(60px,10vw,140px) 24px;
}
.words{
  max-width:1000px; text-align:center;
  font-size:clamp(34px,7vw,90px); font-weight:700;
  line-height:1.25; letter-spacing:-.02em;
}
.words span{
  color:rgba(245,245,247,.13);
  transition:color .45s ease;
}
.words span.lit{ color:var(--fg); }

/* ══ 對話 ══════════════════════════════ */
.dialogue{
  /* 比一屏高，內容釘在中間，四行在原地依序出現。
     加高＝同樣的進度佔到更多實際捲動距離，四行也就停得更久。 */
  min-height:260vh; min-height:260svh;
}
.dialogue-sticky{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:0 24px;
}
.say{
  font-size:clamp(34px,7.4vw,96px); font-weight:700;
  letter-spacing:-.03em; line-height:1.15;
  margin-top:clamp(8px,1.3vw,16px);
}
/* 菲比啾比：藍髮飾＋紫瞳 */
.say-a{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* 諾諾：薄荷綠＋紅蝴蝶結，而且喊得比較小聲 */
.say-b{
  font-size:clamp(27px,5.6vw,72px);
  background:linear-gradient(100deg,#8fd8c4,var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.say-note{
  margin-top:clamp(20px,2.8vw,36px);
  color:var(--fg-dim); font-size:clamp(15px,1.9vw,19px); line-height:1.8;
}
/* 標籤與第一句之間也收緊 */
.dialogue-sticky .eyebrow{ margin-bottom:clamp(6px,1vw,12px); }

/* ══ 橫向藝廊 ══════════════════════════ */
/* 可捲距離 = height − 100vh，橫推速度與它成反比。
   207vh 的可捲距離是 107vh，約為原本 420vh（320vh）的 1/3，也就是快三倍。 */
.gallery{ position:relative; height:207vh; background:var(--bg-soft); }
.gallery-sticky{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:flex; align-items:center;
}
.gallery-track{
  display:flex; align-items:center; gap:clamp(20px,3vw,46px);
  padding:0 clamp(24px,6vw,90px);
  will-change:transform;
}
.g-head{ flex:0 0 auto; width:min(360px,72vw); }
.g-head h2{
  font-size:clamp(36px,5.4vw,68px); font-weight:700;
  line-height:1.1; letter-spacing:-.02em; margin:16px 0 18px;
}
.g-hint{ color:var(--fg-faint); font-size:13.5px; letter-spacing:.1em; }

.g-item{
  flex:0 0 auto; position:relative;
  width:min(330px,68vw);
  background:#0e0e12; border:1px solid var(--line);
  border-radius:24px; padding:22px 22px 58px;
  transition:transform .5s var(--ease), border-color .4s ease;
}
.g-item:hover{ transform:translateY(-8px); border-color:rgba(183,157,255,.4); }
/* 四張原圖長寬比不一，裁成正方形讓卡片等高 */
.g-item .gif{ border-radius:14px; aspect-ratio:1/1; object-fit:cover; }
.g-tag{
  position:absolute; left:22px; bottom:20px;
  font-size:13px; letter-spacing:.14em; color:var(--fg-dim);
}

/* ══ 規格 ══════════════════════════════ */
.specs{
  max-width:1180px; margin:0 auto;
  padding:clamp(90px,13vw,180px) 24px; text-align:center;
}
.specs h2{
  font-size:clamp(32px,5vw,62px); font-weight:700;
  letter-spacing:-.02em; margin:18px 0 clamp(40px,6vw,70px);
}
.spec-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px);
}
.spec{
  border:1px solid var(--line); border-radius:20px;
  padding:clamp(24px,3vw,42px) 14px; background:var(--bg-panel);
  /* opacity / transform 歸 GSAP，這裡只留 hover 用的邊框變化 */
  transition:border-color .4s ease;
}
.spec:hover{ border-color:rgba(255,107,122,.4); }
.spec b{
  display:block; font-size:clamp(34px,5vw,58px); font-weight:700;
  letter-spacing:-.03em; line-height:1;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.spec span{ display:block; margin-top:12px; color:var(--fg-dim); font-size:14px; }

/* ══ 結尾 ══════════════════════════════ */
.outro{
  text-align:center; padding:clamp(70px,10vw,140px) 24px clamp(90px,12vw,160px);
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(127,179,255,.16), transparent 70%),
    var(--bg);
}
.outro-row{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(6px,1.6vw,22px); margin-bottom:clamp(34px,5vw,60px);
  flex-wrap:wrap;
}
.mini{
  width:clamp(72px,13vw,132px); height:auto;
  border-radius:14px;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));
  transition:transform .45s var(--ease);
}
.mini:hover{ transform:translateY(-10px) scale(1.06); }
.outro h2{
  font-size:clamp(30px,5vw,62px); font-weight:700;
  line-height:1.2; letter-spacing:-.02em; margin-bottom:36px;
}
.outro h2 em{ font-style:normal; color:var(--fg-faint); }
.btn{
  display:inline-block; padding:14px 32px; border-radius:999px;
  background:var(--fg); color:#000; font-size:15px; font-weight:600;
  transition:transform .3s var(--ease), background .3s ease;
}
.btn:hover{ transform:translateY(-3px); background:var(--accent); }

/* ══ 頁尾 ══════════════════════════════ */
.footer{
  border-top:1px solid var(--line);
  padding:34px 24px; text-align:center;
  font-size:13px; color:var(--fg-dim);
}
.footer .muted{ color:var(--fg-faint); margin-top:6px; font-size:12px; }

/* ══ 響應式 ════════════════════════════ */
@media (max-width:860px){
  .nav-links{ gap:16px; }
  .nav-links a{ font-size:11.5px; }

  .sticky-stage{
    grid-template-columns:1fr; min-height:auto; gap:0;
    padding-top:60px;
  }
  .sticky-stage .stage-visual,
  .sticky-stage.reverse .stage-visual{ order:1; position:static; height:auto; }
  .sticky-stage .stage-copy,
  .sticky-stage.reverse .stage-copy{ order:2; position:static; height:auto; padding:34px 0 0; }
  .frame{ width:min(300px,72vw); }

  .panels{ grid-template-columns:1fr; }
  .spec-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ height:340vh; }
}

@media (max-width:520px){
  .nav-links{ display:none; }
  .hero{ padding-top:96px; }
}

/* ══ 減少動態偏好 ══════════════════════ */
/* 這裡只關掉「會動的裝飾」——首屏光暈漂移、捲動提示的呼吸。
   內容的淡入改由 script.js 處理（位移歸零、只留透明度），所以這裡
   刻意不再用 !important 把 .reveal / .float 強制設成可見：那樣會
   蓋掉 GSAP 寫的 opacity，整個敘事會變成一面不動的長頁。
   JS 沒跑起來的情況由 .no-js 那組規則負責，不靠這裡。 */
@media (prefers-reduced-motion:reduce){
  .hero-bg, .scroll-hint i{ animation:none !important; }
  .words span{ transition:none; }
  /* 顏色變化留著，位移類的 transition 拿掉 */
  .nav{ transition:background .4s ease, border-color .4s ease; }
  .g-item, .mini, .btn, .panel, .spec{ transition:border-color .4s ease, background .4s ease; }
  /* 連同 hover 的位移本身也一起取消，否則會變成沒有過渡的瞬間跳動 */
  .g-item:hover, .mini:hover, .btn:hover{ transform:none; }
}