/* ============================================================ gynny — motion layer "Monument" pacing: slow, long-travel, one direction. Elements rise and settle; nothing bounces or scales. Safety contract (inherited from nawa-website): the pre-hide state is armed ONLY when is present, which app.js sets and removes if the reveal observer never runs. So with JS off/broken, nothing is hidden. ============================================================ */ /* armed pre-hide: only while JS is confirmed alive */ /* `:not(.in)` keeps the pre-hide from ever competing with the reveal rule below on specificity — the two would otherwise tie and depend on order. */ .mjs [data-rv]:not(.in){opacity:0;transform:translateY(22px)} /* the revealed state */ [data-rv].in{ opacity:1;transform:none; transition:opacity .78s cubic-bezier(.22,.68,.24,1), transform .78s cubic-bezier(.22,.68,.24,1); } /* stagger children within one revealed group */ [data-rv].in > *{animation:rise .7s cubic-bezier(.22,.68,.24,1) backwards} [data-rv].in > *:nth-child(1){animation-delay:.02s} [data-rv].in > *:nth-child(2){animation-delay:.10s} [data-rv].in > *:nth-child(3){animation-delay:.18s} [data-rv].in > *:nth-child(4){animation-delay:.26s} [data-rv].in > *:nth-child(5){animation-delay:.34s} [data-rv].in > *:nth-child(6){animation-delay:.42s} @keyframes rise{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } /* hero: the headline arrives on load, not on scroll. NOTE the `:not(.in)` — without it this selector outranks the `[data-rv].in` reveal rule above (two classes + attribute beats one attribute + one class) and pins the hero at opacity:0 forever. */ .mjs .hero [data-rv]:not(.in){opacity:0} .hero [data-rv].in{transition-duration:.9s} /* rules draw themselves in rather than appearing */ .mjs [data-rule]:not(.in){transform:scaleX(0);transform-origin:left center} [dir="rtl"] .mjs [data-rule]{transform-origin:right center} [data-rule].in{transform:scaleX(1);transition:transform .9s cubic-bezier(.22,.68,.24,1)} @media (prefers-reduced-motion:reduce){ .mjs [data-rv],.mjs [data-rule]{opacity:1!important;transform:none!important} [data-rv].in > *{animation:none!important} }