/* ============================================================
   StoryFrame World — scroll snapping + section entrance motion
   ============================================================ */

/* ---- Full-page snap: a small scroll locks to the next section ---- */
/* Desktop only for now — mobile sections are taller than the viewport and
   will get their own treatment in the responsive pass. */
@media (min-width:701px){
  html{ scroll-snap-type:y mandatory; }
  /* min-height keeps every section at least viewport-tall so the next section
     never peeks at the bottom on screens taller than 16:9 (app.js grows the
     section backgrounds to fill the extra height). */
  #page > .frame{ scroll-snap-align:start; scroll-snap-stop:always; min-height:100vh; }
}

/* ---- Section entrance: content fades/rises as the section locks in ---- */
/* Every layer in a section animates EXCEPT the full-bleed backgrounds
   (.bg-cover, .hero-bg, <video>, .m-bg) and the accordion, which has its own
   staggered reveal. Hidden state only applies once JS adds .anim-ready, so
   without JS (or in print) everything stays visible. Gated on reduced-motion. */
@media (prefers-reduced-motion: no-preference) and (min-width:701px){
  body.anim-ready #page .stage > *:not(.bg-cover):not(.hero-bg):not(video):not(.m-bg):not(.accordion):not(.svc-acc):not(.m-cases),
  body.anim-ready #page .m-cases > *{
    transition: opacity .7s ease, transform .85s cubic-bezier(.2,.72,.2,1);
    will-change: opacity, transform;
  }
  body.anim-ready #page .frame:not(.in-view) > .stage > *:not(.bg-cover):not(.hero-bg):not(video):not(.m-bg):not(.accordion):not(.svc-acc):not(.m-cases),
  body.anim-ready #page .frame:not(.in-view) .m-cases > *{
    opacity:0; transform:translateY(34px);
  }
}