/* ==========================================================================
   Base: font, reset, typography, layout primitives, reveal motion
   ========================================================================== */

@font-face {
    font-family: "Inter";
    src: url("/public/fonts/inter-var-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Cross-document page transitions (progressive enhancement) */
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

main { flex: 1 0 auto; }

[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--c-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--c-primary-hover); }
p, li, dd { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
::selection { background: var(--c-lime-bright); color: #0f1b2d; }

:focus-visible {
    outline: 3px solid var(--c-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-sm);
    background: var(--c-text);
    color: var(--c-bg);
}
.skip-link:focus { top: var(--space-4); }

/* Reserve space for custom elements before they render */
app-header { display: block; min-height: var(--header-h); }
app-footer, app-cta { display: block; }

/* --- Layout ------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

.section { padding-block: var(--section); position: relative; }
.section--flush-top { padding-top: 0; }
.section--tint { background: var(--c-tint); }

/* --- Typography -------------------------------------------------------- */
.display {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    font-weight: 700;
}
.display--md { font-size: var(--fs-display-md); }
.h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
    font-weight: 700;
}
.h3 {
    font-size: var(--fs-h3);
    line-height: 1.3;
    letter-spacing: -0.015em;
    font-weight: 650;
}
.h4 {
    font-size: var(--fs-h4);
    line-height: 1.35;
    letter-spacing: -0.01em;
    font-weight: 650;
}
.lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--c-text-muted);
    max-width: 62ch;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-primary);
}
.eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-lime);
    box-shadow: 0 0 0 4px var(--c-lime-soft);
}
.note {
    font-size: var(--fs-small);
    color: var(--c-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Highlighted word: lime underline that draws in */
.hl {
    position: relative;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-image: linear-gradient(var(--c-lime-bright), var(--c-lime-bright));
    background-repeat: no-repeat;
    background-position: 0 98%;
    background-size: 100% 0.06em;
    animation: hl-draw 1.1s 0.5s var(--ease-out) both;
}
@keyframes hl-draw { from { background-size: 0 0.16em; } }

/* --- Reveal on scroll (JS adds .is-visible) --------------------------- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Hero copy is visible from the first paint (LCP); it only slides in */
.js .hero-copy > [data-reveal],
.js .page-hero .container > [data-reveal],
.js .page-hero-grid > div > [data-reveal],
.js .demo-intro > [data-reveal] {
    opacity: 1;
    transform: none;
    animation: hero-in 0.9s var(--ease-out) both;
}
.js [data-reveal]:nth-child(2) { --hero-d: 80ms; }
.js [data-reveal]:nth-child(3) { --hero-d: 160ms; }
.js [data-reveal]:nth-child(4) { --hero-d: 240ms; }
.js [data-reveal]:nth-child(n + 5) { --hero-d: 320ms; }
.js .hero-copy > [data-reveal], .js .page-hero [data-reveal], .js .demo-intro > [data-reveal] { animation-delay: var(--hero-d, 0s); }
@keyframes hero-in { from { transform: translateY(14px); } }

/* Split headline words (JS wraps words in .w) */
/* Words start muted (still readable, AA contrast) and light up in sequence */
[data-split] .w {
    display: inline-block;
    color: var(--c-text-muted);
    transform: translateY(0.25em);
    transition: color 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: calc(var(--i) * 45ms);
}
[data-split].is-visible .w { color: inherit; transform: none; }

/* --- Reduced motion: show final states, stop loops --------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
    [data-split] .w { color: inherit; transform: none; }
    @view-transition { navigation: none; }
}