/* ============================================================
   VOX DESIGN SYSTEM
   Derived from VOX-skill/references/style-presets.md
   ("Documentary Vox / Newsprint Collage") and
   VOX-skill/references/vox-prompt-pack.md (Component Zoo,
   Motion Thumbnails, and Section F "cutting on twos").

   Loaded AFTER styles.css — this layer overrides.
   Delete the <link> in index.html to revert everything.
   ============================================================ */

:root {
    /* ---- SURFACE ----
       Spec: "aged newsprint / archival-map surface, print grain,
       matte — never glossy." Ink base, paper panels on top. */
    --ink:        #12100c;
    --ink-raised: #1c1913;
    --ink-line:   #2b261c;
    --paper:      #e8e0cd;
    --paper-shade:#d7cbb0;
    --halftone:   #8c8778;

    /* ---- MATERIAL vs SIGNAL ----
       Gold is archival MATERIAL (wordmark, stamps, rules).
       Accent is the ONE hot SIGNAL — spec reserves it for
       stresses, underlines, arrows and hero numbers ONLY. */
    --gold:       #c9a227;
    --accent:     #e03131;
    --accent-deep:#b02525;

    /* Button fill. Brighter than --gold so it pops on ink (10.2:1 vs
       7.9:1) without touching the wordmark's archival gold. */
    --action:     #f0b429;

    /* ---- TYPE ----
       Spec: "condensed bold headline caps", "giant stat numbers
       treated as a hero character", "small annotation labels".
       Big type only — micro typography breaks. */
    --display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
    --body:    'Inter', system-ui, sans-serif;
    --archival:'Times New Roman', Times, serif;

    /* ---- MOTION: cutting on twos ----
       Spec Section F: step the framerate DOWN so motion reads
       hand-drawn, not computer-smooth.

       Tuned to ~18fps rather than a strict 12 — a straight 12fps
       (steps(7) over 0.55s) read as broken on screen rather than
       hand-drawn. Still visibly stepped, no longer strobing.
       Lower the step counts to make it choppier again. */
    --twos:      steps(10, end);  /* ~18fps over 0.55s — entrances */
    --twos-l:    steps(14, end);  /* ~17fps over 0.8s  — long reveals */
    --twos-fast: steps(5, end);   /* ~28fps over 0.18s — hovers */
    --threes:    steps(6, end);   /* ~11fps — decorative loops only */
}

/* ============================================================
   1. EYEBROW — the "annotation label" from the Component Zoo
   ============================================================ */
.vox-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--halftone);
    margin-bottom: 1.25rem;
}
.vox-eyebrow .fig {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.vox-eyebrow::after {
    content: '';
    width: 52px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}
/* Centred variant keeps a rule on both sides */
.text-center .vox-eyebrow::before,
.vox-eyebrow.center::before {
    content: '';
    width: 52px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}
.text-center .vox-eyebrow,
.vox-eyebrow.center {
    justify-content: center;
}

/* ============================================================
   2. HEADLINES — condensed bold caps
   ============================================================ */
.vox-h1,
.vox-h2 {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 0.95;
    margin-bottom: 1.25rem;
}
.vox-h1 { font-size: clamp(2.6rem, 8.5vw, 6.5rem); }
.vox-h2 { font-size: clamp(2rem, 5.5vw, 3.75rem); }

/* Accent underline swipe beneath a stressed word.
   Spec Component Zoo: "an underline in <accent> beneath a
   headline word". Motion Thumbnails: "accent underline swipes". */
.vox-swipe {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.vox-swipe::after {
    content: '';
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    bottom: 0.04em;
    height: 0.16em;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--twos) 0.25s;
}
.visible .vox-swipe::after,
.vox-swipe.visible::after {
    transform: scaleX(1);
}

/* Archival serif wordmark — gold is MATERIAL, not signal */
.vox-mark {
    font-family: var(--archival);
    font-style: italic;
    font-weight: 700;
    text-transform: none;
    color: var(--gold);
    letter-spacing: 0;
}

/* ============================================================
   3. HERO NUMBERS — "treated as a hero character"
   ============================================================ */
.vox-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
.text-center .vox-stat { align-items: center; }

.vox-stat-num {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(3.5rem, 9vw, 6rem);
    line-height: 0.82;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.vox-stat-label {
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--halftone);
    margin-top: 0.6rem;
}

/* ============================================================
   4. PAPER PANEL — the archival field a section sits on
   ============================================================ */
.vox-paper {
    position: relative;
    background: var(--paper);
    color: var(--ink);
    isolation: isolate;
}
/* Print grain + halftone dot texture, per the FINISH line */
.vox-paper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(18, 16, 12, 0.16) 1px, transparent 1.5px),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 5px 5px, 180px 180px;
    opacity: 0.5;
    mix-blend-mode: multiply;
}
.vox-paper > .container {
    position: relative;
    z-index: 2;
}

/* Torn edges where paper meets ink */
.vox-paper .torn {
    position: absolute;
    left: 0;
    width: 100%;
    height: 26px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.vox-paper .torn.top {
    top: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 9 L1160 16 L1120 6 L1080 17 L1040 8 L1000 18 L960 7 L920 16 L880 5 L840 17 L800 9 L760 18 L720 7 L680 16 L640 6 L600 17 L560 8 L520 18 L480 7 L440 16 L400 5 L360 17 L320 9 L280 18 L240 7 L200 16 L160 6 L120 17 L80 8 L40 18 L0 8 Z' fill='%2312100c'/%3E%3C/svg%3E");
}
.vox-paper .torn.bottom {
    bottom: -1px;
    transform: scaleY(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 10 L1156 17 L1112 7 L1068 18 L1024 8 L980 16 L936 6 L892 17 L848 9 L804 18 L760 7 L716 16 L672 5 L628 17 L584 8 L540 18 L496 7 L452 16 L408 6 L364 17 L320 9 L276 18 L232 7 L188 16 L144 6 L100 17 L56 8 L12 18 L0 9 Z' fill='%2312100c'/%3E%3C/svg%3E");
}

/* Type inside a paper panel flips to ink */
.vox-paper .vox-h2 { color: var(--ink); }
.vox-paper .vox-eyebrow { color: #6b6558; }
.vox-paper p { color: #4a4438; }

/* ============================================================
   5. CARD — halftone cutout logic: keyline + offset accent stroke
   Spec: "a rough white keyline and an offset <accent> stroke
   behind it. One construction logic throughout."
   Hard offset, zero blur — print, not glow.
   ============================================================ */
.vox-card {
    position: relative;
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: 1.75rem;
    text-align: left;
    box-shadow: 7px 7px 0 var(--ink);
    transition: transform 0.2s var(--twos-fast), box-shadow 0.2s var(--twos-fast);
}
.vox-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 12px 12px 0 var(--accent);
}
.vox-card h3 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.6rem;
}
.vox-card p {
    font-family: var(--body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: #4a4438;
    margin: 0;
}
/* Figure index in the corner, like a plate number */
.vox-card .plate {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    font-family: var(--display);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--accent);
}

/* ============================================================
   6. BUTTONS — flat print, no glow
   ============================================================ */
/* Gold fill, not accent. The spec reserves the hot accent for
   "stresses, underlines, arrows and hero numbers" — buttons are
   not on that list. Measured, red is also the WEAKER choice here:
   red-on-ink is 4.2:1 where gold is 7.9:1, and white-on-red is
   3.4:1, below the 4.5:1 AA floor. Red reads loud by hue, not by
   contrast.

   Buttons are surface-aware, because one fill cannot serve both
   substrates: amber on paper measures 1.4:1 (invisible), so paper
   panels get an ink fill instead — 14.5:1, the strongest contrast
   available on this palette. */
.vox-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2.25rem;
    border: 2px solid var(--ink);
    background: var(--action);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 6px 6px 0 var(--ink);
    transition: transform 0.18s var(--twos-fast), box-shadow 0.18s var(--twos-fast);
}
/* The one licensed use of the accent here: the arrow */
.vox-btn .arrow {
    color: var(--accent-deep);
    font-size: 0.9em;
    line-height: 1;
}
.vox-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 9px 9px 0 var(--ink);
}
.vox-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 1px 1px 0 var(--ink);
}
.vox-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* On an ink surface the keyline goes paper-coloured */
.vox-btn.on-ink {
    border-color: var(--paper);
    box-shadow: 6px 6px 0 var(--paper);
}
.vox-btn.on-ink .arrow { color: var(--ink); }
.vox-btn.on-ink:hover { box-shadow: 9px 9px 0 var(--paper); }
.vox-btn.on-ink:active { box-shadow: 1px 1px 0 var(--paper); }

/* On a paper panel the amber fill disappears into the substrate
   (1.4:1), so flip to an ink fill — 14.5:1. The offset shadow goes
   gold, which reads as a print misregistration rather than a
   drop shadow: on-style for a riso/collage surface. */
.vox-paper .vox-btn {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    box-shadow: 6px 6px 0 var(--gold);
}
.vox-paper .vox-btn .arrow { color: var(--action); }
.vox-paper .vox-btn:hover { box-shadow: 9px 9px 0 var(--gold); }
.vox-paper .vox-btn:active { box-shadow: 1px 1px 0 var(--gold); }

/* Secondary: outline only, no fill */
.vox-btn.ghost {
    background: transparent;
    color: var(--paper);
    border-color: var(--halftone);
    box-shadow: none;
}
.vox-btn.ghost:hover {
    border-color: var(--paper);
    color: #fff;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--halftone);
}

/* ============================================================
   7. MOTION — "cutting on twos"
   Spec Motion Thumbnails: "cutout springs up / counter ticks
   upward / accent underline swipes". Spec Section F: step the
   tween grid so it reads hand-drawn.

   Entrances and decorative loops are stepped.
   Hover/interaction stays smooth (spec: don't strobe legibility).
   ============================================================ */
@keyframes voxPop {
    0%   { opacity: 0; transform: translateY(26px) scale(0.97); }
    55%  { opacity: 1; transform: translateY(-7px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes voxSlideIn {
    0%   { opacity: 0; transform: translateX(-22px); }
    100% { opacity: 1; transform: translateX(0); }
}

.vox-pop  { opacity: 0; }
.vox-rise { opacity: 0; }

.vox-pop.visible {
    animation: voxPop 0.55s var(--twos) both;
}
.vox-rise.visible {
    animation: voxSlideIn 0.5s var(--twos) both;
}

/* Staggered entrances — spec calls for these explicitly */
.vox-stagger > *      { opacity: 0; }
.vox-stagger.visible > * { animation: voxPop 0.5s var(--twos) both; }
.vox-stagger.visible > *:nth-child(1) { animation-delay: 0.00s; }
.vox-stagger.visible > *:nth-child(2) { animation-delay: 0.07s; }
.vox-stagger.visible > *:nth-child(3) { animation-delay: 0.14s; }
.vox-stagger.visible > *:nth-child(4) { animation-delay: 0.21s; }
.vox-stagger.visible > *:nth-child(5) { animation-delay: 0.28s; }
.vox-stagger.visible > *:nth-child(6) { animation-delay: 0.35s; }

/* Step the existing site-wide reveal too, so old and new
   sections share one motion language during the rollout */
.animate-up {
    transition: opacity 0.5s var(--twos), transform 0.5s var(--twos);
}

@media (prefers-reduced-motion: reduce) {
    .vox-pop.visible,
    .vox-rise.visible,
    .vox-stagger.visible > * {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .vox-swipe::after { transition: none; transform: scaleX(1); }
}

/* ============================================================
   8. SECTION APPLICATIONS
   ============================================================ */

/* ---- HERO ---- */
.hero .vox-h1 {
    color: var(--paper);
}
.hero-stats {
    gap: 4rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    /* Needed once this flips to a column on mobile — without it the
       stats stretch full width and their flex-start alignment shoves
       the numbers to the left edge. */
    justify-content: center;
    align-items: center;
}
/* The hero is centre-aligned, so its stats are too */
.hero .vox-stat {
    align-items: center;
    text-align: center;
}
.hero .hero-content p {
    font-size: 1.1rem;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    color: #a8a191;
}

/* ---- PAPER PANELS ----
   Deliberately only 3 of the 13 sections. The ink/paper cut is a
   rhythm device — a title card against a document shot. Make every
   section paper and it stops reading as a cut at all.
   Spaced apart: Why choose (7) · Workflow (9) · FAQ (12). */

.why-choose.vox-paper,
.workflow-section.vox-paper,
.faq-section.vox-paper {
    padding: 6rem 0 7rem;
}

/* ---- WORKFLOW on paper: a printed process diagram ---- */
.workflow-section.vox-paper .workflow-step {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: 7px 7px 0 var(--ink);
    padding: 3rem 1.75rem 1.75rem;
    transition: transform 0.2s var(--twos-fast), box-shadow 0.2s var(--twos-fast);
}
.workflow-section.vox-paper .workflow-step:hover {
    transform: translate(-3px, -3px);
    box-shadow: 12px 12px 0 var(--accent);
}
.workflow-section.vox-paper .workflow-step h3 {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.15rem;
    color: var(--ink);
}
.workflow-section.vox-paper .workflow-step p {
    color: #4a4438;
}
/* Step number: ink disc, paper numeral — no neon glow */
.workflow-section.vox-paper .step-circle {
    background: var(--ink);
    color: var(--paper);
    border-radius: 0;
    width: 46px;
    height: 46px;
    font-family: var(--display);
    font-weight: 700;
    box-shadow: none;
    border: 2px solid var(--ink);
    top: -24px;
}
/* Connector becomes a dashed survey rule.
   Excluded from the stagger — it's a rule, not a card, and counting
   it as child 1 would offset every step's delay. */
.workflow-section.vox-paper .workflow-line {
    background: none;
    border-top: 2px dashed rgba(18, 16, 12, 0.35);
    height: 0;
    top: 0;
}
.workflow-grid.vox-stagger > .workflow-line {
    opacity: 1;
    animation: none;
}
.workflow-section.vox-paper .icon-box {
    filter: grayscale(1);
    opacity: 0.75;
}

/* ---- FAQ on paper: an index of questions ---- */
.faq-section.vox-paper .faq-item {
    border-bottom: 2px solid rgba(18, 16, 12, 0.18);
}
.faq-section.vox-paper .faq-question {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 1.35rem 0;
}
.faq-section.vox-paper .faq-question .plus {
    color: var(--accent);
    font-family: var(--display);
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 1rem;
}
.faq-section.vox-paper .faq-answer {
    color: #4a4438;
    font-size: 0.98rem;
    padding-bottom: 1.4rem;
    max-width: 62ch;
}
.why-choose .features-grid {
    gap: 1.5rem;
    margin-top: 3.5rem;
}
/* The old per-card neon colour classes are inert on paper */
.vox-card.color-yellow,
.vox-card.color-purple,
.vox-card.color-teal,
.vox-card.color-pink,
.vox-card.color-blue,
.vox-card.color-green {
    background: var(--paper);
}

/* ---- Section-closing CTAs ---- */
.tutorial-cta,
.workflow-cta,
.showcase-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 3.5rem;
    text-align: center;
}
.tutorial-cta-note,
.workflow-cta-note,
.showcase-cta-note {
    font-family: var(--display);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--halftone);
}
/* On the paper panel the note needs ink contrast, not halftone grey */
.vox-paper .workflow-cta-note {
    color: #6b6558;
}
.workflow-cta {
    margin-top: 4rem;
}
/* .showcase-row already carries an 8rem bottom margin — adding the
   shared 3.5rem on top would double the gap. */
.showcase-cta {
    margin-top: 0;
}

/* ---- DEMO VIDEO PLAY OVERLAY ----
   Nothing autoplays; playback starts on this click, which is what
   permits sound. Gold plate + ink triangle matches .vox-btn — gold
   is the action material, no glow. */
.vox-play {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 0;
    background: rgba(18, 16, 12, 0.42);
    border: none;
    cursor: pointer;
    font-family: var(--display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper);
    transition: background 0.2s var(--twos-fast), opacity 0.2s var(--twos-fast);
}
.vox-play:hover {
    background: rgba(18, 16, 12, 0.22);
}
.vox-play:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -6px;
}

/* Square gold plate with an ink triangle */
.vox-play .tri {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    background: var(--gold);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 rgba(18, 16, 12, 0.8);
    transition: transform 0.18s var(--twos-fast), box-shadow 0.18s var(--twos-fast);
}
.vox-play .tri::before {
    content: '';
    margin-left: 5px;
    border-left: 17px solid var(--ink);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}
.vox-play:hover .tri {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 rgba(18, 16, 12, 0.8);
}
.vox-play:active .tri {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 rgba(18, 16, 12, 0.8);
}

/* Hidden while playing — the native controls take over */
.vox-play.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The first frame sits behind the overlay rather than a black box */
.demo-videos .video-wrapper video {
    background: #000;
}

@media (max-width: 768px) {
    .vox-play { font-size: 0.58rem; letter-spacing: 0.15em; gap: 0.7rem; }
    .vox-play .tri { width: 46px; height: 46px; }
    .vox-play .tri::before {
        border-left-width: 13px;
        border-top-width: 8px;
        border-bottom-width: 8px;
    }
    .vox-eyebrow { letter-spacing: 0.2em; font-size: 0.65rem; }
    .vox-eyebrow::after,
    .text-center .vox-eyebrow::before { width: 28px; }
    .hero-stats { gap: 2rem; }
    .vox-card { padding: 1.35rem; box-shadow: 5px 5px 0 var(--ink); }
    .vox-btn { font-size: 0.85rem; padding: 0.9rem 1.4rem; letter-spacing: 0.1em; }
    .why-choose.vox-paper { padding: 4rem 0 4.5rem; }
}