/* ==========================================================================
   EduCastle — Scroll-driven opening scene
   Progress vars (--pTurn, --pOpen, --l0…--l4, --pCastle, --pKids,
   --pShrink, --pWords, --fit) are written by js/scene.js from scroll.
   ========================================================================== */

.scene {
  --p: 0; --pTurn: 0; --pOpen: 0; --pCastle: 0; --pWords: 0; --pShrink: 0;
  --l0: 0; --l1: 0; --l2: 0; --l3: 0; --l4: 0;
  --f1: 0; --f2: 0; --f3: 0; --fw: 0; --fA: 0; --pPaper: 0; --pFlash: 0; --pReal: 0; --kw: 0;
  --fit: 1;
  --dockLo: 11vh;
  --dockHi: 40vh;
  position: relative;
  height: 560vh;
}

.scene__pin {
  position: sticky; top: 0;
  height: 100vh; min-height: 560px;
  overflow: hidden;
  background: linear-gradient(180deg, #cfdcff 0%, #e6ecff 34%, #f5f0e4 74%, #fdf8ee 100%);
}

/* ---------- sky ---------- */
.scene__sun {
  position: absolute; left: 50%; top: 15%;
  width: 46vmin; height: 46vmin; margin-left: -23vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,225,150,.95) 0%, rgba(255,209,102,.5) 38%, rgba(255,209,102,0) 70%);
  opacity: calc(.14 + var(--pCastle) * .46);
  transform: scale(calc(.7 + var(--pCastle) * .5));
}
.scene__clouds { position: absolute; inset: 0; pointer-events: none; }
.scene__clouds i {
  position: absolute; display: block; background: #fff; border-radius: 100px;
  box-shadow: 0 8px 22px rgba(22,38,107,.08); opacity: .92;
}
.scene__clouds i::before, .scene__clouds i::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.scene__clouds i::before { width: 60%; height: 190%; left: 8%; bottom: 22%; }
.scene__clouds i::after  { width: 46%; height: 150%; right: 8%; bottom: 20%; }
.cl1 { width: 150px; height: 34px; top: 16%; left: 5%;  animation: drift 44s linear infinite; }
.cl2 { width: 110px; height: 26px; top: 27%; left: 76%; animation: drift 58s linear infinite reverse; }
.cl3 { width: 190px; height: 40px; top: 19%; left: 57%; animation: drift 66s linear infinite; }
.cl4 { width: 90px;  height: 22px; top: 38%; left: 20%; animation: drift 52s linear infinite reverse; opacity: .7; }
@keyframes drift { 0% { transform: translateX(-7vw) } 50% { transform: translateX(7vw) } 100% { transform: translateX(-7vw) } }

/* Three gulls, each placed as a percentage of the sky so they spread across any
   width, and each flapping on its own beat. */
.scene__birds { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--pCastle) * .62); }
.scene__birds .bird {
  position: absolute; display: block;
  animation: flap var(--dur) ease-in-out infinite var(--lag);
  transform-origin: 50% 62%;
}
.scene__birds svg { width: 100%; height: auto; display: block; }
.scene__birds path { fill: #4d5d92; }
.b1 { left: 13%; top: 20%; width: clamp(26px, 2.6vw, 42px); --dur: 3.6s; --lag: 0s;   }
.b2 { left: 26%; top: 15%; width: clamp(18px, 1.8vw, 29px); --dur: 4.4s; --lag: .7s;  }
.b3 { left: 74%; top: 18%; width: clamp(22px, 2.2vw, 35px); --dur: 3.1s; --lag: 1.4s; }
@keyframes flap { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(.58) } }
@media (prefers-reduced-motion: reduce) { .scene__birds .bird { animation: none } }

.scene__hills { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; pointer-events: none; }
.scene__hills svg { width: 100%; height: clamp(78px, 13vh, 160px); display: block; }

/* ---------- stage ---------- */
.stage {
  position: absolute; left: 50%; z-index: 4;
  width: 1000px; height: 600px;
  bottom: calc(var(--dockLo) + var(--pShrink) * (var(--dockHi) - var(--dockLo)));
  transform: translateX(-50%) scale(calc(var(--fit) * (1 - var(--pShrink) * .30)));
  transform-origin: bottom center;
}

.stage__rays {
  position: absolute; left: 50%; bottom: 150px; width: 900px; height: 900px;
  margin-left: -450px; margin-bottom: -450px; z-index: 1;
  background: repeating-conic-gradient(from 0deg, rgba(255,209,102,.42) 0deg 4deg, rgba(255,209,102,0) 4deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 58%);
  mask-image: radial-gradient(circle, #000 8%, transparent 58%);
  opacity: calc(var(--pCastle) * .55);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* castle rising out of the open book */
.stage__well {
  position: absolute; left: 50%; bottom: 96px; z-index: 7;
  width: 470px; height: 420px; margin-left: -235px; overflow: hidden;
}
.stage__well img {
  /* the colour does not cross-fade in — it washes UP the paper from the base,
     so at any moment the castle is half paper, half real, with one soft edge */
  --wash: calc(var(--pReal) * 152% - 26%);
  position: absolute; left: 0; bottom: 0; width: 100%;
  -webkit-mask-image: linear-gradient(to top, #000 var(--wash), rgba(0,0,0,0) calc(var(--wash) + 22%));
  mask-image: linear-gradient(to top, #000 var(--wash), rgba(0,0,0,0) calc(var(--wash) + 22%));
  transform: translateY(calc((1 - var(--pReal)) * 8px)) scale(calc(.98 + var(--pReal) * .02));
  transform-origin: bottom center;
  /* no halo around the whole silhouette — just a tight contact shadow so the
     castle sits ON the page rather than floating above it in a grey cloud */
  filter: drop-shadow(0 3px 2px rgba(34,54,104,calc(var(--pReal) * .18)));
}
/* an identical copy drawn in FRONT of the children, so they can walk out from behind it */
.stage__well--front { z-index: 9; }
.stage__well--front img { filter: none; }
/* the base of the castle melts into the light coming out of the spine */
.stage__well-fade {
  position: absolute; left: 20%; right: 20%; bottom: -6px; height: 22px; pointer-events: none;
  border-radius: 50%; filter: blur(5px);
  background: radial-gradient(ellipse at center, rgba(34,54,104,.24), rgba(34,54,104,0) 72%);
  opacity: var(--pReal);
}

/* light spilling up out of the spine — sells the castle coming OUT of the book */
.bk-beam {
  position: absolute; left: 50%; bottom: 88px; width: 340px; height: 330px;
  margin-left: -170px; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(255,229,150,.85), rgba(255,229,150,.28) 45%, rgba(255,229,150,0) 82%);
  clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0);
  opacity: calc(var(--pOpen) * var(--pOpen) * .5);
  filter: blur(3px);
}

/* ---------- pop-up: flat paper layers that fold up out of the page ---------- */
.popup {
  /* sized and placed so that, lying flat, it covers the open spread;
     as it folds up it also rises and grows onto the real castle's footprint */
  position: absolute; left: 50%; bottom: 34px; z-index: 7;
  width: 410px; height: 331px; margin-left: -205px;
  perspective: 900px; perspective-origin: 50% 16%;
  /* the paper only starts leaving once the colour has already washed a third of
     the way up the real castle, so the two never cross-dissolve in the open */
  opacity: calc(var(--pPaper) * clamp(0, 1.9 - var(--pReal) * 2.6, 1));
  transform: translateY(calc(var(--fA) * -62px)) scale(calc(1 + var(--fA) * .145));
  transform-origin: 50% 100%;
  pointer-events: none;
}
.popup__plane {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(58deg); transform-origin: 50% 100%;
}
.pop-layer {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  transform-origin: 50% 100%; transform-style: preserve-3d;
}
.pop-layer > img { width: 100%; height: 100%; }
/* back layer rises first, then the keep, then the side towers unfold, then the base */
.pop-1 { transform: translateZ(-9px) rotateX(calc(var(--f1) * -58deg)); }
.pop-2 { transform: translateZ(0px)  rotateX(calc(var(--f2) * -58deg)); }
.pop-3 { transform: translateZ(9px)  rotateX(calc(var(--f3) * -58deg)); }
/* flat on the page a panel is just printed ink; standing up it lifts off and
   throws a shadow — the drop shadow grows with the fold instead of being fixed */
.pop-1 > img { filter: drop-shadow(0 calc(var(--f1) * 8px) calc(2px + var(--f1) * 12px) rgba(22,38,107,calc(.05 + var(--f1) * .17))); }
.pop-2 .wing__in img { filter: drop-shadow(0 calc(var(--f2) * 8px) calc(2px + var(--f2) * 12px) rgba(22,38,107,calc(.05 + var(--f2) * .17))); }
.pop-3 > img { filter: drop-shadow(0 calc(var(--f3) * 8px) calc(2px + var(--f3) * 12px) rgba(22,38,107,calc(.05 + var(--f3) * .17))); }

/* the shadow each panel throws across the open spread, lying flat in the page
   plane. Short and dark at the crease, fading out as the panel reaches vertical */
.fold-shadow {
  position: absolute; left: 20%; right: 20%; bottom: 0; height: 15%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(22,38,107,.30), rgba(22,38,107,0) 66%);
  filter: blur(5px); transform-origin: 50% 100%;
}
.fs-1 { transform: translateZ(-10px) scaleY(calc(.3 + var(--f1) * .7)); opacity: calc(var(--f1) * .55); }
.fs-2 { transform: translateZ(-1px)  scaleY(calc(.3 + var(--f2) * .7)); opacity: calc(var(--f2) * .5); }
.fs-3 { transform: translateZ(8px)   scaleY(calc(.3 + var(--f3) * .7)); opacity: calc(var(--f3) * .4); }

/* the side towers are gate-folded in behind the keep and swing out on vertical creases */
/* Each panel is its own artwork on the shared 620x500 canvas, so nothing is
   clipped — the towers really are separate pieces of paper hinged to the keep. */
.wing { position: absolute; inset: 0; transform-style: preserve-3d; }
.wing__in { position: absolute; inset: 0; }
.wing__in img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wing-l { transform-origin: 26.8% 50%; transform: rotateY(calc((1 - var(--fw)) * -168deg)); }
.wing-r { transform-origin: 73.4% 50%; transform: rotateY(calc((1 - var(--fw)) * 168deg)); }
/* face away from you for the first half of the swing, exactly as real paper does */
.wing-l .wing__in, .wing-r .wing__in { opacity: clamp(0, var(--fw) * 4 - 1.15, 1); }

/* a light catches each crease as it turns */
.crease {
  position: absolute; left: 6%; right: 6%; bottom: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,236,180,0), rgba(255,246,214,.95), rgba(255,236,180,0));
  pointer-events: none;
}
.pop-1 .crease { opacity: calc(var(--f1) * (1 - var(--f1)) * 4); }
.pop-2 .crease { opacity: calc(var(--f2) * (1 - var(--f2)) * 4); }
.pop-3 .crease { opacity: calc(var(--f3) * (1 - var(--f3)) * 4); }
/* the two vertical creases the side towers swing open on */
.crease--v {
  left: auto; right: auto; bottom: 34%; top: 8%; height: auto; width: 3px;
  background: linear-gradient(180deg, rgba(255,236,180,0), rgba(255,246,214,.9), rgba(255,236,180,0));
  opacity: calc(var(--fw) * (1 - var(--fw)) * 4);
}
.cv-l { left: 27.4%; }
.cv-r { left: 74.2%; }

/* the flash that turns paper into the real castle */
.stage__flash {
  position: absolute; left: 50%; bottom: 150px; z-index: 11; pointer-events: none;
  width: 760px; height: 760px; margin-left: -380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,232,166,.8) 26%, rgba(255,209,102,0) 60%);
  opacity: var(--pFlash);
  transform: scale(calc(.42 + var(--pFlash) * .85));
}

/* ==========================================================================
   THE BOOK — a real 3D object: covers, spine, page block, flipping leaves
   ========================================================================== */
.book3d {
  position: absolute; left: 50%; bottom: 40px; z-index: 6;
  width: 600px; height: 420px; margin-left: -300px;
  perspective: 1250px; perspective-origin: 50% 46%;
  transform: translateY(calc(var(--pOpen) * -26px)) scale(calc(1 - var(--pOpen) * .2));
  transform-origin: 50% 74%;
}

/* soft contact shadow, drawn flat in screen space */
.book3d__shadow {
  position: absolute; left: 50%; bottom: 6px; z-index: 0;
  width: calc(240px + var(--pOpen) * 300px); height: 48px;
  margin-left: calc(-120px - var(--pOpen) * 150px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(22,38,107,.32), rgba(22,38,107,0) 70%);
  filter: blur(4px);
  opacity: calc(.5 + var(--pOpen) * .3);
}

.bk-scene {
  position: absolute; left: 300px; top: 200px;
  width: 250px; height: 320px;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transform:
    translateX(calc(-125px * (1 - var(--pOpen))))
    translateY(calc(-150px * (1 - var(--pTurn))))
    rotateZ(calc((1 - var(--pTurn)) * -5deg))
    rotateX(calc(8deg + var(--pTurn) * 50deg))
    rotateY(calc((1 - var(--pTurn)) * -38deg));
}

/* ---- shared face styling ---- */
.bk-face { position: absolute; backface-visibility: hidden; }

/* back cover (the one the book rests on) */
.bk-back {
  left: 0; top: 0; width: 250px; height: 320px;
  transform: translateZ(-22px);
  background: linear-gradient(145deg, #33499f, #16266b 55%, #101c52);
  border-radius: 2px 10px 10px 2px;
  box-shadow: inset 0 0 34px rgba(0,0,0,.42);
}

/* spine */
.bk-spine {
  left: 0; top: 0; width: 40px; height: 320px;
  transform-origin: 0 50%;
  transform: translateZ(20px) rotateY(90deg);
  background: linear-gradient(90deg, #101c52, #22357f 45%, #16266b);
  border-radius: 3px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 20px rgba(0,0,0,.4);
}
.bk-spine span {
  font-family: var(--font-head); font-weight: 600; color: #ffd166;
  font-size: 13px; letter-spacing: .3em; white-space: nowrap;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.bk-spine::before, .bk-spine::after {
  content: ""; position: absolute; left: 5px; right: 5px; height: 4px;
  background: linear-gradient(90deg, #eda310, #ffe08c, #eda310); border-radius: 2px;
}
.bk-spine::before { top: 26px; }
.bk-spine::after  { bottom: 26px; }

/* ---- page block: the stack of pages inside the covers ---- */
.bk-block { position: absolute; inset: 0; transform-style: preserve-3d; }
.paper {
  background:
    repeating-linear-gradient(var(--paperDir, 0deg), #ffffff 0 2px, #ddd7c6 2px 3.2px);
}
.bk-fore {                       /* fore-edge — the visible page stack */
  left: 6px; top: 6px; width: 34px; height: 308px;
  transform-origin: 0 50%;
  transform: translateX(238px) translateZ(17px) rotateY(90deg);
  --paperDir: 90deg;
  border-radius: 0 4px 4px 0;
  box-shadow: inset -6px 0 12px rgba(22,38,107,.18);
}
.bk-head {                       /* top of the page stack */
  left: 6px; top: 6px; width: 238px; height: 34px;
  transform-origin: 50% 0;
  transform: translateZ(-17px) rotateX(90deg);
  --paperDir: 0deg;
}
.bk-tail {                       /* bottom of the page stack */
  left: 6px; top: 314px; width: 238px; height: 34px;
  transform-origin: 50% 0;
  transform: translateZ(17px) rotateX(-90deg);
  --paperDir: 0deg;
  box-shadow: inset 0 -6px 12px rgba(22,38,107,.16);
}
/* the right-hand page that stays put */
.bk-rest {
  left: 6px; top: 6px; width: 238px; height: 308px;
  transform: translateZ(-1px);
  background: linear-gradient(105deg, #fdfaf1, #fffdf7 40%, #f2ecdd);
  border-radius: 1px 5px 5px 1px;
  box-shadow: inset 14px 0 22px rgba(22,38,107,.13);
}
.bk-rest::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 36px; height: 170px;
  background: repeating-linear-gradient(transparent 0 15px, rgba(22,38,107,.13) 15px 17px);
}
.bk-rest::after {
  content: ""; position: absolute; right: 22px; top: 14px; width: 84px; height: 11px;
  border-radius: 6px; background: rgba(44,70,184,.4);
}

/* ---- hinged leaves + front cover ---- */
.hinge {
  position: absolute; transform-origin: 0 50%; transform-style: preserve-3d;
}
.hinge .bk-face { inset: 0; }

.hinge--cover {
  left: 0; top: 0; width: 250px; height: 320px;
  transform: rotateY(calc(var(--pOpen) * -180deg));
}
.cover-out {
  transform: translateZ(20px);
  background: #16266b url("../img/castle/book-cover.svg") center/100% 100% no-repeat;
  border-radius: 2px 10px 10px 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.cover-in {
  transform: translateZ(18px) rotateY(180deg);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    linear-gradient(150deg, #eef3ff, #dae3f9);
  border-radius: 10px 2px 2px 10px;
  box-shadow:
    inset 0 0 0 9px #16266b,
    inset 0 0 0 11px #f5b217,
    inset 0 0 30px rgba(22,38,107,.16);
}
.cover-in::after {
  content: ""; position: absolute; inset: 26px;
  border: 1.5px solid rgba(22,38,107,.14); border-radius: 5px;
}

.leaf { left: 6px; top: 6px; width: 238px; height: 308px; }
.leaf .bk-face {
  background: linear-gradient(120deg, #fffdf7, #fbf6ea);
  border-radius: 1px 5px 5px 1px;
}
.leaf .pg-r::before, .leaf .pg-v::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 36px; height: 170px;
  background: repeating-linear-gradient(transparent 0 15px, rgba(22,38,107,.13) 15px 17px);
}
.leaf .pg-r::after, .leaf .pg-v::after {
  content: ""; position: absolute; left: 22px; top: 14px; width: 84px; height: 11px;
  border-radius: 6px; background: rgba(245,178,23,.55);
}
.leaf0 { transform: rotateY(calc(var(--l0) * -176.5deg)); }
.leaf1 { transform: rotateY(calc(var(--l1) * -177.5deg)); }
.leaf2 { transform: rotateY(calc(var(--l2) * -178.4deg)); }
.leaf3 { transform: rotateY(calc(var(--l3) * -179.2deg)); }
.leaf4 { transform: rotateY(calc(var(--l4) * -180deg)); }
.leaf0 .pg-r { transform: translateZ(15px);  } .leaf0 .pg-v { transform: translateZ(14px) rotateY(180deg); }
.leaf1 .pg-r { transform: translateZ(11px);  } .leaf1 .pg-v { transform: translateZ(10px) rotateY(180deg); }
.leaf2 .pg-r { transform: translateZ(9px);   } .leaf2 .pg-v { transform: translateZ(8px)  rotateY(180deg); }
.leaf3 .pg-r { transform: translateZ(5px);   } .leaf3 .pg-v { transform: translateZ(4px)  rotateY(180deg); }
.leaf4 .pg-r { transform: translateZ(1px);   } .leaf4 .pg-v { transform: translateZ(0px)  rotateY(180deg); }

/* warm light spilling out of the spine as it opens */
.bk-glow {
  position: absolute; left: 50%; bottom: 62px; z-index: 3;
  width: 400px; height: 200px; margin-left: -200px;
  background: radial-gradient(ellipse at 50% 90%, rgba(255,233,168,.9), rgba(255,209,102,0) 68%);
  opacity: calc(var(--pOpen) * var(--pOpen) * .9);
  pointer-events: none;
}

/* ---- letters drifting up out of the book ---- */
.stage__letters { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: calc(var(--pOpen) * var(--pCastle)); }
.stage__letters b {
  position: absolute; left: 50%; bottom: 110px;
  font-family: var(--font-head); font-weight: 600; font-size: 30px;
  color: var(--blue); opacity: .0;
  animation: floatUp 6s ease-in-out infinite;
  animation-delay: var(--d);
}
.stage__letters b:nth-child(even) { color: var(--gold); }
.stage__letters b:nth-child(3n) { color: var(--green); }
@keyframes floatUp {
  0%   { transform: translate(var(--x), 0) scale(.5) rotate(0deg); opacity: 0; }
  18%  { opacity: .95; }
  100% { transform: translate(calc(var(--x) * 1.7), -230px) scale(1.05) rotate(var(--r, 18deg)); opacity: 0; }
}

/* ---- knight kids ---- */
.kid {
  position: absolute; bottom: 6px; width: 164px; z-index: 8;
  filter: drop-shadow(0 12px 16px rgba(74,58,34,.22));
  /* they are opaque almost immediately — what actually reveals them is the front
     copy of the castle they are walking out from behind, not a fade */
  opacity: calc(var(--kw) * 5 - .3);
  transform-origin: bottom center;
}
.kid--l {
  left: 52px;
  transform: translateX(calc((1 - var(--kw)) * 352px)) translateY(calc((1 - var(--kw)) * -72px))
             scale(calc(.58 + var(--kw) * .42));
}
.kid--r {
  right: 52px;
  transform: translateX(calc((1 - var(--kw)) * -352px)) translateY(calc((1 - var(--kw)) * -72px))
             scale(calc(.58 + var(--kw) * .42));
}

/* ---- sparkles ---- */
.stage__sparks { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: var(--kw); }
.stage__sparks b {
  position: absolute; display: block; width: 14px; height: 14px; background: #f5b217;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: sparkle 2.6s ease-in-out infinite;
}
.stage__sparks b:nth-child(2) { animation-delay: .5s }
.stage__sparks b:nth-child(3) { animation-delay: 1s }
.stage__sparks b:nth-child(4) { animation-delay: 1.5s }
.stage__sparks b:nth-child(5) { animation-delay: .8s }
.stage__sparks b:nth-child(6) { animation-delay: 1.9s }
@keyframes sparkle { 0%,100% { transform: scale(.5) rotate(0deg); opacity: .3 } 50% { transform: scale(1.2) rotate(90deg); opacity: 1 } }

/* ---------- headline ---------- */
.scene__words {
  position: absolute; left: 0; right: 0; bottom: clamp(64px, 7vh, 108px); z-index: 9;
  text-align: center; padding-inline: 20px;
  opacity: var(--pWords);
  transform: translateY(calc((1 - var(--pWords)) * 34px));
}
.scene__words h1 { margin: .25rem 0 .45rem; font-size: clamp(1.55rem, 3.1vw, 2.55rem); }
.scene__words .lede { font-size: clamp(.95rem, 1.25vw, 1.06rem); margin-inline: auto; margin-bottom: 1.1rem; }
.scene__words .btn-row { justify-content: center; }

/* ---------- hint + progress ---------- */
.scene__hint {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  font-family: var(--font-body); font-weight: 500; font-size: .8rem;
  letter-spacing: .02em; text-transform: none; color: var(--muted);
  opacity: calc(1 - var(--p) * 12); pointer-events: none;
}
.scene__hint i { width: 26px; height: 42px; border: 2.5px solid var(--navy); border-radius: 14px; position: relative; }
.scene__hint i::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px;
  margin-left: -2px; border-radius: 2px; background: var(--navy);
  animation: wheel 1.7s ease-in-out infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(14px); opacity: 0 } 100% { opacity: 0 } }

.scene__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 11; background: rgba(22,38,107,.10); }
.scene__progress i { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .scene { height: 520vh; --dockLo: 22vh; --dockHi: 52vh; }
  .stage { transform: translateX(-50%) scale(calc(var(--fit) * (1 - var(--pShrink) * .18))); }
  .kid { width: 132px; }
  .kid--l { left: 132px; }
  .kid--r { right: 132px; }
  .stage__well { width: 380px; margin-left: -190px; height: 340px; bottom: 138px; }
  .book3d { transform: translateY(calc(var(--pOpen) * -22px - (1 - var(--pTurn)) * 60px)) scale(calc(.88 - var(--pOpen) * .18)); }
}

@media (max-width: 560px) {
  .scene { height: 480vh; --dockLo: 30vh; --dockHi: 57vh; }
  .kid { width: 112px; }
  .kid--l { left: 205px; }
  .kid--r { right: 205px; }
  .stage__well { width: 320px; margin-left: -160px; height: 290px; bottom: 124px; }
  .book3d { transform: translateY(calc(var(--pOpen) * -18px - (1 - var(--pTurn)) * 80px)) scale(calc(.76 - var(--pOpen) * .16)); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene {
    height: auto !important;
    --pTurn: 1; --pOpen: 1; --pCastle: 1; --pWords: 1; --pShrink: 1; --p: 1;
    --l0: 1; --l1: 1; --l2: 1; --l3: 1; --l4: 1;
    --f1: 1; --f2: 1; --f3: 1; --fw: 1; --fA: 1; --pPaper: 1; --pFlash: 0; --pReal: 1; --kw: 1;
  }
  .scene__pin { position: static; height: auto; padding: 4vh 0 6vh; }
  .stage { position: relative; left: auto; bottom: auto; transform: none; margin: 0 auto;
           width: 100%; max-width: 1000px; height: 0; padding-bottom: 60%; }
  .stage__rays, .scene__hint, .scene__progress, .stage__letters, .bk-beam, .popup, .stage__flash { display: none; }
  .scene__words { position: relative; bottom: auto; opacity: 1; transform: none; margin-top: 2rem; }
}

/* ---------- short viewports need the scene to dock higher ----------
   The headline block is a fixed height, so on a laptop with a short window it
   was landing on the open book. Lift the stage rather than shrink the type,
   and on the very shortest screens drop the two least important lines. */
@media (max-height: 800px) {
  .scene { --dockHi: 48vh; }
}
@media (max-height: 720px) {
  .scene { --dockHi: 56vh; }
  .scene__words { bottom: clamp(52px, 6vh, 82px); }
  .scene__words .lede { margin-bottom: .8rem; }
  .scene__words .ribbon { margin-bottom: .55rem; }
}
@media (max-height: 660px) {
  .scene { --dockHi: 63vh; }
  .scene__words h1 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
  .scene__words .ribbon,
  .scene__words .btn--quiet { display: none; }
}