/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL
   Site-wide entrance animation, matching the divcorporation.com motion:
   elements rise 34px and fade in once, then stay put. The hidden state is only
   ever applied when JS has confirmed it can un-hide them (html.js), so a
   script failure or JS-off browser shows the full page instead of a blank one.
═══════════════════════════════════════════════════════════════════════════ */

html.js .reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s cubic-bezier(.2, .65, .25, 1),
                transform .8s cubic-bezier(.2, .65, .25, 1);
    will-change: opacity, transform;
}

html.js .reveal.sl { transform: translateX(-64px); }
html.js .reveal.sr { transform: translateX(64px); }
html.js .reveal.su { transform: translateY(-26px); }
html.js .reveal.sz { transform: scale(.94); }

html.js .reveal.in { opacity: 1; transform: none; }

/* stagger — capped so long grids never feel slow */
html.js .reveal.d1 { transition-delay: .12s; }
html.js .reveal.d2 { transition-delay: .24s; }
html.js .reveal.d3 { transition-delay: .36s; }
html.js .reveal.d4 { transition-delay: .48s; }

section[id] { scroll-margin-top: 86px; }

/* Deep-link targets should not be stuck in the hidden state while the page
   scrolls to them. */
html.js :target.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html.js .reveal,
    html.js .reveal.sl,
    html.js .reveal.sr,
    html.js .reveal.su,
    html.js .reveal.sz {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}