/* ═══════════════════════════════════════════════════════════════════
   VELNOR · THE LISTENING ENGINE
   Scroll-driven cinematic narrative for the landing page.
   Scoped under body.listening-engine. Dark shell, lilac accent.
   ═══════════════════════════════════════════════════════════════════ */

body.listening-engine {
    --ink: #ebebeb;
    --ink-strong: #050507;
    --ink-dim: rgba(235, 235, 235, 0.72);
    --ink-quiet: rgba(235, 235, 235, 0.52);
    --ink-faint: rgba(235, 235, 235, 0.14);
    --paper: #0d0d0f;
    --paper-lift: #1a1b1e;
    --paper-warm: #141416;
    --paper-line: rgba(255, 255, 255, 0.10);
    --paper-line-soft: rgba(255, 255, 255, 0.06);
    --accent: #a97de0;
    --accent-hover: #b892ea;
    --accent-soft: #d4bef0;
    --accent-deep: #694d92;
    --accent-wash: rgba(169, 125, 224, 0.10);
    --accent-line: rgba(169, 125, 224, 0.28);
    --mint: #4ab08a;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-prose: 'Outfit', system-ui, sans-serif;
    --font-mono: 'Outfit', system-ui, sans-serif;
    --font-editorial: 'Outfit', system-ui, sans-serif;

    background: var(--paper) !important;
    color: var(--ink);
    font-family: var(--font-prose);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    background: #0a0a0c;
}

/* Kill the landing-home cream overlay inherited from the legacy stylesheet. */
body.listening-engine::before {
    display: none !important;
}

body.listening-engine .narrative {
    background: var(--paper);
    color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────
   NAVIGATION · wordmark + minimal links, no theme toggle
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   GLOBAL BRANDING
   ───────────────────────────────────────────────────────────────── */
/* Handled in style.css */

/* ─────────────────────────────────────────────────────────────────
   LEFT RAIL · persistent scroll position readout
   ───────────────────────────────────────────────────────────────── */

.listening-engine .narrative-rail {
    position: fixed;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.listening-engine.rail-visible .narrative-rail { opacity: 1; }
.listening-engine .rail-index {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}
.listening-engine .rail-track {
    display: block;
    width: 2px;
    height: 220px;
    background: var(--ink-faint);
    position: relative;
    overflow: hidden;
}
.listening-engine .rail-fill {
    position: absolute;
    inset: 0 0 auto 0;
    background: var(--accent);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.listening-engine .rail-label {
    max-width: 120px;
    line-height: 1.4;
}

@media (max-width: 960px) { .listening-engine .narrative-rail { display: none; } }

/* ─────────────────────────────────────────────────────────────────
   GLOBAL CANVAS · waveform backdrop
   ───────────────────────────────────────────────────────────────── */

.listening-engine .narrative-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.listening-engine.canvas-visible .narrative-canvas { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────
   SCENE SHELL
   ───────────────────────────────────────────────────────────────── */

.listening-engine .narrative {
    position: relative;
    z-index: 2;
}

.listening-engine .scene {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0;
}
.listening-engine .scene-shell {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 60px;
}
@media (max-width: 720px) {
    .listening-engine .scene-shell { padding: 0 24px; }
    .listening-engine .scene { padding: 96px 0; }
}

.listening-engine .scene-chrome {
    position: absolute;
    top: -60px;
    left: 60px;
    right: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}
@media (max-width: 720px) {
    .listening-engine .scene-chrome { left: 24px; right: 24px; top: -40px; font-size: 10px; }
}
.listening-engine .scene-tag { color: var(--ink); }
.listening-engine .scene-timecode { color: var(--ink-quiet); }

.listening-engine .scene-kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 24px;
}

.listening-engine h1,
.listening-engine h2,
.listening-engine h3 {
    font-family: var(--font-display);
    color: var(--ink);
}

.listening-engine em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

/* ═════════════════════════════════════════════════════════════════
   SCENE 00 · ARRIVAL
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .scene-arrival {
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.listening-engine .arrival-stack {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    padding: 140px 0 80px;
}
.listening-engine .arrival-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 48px;
    opacity: 1;
    animation: arrivalFade 1.6s 0.3s ease-out forwards;
}
.listening-engine .arrival-headline {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(52px, 8.6vw, 124px);
    line-height: 0.96;
    letter-spacing: -0.03em;
    margin: 0 0 48px;
    color: var(--ink);
    opacity: 1;
    animation: arrivalFade 1.6s 0.6s ease-out forwards;
}
.listening-engine .arrival-headline em {
    font-family: var(--font-editorial);
    font-weight: 300;
    font-style: italic;
    color: var(--accent);
    display: inline-block;
}
.listening-engine .arrival-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 600px;
    margin: 0 auto 64px;
    opacity: 1;
    animation: arrivalFade 1.6s 1.0s ease-out forwards;
}
.listening-engine .arrival-cursor {
    width: 2px;
    height: 42px;
    background: var(--accent);
    margin: 0 auto 80px;
    animation: cursorBlink 1.4s 1.4s infinite steps(2);
    opacity: 0;
}
.listening-engine .arrival-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    opacity: 1;
    animation: arrivalFade 1.6s 1.8s ease-out forwards, hintFloat 2.6s 3.4s ease-in-out infinite;
}

@keyframes arrivalFade {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes cursorBlink {
    0%, 50%  { opacity: 1; }
    51%, 100%{ opacity: 0; }
}
@keyframes hintFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

@media (max-width: 640px) {
    .listening-engine .arrival-stack {
        max-width: 100%;
        padding: 132px 0 72px;
    }

    .listening-engine .arrival-eyebrow {
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 36px;
        font-size: 9px;
        line-height: 1.5;
        letter-spacing: 0.18em;
    }

    .listening-engine .arrival-headline {
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 34px;
        font-size: clamp(34px, 10.5vw, 42px);
        letter-spacing: -0.02em;
    }

    .listening-engine .arrival-sub {
        max-width: 260px;
        margin-bottom: 56px;
        font-size: 15px;
        line-height: 1.5;
    }
}

/* ═════════════════════════════════════════════════════════════════
   SCENE 01 · LISTEN
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .listen-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 80px;
    align-items: start;
}
@media (max-width: 960px) {
    .listening-engine .listen-grid { grid-template-columns: 1fr; gap: 48px; }
}
.listening-engine .listen-copy h2 {
    font-weight: 300;
    font-size: clamp(38px, 5.4vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
}
.listening-engine .listen-copy p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-dim);
    max-width: 540px;
    margin: 0 0 40px;
}
.listening-engine .listen-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.listening-engine .listen-legend li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
}
.listening-engine .listen-legend em {
    font-family: var(--font-mono);
    font-style: normal;
    color: var(--ink-quiet);
    margin-left: auto;
    font-size: 12px;
}
.listening-engine .listen-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-faint);
    flex-shrink: 0;
}
.listening-engine .listen-legend .dot-dc    { background: #6f8fb5; }
.listening-engine .listen-legend .dot-noise { background: #8f6fb5; }
.listening-engine .listen-legend .dot-gain  { background: var(--accent); }

.listening-engine .listen-readout {
    background: var(--paper-lift);
    border: 1px solid var(--paper-line);
    border-radius: 4px;
    padding: 32px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.listening-engine .readout-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--paper-line-soft);
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
}
.listening-engine .readout-row:last-child { border-bottom: none; }
.listening-engine .readout-row em {
    font-family: var(--font-mono);
    font-style: normal;
    color: var(--ink);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
}

/* ═════════════════════════════════════════════════════════════════
   SCENE 02 · ANALYSE
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .analyse-stack { max-width: 880px; margin-bottom: 64px; }
.listening-engine .analyse-headline {
    font-weight: 300;
    font-size: clamp(44px, 6.6vw, 100px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
}
.listening-engine .analyse-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 620px;
}

.listening-engine .analyse-readouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--paper-line);
    border: 1px solid var(--paper-line);
    margin-bottom: 40px;
}
.listening-engine .readout-card {
    background: var(--paper-lift);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(14px);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.listening-engine .scene-analyse.is-visible .readout-card {
    transform: translateY(0);
    opacity: 1;
}
.listening-engine .scene-analyse.is-visible .readout-card[data-delay="0"] { transition-delay: 0.00s; }
.listening-engine .scene-analyse.is-visible .readout-card[data-delay="1"] { transition-delay: 0.08s; }
.listening-engine .scene-analyse.is-visible .readout-card[data-delay="2"] { transition-delay: 0.16s; }
.listening-engine .scene-analyse.is-visible .readout-card[data-delay="3"] { transition-delay: 0.24s; }
.listening-engine .scene-analyse.is-visible .readout-card[data-delay="4"] { transition-delay: 0.32s; }
.listening-engine .scene-analyse.is-visible .readout-card[data-delay="5"] { transition-delay: 0.40s; }
.listening-engine .scene-analyse.is-visible .readout-card[data-delay="6"] { transition-delay: 0.48s; }
.listening-engine .scene-analyse.is-visible .readout-card[data-delay="7"] { transition-delay: 0.56s; }

.listening-engine .readout-card .readout-k {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}
.listening-engine .readout-card .readout-v {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.listening-engine .readout-card .readout-v small {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-quiet);
    margin-left: 4px;
    font-weight: 400;
    letter-spacing: 0.06em;
}
.listening-engine .readout-card .readout-hint {
    font-size: 13px;
    color: var(--ink-dim);
    margin-top: 4px;
}

.listening-engine .analyse-footer {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    display: flex;
    align-items: center;
    gap: 14px;
}
.listening-engine .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulseDot 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulseDot {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50%      { opacity: 1; transform: scale(1.15); }
}

/* ═════════════════════════════════════════════════════════════════
   SCENE 03 · CONFIDENCE
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .confidence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
    margin-bottom: 60px;
}
@media (max-width: 960px) {
    .listening-engine .confidence-grid { grid-template-columns: 1fr; gap: 48px; }
}
.listening-engine .confidence-copy h2 {
    font-weight: 300;
    font-size: clamp(38px, 5.6vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
}
.listening-engine .confidence-copy p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-dim);
    max-width: 520px;
    margin: 0 0 36px;
}
.listening-engine .confidence-ladder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 440px;
}
.listening-engine .ladder-row {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 12px 0;
    border-top: 1px solid var(--paper-line-soft);
    font-family: var(--font-mono);
    font-size: 13px;
}
.listening-engine .ladder-row:first-child { border-top: none; }
.listening-engine .ladder-k {
    color: var(--accent);
    min-width: 76px;
    letter-spacing: 0.08em;
}
.listening-engine .ladder-v { color: var(--ink); }

.listening-engine .confidence-dials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 720px) {
    .listening-engine .confidence-dials { grid-template-columns: repeat(2, 1fr); }
}

.listening-engine .dial {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px;
    background: var(--paper-lift);
    border: 1px solid var(--paper-line);
    border-radius: 2px;
}
.listening-engine .dial-k {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    line-height: 1.2;
}
.listening-engine .dial-v {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.listening-engine .dial-bar {
    height: 2px;
    background: var(--ink-faint);
    position: relative;
    overflow: hidden;
    display: block;
}
.listening-engine .dial-bar-fill {
    position: absolute;
    inset: 0 100% 0 0;
    background: var(--accent);
    transition: right 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.listening-engine .confidence-result {
    display: inline-flex;
    align-items: baseline;
    gap: 20px;
    padding: 22px 28px;
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    border-radius: 2px;
}
.listening-engine .confidence-result-k {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}
.listening-engine .confidence-result-v {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 44px;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.listening-engine .confidence-result-state {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-dim);
    letter-spacing: 0.06em;
}

/* ═════════════════════════════════════════════════════════════════
   SCENE 04 · KICK-ANCHORED CROSSOVER
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .kick-stack { max-width: 880px; margin-bottom: 56px; }
.listening-engine .kick-headline {
    font-weight: 300;
    font-size: clamp(44px, 6.6vw, 100px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}
.listening-engine .kick-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 640px;
}

.listening-engine .kick-visual {
    position: relative;
    padding: 40px;
    border: 1px solid var(--paper-line);
    background: var(--paper-lift);
}
.listening-engine .kick-spectrum {
    position: relative;
    height: 260px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.listening-engine .kick-bar {
    flex: 1;
    min-width: 8px;
    height: var(--h);
    background: linear-gradient(to top, rgba(235, 235, 235, 0.22), rgba(235, 235, 235, 0.08));
    position: relative;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.listening-engine .scene-kick.is-visible .kick-bar {
    transform: scaleY(1);
}
.listening-engine .scene-kick.is-visible .kick-bar:nth-child(n) {
    transition-delay: calc(var(--i, 0) * 40ms);
}
.listening-engine .kick-bar-peak {
    background: linear-gradient(to top, var(--accent), var(--accent-soft)) !important;
}
.listening-engine .kick-peak-label {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--accent);
}
.listening-engine .kick-crossover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24.5%;
    width: 2px;
    opacity: 0;
    transition: opacity 0.7s ease 0.9s;
}
.listening-engine .scene-kick.is-visible .kick-crossover { opacity: 1; }
.listening-engine .kick-crossover-line {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        var(--mint) 0 6px,
        transparent 6px 12px
    );
}
.listening-engine .kick-crossover-label {
    position: absolute;
    top: -32px;
    left: 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mint);
    white-space: nowrap;
}

.listening-engine .kick-legend {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-dim);
}
.listening-engine .kick-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 12px;
    vertical-align: middle;
}
.listening-engine .kick-legend-dot-generic { background: rgba(235, 235, 235, 0.25); }
.listening-engine .kick-legend-dot-velnor { background: var(--accent); }

/* ═════════════════════════════════════════════════════════════════
   SCENE 05 · MASKING SUPPRESSION
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .masking-stack { max-width: 880px; margin-bottom: 48px; }
.listening-engine .masking-headline {
    font-weight: 300;
    font-size: clamp(40px, 6vw, 88px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}
.listening-engine .masking-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 640px;
}

.listening-engine .masking-bands {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 3px;
    height: 280px;
    margin-top: 40px;
    align-items: flex-end;
}
.listening-engine .bark-bar {
    height: 100%;
    background: var(--ink-faint);
    position: relative;
    transform-origin: bottom;
    transform: scaleY(0.12);
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), background 0.4s ease;
}
.listening-engine .scene-masking.is-visible .bark-bar {
    transform: scaleY(var(--amp, 0.35));
}
.listening-engine .bark-bar[data-state="passive"] { background: rgba(235, 235, 235, 0.14); }
.listening-engine .bark-bar[data-state="light"]   { background: rgba(74, 176, 138, 0.55); }
.listening-engine .bark-bar[data-state="active"]  { background: linear-gradient(to top, var(--accent), var(--accent-soft)); }

.listening-engine .masking-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-quiet);
}

.listening-engine .masking-legend {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-dim);
}
.listening-engine .masking-legend-sw {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
}
.listening-engine .masking-legend-sw-passive { background: rgba(235, 235, 235, 0.14); }
.listening-engine .masking-legend-sw-light   { background: rgba(74, 176, 138, 0.55); }
.listening-engine .masking-legend-sw-active  { background: var(--accent); }

/* ═════════════════════════════════════════════════════════════════
   SCENE 06 · TRANSIENT INTEGRITY
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .transient-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: center;
}
@media (max-width: 960px) {
    .listening-engine .transient-grid { grid-template-columns: 1fr; gap: 48px; }
}
.listening-engine .transient-copy h2 {
    font-weight: 300;
    font-size: clamp(38px, 5.4vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}
.listening-engine .transient-copy p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-dim);
    max-width: 520px;
    margin: 0 0 18px;
}
.listening-engine .transient-note {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-quiet);
    margin-top: 20px !important;
}
.listening-engine .transient-note .ref-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-line);
}

.listening-engine .transient-visual {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.listening-engine .transient-lane {
    background: var(--paper-lift);
    border: 1px solid var(--paper-line);
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.listening-engine .lane-k {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}
.listening-engine .lane-v {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-dim);
    margin-left: auto;
}
.listening-engine .transient-lane-guarded .lane-v { color: var(--accent); }
.listening-engine .lane-strip {
    height: 100px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.listening-engine .lane-peak {
    flex: 1;
    height: var(--h);
    background: var(--ink-faint);
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.listening-engine .transient-lane-guarded .lane-peak {
    background: linear-gradient(to top, var(--accent), var(--accent-soft));
}
.listening-engine .scene-transient.is-visible .lane-peak {
    transform: scaleY(1);
}
.listening-engine .scene-transient.is-visible .lane-peak:nth-child(1) { transition-delay: 0.00s; }
.listening-engine .scene-transient.is-visible .lane-peak:nth-child(2) { transition-delay: 0.08s; }
.listening-engine .scene-transient.is-visible .lane-peak:nth-child(3) { transition-delay: 0.16s; }
.listening-engine .scene-transient.is-visible .lane-peak:nth-child(4) { transition-delay: 0.24s; }
.listening-engine .scene-transient.is-visible .lane-peak:nth-child(5) { transition-delay: 0.32s; }
.listening-engine .scene-transient.is-visible .lane-peak:nth-child(6) { transition-delay: 0.40s; }
.listening-engine .scene-transient.is-visible .lane-peak:nth-child(7) { transition-delay: 0.48s; }

/* ═════════════════════════════════════════════════════════════════
   SCENE 07 · CODEC SURVIVAL
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .codec-stack { max-width: 900px; margin-bottom: 48px; }
.listening-engine .codec-headline {
    font-weight: 300;
    font-size: clamp(40px, 6vw, 92px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}
.listening-engine .codec-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 640px;
}

.listening-engine .codec-meters {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}
.listening-engine .codec-meter {
    display: grid;
    grid-template-columns: 280px 1fr 180px;
    gap: 28px;
    align-items: center;
    padding: 20px 24px;
    border: 1px solid var(--paper-line);
    background: var(--paper-lift);
}
@media (max-width: 720px) {
    .listening-engine .codec-meter {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.listening-engine .codec-meter-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.listening-engine .codec-meter-label span {
    color: var(--ink);
    letter-spacing: 0.02em;
}
.listening-engine .codec-meter-label em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}
.listening-engine .codec-meter-bar {
    height: 10px;
    background: var(--ink-faint);
    position: relative;
    overflow: hidden;
}
.listening-engine .codec-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(to right, var(--accent-deep), var(--accent));
    transition: width 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.listening-engine .scene-codec.is-visible .codec-meter-fill {
    width: var(--fill);
}
.listening-engine .codec-meter-fill-ok { background: var(--mint) !important; }
.listening-engine .codec-meter-ceiling {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: var(--ink);
    transform: translateX(-1px);
}
.listening-engine .codec-meter-v {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    color: var(--ink);
    text-align: right;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.listening-engine .codec-meter-v small {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-quiet);
    margin-left: 4px;
    font-weight: 400;
    letter-spacing: 0.08em;
}
.listening-engine .codec-meter-v-ok { color: var(--mint); }

.listening-engine .codec-footer {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-quiet);
    letter-spacing: 0.1em;
}

/* ═════════════════════════════════════════════════════════════════
   SCENE 08 · THE LEDGER — every stage
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .scene-ledger { padding: 160px 0; }
.listening-engine .ledger-stack { max-width: 880px; margin-bottom: 64px; }
.listening-engine .ledger-headline {
    font-weight: 300;
    font-size: clamp(42px, 6.2vw, 96px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}
.listening-engine .ledger-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 640px;
}

.listening-engine .ledger-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--paper-line);
}
.listening-engine .ledger-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 260px) minmax(0, 1fr) 120px;
    gap: 32px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--paper-line-soft);
    transition: background 0.25s ease, transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    transform: translateX(-12px);
}
.listening-engine .scene-ledger.is-visible .ledger-row {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(var(--i) * 22ms);
}
.listening-engine .ledger-row:hover {
    background: var(--paper-warm);
}
.listening-engine .ledger-n {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-quiet);
    letter-spacing: 0.08em;
}
.listening-engine .ledger-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.listening-engine .ledger-desc {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-dim);
    line-height: 1.5;
}
.listening-engine .ledger-flag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    text-align: right;
    justify-self: end;
}
.listening-engine .ledger-row-spotlight .ledger-name { color: var(--accent); }
.listening-engine .ledger-row-spotlight .ledger-n { color: var(--accent); }
.listening-engine .ledger-row-optin .ledger-name,
.listening-engine .ledger-row-optin .ledger-n {
    color: var(--ink-quiet);
    font-style: italic;
}
.listening-engine .ledger-row-optin .ledger-desc { color: var(--ink-quiet); }
.listening-engine .ledger-flag-optin { color: var(--accent) !important; }

@media (max-width: 720px) {
    .listening-engine .scene-ledger {
        padding: 112px 0;
    }

    .listening-engine .ledger-stack {
        margin-bottom: 40px;
    }

    .listening-engine .ledger-headline {
        font-size: clamp(36px, 11vw, 52px);
    }

    .listening-engine .ledger-sub {
        font-size: 15px;
        line-height: 1.55;
    }

    .listening-engine .ledger-list {
        display: grid;
        gap: 10px;
        border-top: 0;
    }

    .listening-engine .ledger-row {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px 14px;
        align-items: start;
        padding: 16px;
        border: 1px solid var(--paper-line-soft);
        background: rgba(255, 255, 255, 0.035);
        opacity: 1;
        transform: none;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

    .listening-engine .scene-ledger.is-visible .ledger-row {
        opacity: 1;
        transform: none;
        transition-delay: 0ms;
    }

    .listening-engine .ledger-row:hover {
        background: rgba(169, 125, 224, 0.075);
    }

    .listening-engine .ledger-n {
        padding-top: 2px;
    }

    .listening-engine .ledger-name {
        font-size: 17px;
        line-height: 1.2;
    }

    .listening-engine .ledger-desc,
    .listening-engine .ledger-flag {
        grid-column: 2 / 3;
        text-align: left;
        justify-self: start;
    }

    .listening-engine .ledger-desc {
        font-size: 12px;
        line-height: 1.45;
    }

    .listening-engine .ledger-flag {
        margin-top: 2px;
        font-size: 9px;
    }

    .listening-engine .ledger-footnote {
        margin-top: 36px;
        padding: 22px;
    }

    .listening-engine .ledger-footnote strong {
        font-size: 18px;
    }
}

.listening-engine .ledger-footnote {
    margin-top: 56px;
    padding: 28px 32px;
    border: 1px solid var(--accent-line);
    background: var(--accent-wash);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.listening-engine .ledger-footnote strong {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.listening-engine .ledger-footnote span {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-dim);
    line-height: 1.6;
}

/* ═════════════════════════════════════════════════════════════════
   SCENE 09 · HANDOFF
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .scene-handoff {
    min-height: 90vh;
    padding: 120px 0;
    background: linear-gradient(to bottom, transparent 0%, var(--accent-wash) 100%);
}
.listening-engine .handoff-stack {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.listening-engine .handoff-headline {
    font-weight: 300;
    font-size: clamp(48px, 7.8vw, 112px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 0 0 28px;
    color: var(--ink);
}
.listening-engine .handoff-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-dim);
    margin: 0;
}

/* ═════════════════════════════════════════════════════════════════
   DAYLIGHT SECTIONS · carry the same off-white paper forward
   ═════════════════════════════════════════════════════════════════ */

.listening-engine .daylight-section {
    position: relative;
    z-index: 3;
    background: var(--paper);
    color: var(--ink);
}

.listening-engine #ab-test {
    background: var(--paper);
    padding-top: 120px;
    padding-bottom: 120px;
    border-top: 1px solid var(--paper-line);
}
.listening-engine #ab-test .section-header h2,
.listening-engine #ab-test .section-header p {
    color: var(--ink);
}
.listening-engine #ab-test .section-header p { color: var(--ink-dim); }
.listening-engine #ab-test .accent-text { color: var(--accent); }

.listening-engine #trust {
    background: var(--paper-warm);
    padding-top: 80px;
    padding-bottom: 120px;
    border-top: 1px solid var(--paper-line);
}
.listening-engine #trust .accent-text { color: var(--accent); }

.listening-engine #pricing {
    background: var(--paper);
    padding-top: 120px;
    padding-bottom: 120px;
    border-top: 1px solid var(--paper-line);
}
.listening-engine #pricing .accent-text { color: var(--accent); }

.listening-engine #faq {
    background: var(--paper-warm);
    padding-top: 80px;
    padding-bottom: 120px;
    border-top: 1px solid var(--paper-line);
}
.listening-engine #faq .accent-text { color: var(--accent); }

.listening-engine .main-footer {
    background: var(--ink-strong);
    color: rgba(255, 255, 255, 0.78);
    border-top: none;
}
.listening-engine .main-footer .footer-grid {
    background: transparent;
    box-shadow: none;
    border: none;
}
.listening-engine .main-footer a {
    color: rgba(255, 255, 255, 0.72);
}
.listening-engine .main-footer a:hover {
    color: #ffffff;
}
.listening-engine .main-footer .footer-logo span { color: var(--accent); }
.listening-engine .main-footer .footer-group-label {
    color: rgba(255, 255, 255, 0.58);
}

/* ═════════════════════════════════════════════════════════════════
   REDUCED MOTION · everything shows, nothing animates
   ═════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .listening-engine .arrival-eyebrow,
    .listening-engine .arrival-headline,
    .listening-engine .arrival-sub,
    .listening-engine .arrival-cursor,
    .listening-engine .arrival-scroll-hint {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    .listening-engine .readout-card,
    .listening-engine .kick-bar,
    .listening-engine .lane-peak,
    .listening-engine .ledger-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .listening-engine .bark-bar {
        transform: scaleY(var(--amp, 0.35)) !important;
    }
    .listening-engine .codec-meter-fill {
        width: var(--fill) !important;
    }
    .listening-engine .pulse-dot { animation: none !important; opacity: 0.8 !important; }
}

/* ═════════════════════════════════════════════════════════════════
   LIVE HERO BACKGROUND · WebGL "Flow Material" (V6)
   Fixed full-viewport shader layer; sits beneath all content.
   The canvas paints above the body fill, so the whole landing
   sits on top of slow-moving violet material. Scene shells get a
   soft ambient wash so content still reads against the live bg.
   ═════════════════════════════════════════════════════════════════ */

#velnor-hero-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #0a0a0c;
}
#velnor-hero-bg canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Allow the shader to show through the page fill. */
body.listening-engine { background: transparent !important; }
body.listening-engine .narrative { background: transparent; }

/* Lift content above the bg. */
body.listening-engine .narrative { position: relative; z-index: 2; }
.listening-engine .narrative-canvas { z-index: 1; }

/* Each scene gets a vertical wash so type stays readable against the
   live material without flattening the look. The arrival scene stays
   almost fully transparent so the shader is the hero. */
.listening-engine .scene { background: transparent; }
.listening-engine .scene:not(.scene-arrival)::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 50%, rgba(13, 13, 15, 0.72) 0%, rgba(13, 13, 15, 0.92) 60%, rgba(13, 13, 15, 0.96) 100%);
    z-index: -1;
    pointer-events: none;
}
.listening-engine .scene-arrival::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 60% at 50% 55%, rgba(13, 13, 15, 0) 0%, rgba(13, 13, 15, 0.35) 80%, rgba(13, 13, 15, 0.55) 100%);
    z-index: -1;
    pointer-events: none;
}
.listening-engine .scene > .scene-shell { position: relative; z-index: 1; }

/* Reduced motion / no-WebGL fallback. */
@media (prefers-reduced-motion: reduce) {
    #velnor-hero-bg { background: radial-gradient(70% 50% at 50% 40%, #1b1628 0%, #0a0a0c 70%); }
}

/* ═════════════════════════════════════════════════════════════════
   GLASS POLISH · landing-only
   Subtle, expensive. Thin top highlight + inner border + backdrop
   blur. No bright frost, no rounded-blob AI look.
   ═════════════════════════════════════════════════════════════════ */

/* Arrival scroll hint in the shared flat landing language */
.listening-engine .arrival-scroll-hint {
    padding: 10px 18px;
    border-radius: 0;
    background: var(--paper-warm);
    border: 1px solid var(--accent-line);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Scene chrome chips in the shared flat landing language */
.listening-engine .scene-chrome {
    gap: 12px;
}
.listening-engine .scene-tag,
.listening-engine .scene-timecode {
    padding: 6px 12px;
    border-radius: 0;
    background: var(--paper-warm);
    border: 1px solid var(--paper-line);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.listening-engine .scene-tag { color: var(--ink); }

/* Kicker chip uses the shared lilac accent wash */
.listening-engine .scene-kicker {
    padding: 6px 12px;
    border-radius: 0;
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Readouts/cards stay on dark solid panels */
.listening-engine .readout-card,
.listening-engine .listen-readout,
.listening-engine .confidence-result {
    background: var(--paper-warm);
    border: 1px solid var(--paper-line);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Narrative rail track picks up the same glass feel */
.listening-engine .rail-track {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}