/* =========================================================
   LUMINA3ai — landing page (index.html)
   Builds on style.css tokens. Nothing here hard-codes a colour, a type size or a spring.
   The page has two signature moments, both honest about being illustrations:
     1. the logo (the only glowing object) tilts toward the pointer on a spring
     2. the pinned worked-solution scene: ∫ 2x dx solves itself as you scroll
   Everything else moves on scroll scenes (style.css "Motion", script.js): --e is 0..1 per element,
   read through translate / scale / opacity. Scene map, top to bottom:
     hero      halo and mark expand outward and the copy drifts up as you scroll away (desktop only)
     facts     rules draw across, staggered; "3,000+" counts up once its tile has settled
     features  each rule draws across, then number, title and text arrive in turn
     mission   quote closes in from the left, article from the right
     prompts   chips grow in, row by row
     how       the model wordmark expands, table and note rise
   ========================================================= */

/* ---------------- Hero ---------------- */
#hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + 4rem) 0 5rem;
}

.heroGrid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: center;
    width: 100%;
}

.heroCopy>* {
    opacity: 0;
    animation: rise 0.85s var(--ease-out) forwards;
}

.heroCopy>*:nth-child(1) { animation-delay: 0.05s; }
.heroCopy>*:nth-child(2) { animation-delay: 0.15s; }
.heroCopy>*:nth-child(3) { animation-delay: 0.26s; }
.heroCopy>*:nth-child(4) { animation-delay: 0.38s; }
.heroCopy>*:nth-child(5) { animation-delay: 0.48s; }

.heroTitle {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
    margin: 1rem 0 1.5rem;
}

.heroTitle em {
    font-style: normal;
    color: var(--accent);
}

.heroSub {
    color: var(--label-2);
    font-size: var(--fs-lede);
    line-height: var(--lh-lede);
    letter-spacing: var(--tr-lede);
    max-width: 28rem;
    margin-bottom: 2rem;
}

.heroMeta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.75rem;
    color: var(--label-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
}

/* a static status mark, not a pulse */
.heroMeta::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--accent);
}

/* The logo is the one glowing thing on the site. The glow lives here and in the image itself. */
.heroMark {
    position: relative;
    display: grid;
    place-items: center;
    opacity: 0;
    animation: rise 1s var(--ease-out) 0.2s forwards;
    /* scene on #hero: --e is 1 at rest and falls to 0 as the hero scrolls away (the mark swells) */
    scale: calc(1 + (1 - var(--e)) * 0.12);
}

.heroCopy {
    translate: 0 calc((1 - var(--e)) * -2.5rem);
}

.heroMark::before {
    content: "";
    position: absolute;
    inset: -12%;
    background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.2), transparent);
    pointer-events: none;
    /* the halo expands outward and thins as you scroll */
    scale: calc(1 + (1 - var(--e)) * 1.1);
    opacity: var(--e);
}

/* --rx/--ry/--tx/--ty are written by script.js from a spring that chases the pointer */
.heroSymbol {
    position: relative;
    width: min(100%, 26rem);
    height: auto;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), 0);
    will-change: transform;
}

/* ---------------- Facts ---------------- */
.factGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 2rem;
}

.fact {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 1.5rem 0;
}

/* the rule draws across from the left as the tile arrives */
.fact::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--separator);
    transform-origin: left;
    scale: var(--e) 1;
}

.fact>* {
    opacity: clamp(0, calc((var(--e) - 0.1) * 1.8), 1);
    translate: 0 calc((1 - var(--e)) * 0.875rem);
}

.factValue {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-title-3);
    line-height: var(--lh-title-3);
    letter-spacing: var(--tr-title-3);
}

.factLabel {
    font-family: var(--mono);
    text-transform: uppercase;
    color: var(--label-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
}

/* ---------------- Worked-solution scene ----------------
   Default (no JS, small screens, reduced motion): a plain two-part layout with every line shown.
   script.js adds .live only when the pinned version fits and motion is allowed. */
.sceneGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.sceneSteps {
    list-style: none;
    display: grid;
    gap: 1.25rem;
    margin-top: 2.25rem;
}

.sceneStep {
    border-left: 2px solid var(--accent-line);
    padding-left: 1.25rem;
    transition: border-color 0.4s ease;
}

.sceneStep b {
    display: block;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    color: var(--label);
    transition: color 0.4s ease;
}

.sceneStep span {
    display: block;
    font-size: var(--fs-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
    color: var(--label-2);
    transition: color 0.4s ease;
}

.paper {
    margin: 0;
    padding: 1.75rem 2rem 1.5rem;
    background: var(--bg-panel);
    border: var(--edge);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-lift);
}

.paperProblem {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--separator);
}

.paperTag {
    font-family: var(--mono);
    text-transform: uppercase;
    color: var(--label-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
}

.paperMath {
    font-family: var(--mono);
    font-size: var(--fs-title-3);
    line-height: var(--lh-title-3);
    letter-spacing: var(--tr-title-3);
    color: var(--label);
}

.paperLine {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--separator-faint);
}

.paperNum {
    color: var(--label-3);
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    transition: color 0.4s ease;
}

.paperLine[data-active] .paperNum {
    color: var(--accent);
}

.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    font-size: 0.8em;
    line-height: 1.15;
}

.frac> :first-child {
    padding: 0 0.3em;
    border-bottom: 1px solid currentColor;
}

.tick {
    color: var(--accent);
}

.paperNote {
    margin-top: 1.25rem;
    font-family: var(--mono);
    color: var(--label-3);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
}

/* ---- live: pinned and scroll-linked ----
   Each line's --s (0..1) is written by script.js as it scrolls; the lines resolve out of a soft
   blur. Captions dim until their step is reached, but never below --label-3 (still readable). */
.scene.live {
    padding: 0;
}

.scene.live .sceneTrack {
    height: 320vh;
}

.scene.live .sceneStage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
    padding-top: var(--nav-h);
}

.scene.live .sceneGrid {
    width: 100%;
}

.scene.live .paperLine {
    opacity: var(--s, 0);
    transform: translateY(calc((1 - var(--s, 0)) * 0.75rem));
    filter: blur(calc((1 - var(--s, 0)) * 4px));
    will-change: opacity, transform;
}

.scene.live .sceneStep:not([data-active]) {
    border-left-color: var(--separator);
}

.scene.live .sceneStep:not([data-active]) b,
.scene.live .sceneStep:not([data-active]) span {
    color: var(--label-3);
}

/* ---------------- Features: a quiet ruled list, not cards ---------------- */
.featureList {
    list-style: none;
}

.featureRow {
    display: grid;
    grid-template-columns: 3.5rem 1fr 1.2fr;
    gap: 0.5rem 2rem;
    align-items: baseline;
    position: relative;
    padding: 2rem 0;
}

/* the rules (above each row, and below the last) draw across as the row arrives */
.featureRow::before,
.featureRow:last-child::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--separator);
    transform-origin: left;
    scale: var(--e) 1;
}

.featureRow:last-child::after {
    inset: auto 0 0;
}

.featureRow>* {
    opacity: clamp(0, calc((var(--e) - 0.1) * 2), 1);
    translate: 0 calc((1 - var(--e)) * 1rem);
}

.featureRow>:nth-child(2) {
    opacity: clamp(0, calc((var(--e) - 0.2) * 2), 1);
    translate: 0 calc((1 - var(--e)) * 1.5rem);
}

.featureRow>:nth-child(3) {
    opacity: clamp(0, calc((var(--e) - 0.3) * 2), 1);
    translate: 0 calc((1 - var(--e)) * 2rem);
}

.featureNum {
    font-family: var(--mono);
    color: var(--label-3);
    font-size: var(--fs-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
}

.featureRow h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-headline);
    line-height: var(--lh-headline);
    letter-spacing: var(--tr-headline);
}

.featureRow p {
    color: var(--label-2);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    max-width: 34rem;
}

/* ---------------- Mission ---------------- */
.missionGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.pullQuote {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-title-1);
    line-height: var(--lh-title-1);
    letter-spacing: var(--tr-title-1);
    margin-top: 1rem;
}

.pullQuote em {
    font-style: normal;
    color: var(--accent);
}

/* ---------------- Prompts ---------------- */
.promptGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.promptCol {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.promptLabel {
    font-family: var(--mono);
    text-transform: uppercase;
    color: var(--label-3);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
}

.promptChip {
    display: block;
    background: var(--bg-panel);
    border: var(--edge);
    border-radius: var(--radius-m);
    padding: 1rem 1.25rem;
    font-size: var(--fs-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
}

@media (hover: hover) {
    .promptChip:hover {
        background-color: var(--bg-raised);
        border-color: var(--label-4);
    }
}

/* ---------------- How it works ---------------- */
.paramTable {
    width: 100%;
    max-width: 40rem;
    border-collapse: collapse;
}

.paramTable th,
.paramTable td {
    padding: 1rem 0;
    text-align: left;
    border-top: var(--edge);
    font-size: var(--fs-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
}

.paramTable tr:last-child th,
.paramTable tr:last-child td {
    border-bottom: var(--edge);
}

.paramTable th {
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    text-transform: uppercase;
    width: 9rem;
    font-weight: 400;
    color: var(--label-3);
}

.paramTable td {
    color: var(--label);
}

.paramTable td.hi {
    color: var(--accent);
    font-weight: 500;
}

#how .noteBox {
    max-width: 40rem;
}

/* The model name as a large, muted wordmark. Luna is a dusty purple-pink; it lives here as a local
   token so the site's one accent stays blue. 85% keeps it above 4.5:1 on --bg. */
.modelMark {
    --luna-rgb: 196 148 214;
    margin-bottom: 2rem;
    /* scene: the wordmark expands out of the left edge, a big backdrop-like element on scroll */
    transform-origin: left center;
    scale: calc(0.88 + 0.12 * var(--e));
    opacity: clamp(0, calc(var(--e) * 1.6), 1);
    color: rgb(var(--luna-rgb) / 0.85);
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 56rem) {
    .heroGrid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    #hero {
        min-height: 0;
    }

    /* the mark leads, small, so the headline stays above the fold */
    .heroMark {
        order: -1;
        justify-self: start;
    }

    .heroSymbol {
        width: 8rem;
    }

    .heroMark::before {
        inset: -30%;
    }

    .factGrid {
        grid-template-columns: 1fr 1fr;
    }

    .sceneGrid,
    .missionGrid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 45rem) {
    .promptGrid {
        grid-template-columns: 1fr;
    }

    .featureRow {
        grid-template-columns: 2.5rem 1fr;
    }

    .featureRow p {
        grid-column: 2;
    }

    .paper {
        padding: 1.25rem 1.25rem 1.25rem;
    }

    .paperMath {
        font-size: var(--fs-headline);
        line-height: var(--lh-headline);
        letter-spacing: var(--tr-headline);
    }
}

@media (max-width: 30rem) {
    .factGrid {
        grid-template-columns: 1fr;
    }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {

    /* the logo rests, the hero fades in, the scene is static (script.js never adds .live) */
    .heroSymbol {
        transform: none;
    }
}