/* ─────────────────────────────────────────────────────────────────────
   Operforma — marketing entrance motion (shared across the web surface)
   Ported from the design system: ui_kits/marketing/marketing.css (824–862)
   + preview/spacing-motion-entrance.html. The one sanctioned transform —
   an opacity-led single-axis rise, played once.

   Safety model (do not weaken):
   • The hidden state lives ONLY inside `prefers-reduced-motion: no-preference`
     AND is gated on `html.mk-anim`, which the inline head guard sets pre-paint
     only when motion is allowed. So reduced-motion users and the no-JS / no-CSS
     fallback always see fully-rendered content.
   • reveal.js only toggles `.is-visible`. It never hides anything.
   • `html.mk-shown` is a 2s self-heal: if reveal.js never runs, force-show.
   ───────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {

  /* ── Hidden states (apply at first paint via head-set html.mk-anim) ── */

  /* Hero children — larger, slower beat-in on load */
  html.mk-anim .mk-section--hero > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }

  /* Lower sections (landing) + essay blocks — smaller, quicker rise on scroll */
  html.mk-anim main > .mk-section:not(.mk-section--hero),
  html.mk-anim .essay > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }

  /* Internal cascade — list rows lift in sequence once their section shows */
  html.mk-anim main > .mk-section .mk-how > li,
  html.mk-anim main > .mk-section .mk-who > li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* ── Revealed states (reveal.js adds .is-visible) ── */

  html.mk-anim .mk-section--hero > *.is-visible,
  html.mk-anim main > .mk-section.is-visible,
  html.mk-anim .essay > *.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Hero child stagger — eyebrow → headline → subhead → CTA */
  html.mk-anim .mk-section--hero > *:nth-child(1).is-visible { transition-delay: 0.12s; }
  html.mk-anim .mk-section--hero > *:nth-child(2).is-visible { transition-delay: 0.23s; }
  html.mk-anim .mk-section--hero > *:nth-child(3).is-visible { transition-delay: 0.34s; }
  html.mk-anim .mk-section--hero > *:nth-child(4).is-visible { transition-delay: 0.45s; }
  html.mk-anim .mk-section--hero > *:nth-child(5).is-visible { transition-delay: 0.56s; }

  /* Row cascade within a revealed section */
  html.mk-anim main > .mk-section.is-visible .mk-how > li,
  html.mk-anim main > .mk-section.is-visible .mk-who > li {
    opacity: 1;
    transform: none;
  }
  html.mk-anim .mk-section.is-visible :is(.mk-how > li, .mk-who > li):nth-child(1) { transition-delay: 0.06s; }
  html.mk-anim .mk-section.is-visible :is(.mk-how > li, .mk-who > li):nth-child(2) { transition-delay: 0.14s; }
  html.mk-anim .mk-section.is-visible :is(.mk-how > li, .mk-who > li):nth-child(3) { transition-delay: 0.22s; }
  html.mk-anim .mk-section.is-visible :is(.mk-how > li, .mk-who > li):nth-child(4) { transition-delay: 0.30s; }
  html.mk-anim .mk-section.is-visible :is(.mk-how > li, .mk-who > li):nth-child(5) { transition-delay: 0.38s; }
  html.mk-anim .mk-section.is-visible :is(.mk-how > li, .mk-who > li):nth-child(6) { transition-delay: 0.46s; }

  /* ── Self-heal: if reveal.js never runs, force everything visible ── */
  html.mk-shown .mk-section--hero > *,
  html.mk-shown main > .mk-section,
  html.mk-shown main > .mk-section .mk-how > li,
  html.mk-shown main > .mk-section .mk-who > li,
  html.mk-shown .essay > * {
    opacity: 1 !important;
    transform: none !important;
  }
}