/* ===========================================================================
   motion.css — the "wow", controlled. transform/opacity only, 150–300ms via
   tokens, fully neutralised under prefers-reduced-motion. Behaviours are added
   by JS toggling classes/attrs on data-* hooks (no inline handlers). Full TB.6
   catalogue: reveal (staggered), sticky-header, media-zoom, media-duotone,
   marquee, counter, progress-bar, toc, view-transitions. The 3 motion profiles
   (calm/editorial/energetic) set the --t-motion-* tokens; the compiler gates
   which behaviours are assembled per profile allow-list.
   =========================================================================== */

/* ── Reveal on scroll (staggered) ────────────────────────────────────────── */
[data-reveal-group] {
    opacity: 0;
    transform: translateY(var(--t-motion-distance, 20px));
    transition: opacity var(--t-motion-base, 250ms) var(--t-motion-ease, ease),
                transform var(--t-motion-base, 250ms) var(--t-motion-ease, ease);
    transition-delay: calc(var(--reveal-i, 0) * var(--t-motion-stagger, 70ms));
    will-change: opacity, transform;
}

/* A section that has no explicit groups reveals itself as one unit. */
[data-reveal]:not(:has([data-reveal-group])) {
    opacity: 0;
    transform: translateY(var(--t-motion-distance, 20px));
    transition: opacity var(--t-motion-base, 250ms) var(--t-motion-ease, ease),
                transform var(--t-motion-base, 250ms) var(--t-motion-ease, ease);
}

[data-reveal].is-visible [data-reveal-group],
[data-reveal].is-visible:not(:has([data-reveal-group])) {
    opacity: 1;
    transform: none;
}

/* ── Micro-interactions (WOW Pack D) — opt-in hooks, pure CSS, no behaviour ──
   [data-lift]      a card/tile that rises on hover, with the shadow deepening to
                    the skin's own tint (--t-shadow-hover). transform + shadow only.
   [data-underline] a link whose underline grows from the start edge (RTL-safe:
                    it is anchored with logical inset, not left/right).
   Both are inert until an author adds the attribute, and both are neutralised in
   the reduced-motion block at the end of this file. ───────────────────────── */
[data-lift] {
    transition: transform var(--t-motion-base, 250ms) var(--t-motion-ease, ease),
                box-shadow var(--t-motion-base, 250ms) var(--t-motion-ease, ease);
}

[data-lift]:hover,
[data-lift]:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--t-shadow-lg);
}

[data-underline] {
    position: relative;
}

[data-underline]::after {
    content: "";
    position: absolute;
    inset-block-end: -2px;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--t-motion-fast, 150ms) var(--t-motion-ease, ease);
}

[data-underline]:hover::after,
[data-underline]:focus-visible::after {
    transform: scaleX(1);
}

/* ── Sticky-header elevation on scroll ───────────────────────────────────── */
[data-header] {
    transition: box-shadow var(--t-motion-base, 250ms) var(--t-motion-ease, ease),
                background-color var(--t-motion-base, 250ms) var(--t-motion-ease, ease);
}

[data-header].is-stuck {
    box-shadow: var(--t-shadow-sm);
}

/* ── media-zoom: hover scale on framed media ─────────────────────────────── */
[data-zoom] {
    overflow: hidden;
}

[data-zoom] img {
    transition: transform var(--t-motion-slow, 400ms) var(--t-motion-ease, ease);
}

[data-zoom]:hover img,
[data-zoom]:focus-within img {
    transform: scale(1.05);
}

/* ── media-duotone: tint media toward the brand colour ───────────────────── */
[data-duotone] {
    position: relative;
    isolation: isolate;
}

[data-duotone] img {
    filter: grayscale(1) contrast(1.05);
}

[data-duotone]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--t-primary);
    mix-blend-mode: color;
    opacity: 0.55;
    pointer-events: none;
}

/* ── marquee: seamless horizontal scroll (author duplicates the track) ───── */
[data-marquee] {
    overflow: hidden;
}

[data-marquee] .marquee__track {
    display: flex;
    inline-size: max-content;
    animation: t-marquee 30s linear infinite;
}

[data-marquee]:hover .marquee__track {
    animation-play-state: paused;
}

@keyframes t-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── progress-bar: reading progress (JS sets --progress 0..1) ─────────────── */
.article__progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    block-size: 3px;
    background: var(--t-border);
}

.article__progress > span {
    display: block;
    block-size: 100%;
    background: var(--t-primary);
    transform: scaleX(var(--progress, 0));
    transform-origin: left center;
}

[dir="rtl"] .article__progress > span {
    transform-origin: right center;
}

/* ── toc: auto table of contents (JS-built; hidden until it has items) ────── */
.article__toc {
    margin-block-end: var(--t-space-xl);
    padding: var(--t-space-md) var(--t-space-lg);
    background: var(--t-surface-alt);
    border-radius: var(--t-radius-md);
}

.article__toc-title {
    margin: 0 0 var(--t-space-xs);
    font-family: var(--t-font-mono);
    font-size: var(--t-step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-text-muted);
}

.toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--t-space-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.toc__item--h3 {
    padding-inline-start: var(--t-space-md);
}

.toc__link {
    color: var(--t-text-secondary);
    text-decoration: none;
    transition: color var(--t-motion-fast, 150ms) var(--t-motion-ease, ease);
}

.toc__link:hover,
.toc__link[aria-current="true"] {
    color: var(--t-accent-text);
}

/* ── view-transitions: cross-document (MPA) transition styling ────────────── */
/* The cross-document navigation enable at-rule is appended by the compiler only
   when the motion profile allows it; these rules only STYLE the transition and
   are inert without it. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--t-motion-base, 250ms);
    animation-timing-function: var(--t-motion-ease, ease);
}

/* ── Reduced motion: neutralise everything ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-reveal-group],
    [data-reveal]:not(:has([data-reveal-group])) {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    [data-header] {
        transition: none;
    }

    [data-zoom] img {
        transition: none;
    }

    [data-zoom]:hover img,
    [data-zoom]:focus-within img {
        transform: none;
    }

    [data-marquee] .marquee__track {
        animation: none;
    }

    /* WOW Pack D: micro-interactions collapse to an instant, still state. The
       lift keeps its shadow change (a colour swap is not motion) but never moves. */
    [data-lift] {
        transition: none;
    }

    [data-lift]:hover,
    [data-lift]:focus-within {
        transform: none;
    }

    [data-underline]::after {
        transition: none;
    }

    .toc__link {
        transition: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* view-transitions enabled by the motion profile */
@view-transition { navigation: auto; }