/* ═══════════════════════════════════════════
   STORY.CSS — Cinematic Scrollytelling
   Inspired by "The Boat" (SBS)
   ═══════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root{
  --black:#000;
  --ink:#080808;
  --ink-light:#111;
  --surface:#0a0a0a;
  --gold:#c8a040;
  --gold-dim:rgba(200,160,64,.35);
  --red:#b03030;
  --red-glow:rgba(200,60,40,.25);
  --warm:#e8c070;
  --text:#e0ddd5;
  --text-dim:#8a8780;
  --sans:'Inter',sans-serif;
  --serif:'Cormorant Garamond',serif;
  --display:'Cinzel',serif;
  --display-alt:'Cinzel Decorative',cursive;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{background:var(--black);color:var(--text);font-family:var(--serif);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{border:none;background:none;color:inherit;cursor:pointer;font:inherit}

/* ─── VIGNETTE ─── */
.vignette{
  position:fixed;inset:0;z-index:60;
  pointer-events:none;
  box-shadow:inset 0 0 120px 60px rgba(0,0,0,.7);
  will-change:box-shadow;
}

/* ─── PROGRESS ─── */
.progress{
  position:fixed;top:0;left:0;width:100%;height:2px;
  z-index:200;background:rgba(255,255,255,.06);
}
.progress__bar{
  height:100%;width:0%;
  background:var(--gold);
  transition:width .2s linear;
}

/* ─── LETTERBOX ─── */
.letterbox{
  position:fixed;left:0;width:100%;height:0;
  z-index:70;background:var(--black);
  pointer-events:none;
  transition:height .6s var(--ease-in-out);
}
.letterbox--top{top:0}
.letterbox--bottom{bottom:0}

/* ─── UNMUTE ─── */
.unmute{
  position:fixed;bottom:28px;right:28px;z-index:150;
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  color:var(--text-dim);font-family:var(--sans);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.6;transition:all .4s ease;
}
.unmute:hover{opacity:1;border-color:var(--gold);color:var(--gold)}
.unmute.is-playing{border-color:var(--gold-dim);opacity:.4}
.unmute.is-playing:hover{opacity:.7}
.unmute__icon{width:16px;height:16px}
.unmute__text{pointer-events:none}

/* ─── SCENE NAV ─── */
.scene-nav{
  position:fixed;right:28px;top:50%;z-index:150;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.scene-nav__back{
  width:28px;height:28px;margin-bottom:10px;opacity:.3;
  transition:opacity .3s ease;
}
.scene-nav__back:hover{opacity:1}
.scene-nav__back svg{width:100%;height:100%}
.scene-nav__dots{display:flex;flex-direction:column;gap:12px}
.scene-nav__dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.15);
  transition:all .4s var(--ease-out);
  position:relative;
}
.scene-nav__dot::after{
  content:'';position:absolute;inset:-6px;
  border-radius:50%;
}
.scene-nav__dot:hover{background:rgba(255,255,255,.4)}
.scene-nav__dot.is-active{
  background:var(--gold);
  box-shadow:0 0 8px var(--gold-dim);
  transform:scale(1.4);
}

/* ═══════════════════════════════════════════
   PANELS (full-viewport scenes)
   ═══════════════════════════════════════════ */
.panel{
  position:relative;
  width:100%;min-height:100vh;
  overflow:hidden;
  display:flex;align-items:center;
}
.panel__bg{
  position:absolute;inset:0;z-index:0;
}
.panel__layer{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  will-change:transform,opacity;
}

/* ─── Panel content ─── */
.panel__content{
  position:relative;z-index:10;
  max-width:620px;padding:80px 60px;
}
.panel__content--left{margin-left:8vw}
.panel__content--right{margin-left:auto;margin-right:8vw}
.panel__content--center{margin:0 auto;text-align:center}

.panel__chapter{
  display:block;
  font-family:var(--display);font-size:.7rem;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);opacity:.7;
  margin-bottom:16px;
}
.panel__heading{
  font-family:var(--display-alt);
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:700;line-height:1.1;
  color:var(--text);
  margin-bottom:32px;
  opacity:0;
  transform:translateY(30px);
}
.panel__text{margin-bottom:24px}
.panel__text p{
  font-size:clamp(1rem,1.8vw,1.2rem);
  line-height:1.8;color:var(--text);
  margin-bottom:14px;
  opacity:0;transform:translateY(20px);
}
.panel__text p.dramatic{
  font-size:clamp(1.15rem,2vw,1.4rem);
  color:var(--warm);font-style:italic;
  text-shadow:0 0 30px rgba(200,160,64,.15);
}

/* ─── Reveal animation class (applied by JS) ─── */
.panel__heading.is-visible,
.panel__text p.is-visible{
  opacity:1;transform:translateY(0);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}

/* ─── Quotes ─── */
.quote{
  position:relative;
  margin:32px 0;padding:28px 32px;
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  font-style:italic;line-height:1.7;
  border-left:2px solid;
  opacity:0;transform:translateX(-30px);
}
.quote.is-visible{
  opacity:1;transform:translateX(0);
  transition:opacity .8s var(--ease-out) .15s,transform .8s var(--ease-out) .15s;
}
.quote p{margin-bottom:10px}
.quote cite{
  display:block;
  font-family:var(--sans);font-style:normal;
  font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-dim);
  margin-top:4px;
}

/* Quote variants */
.quote--sad{border-color:rgba(100,140,200,.3);color:rgba(160,180,220,.85);background:rgba(40,60,100,.06)}
.quote--villain{border-color:rgba(180,60,60,.3);color:rgba(220,160,150,.85);background:rgba(100,20,20,.06)}
.quote--hero{border-color:var(--gold-dim);color:rgba(230,210,170,.9);background:rgba(100,80,20,.06)}
.quote--triumph{
  border-color:var(--gold);color:var(--warm);
  font-size:clamp(1.2rem,2.2vw,1.6rem);
  background:rgba(100,80,20,.08);
  text-align:center;border-left:none;border-bottom:2px solid var(--gold);
}

/* ═══════════════════════════════════════════
   SCENE 0 — INTRO
   ═══════════════════════════════════════════ */
.panel--intro{
  min-height:180vh;
  align-items:flex-start;
  background:var(--black);
}
.panel--intro .panel__layer--stars{
  background:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.4),transparent),
              radial-gradient(1px 1px at 50% 60%,rgba(255,255,255,.3),transparent),
              radial-gradient(1.5px 1.5px at 75% 20%,rgba(255,255,255,.35),transparent),
              radial-gradient(1px 1px at 10% 80%,rgba(255,255,255,.2),transparent),
              radial-gradient(1.2px 1.2px at 85% 70%,rgba(255,255,255,.3),transparent);
  animation:starTwinkle 6s ease-in-out infinite alternate;
}
.panel--intro .panel__layer--moon{
  background:radial-gradient(circle at 75% 15%,rgba(200,190,160,.12) 0%,transparent 35%);
}
.panel--intro .panel__layer--forest-far{
  background:linear-gradient(to top,
    rgba(10,20,10,.98) 0%,
    rgba(10,20,10,.6) 20%,
    transparent 40%);
}
.panel--intro .panel__layer--forest-near{
  background:linear-gradient(to top,
    var(--black) 0%,
    rgba(0,0,0,.95) 8%,
    rgba(5,15,5,.7) 18%,
    transparent 35%);
}
.panel--intro .panel__layer--mist{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(80,90,80,.04) 30%,
    rgba(80,90,80,.06) 50%,
    rgba(80,90,80,.04) 70%,
    transparent 100%);
  animation:inkDrift 20s ease-in-out infinite alternate;
}
.panel--intro .panel__layer--darken{
  background:var(--black);opacity:0;
}

/* Intro center content */
.panel__center{
  position:sticky;top:0;left:0;
  width:100%;height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  z-index:10;
}
.panel__badge{
  font-family:var(--sans);font-size:.65rem;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-dim);opacity:0;
  margin-bottom:24px;
}
.panel__title{
  font-family:var(--display-alt);
  font-size:clamp(3rem,8vw,6rem);
  font-weight:900;line-height:1.05;
  text-align:center;
  margin-bottom:20px;
}
.panel__title-word{
  display:inline-block;
  opacity:0;transform:translateY(40px);
}
.panel__title-word--gold{
  color:var(--gold);
  text-shadow:0 0 40px rgba(200,160,64,.2);
}
.panel__subtitle{
  font-family:var(--serif);
  font-size:clamp(.95rem,1.5vw,1.15rem);
  font-weight:300;color:var(--text-dim);
  max-width:500px;text-align:center;
  opacity:0;line-height:1.7;
}

/* Scroll cue */
.panel__scroll-cue{
  position:absolute;bottom:60px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--sans);font-size:.6rem;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--text-dim);opacity:0;
}
.panel__scroll-line{
  width:1px;height:40px;
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
   SCENE 1 — FAMILY
   ═══════════════════════════════════════════ */
.panel--family{
  background:linear-gradient(135deg,#030508,#060a10,#040608);
}
.panel--family .panel__layer--night{
  background:radial-gradient(ellipse at 30% 20%,rgba(20,30,60,.3),transparent 60%);
}
.panel--family .panel__layer--cabin{
  background:radial-gradient(ellipse at 70% 60%,rgba(80,60,30,.06),transparent 40%);
}
.panel--family .panel__layer--trees-1{
  background:linear-gradient(to top,rgba(0,5,0,.6) 0%,transparent 30%);
  transform:translateX(-5%);
}
.panel--family .panel__layer--trees-2{
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 20%);
}
.panel--family .panel__layer--snow{
  background:radial-gradient(1px 1px at 15% 30%,rgba(255,255,255,.08),transparent),
              radial-gradient(1px 1px at 60% 50%,rgba(255,255,255,.06),transparent),
              radial-gradient(1px 1px at 35% 70%,rgba(255,255,255,.05),transparent);
  animation:snowDrift 15s linear infinite;
}

/* ═══════════════════════════════════════════
   SCENE 2 — PLAN
   ═══════════════════════════════════════════ */
.panel--plan{
  background:linear-gradient(135deg,#030305,#050508,#020204);
}
.panel--plan .panel__layer--dark-room{
  background:radial-gradient(ellipse at 50% 50%,rgba(10,8,5,.4),transparent 60%);
}
.panel--plan .panel__layer--candle{
  background:radial-gradient(circle at 65% 40%,rgba(180,140,60,.04),transparent 25%);
  animation:candleFlicker 3s ease-in-out infinite alternate;
}
.panel--plan .panel__layer--shadows{
  background:linear-gradient(90deg,
    rgba(0,0,0,.5) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0,0,0,.5) 100%);
}

/* ═══════════════════════════════════════════
   SCENE 3 — FOREST
   ═══════════════════════════════════════════ */
.panel--forest{
  min-height:160vh;
  background:linear-gradient(180deg,#020802,#040a04,#010501);
}
.panel--forest .panel__layer--deep-forest{
  background:
    radial-gradient(ellipse at 20% 40%,rgba(10,30,10,.3),transparent 40%),
    radial-gradient(ellipse at 80% 60%,rgba(10,25,10,.25),transparent 35%),
    linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 30%);
}
.panel--forest .panel__layer--fog-low{
  background:linear-gradient(to top,
    rgba(60,80,60,.06) 0%,
    rgba(60,80,60,.03) 15%,
    transparent 30%);
  animation:inkDrift 18s ease-in-out infinite alternate;
}
.panel__particles{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
}

/* Claw branches */
.claw{
  position:absolute;top:0;height:100%;z-index:5;
  pointer-events:none;
  width:20vw;max-width:300px;
}
.claw svg{width:100%;height:100%}
.claw--left{left:0;transform:translateX(-100%)}
.claw--right{right:0;transform:translateX(100%)}

/* ═══════════════════════════════════════════
   SCENE 4 — CANDY
   ═══════════════════════════════════════════ */
.panel--candy{
  background:linear-gradient(135deg,#0a0508,#100810,#080406);
}
.panel--candy .panel__layer--magic-sky{
  background:radial-gradient(ellipse at 50% 30%,rgba(100,60,120,.08),transparent 50%);
}
.panel--candy .panel__layer--warm-glow{
  background:radial-gradient(circle at 50% 50%,rgba(200,160,100,.04),transparent 40%);
  animation:candleFlicker 4s ease-in-out infinite alternate;
}

/* Candy icons */
.candy-icons{
  position:absolute;inset:0;z-index:5;
  pointer-events:none;
}
.candy-icon{
  position:absolute;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--gold);
  opacity:0;
  transform:scale(0);
  box-shadow:0 0 12px var(--gold-dim);
}
.candy-icon.is-visible{
  opacity:.7;transform:scale(1);
  transition:all .6s var(--ease-out);
}
.candy-icon__label{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  white-space:nowrap;
  font-family:var(--sans);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);
}
.candy-icon[data-pop="1"]{top:25%;left:20%}
.candy-icon[data-pop="2"]{top:15%;left:50%}
.candy-icon[data-pop="3"]{top:40%;left:25%}
.candy-icon[data-pop="4"]{top:55%;left:45%}
.candy-icon[data-pop="5"]{top:20%;left:75%}
.candy-icon[data-pop="6"]{top:60%;left:70%}

/* ═══════════════════════════════════════════
   SCENE 5 — WITCH
   ═══════════════════════════════════════════ */
.panel--witch{
  background:linear-gradient(135deg,#030204,#050308,#020103);
}
.panel--witch .panel__layer--witch-dark{
  background:
    radial-gradient(ellipse at 30% 50%,rgba(40,10,30,.3),transparent 50%),
    radial-gradient(ellipse at 80% 40%,rgba(10,5,20,.4),transparent 40%);
}
.panel--witch .panel__layer--fireplace{
  background:radial-gradient(circle at 80% 70%,rgba(180,80,30,.03),transparent 25%);
  animation:candleFlicker 2.5s ease-in-out infinite alternate;
}
.panel--witch .panel__layer--steam{
  background:linear-gradient(to top,
    transparent 50%,
    rgba(60,50,60,.03) 70%,
    transparent 90%);
  animation:inkDrift 12s ease-in-out infinite alternate;
}
.panel--witch .panel__layer--cage{
  /* Subtle vertical lines suggesting cage bars */
  background:repeating-linear-gradient(
    90deg,
    transparent 0px,transparent 60px,
    rgba(60,50,40,.03) 60px,rgba(60,50,40,.03) 61px
  );
  opacity:.5;
}

/* ═══════════════════════════════════════════
   SCENE 6 — OVEN
   ═══════════════════════════════════════════ */
.panel--oven{
  background:linear-gradient(135deg,#0a0404,#120808,#080202);
}
.panel--oven .panel__layer--oven-glow{
  background:radial-gradient(circle at 50% 60%,rgba(200,80,30,.06),transparent 40%);
  animation:ovenPulse 3s ease-in-out infinite;
}
.panel--oven .panel__layer--sparks{
  background:
    radial-gradient(1px 1px at 45% 55%,rgba(255,200,100,.15),transparent),
    radial-gradient(1px 1px at 55% 50%,rgba(255,180,80,.1),transparent),
    radial-gradient(1.5px 1.5px at 50% 45%,rgba(255,220,120,.12),transparent);
}
.panel--oven .panel__layer--heat{
  background:linear-gradient(to top,
    rgba(100,30,10,.06) 0%,
    transparent 40%);
}

/* ═══════════════════════════════════════════
   SCENE 7 — ENDING
   ═══════════════════════════════════════════ */
.panel--ending{
  min-height:120vh;
  background:linear-gradient(180deg,#030508,#080d14,#0c1420);
}
.panel--ending .panel__layer--dawn{
  background:linear-gradient(to top,
    rgba(200,160,100,.04) 0%,
    rgba(160,140,120,.02) 20%,
    transparent 40%);
  opacity:0;
}
.panel--ending .panel__layer--sun-rays{
  background:radial-gradient(circle at 50% 80%,rgba(255,220,150,.06),transparent 35%);
  opacity:0;
}
.panel--ending .panel__layer--meadow{
  background:linear-gradient(to top,
    rgba(40,60,30,.1) 0%,
    transparent 25%);
}

/* Ending card */
.ending-card{
  margin:48px auto;
  max-width:500px;
  padding:40px 36px;
  border:1px solid rgba(200,160,64,.15);
  text-align:center;
  opacity:0;transform:translateY(30px);
}
.ending-card.is-visible{
  opacity:1;transform:translateY(0);
  transition:all 1.2s var(--ease-out);
}
.ending-card__text{
  font-family:var(--serif);
  font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--warm);line-height:1.7;
  margin-bottom:20px;
}
.ending-card__ornament{
  font-size:1rem;color:var(--gold);
  letter-spacing:.5em;margin-bottom:20px;
  opacity:.5;
}
.ending-card__moral{
  font-family:var(--serif);
  font-size:.95rem;color:var(--text-dim);
  line-height:1.7;font-style:italic;
}

/* ─── Action buttons ─── */
.panel__actions{
  display:flex;gap:20px;
  justify-content:center;
  margin-top:40px;
  opacity:0;
}
.panel__actions.is-visible{
  opacity:1;
  transition:opacity 1s var(--ease-out) .5s;
}
.btn-enter{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-family:var(--sans);font-size:.75rem;
  letter-spacing:.15em;text-transform:uppercase;
  transition:all .4s var(--ease-out);
}
.btn-enter:hover{
  background:var(--gold);color:var(--black);
}
.btn-enter__arrow{width:16px;height:16px}
.btn-ghost{
  padding:14px 30px;
  border:1px solid rgba(255,255,255,.1);
  font-family:var(--sans);font-size:.75rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);
  transition:all .4s var(--ease-out);
}
.btn-ghost:hover{
  border-color:rgba(255,255,255,.3);color:var(--text);
}

/* ═══════════════════════════════════════════
   SHAKE WRAPPER
   ═══════════════════════════════════════════ */
.shake-wrap{position:relative}
.shake-wrap.is-shaking{animation:shakeViolent .5s ease-out}

/* ─── OVEN FLASH OVERLAY ─── */
.oven-flash{
  position:fixed;inset:0;z-index:80;
  background:rgba(255,100,20,.4);
  pointer-events:none;
  opacity:0;
}

/* ═══════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════ */
@keyframes starTwinkle{
  0%{opacity:.5}100%{opacity:1}
}
@keyframes inkDrift{
  0%{transform:translateX(-5%) scaleX(1.05)}
  100%{transform:translateX(5%) scaleX(.95)}
}
@keyframes snowDrift{
  0%{transform:translate(0,0)}
  100%{transform:translate(10px,20px)}
}
@keyframes candleFlicker{
  0%{opacity:.5}30%{opacity:.8}60%{opacity:.4}100%{opacity:.7}
}
@keyframes ovenPulse{
  0%{opacity:.3}50%{opacity:.7}100%{opacity:.3}
}
@keyframes scrollPulse{
  0%{opacity:.3;transform:scaleY(.6)}
  50%{opacity:1;transform:scaleY(1)}
  100%{opacity:.3;transform:scaleY(.6)}
}
@keyframes shakeViolent{
  0%{transform:translate(0,0)}
  10%{transform:translate(-8px,4px)}
  20%{transform:translate(6px,-6px)}
  30%{transform:translate(-10px,2px)}
  40%{transform:translate(8px,-4px)}
  50%{transform:translate(-4px,8px)}
  60%{transform:translate(6px,-2px)}
  70%{transform:translate(-6px,4px)}
  80%{transform:translate(4px,-6px)}
  90%{transform:translate(-2px,2px)}
  100%{transform:translate(0,0)}
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:900px){
  .panel__content{max-width:85vw;padding:60px 32px}
  .panel__content--left{margin-left:5vw}
  .panel__content--right{margin-right:5vw}
  .scene-nav{right:14px;gap:10px}
  .unmute{bottom:16px;right:16px}
  .claw{width:15vw}
}
@media(max-width:600px){
  .panel__content{max-width:95vw;padding:50px 20px}
  .panel__content--left{margin-left:2vw}
  .panel__content--right{margin-right:2vw;margin-left:2vw}
  .panel__title{font-size:clamp(2.4rem,10vw,4rem)}
  .scene-nav{right:8px}
  .scene-nav__dot{width:5px;height:5px}
  .quote{padding:20px 16px;margin:20px 0}
  .claw{width:12vw}
  .candy-icon__label{font-size:.5rem}
  .unmute__text{display:none}
}

/* ─── Reduced motion ─── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
}