/* Prologic redesign - entrance and scroll-reveal animations (home page).
   Hidden start states apply only when JS has added .js-anim to <html> and the user
   has not asked for reduced motion, so content is always visible without JS.
   Reveals use `translate` (not `transform`) so hover transforms on the same elements keep working. */

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

    /* Hero entrance: artwork settles in, logo strip rises after it */
    html.js-anim [data-anim="hero-media"] {
        opacity: 0;
        scale: 1.03;
    }

    html.js-anim [data-anim="hero-strip"],
    html.js-anim [data-anim="hero-overlays"] {
        opacity: 0;
        translate: 0 16px;
    }

    html.js-anim [data-anim="hero-media"].is-in,
    html.js-anim [data-anim="hero-overlays"].is-in,
    html.js-anim [data-anim="hero-strip"].is-in {
        opacity: 1;
        scale: 1;
        translate: 0 0;
        transition: opacity 0.8s var(--ease-enter), scale 1.2s var(--ease-enter), translate 0.7s var(--ease-enter);
    }

    /* Stagger: artwork, then the brand lockup + labels (120ms), then the logo strip */
    html.js-anim [data-anim="hero-overlays"].is-in {
        transition-delay: 0.12s;
    }

    html.js-anim [data-anim="hero-strip"].is-in {
        transition-delay: 0.3s;
    }

    /* Section / block reveal */
    html.js-anim [data-anim="reveal"] {
        opacity: 0;
        translate: 0 24px;
    }

    /* The reveal transition replaces the element's own transition list, so hover properties
       (transform / box-shadow / colours) are listed again here without the reveal delay. */
    html.js-anim [data-anim="reveal"].is-in {
        opacity: 1;
        translate: 0 0;
        transition:
            opacity 0.6s var(--ease-enter) var(--anim-delay, 0ms),
            translate 0.6s var(--ease-enter) var(--anim-delay, 0ms),
            transform var(--dur-hover) var(--ease-out),
            box-shadow var(--dur-hover) var(--ease-out),
            background-color var(--dur-hover) var(--ease-out),
            color var(--dur-hover) var(--ease-out),
            gap var(--dur-hover) var(--ease-out);
    }

    /* Grids: children come in one after another (80ms apart) */
    html.js-anim [data-anim="stagger"] > * {
        opacity: 0;
        translate: 0 20px;
    }

    html.js-anim [data-anim="stagger"].is-in > * {
        opacity: 1;
        translate: 0 0;
        transition:
            opacity 0.6s var(--ease-enter) calc(var(--i, 0) * 80ms),
            translate 0.6s var(--ease-enter) calc(var(--i, 0) * 80ms),
            transform var(--dur-hover) var(--ease-out),
            box-shadow var(--dur-hover) var(--ease-out),
            background-color var(--dur-hover) var(--ease-out),
            color var(--dur-hover) var(--ease-out);
    }
}