/* Age doors v3 (tire-kick Oct 14, P0-10). Base from the brief's assets/doors/anp-doors.css, with the coordinator's rule:
   the full staged opening (~1.85s) the first time per device per door, a short one (~0.9s) after that (the stage gets
   .short, which sets --k:.49 and every time below is multiplied by --k). Any tap, click, Enter, Space or Esc skips after
   0.3s (js/anp-doors.js). Only transform, opacity and filter animate (60fps on phones; the stage uses contain:strict).
   Reduced motion: a 200ms fade, then go. Keyframes carry a dr- prefix so no other stylesheet can collide with them.
   Needs /css/anp-tokens.css. */
.doors{display:grid;gap:12px}
@media(min-width:1024px){.doors{grid-template-columns:repeat(3,1fr);gap:16px}}
.door{position:relative;display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 16px;border-radius:18px;text-decoration:none;color:var(--anp-on-night);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);overflow:hidden;isolation:isolate;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-base)}
.door,.door *{text-decoration:none}
.door:hover{border-color:rgba(255,227,163,.6)} .door:active{transform:scale(.98)}
.door:focus-visible{outline:3px solid var(--anp-gold-soft);outline-offset:3px}
.door img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6);flex:none}
.door b{display:block;font:600 18px/1.2 var(--font-serif);color:#FFF8EC} .door span{font-size:14px;color:#D9D2C4}
@media(max-width:359px){.door{min-height:60px;padding:8px 12px}.door img{width:40px;height:40px}.doors{gap:8px}}
@media(min-width:1024px){.door{flex-direction:column;text-align:center;padding:20px 12px;min-height:132px}.door img{width:56px;height:56px}}
/* ===== the openings ===== */
.door-stage{--k:1;position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;opacity:0;pointer-events:auto;cursor:pointer;contain:strict}
.door-stage.short{--k:.49}
.door-stage.play{opacity:1}
.door-stage *{will-change:transform,opacity}
.door-stage .light,.door-stage .zoom,.door-stage .cut{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;opacity:0}
.door-stage .leaf{position:absolute;backface-visibility:hidden}
.door-stage{--e-antic:cubic-bezier(.36,0,.66,-.56);--e-swing:cubic-bezier(.34,1.32,.64,1);--e-glide:cubic-bezier(.7,0,.2,1);--e-film:cubic-bezier(.25,.1,.1,1)}
/* LITTLES 1.9s: 0-300 glow + knob twinkle | 300-950 swing (slight overshoot) | 450-1150 warm light + dust motes |
   850-1450 Nan peeks, blinks at 1180, tail waves | 950-1500 thread swirls in | 1500-1900 soft zoom through */
.st-littles .light{background:radial-gradient(circle at 50% 50%,#FFF3D6 0%,#FFD48A 38%,rgba(255,180,90,0) 72%),var(--anp-littles-milk)}
.st-littles .frame{position:absolute;width:min(72vw,360px);aspect-ratio:1;border-radius:50%;background:#FFE9C7;box-shadow:0 0 0 10px #E9A93A,0 30px 80px rgba(233,169,58,.5);overflow:hidden;perspective:900px}
.st-littles .room{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:radial-gradient(circle at 50% 60%,#FFF8E6,#FFD9A0 60%,#F2B544);opacity:0}
.st-littles .leaf{top:0;right:0;bottom:0;left:0;inset:0;border-radius:50%;transform-origin:left center;background:repeating-linear-gradient(90deg,#B86B3A 0 22px,#A55E31 22px 24px);box-shadow:inset 0 0 0 8px #8E4F27}
.st-littles .knob{position:absolute;right:18%;top:48%;width:16px;height:16px;border-radius:50%;background:var(--anp-gold);box-shadow:var(--glow-lamp)}
.st-littles .nan{position:absolute;left:50%;bottom:-62%;width:58%;transform:translateX(-50%)}
.st-littles .nan img{width:100%;display:block}
.st-littles .lid{position:absolute;left:30%;top:34%;width:40%;height:8%;background:#E9A15A;border-radius:50%;transform:scaleY(0);transform-origin:top}
.st-littles .tail{position:absolute;right:-6%;bottom:22%;width:30%;height:10%;border-radius:999px;background:#E9A15A;transform-origin:left center;transform:rotate(-20deg)}
.st-littles .thread{position:absolute;width:min(80vw,400px);height:min(80vw,400px)}
.st-littles .thread path{stroke:var(--anp-gold-accent);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:1100;stroke-dashoffset:1100;filter:drop-shadow(0 0 6px rgba(242,181,68,.8))}
.st-littles .zoom{background:var(--anp-littles-milk)}
.door-stage .mote{position:absolute;left:var(--x);top:58%;width:var(--s);height:var(--s);border-radius:50%;background:#FFE7B0;box-shadow:0 0 8px 2px rgba(255,214,140,.8);opacity:0}
.st-littles.play .light{animation:dr-fadeIn calc(300ms*var(--k)) var(--ease-out) forwards}
.st-littles.play .frame{animation:dr-glowPulse calc(300ms*var(--k)) var(--e-antic),dr-zoomThrough calc(400ms*var(--k)) var(--e-glide) calc(1500ms*var(--k)) forwards}
.st-littles.play .knob{animation:dr-twinkle calc(300ms*var(--k)) ease-in-out 2}
.st-littles.play .leaf{animation:dr-swing calc(650ms*var(--k)) var(--e-swing) calc(300ms*var(--k)) forwards}
.st-littles.play .room{animation:dr-fadeIn calc(500ms*var(--k)) var(--ease-out) calc(450ms*var(--k)) forwards}
.st-littles.play .mote{animation:dr-motes calc(900ms*var(--k)) var(--ease-out) calc((450ms + var(--d))*var(--k)) forwards}
.st-littles.play .nan{animation:dr-peek calc(600ms*var(--k)) var(--e-swing) calc(850ms*var(--k)) forwards}
.st-littles.play .lid{animation:dr-blink calc(160ms*var(--k)) ease-in-out calc(1180ms*var(--k)) 1}
.st-littles.play .tail{animation:dr-wag calc(500ms*var(--k)) ease-in-out calc(1000ms*var(--k)) 2 alternate}
.st-littles.play .thread path{animation:dr-draw calc(550ms*var(--k)) var(--ease-out) calc(950ms*var(--k)) forwards}
.st-littles.play .zoom{animation:dr-fadeIn calc(250ms*var(--k)) ease-in calc(1650ms*var(--k)) forwards}
/* 5-10 1.85s: 0-300 keyhole glows | 300-950 double doors open | 600-1300 sunbeams + sparkles rise |
   700-1500 breeze: two art layers drift at different speeds (parallax) | 1450-1850 glide in */
.st-kids .light{background:linear-gradient(180deg,#FFF6DD,#FFD99A)}
.st-kids .frame{position:absolute;width:min(70vw,340px);aspect-ratio:3/4;border-radius:999px 999px 16px 16px;overflow:hidden;perspective:900px;box-shadow:0 0 0 8px #F3EBDD,0 30px 90px rgba(255,190,90,.55)}
.st-kids .world{position:absolute;top:-6%;right:-6%;bottom:-6%;left:-6%;inset:-6%;background:var(--art,url(/reading-program/assets/story/greenwood/cover-800.webp)) center/cover}
.st-kids .world.far{filter:blur(2px) brightness(1.1);transform:scale(1.3)}
.st-kids .world.near{-webkit-mask-image:linear-gradient(0deg,black 35%,transparent 60%);mask-image:linear-gradient(0deg,black 35%,transparent 60%);transform:scale(1.2)}
.st-kids .beams{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:repeating-conic-gradient(from 200deg at 50% -10%,rgba(255,240,200,.0) 0 6deg,rgba(255,240,200,.35) 6deg 9deg);opacity:0;mix-blend-mode:screen}
.st-kids .leaf{top:0;bottom:0;width:50%;background:linear-gradient(90deg,#2C3D6E,#1F2E55);box-shadow:inset -2px 0 0 rgba(255,255,255,.15)}
.st-kids .leaf.l{left:0;transform-origin:left center} .st-kids .leaf.r{left:50%;transform-origin:right center}
.st-kids .keyhole{position:absolute;left:50%;top:55%;width:14px;height:22px;transform:translate(-50%,-50%);background:#FFD68C;clip-path:polygon(50% 0,80% 20%,80% 45%,62% 55%,75% 100%,25% 100%,38% 55%,20% 45%,20% 20%);box-shadow:0 0 18px #FFD68C;opacity:.3}
.st-kids .spark{position:absolute;left:var(--x);bottom:30%;width:9px;height:9px;background:#FFE3A3;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0}
.st-kids .zoom{background:#FFF6DD}
.st-kids.play .light{animation:dr-fadeIn calc(280ms*var(--k)) forwards}
.st-kids.play .keyhole{animation:dr-keyglow calc(300ms*var(--k)) var(--ease-out) forwards,dr-fadeOut calc(150ms*var(--k)) calc(400ms*var(--k)) forwards}
.st-kids.play .leaf.l{animation:dr-openL calc(650ms*var(--k)) var(--e-swing) calc(300ms*var(--k)) forwards}
.st-kids.play .leaf.r{animation:dr-openR calc(650ms*var(--k)) var(--e-swing) calc(300ms*var(--k)) forwards}
.st-kids.play .beams{animation:dr-beams calc(700ms*var(--k)) var(--ease-out) calc(600ms*var(--k)) forwards}
.st-kids.play .spark{animation:dr-rise calc(800ms*var(--k)) var(--ease-out) calc((600ms + var(--d))*var(--k)) forwards}
.st-kids.play .far{animation:dr-breezeFar calc(800ms*var(--k)) ease-in-out calc(700ms*var(--k)) forwards}
.st-kids.play .near{animation:dr-breezeNear calc(800ms*var(--k)) ease-in-out calc(700ms*var(--k)) forwards}
.st-kids.play .frame{animation:dr-zoomThrough calc(400ms*var(--k)) var(--e-glide) calc(1450ms*var(--k)) forwards}
.st-kids.play .zoom{animation:dr-fadeIn calc(250ms*var(--k)) ease-in calc(1600ms*var(--k)) forwards}
/* 11-18 1.8s, grown-up, NO sparkles: 0-900 warm light leak sweeps | 350-550 film-gate flicker |
   500-1000 dark panel slides away | 750-1650 slow push-in on the world still + lens bloom + letterbox | 1680 cut */
.st-teen .light{background:#0B1022}
.st-teen .still{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:var(--art,url(/reading-program/assets/home/older_case_room_01-800.webp)) center/cover;opacity:0;transform:scale(1.12);filter:contrast(1.06) saturate(.9) brightness(1.3)}
.st-teen .leaf{top:0;right:0;bottom:0;left:0;inset:0;background:linear-gradient(90deg,#141E3C,#1F2E55)}
.st-teen .leak{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;inset:-20%;background:linear-gradient(100deg,transparent 30%,rgba(255,170,90,.55) 45%,rgba(255,220,170,.35) 52%,transparent 66%);transform:translateX(-80%);mix-blend-mode:screen}
.st-teen .gate{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:#000;opacity:0}
.st-teen .bloom{position:absolute;left:50%;top:45%;width:60vmax;height:60vmax;transform:translate(-50%,-50%) scale(.6);border-radius:50%;background:radial-gradient(circle,rgba(255,236,200,.45),rgba(255,236,200,0) 60%);opacity:0;mix-blend-mode:screen}
.st-teen .bar{position:absolute;left:0;right:0;height:12vh;background:#05070F}
.st-teen .bar.t{top:0;transform:translateY(-100%)} .st-teen .bar.b{bottom:0;transform:translateY(100%)}
.st-teen .cut{background:#05070F}
.st-teen.play .light{animation:dr-fadeIn calc(200ms*var(--k)) forwards}
.st-teen.play .leak{animation:dr-leak calc(900ms*var(--k)) var(--e-film) forwards}
.st-teen.play .gate{animation:dr-flicker calc(200ms*var(--k)) steps(4) calc(350ms*var(--k)) 1}
.st-teen.play .leaf{animation:dr-slide calc(500ms*var(--k)) var(--e-glide) calc(500ms*var(--k)) forwards}
.st-teen.play .still{animation:dr-still calc(300ms*var(--k)) var(--ease-out) calc(500ms*var(--k)) forwards,dr-pushIn calc(900ms*var(--k)) var(--e-film) calc(750ms*var(--k)) forwards}
.st-teen.play .bloom{animation:dr-bloom calc(800ms*var(--k)) var(--e-film) calc(800ms*var(--k)) forwards}
.st-teen.play .bar.t,.st-teen.play .bar.b{animation:dr-bars calc(500ms*var(--k)) var(--e-film) calc(450ms*var(--k)) forwards}
.st-teen.play .cut{animation:dr-fadeIn calc(80ms*var(--k)) linear calc(1680ms*var(--k)) forwards}
@keyframes dr-fadeIn{to{opacity:1}} @keyframes dr-fadeOut{to{opacity:0}}
@keyframes dr-glowPulse{50%{filter:brightness(1.18);transform:scale(1.03)}}
@keyframes dr-twinkle{50%{transform:scale(1.5);filter:brightness(1.6)}}
@keyframes dr-swing{to{transform:rotateY(-108deg)}}
@keyframes dr-peek{to{bottom:-8%}}
@keyframes dr-blink{50%{transform:scaleY(1)}}
@keyframes dr-wag{to{transform:rotate(18deg)}}
@keyframes dr-draw{to{stroke-dashoffset:0}}
@keyframes dr-motes{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(var(--mx,0px),-120px)}}
@keyframes dr-zoomThrough{to{transform:scale(3.2);opacity:0}}
@keyframes dr-keyglow{to{opacity:1;transform:translate(-50%,-50%) scale(1.4)}}
@keyframes dr-openL{to{transform:rotateY(-104deg)}} @keyframes dr-openR{to{transform:rotateY(104deg)}}
@keyframes dr-beams{0%{opacity:0;transform:rotate(-4deg)}60%{opacity:1}100%{opacity:.8;transform:rotate(3deg)}}
@keyframes dr-rise{0%{opacity:0;transform:translateY(10px) scale(.6)}35%{opacity:1}100%{opacity:0;transform:translateY(-140px) scale(1) rotate(90deg)}}
@keyframes dr-breezeFar{50%{transform:scale(1.3) translateX(-1.5%)}100%{transform:scale(1.22) translateX(0)}}
@keyframes dr-breezeNear{50%{transform:scale(1.2) translateX(3%) skewX(-1deg)}100%{transform:scale(1.1) translateX(0)}}
@keyframes dr-leak{to{transform:translateX(80%)}}
@keyframes dr-flicker{0%{opacity:.5}25%{opacity:0}50%{opacity:.35}75%{opacity:0}100%{opacity:0}}
@keyframes dr-slide{to{transform:translateX(101%)}}
@keyframes dr-still{to{opacity:1}}
@keyframes dr-pushIn{from{transform:scale(1.12)}to{transform:scale(1.0)}}
@keyframes dr-bloom{50%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.5;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes dr-bars{to{transform:translateY(0)}}
/* reduced motion: a simple 200ms fade, then go. No sparkles, motes, swings or zooms. */
@media (prefers-reduced-motion:reduce){
  .door-stage{transition:opacity 200ms} .door-stage.play *{animation:none!important}
  .door-stage.play .light{opacity:1}
  .door-stage.play .leaf,.door-stage.play .spark,.door-stage.play .mote,.door-stage.play .thread,.door-stage.play .bar,.door-stage.play .leak,.door-stage.play .gate,.door-stage.play .bloom,.door-stage.play .keyhole,.door-stage.play .nan{display:none}
  .door-stage.play .still,.door-stage.play .room{opacity:1;transform:none}
}

/* X1 2026-10-15 old iPad (no aspect-ratio): the door frames get the same height as their width */
@supports not (aspect-ratio:1){
  .st-littles .frame{height:min(72vw,360px)}
  .st-kids .frame{height:min(93.333vw,453.333px)}
}