/* Scroll reveal (site-interactions.js toggles .is-visible) */
.has-js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 560ms var(--ease-out),
        transform 560ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.has-js [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Keyboard navigation must never land on an invisible control. */
.has-js [data-reveal]:focus-within {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Flashcards keep their resting tilt when revealed */
.has-js .fc[data-reveal].is-visible:nth-child(odd) {
    transform: rotate(-0.5deg);
}

.has-js .fc[data-reveal].is-visible:nth-child(even) {
    transform: rotate(0.5deg);
}

.has-js .fc[data-reveal].is-visible:hover {
    transform: rotate(0deg) translateY(-3px);
    transition-delay: 0ms;
}

/* Hero load-in */
@keyframes ink-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-band > * {
    animation: ink-rise 600ms var(--ease-out) both;
}

.hero-band > *:nth-child(2) {
    animation-delay: 70ms;
}

.hero-band > *:nth-child(3) {
    animation-delay: 140ms;
}

.hero-band > *:nth-child(4) {
    animation-delay: 210ms;
}

.hero-band > *:nth-child(5) {
    animation-delay: 280ms;
}

/* Marker swipe on the hero highlight. The resting style is fully
   highlighted; the animation only draws the swipe in, so the phrase
   stays legible even if animations never run. */
@keyframes marker-swipe {
    from {
        background-size: 0% 100%;
    }
}

.hero-band .hl {
    background-repeat: no-repeat;
    animation: marker-swipe 700ms 400ms ease-out backwards;
}

.site-nav a {
    position: relative;
}

.site-nav a::after {
    background: var(--accent);
    bottom: -6px;
    content: "";
    height: 2px;
    inset-inline: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-change) var(--ease-out);
}

.site-nav a:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
}

.faq-list summary,
.language-directory > summary {
    transition: color var(--motion-fast) ease;
}

.faq-list summary:is(:hover, :focus-visible),
.language-directory > summary:is(:hover, :focus-visible) {
    color: var(--accent-deep);
}

/* Native disclosures keep their keyboard behavior and work without JS.
   Browsers without intrinsic-size transitions simply open them normally. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .faq-list details,
    .language-directory {
        interpolate-size: allow-keywords;
    }

    .faq-list details::details-content,
    .language-directory::details-content {
        block-size: 0;
        opacity: 0;
        overflow: clip;
        transition:
            block-size 300ms var(--ease-out),
            opacity 200ms ease,
            content-visibility 300ms allow-discrete;
    }

    .faq-list details[open]::details-content,
    .language-directory[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* The browser owns navigation, history and scroll restoration. */
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 180ms;
        animation-timing-function: ease-out;
    }

    @supports (animation-timeline: scroll()) {
        @keyframes reading-progress {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        .marketing-body .site-header::after {
            animation: reading-progress linear both;
            animation-timeline: scroll(root block);
            background: var(--accent);
            bottom: -2px;
            content: "";
            height: 2px;
            inset-inline: 0;
            pointer-events: none;
            position: absolute;
            transform-origin: left;
        }
    }
}