/* Motion for argentosims.com.
 *
 * The site was entirely static: every section arrived fully formed, nothing responded to the
 * cursor, and the only thing that moved was the page scrolling. This adds the smallest set of
 * primitives that fixes that without turning a government-facing site into a showreel.
 *
 * Two rules it keeps to:
 *
 *   1. Nothing here moves layout. Every animation is opacity and transform only, so a reveal
 *      cannot reflow text under a reader's cursor or shift a link as it is being clicked.
 *   2. prefers-reduced-motion wins, completely. Not "a shorter animation" — no animation, with
 *      every element at its final state. A reader who has asked their OS for stillness gets a
 *      page identical to the old one.
 *
 * Classes are applied by sims-motion.js rather than written into the markup, so pages stay
 * readable and a page nobody has touched still animates. Opt a section out with data-no-motion.
 */

/* ── scroll reveal ──────────────────────────────────────────────────── */

.sims-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
                transform .55s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--sims-delay, 0ms);
    will-change: opacity, transform;
}

.sims-reveal.sims-in {
    opacity: 1;
    transform: none;
}

/* The hero is above the fold: it animates on load rather than on scroll, and it starts from
   closer in so the first thing a visitor sees is not a long slide. */
.sims-reveal-hero {
    opacity: 0;
    transform: translateY(10px);
    animation: sims-hero-in .7s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: var(--sims-delay, 0ms);
}

@keyframes sims-hero-in {
    to { opacity: 1; transform: none; }
}

/* ── hover ──────────────────────────────────────────────────────────── */

/* Cards lift and deepen their shadow. The transform is tiny on purpose: enough to register as a
   response, not enough to make a grid feel springy when the cursor crosses it. */
.sims-lift {
    transition: transform .25s cubic-bezier(.22, .61, .36, 1),
                box-shadow .25s cubic-bezier(.22, .61, .36, 1);
}

.sims-lift:hover,
.sims-lift:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.75rem rgba(10, 22, 40, .16) !important;
}

/* Images inside a figure that is itself inside a lifting card: a slow, contained zoom.
   overflow:hidden on the figure keeps it from spilling over the card's rounded corner. */
.sims-zoom {
    overflow: hidden;
}

.sims-zoom > img {
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.sims-lift:hover .sims-zoom > img,
.sims-zoom:hover > img {
    transform: scale(1.035);
}

/* ── counters ───────────────────────────────────────────────────────── */

/* Tabular figures so a counting number does not change width as it runs. */
[data-sims-count] {
    font-variant-numeric: tabular-nums;
}

/* ── the one piece of ambient motion ────────────────────────────────── */

/* A slow drift across the dark hero gradients. Twenty-four seconds is deliberately below the
   threshold where it reads as "something is moving" — it should only register if you look. */
.sims-drift {
    background-size: 100% 100%, 112% 112%;
    animation: sims-drift 24s ease-in-out infinite alternate;
}

@keyframes sims-drift {
    from { background-position: 0 0, 48% 50%; }
    to   { background-position: 0 0, 52% 50%; }
}

/* ── stillness, when asked for ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .sims-reveal,
    .sims-reveal-hero {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .sims-lift,
    .sims-zoom > img {
        transition: none !important;
    }

    .sims-lift:hover,
    .sims-lift:focus-within {
        transform: none !important;
    }

    .sims-lift:hover .sims-zoom > img,
    .sims-zoom:hover > img {
        transform: none !important;
    }

    .sims-drift {
        animation: none !important;
    }
}