/* css/style.css — 量產粉甜 × 地雷系 · scroll 控制影片 */
:root{
  --pink-50:#fff2f8; --pink-100:#ffe3f0; --pink-200:#ffc9e2;
  --pink-400:#f48fba; --pink-500:#e35fa0; --pink-700:#c2417f;
  --white:#fffafc;
  --font-display:'RocknRoll One',system-ui,sans-serif;
  --font-body:'Zen Maru Gothic',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#1a0d16;color:var(--white);font-family:var(--font-body);}
body{overflow-x:hidden;}
button{font-family:inherit;}

/* ---------- Preloader ---------- */
#preloader{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--pink-100),var(--pink-200));transition:opacity .6s ease;}
#preloader.hidden{opacity:0;pointer-events:none;}
.loader{font-size:52px;display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:bounce 1.2s ease-in-out infinite;}
.loader span{font-size:13px;letter-spacing:5px;color:var(--pink-700);}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- 進度條 ---------- */
#progress{position:fixed;top:0;left:0;right:0;height:5px;z-index:50;background:rgba(255,200,225,.25);}
#progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--pink-400),var(--pink-700));
  box-shadow:0 0 12px rgba(227,95,160,.7);}

/* ---------- 章節指示點 ---------- */
#chapter-dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:14px;}
#chapter-dots .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);
  box-shadow:0 0 0 2px rgba(194,65,127,.25);transition:all .35s ease;}
#chapter-dots .dot.on{background:var(--pink-400);transform:scale(1.5);
  box-shadow:0 0 12px rgba(244,143,186,.9);}

/* ---------- scroll 容器 + 釘屏 ---------- */
#film-scroll{height:700vh;position:relative;}
#pin{position:sticky;top:0;height:100vh;overflow:hidden;}
#film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background:var(--pink-100);}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(40,18,32,.74) 0%,rgba(40,18,32,.12) 40%,transparent 64%),
    radial-gradient(120% 80% at 80% 18%,transparent 50%,rgba(124,81,104,.20));}

/* ---------- 文字(每章疊喺同一位,淡入淡出)---------- */
#captions{position:absolute;inset:0;pointer-events:none;}
.cap{position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:12px;
  padding:clamp(28px,6vw,80px) clamp(24px,7vw,110px);
  opacity:0;transition:opacity .5s ease;}
.cap.on{opacity:1;pointer-events:auto;}
.kicker{font-family:var(--font-body);font-weight:700;font-size:clamp(11px,1.5vw,14px);
  letter-spacing:5px;color:var(--pink-200);text-shadow:0 1px 8px rgba(0,0,0,.4);}
.title{font-family:var(--font-display);margin:0;font-size:clamp(34px,8vw,86px);line-height:1.02;
  color:#fff;text-shadow:0 3px 24px rgba(194,65,127,.55),0 1px 3px rgba(0,0,0,.35);}
.caption{margin:0;max-width:30ch;font-size:clamp(14px,2.3vw,22px);font-weight:500;line-height:1.65;
  color:#ffeaf4;text-shadow:0 1px 10px rgba(0,0,0,.45);}

/* 文字逐段升起(章節 active 時) */
.cap .kicker,.cap .title,.cap .caption,.cap .cta{
  transform:translateY(26px);transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.cap.on .kicker{transition-delay:.05s;}
.cap.on .title{transition-delay:.16s;}
.cap.on .caption{transition-delay:.3s;}
.cap.on .cta{transition-delay:.44s;}
.cap.on .kicker,.cap.on .title,.cap.on .caption,.cap.on .cta{transform:none;}

.cta{margin-top:14px;align-self:flex-start;cursor:pointer;font-family:var(--font-display);
  font-size:clamp(15px,2.2vw,19px);color:#fff;
  background:linear-gradient(135deg,var(--pink-400),var(--pink-700));border:none;
  padding:14px 30px;border-radius:999px;
  box-shadow:0 6px 0 var(--pink-700),0 12px 26px rgba(194,65,127,.45);
  transition:transform .15s ease,box-shadow .15s ease;}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--pink-700),0 16px 30px rgba(194,65,127,.5);}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pink-700);}

/* ---------- scroll 提示 ---------- */
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  font-family:var(--font-body);font-size:12px;letter-spacing:4px;color:#fff;opacity:.8;
  text-shadow:0 1px 6px rgba(0,0,0,.4);transition:opacity .4s ease;
  animation:hintbob 1.6s ease-in-out infinite;}
@keyframes hintbob{0%,100%{bottom:22px}50%{bottom:14px}}

/* ---------- 手機 ---------- */
@media (max-width:640px){
  .cap{padding:0 22px 60px;}
  .caption{max-width:92%;}
  #chapter-dots{right:12px;}
}

/* ---------- 減動 ---------- */
@media (prefers-reduced-motion:reduce){
  .cap .kicker,.cap .title,.cap .caption,.cap .cta{transform:none;transition:none;}
  .loader,.scroll-hint{animation:none;}
}