/* =========================================================
   LUMINA3ai — design tokens and shared components
   Dark, blue-tinted, one accent. Five families, each with one job
   (a page or the whole site re-themes by overriding these):

     surfaces   --bg / --bg-panel / --bg-raised / --bg-deep
     labels     --label / --label-2 / --label-3 / --label-4
     structure  --separator* / --fill*
     accent     --accent (+ --accent-rgb, --accent-ink): the ONLY place the hue lives
     type       --fs-*, --tr-*, --lh-*  (size, tracking and leading are ONE decision per step)
     motion     --spring, --spring-bounce, --ease-out

   Fonts: Sora (display) / Figtree (body) / JetBrains Mono (labels, data, captions, maths)
   Khmer: Noto Sans Khmer (fallback in EVERY stack; see :lang(km) below)
   Page files: landing.css (index), about.css, feedback.css, lumina3.css (chat).
   ========================================================= */
:root {
    color-scheme: dark;

    /* ---- Surfaces: base, grouped content, raised above that. --bg-deep is a sunken well. ---- */
    --bg: #060b14;
    --bg-panel: #0b1523;
    --bg-raised: #122036;
    --bg-deep: #03060c;

    /* ---- Labels: text is coloured by ROLE, not by shade. Translucent, so it stays correct over
       tinted or blurred surfaces. Change --label-rgb alone to re-theme.
         --label    primary: titles, values, anything to read first
         --label-2  secondary: running text, descriptions            (>= 7:1 on every surface)
         --label-3  tertiary: metadata and captions                  (>= 4.5:1 on every surface)
         --label-4  quaternary: decoration and disabled only (~2.6:1), never essential text ---- */
    --label-rgb: 232 243 255;
    --label: rgb(var(--label-rgb));
    --label-2: rgb(var(--label-rgb) / 0.68);
    --label-3: rgb(var(--label-rgb) / 0.54);
    --label-4: rgb(var(--label-rgb) / 0.32);

    /* ---- Accent: one hue. Everything blue on the site derives from these. ---- */
    --accent: #38b6ff;
    --accent-rgb: 56 182 255;
    --accent-ink: #04121c; /* text on an accent fill */
    --accent-fill: rgb(var(--accent-rgb) / 0.12);
    --accent-line: rgb(var(--accent-rgb) / 0.4);

    /* ---- Structure ---- */
    --separator: rgb(var(--label-rgb) / 0.12);
    --separator-faint: rgb(var(--label-rgb) / 0.06);
    --fill: rgb(var(--label-rgb) / 0.07);
    --fill-2: rgb(var(--label-rgb) / 0.12);
    --fill-3: rgb(var(--label-rgb) / 0.18);
    --focus: var(--accent);
    --error: #ff7a7a;

    /* ---- Materials ---- */
    --nav-bg: rgb(6 11 20 / 0.7);
    --material: rgb(11 21 35 / 0.72);
    --scrim: rgb(2 5 10 / 0.6);
    --shadow-sheet: -30px 0 70px rgb(0 0 0 / 0.55);
    --shadow-lift: 0 18px 50px rgb(0 0 0 / 0.35);

    /* ---- Shape ---- */
    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;
    --radius-pill: 999px;
    --edge: 1px solid var(--separator);

    /* ---- Type: the only sizes in use. Tracking tightens as size grows and loosens as it
       shrinks, so a step is picked, never hand-tuned: no raw letter-spacing anywhere.
       Rem, so layout follows the reader's text-size setting. ---- */
    --display: "Sora", "Noto Sans Khmer", sans-serif;
    --body: "Figtree", "Noto Sans Khmer", sans-serif;
    --mono: "JetBrains Mono", "Noto Sans Khmer", ui-monospace, monospace;

    /*                size                                   tracking     leading  */
    --fs-caption: 0.75rem;                                   --tr-caption: 0.03em;    --lh-caption: 1.5;
    --fs-small: 0.8125rem;                                   --tr-small: 0.02em;      --lh-small: 1.5;
    --fs-callout: 0.9375rem;                                 --tr-callout: 0.005em;   --lh-callout: 1.55;
    --fs-body: 1rem;                                         --tr-body: 0;            --lh-body: 1.6;
    --fs-lede: 1.125rem;                                     --tr-lede: -0.008em;     --lh-lede: 1.55;
    --fs-headline: 1.25rem;                                  --tr-headline: -0.012em; --lh-headline: 1.3;
    --fs-title-3: 1.5rem;                                    --tr-title-3: -0.016em;  --lh-title-3: 1.25;
    --fs-title-2: clamp(1.75rem, 3.4vw, 2.5rem);             --tr-title-2: -0.022em;  --lh-title-2: 1.15;
    --fs-title-1: clamp(1.875rem, 4.7vw, 3.5rem);            --tr-title-1: -0.026em;  --lh-title-1: 1.08;
    --fs-display: clamp(2.5rem, 6.2vw, 4.5rem);              --tr-display: -0.03em;   --lh-display: 1.04;

    /* ---- Motion ----
       Springs for anything a hand touches (press, hover, release). Critically damped
       (no overshoot) by default; --spring-bounce (damping 0.8) only where a gesture carried
       momentum. response 0.4s -> they settle in ~0.55s. Generated from the spring equation, not
       eyeballed; browsers without linear() get a close cubic-bezier.
       --ease-out is for one-shot reveals, which nobody can grab. */
    --spring: cubic-bezier(0.22, 1, 0.36, 1);
    --spring-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
    --spring-dur: 0.55s;
    --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);

    --nav-h: 3.75rem;
}

@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --spring: linear(0, 0.0166, 0.0587, 0.1166, 0.1834, 0.2542, 0.3256, 0.395, 0.4609, 0.5225, 0.5791, 0.6306, 0.6771, 0.7187, 0.7556, 0.7883, 0.8171, 0.8423, 0.8643, 0.8835, 0.9001, 0.9145, 0.9269, 0.9376, 0.9468, 0.9547, 0.9615, 0.9673, 0.9722, 0.9765, 0.9801, 0.9831, 0.9857, 0.9879, 0.9898, 0.9914, 0.9927, 0.9939, 0.9948, 0.9957, 0.9963, 0.9969, 0.9974, 0.9978, 1);
        --spring-bounce: linear(0, 0.0156, 0.0565, 0.1149, 0.1846, 0.2606, 0.3391, 0.4171, 0.4923, 0.5633, 0.629, 0.689, 0.7427, 0.7903, 0.8319, 0.8678, 0.8984, 0.9241, 0.9455, 0.963, 0.9772, 0.9883, 0.997, 1.0035, 1.0082, 1.0115, 1.0136, 1.0147, 1.0152, 1.015, 1.0145, 1.0136, 1.0126, 1.0115, 1.0103, 1.0091, 1.0079, 1.0068, 1.0058, 1.0049, 1.0041, 1.0033, 1.0027, 1.0021, 1);
    }
}

/* Khmer: no negative or positive tracking (it breaks cluster shaping), and taller leading for the
   script's tall vowels and subscripts. Setting the tokens means every type step follows. */
:lang(km) {
    --tr-caption: 0; --tr-small: 0; --tr-callout: 0; --tr-body: 0; --tr-lede: 0;
    --tr-headline: 0; --tr-title-3: 0; --tr-title-2: 0; --tr-title-1: 0; --tr-display: 0;
    --lh-callout: 1.8; --lh-body: 1.85; --lh-lede: 1.8; --lh-headline: 1.5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Form controls ignore the page font by default; this keeps Khmer (and Figtree) in buttons and inputs */
button,
input,
textarea,
select {
    font-family: inherit;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    /* The canvas is never the default white, even mid page-swap (see Page transitions). */
    background-color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* One-shot animations and transitions collapse to near-instant. Nothing here may loop:
       infinite animations are switched off outright where they are defined. */
    * {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    background: var(--bg);
    color: var(--label);
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    /* light-on-dark text renders heavier on macOS by default: this is what native apps do */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* headings break evenly, running text avoids a one-word last line */
h1,
h2,
h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

::selection {
    background: rgb(var(--accent-rgb) / 0.35);
}

/* one focus ring everywhere: keyboard users only, never on mouse press */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.wrap {
    max-width: 70rem;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ---------------- Section scaffolding ---------------- */
section {
    padding: 7rem 0;
    /* Scenes move things past the edge (the hero halo swells, side panels slide in). `body { overflow-x:
       hidden }` is not enough on Chrome for Android: it widens the layout viewport to fit the overflow,
       which zooms the page out (the nav shrinks) and shows a phantom horizontal scrollbar. `clip`
       (not `hidden`) trims it without making the section a scroll container, so the walkthrough's
       sticky stage keeps working. */
    overflow-x: clip;
}

section.flush {
    padding-top: 0;
}

/* Labels, captions and data are set in the mono: a small uppercase tag, in the accent when it names
   something and in --label-3 when it only annotates (see .noteLabel, .paperTag). */
.eyebrow {
    font-family: var(--mono);
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    text-transform: uppercase;
    color: var(--accent);
    display: inline-block;
}

.eyebrow a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sectionHead {
    margin-bottom: 3.5rem;
    max-width: 38rem;
}

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

.sectionLede {
    color: var(--label-2);
    margin-top: 1rem;
    font-size: var(--fs-lede);
    line-height: var(--lh-lede);
    letter-spacing: var(--tr-lede);
}

/* ---------------- Nav: a translucent layer, content scrolls beneath it ---------------- */
#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--nav-h);
    padding: 0.625rem 2rem;
    background: var(--nav-bg);
    /* saturate keeps the accent alive under the blur */
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    border-bottom: var(--edge);
}

#navLogo {
    flex-shrink: 0;
    display: block;
}

#navLogo img {
    height: 2.5rem;
    width: auto;
    max-width: none;
}

#navLinks {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

#navLinks a {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
    color: var(--label-2);
    white-space: nowrap;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

#navLinks a:focus-visible,
#navLinks a.active,
#navLinks a[aria-current="page"] {
    color: var(--label);
}

#navLinks a.active,
#navLinks a[aria-current="page"] {
    border-bottom-color: var(--accent);
}

#navLinks a:active {
    opacity: 0.55;
    transition-duration: 0.09s;
}

@media (hover: hover) {
    #navLinks a:hover {
        color: var(--label);
    }
}

/* the one filled item in the nav */
#navLinks a.navCta {
    color: var(--accent-ink);
    background: var(--accent);
    font-weight: 500;
    padding: 0.4375rem 1rem;
    border-radius: var(--radius-pill);
    border: 0;
    transition: transform var(--spring-dur) var(--spring), filter 0.25s ease;
}

#navLinks a.navCta:active {
    transform: scale(0.96);
    opacity: 1;
    filter: brightness(0.85);
    transition-duration: 0.09s;
    transition-timing-function: ease-out;
}

@media (hover: hover) {
    #navLinks a.navCta:hover {
        color: var(--accent-ink);
        filter: brightness(0.92);
    }
}

#navLinks a.navCta[aria-current="page"] {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent-line);
}

.menuToggle {
    display: none;
}

@media (max-width: 900px) {
    #navLinks {
        gap: 1.25rem;
    }
}

/* Materials degrade to solid surfaces for people who ask for it. */
@media (prefers-reduced-transparency: reduce) {
    #nav {
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    :root {
        --label-2: rgb(var(--label-rgb) / 0.86);
        --label-3: rgb(var(--label-rgb) / 0.72);
        --separator: rgb(var(--label-rgb) / 0.4);
        --nav-bg: var(--bg);
        --material: var(--bg-panel);
    }

    #nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ---------------- Buttons ---------------- */
.btn {
    font-family: var(--body);
    font-weight: 500;
    font-size: var(--fs-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
}

.btn-ghost {
    background: transparent;
    border-color: var(--separator);
    color: var(--label);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
}

/* ---- Press feedback ----
   Everything pressable answers on touch-DOWN, not on release: it shrinks at once, then springs
   back (critically damped) however early the finger lifts, so a press is always interruptible.
   Hover is a fill, and only on devices that can hover, so touch screens never get a stuck state.
   Scenes use the individual translate/scale properties, so a pressable may carry one. */
.btn,
#navLogo {
    transition:
        transform var(--spring-dur) var(--spring),
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        filter 0.25s ease,
        opacity 0.25s ease;
}

.promptChip {
    /* no opacity here: a scene drives it per frame */
    transition:
        transform var(--spring-dur) var(--spring),
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.btn:active,
#navLogo:active,
.promptChip:active {
    transform: scale(0.97);
    transition-duration: 0.09s;
    transition-timing-function: ease-out;
}

.btn-ghost:active,
.promptChip:active {
    background-color: var(--fill-2);
}

.btn-primary:active {
    filter: brightness(0.85);
}

@media (hover: hover) {
    .btn-ghost:hover {
        background-color: var(--fill);
        border-color: var(--label-4);
    }

    .btn-primary:hover {
        filter: brightness(0.92);
    }
}

.btn:disabled {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {

    .btn:active,
    #navLogo:active,
    .promptChip:active,
    #navLinks a.navCta:active {
        transform: none;
        opacity: 0.7;
    }
}

/* ---------------- Motion: entrance and scroll reveal ---------------- */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }

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

/* ---------------- Motion: scroll scenes (script.js: data-scene) ----------------
   [data-scene="from to"] gets --e (0..1) from script.js: 0 when the element's top is at `from` of the
   viewport height, 1 when it has climbed to `to`. It is a position, not an event, so it plays both
   ways, and the value is a critically damped spring chasing the scroll (response 0.32s), so it follows
   the scroll 1:1 but a wheel notch or anchor jump eases in. Nothing locks the scroll.
   --e defaults to 1, the FINISHED state: no JS and reduced motion (where the engine does nothing)
   see the finished design. The individual translate / scale / opacity properties are read, never
   `transform`, so press and hover transforms still compose. Phones keep the same scenes (they are
   cheap) but with less travel; heavy ones are switched off at 860px and below (see landing.css). */
[data-scene] {
    --e: 1;
}

/* a heading block: eyebrow, title and lede rise by different amounts, so they arrive in sequence */
.sectionHead.sceneHead .eyebrow {
    display: inline-block;
    opacity: clamp(0, calc(var(--e) * 2.4), 1);
    translate: 0 calc((1 - var(--e)) * 0.75rem);
}

.sectionHead.sceneHead .sectionTitle {
    opacity: clamp(0, calc(var(--e) * 1.8), 1);
    translate: 0 calc((1 - var(--e)) * 1.5rem);
}

.sectionHead.sceneHead .sectionLede {
    opacity: clamp(0, calc((var(--e) - 0.15) * 1.8), 1);
    translate: 0 calc((1 - var(--e)) * 2.25rem);
}

/* a block that rises a little */
.sceneRise {
    opacity: clamp(0, calc(var(--e) * 1.6), 1);
    translate: 0 calc((1 - var(--e)) * 2rem);
}

/* a card or panel that grows slightly as it arrives */
.sceneGrow {
    opacity: clamp(0, calc(var(--e) * 1.6), 1);
    translate: 0 calc((1 - var(--e)) * 1.5rem);
    scale: calc(0.95 + 0.05 * var(--e));
}

/* a panel that closes in from a side (--dir: -1 left, 1 right); vertical on phones */
.sceneSide {
    opacity: clamp(0, calc(var(--e) * 1.6), 1);
    translate: calc((1 - var(--e)) * var(--dir, 0) * 3.5rem) calc((1 - var(--e)) * 1.25rem);
    scale: calc(0.96 + 0.04 * var(--e));
}

@media (max-width: 860px) {
    .sceneSide {
        translate: 0 calc((1 - var(--e)) * 2rem);
    }
}

/* ---------------- Shared components ---------------- */
.inlineLink {
    color: var(--accent);
    border-bottom: 1px solid var(--accent-line);
    transition: border-color 0.25s ease;
}

@media (hover: hover) {
    .inlineLink:hover {
        border-bottom-color: var(--accent);
    }
}

.extLink::after {
    content: " ↗";
}

/* a quiet note: label + text, no box-in-a-box */
.noteBox {
    border-left: 2px solid var(--accent-line);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 2rem 0 0;
    font-size: var(--fs-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
    color: var(--label-2);
}

.noteBox .noteLabel {
    font-family: var(--mono);
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    text-transform: uppercase;
    color: var(--accent);
    display: block;
    margin-bottom: 0.25rem;
}

.article p {
    color: var(--label-2);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    margin-bottom: 1.25rem;
    max-width: 38rem;
}

.article p:first-child {
    color: var(--label);
}

/* grouped surface */
.panel {
    position: relative;
    background: var(--bg-panel);
    border: var(--edge);
    border-radius: var(--radius-l);
}

/* ---------------- Inner-page header ---------------- */
section.pageHead {
    padding: 9rem 0 3.5rem;
}

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

.pageHead .wrap>*:nth-child(1) {
    animation-delay: 0.05s;
}

.pageHead .wrap>*:nth-child(2) {
    animation-delay: 0.15s;
}

.pageHead .wrap>*:nth-child(3) {
    animation-delay: 0.26s;
}

.pageTitle {
    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: 0.75rem 0 1.25rem;
}

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

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

/* ---------------- Closing call to action ---------------- */
.ctaPanel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    background: var(--bg-panel);
    border: var(--edge);
    border-radius: var(--radius-l);
    padding: clamp(1.75rem, 4vw, 3rem);
    width: calc(100% - 4rem);
    max-width: 66rem;
}

#cta .sectionTitle {
    margin-top: 0;
}

#cta .sectionLede {
    margin-top: 0.5rem;
}

.ctaRow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ---------------- Footer ---------------- */
footer {
    overflow-x: clip;
    border-top: var(--edge);
    padding: 3rem 0;
}

.footRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.footLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
    color: var(--label-2);
}

@media (hover: hover) {
    .footLinks a:hover {
        color: var(--label);
    }
}

.footNote {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
    color: var(--label-3);
}

/* ---------------- Mobile menu (switches earlier than the other phone tweaks, so the nav never gets squeezed) ---------------- */
.hamburger {
    display: none;
}

@media (max-width: 780px) {
    #navLinks {
        position: fixed;
        top: 0;
        right: 0;
        width: min(17.5rem, 82vw);
        height: 100vh;
        height: 100dvh;
        background: var(--bg-deep);
        flex-direction: column;
        align-items: flex-start;
        padding: 6.25rem 1.75rem;
        gap: 1.625rem;
        border-left: var(--edge);
        /* the drawer arrives from the right and leaves to the right */
        transform: translateX(100%);
        opacity: 0;
        filter: blur(10px);
        visibility: hidden;
        transition:
            transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease,
            filter 0.35s ease,
            visibility 0s linear 0.45s;
    }

    #navLinks a {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
        letter-spacing: var(--tr-body);
    }

    .menuToggle:checked~#navLinks {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
        visibility: visible;
        box-shadow: var(--shadow-sheet);
        transition:
            transform 0.65s var(--ease-out),
            opacity 0.45s ease,
            filter 0.6s ease,
            visibility 0s;
    }

    #navLinks li {
        opacity: 0;
        transform: translateX(1.625rem);
        filter: blur(6px);
        transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    }

    .menuToggle:checked~#navLinks li {
        opacity: 1;
        transform: none;
        filter: blur(0);
        transition: opacity 0.6s ease, transform 0.7s var(--ease-out), filter 0.6s ease;
    }

    .menuToggle:checked~#navLinks li:nth-child(1) { transition-delay: 0.14s; }
    .menuToggle:checked~#navLinks li:nth-child(2) { transition-delay: 0.20s; }
    .menuToggle:checked~#navLinks li:nth-child(3) { transition-delay: 0.26s; }
    .menuToggle:checked~#navLinks li:nth-child(4) { transition-delay: 0.32s; }
    .menuToggle:checked~#navLinks li:nth-child(5) { transition-delay: 0.38s; }
    .menuToggle:checked~#navLinks li:nth-child(6) { transition-delay: 0.44s; }

    /* page behind: dimmed by a scrim and softly blurred; scrolling locked */
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 90;
        background: var(--scrim);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    body>:not(#nav):not(script):not(.pageVeil) {
        transition: filter 0.5s ease;
    }

    body:has(.menuToggle:checked) {
        overflow: hidden;
    }

    body:has(.menuToggle:checked)::after {
        opacity: 1;
        pointer-events: auto;
    }

    body:has(.menuToggle:checked)>:not(#nav):not(script):not(.pageVeil) {
        filter: blur(5px);
    }

    .hamburger {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 8px 0;
        cursor: pointer;
        z-index: 200;
    }

    .hamburger span {
        width: 24px;
        height: 2px;
        background: var(--label);
        transform-origin: center;
        transition: transform 0.45s var(--ease-out), opacity 0.25s ease, background 0.3s ease;
    }

    .menuToggle:checked~.hamburger span {
        background: var(--accent);
    }

    .menuToggle:checked~.hamburger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menuToggle:checked~.hamburger span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .menuToggle:checked~.hamburger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 640px) {
    .wrap {
        padding: 0 1.25rem;
    }

    #nav {
        padding: 0.625rem 1.25rem;
    }

    section {
        padding: 4.5rem 0;
    }

    section.pageHead {
        padding: 7rem 0 2.5rem;
    }

    .ctaPanel {
        width: calc(100% - 2.5rem);
        padding: 1.75rem 1.375rem;
    }
}

@media (prefers-reduced-transparency: reduce) {
    body>:not(#nav):not(script):not(.pageVeil) {
        transition: none;
    }
}

/* ---------------- Page transitions ----------------
   Cross-document View Transitions: every page that links this file
   cross-fades to the next instead of hard-cutting. Browsers without
   support navigate normally; script.js adds a fade-to-dark fallback.
   vt.js (loaded early in <head>) is part of this: read its header before touching it. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* Keep the nav pinned in place during the transition. */
#nav {
    view-transition-name: siteNav;
}

/* Dark backdrop behind the transition snapshots, so fading pages never reveal white. */
::view-transition {
    background: var(--bg);
}

::view-transition-old(root),
::view-transition-new(root) {
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation: vtOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
    animation: vtIn 0.9s var(--ease-out) 0.12s both;
}

@keyframes vtOut {
    to {
        opacity: 0;
        filter: blur(6px);
        transform: scale(0.98);
    }
}

@keyframes vtIn {
    from {
        opacity: 0;
        filter: blur(6px);
        transform: scale(1.02);
    }
}

/* Fallback veil (see script.js) */
.pageVeil {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--bg-deep);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.pageVeil.active {
    opacity: 1;
    pointer-events: all;
}