/* ============================================================================
   EasyGovernance — marketing MOTION (entrances only)
   ----------------------------------------------------------------------------
   Dom, 23 Sep 2026: "gradual loading on the screen — not just dead elements
   sitting there." The rules this sheet keeps, from the positioning doc:
     · entrances only, once, short — nothing loops, nothing runs on a clock
     · visible at rest — every rule is gated on html.mk-motion, which
       marketing.js reveal() sets ONLY when JavaScript runs and the visitor has
       not asked for reduced motion, so a page with no script, a crawler, or a
       thumbnail sees every element in place
     · the hero rises on load, in reading order; everything else rises as it
       enters the viewport (.reveal → .in, the observer in marketing.js)
   Pair with marketing.js (EGMarketing.reveal()). No var() here on purpose —
   the sheet is loaded by pages on more than one token set.
   ========================================================================== */

@keyframes mk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* the hero, on load, in reading order */
html.mk-motion .hero>*{animation:mk-rise .7s cubic-bezier(.2,.6,.2,1) both}
html.mk-motion .hero>:nth-child(2){animation-delay:.09s}
html.mk-motion .hero>:nth-child(3){animation-delay:.18s}
html.mk-motion .hero>:nth-child(4){animation-delay:.27s}
html.mk-motion .hero>:nth-child(5){animation-delay:.36s}

/* everything below the fold, as it arrives: the block's children in order */
html.mk-motion .reveal>*{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
html.mk-motion .reveal>:nth-child(2){transition-delay:.08s}
html.mk-motion .reveal>:nth-child(3){transition-delay:.16s}
html.mk-motion .reveal>:nth-child(4){transition-delay:.24s}
html.mk-motion .reveal>:nth-child(n+5){transition-delay:.3s}
html.mk-motion .reveal.in>*{opacity:1;transform:none}

/* belt and braces: reveal() never sets the class under reduced motion, but a
   cached class must not outlive the preference */
@media(prefers-reduced-motion:reduce){
  html.mk-motion .hero>*,html.mk-motion .reveal>*{animation:none;transition:none;opacity:1;transform:none}
}
