/* ==========================================================================
   scrollcraft — device rules only
   --------------------------------------------------------------------------
   The [data-sc-*] rules the engine drives, and nothing else. Ported verbatim
   from tk-scroll.css so a page that wants the engine does not also have to
   ship the homepage's declared-mode board. Both files must stay in step; this
   half is the mechanism and is not themed per page.
   ========================================================================== */

:root {
    --tk-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================================================== DEVICES ==
   Driven by the engine. Do not restyle these from page CSS.               */

.sc-act--pinned { position: relative; }

[data-sc-stage] {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: clip;
    z-index: 1;
    display: flex;
    align-items: center;
}

/* Cue pre-paint state. The engine writes opacity and transform inline; this is
   what the element looks like before the first read(), so nothing flashes. */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* Kinetic split. Descenders live below the baseline and a mask clipped to the
   line box eats the tails off g, y, p and j, so the line buys them room back. */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* Horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* Reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* Flow reveal, fires once on entry */
[data-sc-in],
[data-sc-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 620ms var(--tk-ease-out), transform 620ms var(--tk-ease-out);
}
[data-sc-in].sc-in,
[data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* Pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }

/* Anything that counts or tabulates holds its column width while digits change */
:where(.sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    /* Fewer and gentler, not zero: opacity still carries comprehension, every
       position change is dropped. */
    [data-sc-in],
    [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
    [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
    [data-sc-reveal] { clip-path: none !important; }
}