/* =====================================================================
   Woulfe's K9 — Reveal
   A shared entrance primitive. Depends on tokens.css.

   Usage
     <div data-wk9-reveal>…</div>                     fade + rise
     <div data-wk9-reveal="fade">…</div>              fade only
     <div data-wk9-reveal-stagger="80">…</div>        children, 80ms apart

   The .wk9-reveal class is added to <html> by reveal.js, so without
   JavaScript every element is simply visible — nothing is hidden by CSS
   that JavaScript then has to un-hide.
   ===================================================================== */

html.wk9-reveal [data-wk9-reveal] {
    opacity: 0;
    transform: translateY(var(--wk9-reveal-distance, 20px));
    transition:
        opacity var(--wk9-reveal-duration, 700ms) var(--k9-ease),
        transform var(--wk9-reveal-duration, 700ms) var(--k9-ease);
    transition-delay: var(--wk9-reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.wk9-reveal [data-wk9-reveal="fade"] {
    transform: none;
}

html.wk9-reveal [data-wk9-reveal="zoom"] {
    transform: scale(0.94);
}

html.wk9-reveal [data-wk9-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* Once it has played, stop claiming a compositor layer. */
html.wk9-reveal [data-wk9-reveal].is-settled {
    will-change: auto;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    html.wk9-reveal [data-wk9-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
}