/* ═══════════════════════════════════════════════════════════════════════════
   sk-motion.css — the scroll-reveal transition
   ───────────────────────────────────────────────────────────────────────────
   OWNS:      .sk-reveal and its stagger.
   REQUIRES:  sk-tokens.css.
   NEVER:     `!important`.

   landing.css disabled its reveal (`.animate-on-scroll`) entirely, with
   `!important` on every property, after four layered fixes failed to stop
   users seeing sections "oscillate" while scrolling. That rule is why this is
   a re-class rather than an override: `!important` cannot be beaten from a
   later file without one of our own, which the guardrail test forbids. Every
   template that used `.animate-on-scroll` now uses `.sk-reveal`; the old
   class and its disable rule are unused, left in landing.css per the
   project's retirement pattern.

   WHAT ACTUALLY CAUSED THE OSCILLATION
   landing.css's own diagnosis names four suspects: will-change GPU layer
   promotion, translateY reflow, "scroll-anchor interference". The most likely
   real cause is the third one. Scroll anchoring is the browser trying to keep
   whatever content sits under the viewport's top edge in place when layout
   shifts nearby; continuously toggling opacity/transform on elements near the
   viewport while the user is mid-scroll fights that mechanism, and the fight
   reads as the page moving on its own. `overflow-anchor: none` opts an
   element out of being an anchor candidate — it removes the interference at
   its source rather than working around the symptom, which four attempts at
   working around the symptom did not manage.

   HARDENED AGAINST THE OTHER TWO
   `will-change` is scoped to the moment of transition only (added just before
   the class flips, removed on transitionend) rather than sitting on every
   revealed element permanently as a compositor layer. The transform distance
   is 8px — small enough that even if a reflow ever did occur, it would not
   read as motion.
   ═══════════════════════════════════════════════════════════════════════════ */

.sk-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    /* The fix, not decoration — see header. */
    overflow-anchor: none;
}

.sk-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger for a grid of cards revealing together — a wall of items appearing
   in one instant reads as a layout jump; a few appearing a beat apart reads as
   a page settling into place. Caps at 6: a card grid past that count is
   already off-screen when the first one starts, so a further delay would just
   make the tail of a long list wait on an animation nobody benefits from. */
.sk-reveal[data-delay="1"] { transition-delay: 0ms; }
.sk-reveal[data-delay="2"] { transition-delay: 70ms; }
.sk-reveal[data-delay="3"] { transition-delay: 140ms; }
.sk-reveal[data-delay="4"] { transition-delay: 210ms; }
.sk-reveal[data-delay="5"] { transition-delay: 280ms; }
.sk-reveal[data-delay="6"] { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
    .sk-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}