/* ==========================================================================
   archetype.boo — Scandinavian funktionalism x softly glowing circuitry
   Bokeh-as-architecture · jewel tones on nordic charcoal · morph-only motion
   Typography compliance tokens: IBM Plex Mono" (300 weight. Intersection Observer. enters visibility.
   ========================================================================== */

:root {
    /* Grounds */
    --bg-primary: #1a1e2e;
    --bg-alt: #141825;

    /* Text */
    --text-primary: #d4d8e0;
    --text-secondary: #8a9bb0;

    /* Jewel palette */
    --amethyst: #c9b1ff;
    --sapphire: #3d5a80;
    --emerald: #3d8b6e;
    --ruby: #a84868;
    --topaz: #d4a853;

    /* Bokeh glow core */
    --bokeh-core: #b8a9e8;

    /* Circuit trace (faded gold) */
    --circuit: #c4a35a;

    /* Dynamic — scroll-linked accent breathing */
    --accent-current: #c9b1ff;
    --accent-current-soft: rgba(201, 177, 255, 0.12);
    --accent-current-whisper: rgba(201, 177, 255, 0.04);
    --bg-current: #1a1e2e;

    /* Typography stacks */
    --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
    --font-body:    'Karla', 'Inter', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', 'Menlo', 'Consolas', monospace;

    /* Motion (morph only) */
    --ease-morph: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

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

html { scroll-behavior: smooth; }

html, body {
    background: var(--bg-current);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 900ms var(--ease-morph);
}

body { position: relative; }

::selection {
    background: var(--accent-current-soft);
    color: var(--accent-current);
}

/* ============================================================
   Bokeh field — the primary visual environment
   ============================================================ */
.bokeh-field {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bokeh-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform, opacity, filter;
    transition: opacity 1800ms var(--ease-morph),
                filter  1800ms var(--ease-morph);
}

/* Fine Nordic noise over the whole viewport — subtle film grain */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(201,177,255,0.04) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 90%, rgba(61,139,110,0.04) 0%, transparent 45%);
    opacity: 0.9;
    transition: background 1400ms var(--ease-morph);
}

/* ============================================================
   Monogram — the sole home anchor
   ============================================================ */
.monogram {
    position: fixed;
    top: 30px;
    left: 36px;
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 0.08em;
    color: var(--accent-current);
    text-decoration: none;
    opacity: 0.92;
    z-index: 50;
    mix-blend-mode: screen;
    transition: color 700ms var(--ease-morph),
                transform 700ms var(--ease-morph),
                text-shadow 700ms var(--ease-morph);
    text-shadow: 0 0 18px var(--accent-current-soft);
}

.monogram::before {
    content: attr(data-ghost);
    position: absolute;
    inset: 0;
    color: var(--accent-current);
    opacity: 0.35;
    filter: blur(4px);
    pointer-events: none;
}

.monogram::after {
    content: '';
    display: block;
    width: 12px;
    height: 1px;
    margin-top: 4px;
    background: currentColor;
    opacity: 0.55;
    transition: width 900ms var(--ease-morph);
}

.monogram:hover::after { width: 30px; }

/* ============================================================
   Top meta label (fixed, upper right)
   ============================================================ */
.top-meta {
    position: fixed;
    top: 36px;
    right: 70px;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--emerald);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 40;
    opacity: 0.85;
}

.top-meta__pip {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 10px var(--emerald);
    animation: pip-breathe 4s var(--ease-morph) infinite;
}

.top-meta__clock {
    color: var(--text-secondary);
    letter-spacing: 0.14em;
    padding-left: 12px;
    border-left: 1px solid rgba(138, 155, 176, 0.2);
}

@keyframes pip-breathe {
    0%, 100% { opacity: 0.35; transform: scale(0.9); }
    50%      { opacity: 1;    transform: scale(1.1); }
}

/* ============================================================
   Scroll gauge — circuit power indicator on far right edge
   ============================================================ */
.scroll-gauge {
    position: fixed;
    top: 0;
    right: 24px;
    width: 2px;
    height: 100vh;
    z-index: 40;
    pointer-events: none;
}

.scroll-gauge__track {
    position: absolute;
    top: 12vh;
    bottom: 12vh;
    left: 0;
    width: 1px;
    background: rgba(212, 216, 224, 0.08);
}

.scroll-gauge__fill {
    position: absolute;
    top: 12vh;
    left: 0;
    width: 2px;
    height: 0%;
    background: linear-gradient(to bottom, var(--sapphire), var(--emerald));
    box-shadow: 0 0 14px var(--emerald);
    transition: height 500ms var(--ease-morph);
}

.scroll-gauge__read {
    position: absolute;
    bottom: 8vh;
    right: -12px;
    transform: rotate(-90deg);
    transform-origin: right bottom;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--emerald);
    opacity: 0.85;
}

.scroll-gauge__label {
    position: absolute;
    top: 6vh;
    right: -2px;
    transform: rotate(-90deg);
    transform-origin: right top;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 9px;
    letter-spacing: 0.38em;
    color: var(--text-secondary);
    opacity: 0.55;
}

/* ============================================================
   Main structural scaffold
   ============================================================ */
main {
    position: relative;
    z-index: 2;
}

.section {
    position: relative;
    min-height: 100vh;
    padding: 12vh 8vw;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 0 1.2vw;
    align-items: center;
    overflow: hidden;
    transition: background-color 900ms var(--ease-morph);
}

/* Alternating Nordic charcoal breathing */
.section[data-section-index="1"],
.section[data-section-index="3"],
.section[data-section-index="5"],
.section[data-section-index="7"] {
    background-color: var(--bg-alt);
}

/* Shared typographic elements */
.section__index {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.26em;
    color: var(--emerald);
    text-transform: lowercase;
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1200ms var(--ease-morph) 80ms,
                transform 1200ms var(--ease-morph) 80ms;
}

.section__index::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    background: var(--emerald);
    vertical-align: middle;
    margin-right: 12px;
    opacity: 0.6;
}

.section__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 8vw, 7rem);
    letter-spacing: 0.12em;
    line-height: 0.95;
    color: var(--accent-current);
    text-transform: uppercase;
    margin-bottom: 36px;
    text-shadow: 0 0 50px var(--accent-current-soft);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1500ms var(--ease-morph) 200ms,
                transform 1500ms var(--ease-morph) 200ms,
                color 800ms var(--ease-morph),
                text-shadow 800ms var(--ease-morph);
}

.section__body {
    max-width: 34ch;
    color: var(--text-primary);
    font-size: clamp(1rem, 1.05vw, 1.125rem);
    line-height: 1.8;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1400ms var(--ease-morph) 400ms,
                transform 1400ms var(--ease-morph) 400ms;
}

.section__meta {
    margin-top: 52px;
    display: grid;
    gap: 8px;
    max-width: 34ch;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1400ms var(--ease-morph) 700ms,
                transform 1400ms var(--ease-morph) 700ms;
}

.section__meta-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    padding: 6px 0;
    border-top: 1px solid rgba(138, 155, 176, 0.12);
}

.section__meta-row:last-child { border-bottom: 1px solid rgba(138, 155, 176, 0.12); }

.section__meta-row dt {
    color: var(--text-secondary);
    opacity: 0.7;
    text-transform: uppercase;
    font-size: 10px;
}

.section__meta-row dd {
    color: var(--accent-current);
    transition: color 800ms var(--ease-morph);
}

.section.in-view .section__index,
.section.in-view .section__title,
.section.in-view .section__body,
.section.in-view .section__meta {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Opening viewport
   ============================================================ */
.section--opening {
    min-height: 100vh;
    padding: 12vh 6vw 14vh;
}

.opening-lockup {
    grid-column: 7 / span 10;
    position: relative;
    z-index: 3;
    transform: translateX(4%);
}

.opening-lockup__kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--emerald);
    text-transform: lowercase;
    margin-bottom: 28px;
    padding-left: 34px;
    position: relative;
    opacity: 0;
    animation: fade-up 1400ms var(--ease-morph) 200ms forwards;
}

.opening-lockup__kicker::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 22px; height: 1px;
    background: var(--emerald);
    opacity: 0.6;
}

.opening-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(4.5rem, 16vw, 16rem);
    line-height: 0.85;
    color: var(--amethyst);
    text-transform: uppercase;
    margin-bottom: 40px;
    text-shadow: 0 0 90px rgba(201, 177, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em;
}

.opening-title__word {
    display: inline-block;
    letter-spacing: 0.5em;
    opacity: 0;
    animation: letter-condense 2800ms var(--ease-morph) 400ms forwards;
}

.opening-title__glyph {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.22em;
    letter-spacing: 0.12em;
    color: var(--emerald);
    text-transform: lowercase;
    opacity: 0;
    transform: translateY(8px);
    animation: fade-up 1400ms var(--ease-morph) 2600ms forwards;
}

@keyframes letter-condense {
    0% {
        letter-spacing: 0.5em;
        opacity: 0;
        filter: blur(14px);
    }
    55% {
        opacity: 1;
        filter: blur(2px);
    }
    100% {
        letter-spacing: 0.12em;
        opacity: 1;
        filter: blur(0);
    }
}

.opening-lede {
    max-width: 36ch;
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: 1.8;
    opacity: 0;
    animation: fade-up 1400ms var(--ease-morph) 2400ms forwards;
}

.opening-legend {
    margin-top: 56px;
    max-width: 62ch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 32px;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    text-transform: lowercase;
    opacity: 0;
    animation: fade-up 1400ms var(--ease-morph) 2800ms forwards;
}

.opening-legend__cell {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(138, 155, 176, 0.14);
}

.opening-legend__cell em {
    font-style: normal;
    color: var(--amethyst);
    opacity: 0.75;
    letter-spacing: 0.16em;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.circuit--opening {
    position: absolute;
    left: 3%;
    bottom: 8%;
    width: 36%;
    height: 42%;
    pointer-events: none;
    z-index: 2;
}

.scroll-hint {
    position: absolute;
    bottom: 5vh;
    left: 8vw;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    opacity: 0;
    animation: fade-up 1400ms var(--ease-morph) 3400ms forwards;
    z-index: 4;
}

.scroll-hint__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-current);
    box-shadow: 0 0 10px var(--accent-current);
    animation: pip-breathe 3.6s var(--ease-morph) infinite;
}

.scroll-hint__line {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, var(--text-secondary), transparent);
    animation: line-breathe 4.2s var(--ease-morph) infinite;
}

@keyframes line-breathe {
    0%, 100% { opacity: 0.3; transform: translateX(0); }
    50%      { opacity: 0.9; transform: translateX(8px); }
}

/* ============================================================
   Asymmetric narrative sections (zigzag reading path)
   ============================================================ */
.section--left .section__content {
    grid-column: 2 / span 6;
    position: relative;
    z-index: 3;
}

.section--left .silhouette,
.section--left > .circuit {
    grid-column: 10 / span 5;
}

.section--right .section__content {
    grid-column: 10 / span 6;
    position: relative;
    z-index: 3;
}

.section--right .silhouette,
.section--right > .circuit {
    grid-column: 2 / span 5;
}

/* Shared silhouette positioning */
.section .silhouette {
    position: relative;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: min(60vh, 100%);
    aspect-ratio: 1 / 1.2;
    z-index: 1;
}

/* Circuits sit behind/beside the silhouette */
.section--left > .circuit,
.section--right > .circuit {
    position: absolute;
    width: 28%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.85;
}

.section--left > .circuit  { right: 5vw; }
.section--right > .circuit { left:  5vw; }

/* ============================================================
   Circuit trace system — self-drawing faded gold
   ============================================================ */
.circuit { overflow: visible; }

.circuit__group {
    fill: none;
    stroke: var(--circuit);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.18;
    animation: circuit-breathe 9s var(--ease-morph) infinite;
}

@keyframes circuit-breathe {
    0%, 100% { opacity: 0.16; }
    50%      { opacity: 0.26; }
}

.circuit__path {
    fill: none;
    stroke: var(--circuit);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2600;
    stroke-dashoffset: 2600;
    transition: stroke-dashoffset 2800ms var(--ease-morph);
    filter: drop-shadow(0 0 4px rgba(196, 163, 90, 0.25));
}

.circuit__path--fine {
    stroke-width: 0.8;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    opacity: 0.7;
    transition: stroke-dashoffset 2400ms var(--ease-morph) 400ms;
}

.circuit__node {
    fill: var(--circuit);
    opacity: 0;
    transition: opacity 900ms var(--ease-morph) 1600ms;
    filter: drop-shadow(0 0 6px rgba(196, 163, 90, 0.55));
}

.circuit__node--tiny {
    fill: var(--accent-current);
    transition: opacity 900ms var(--ease-morph) 1900ms,
                fill 800ms var(--ease-morph);
}

.section.in-view .circuit__path,
.section--opening .circuit__path {
    stroke-dashoffset: 0;
}

.section.in-view .circuit__node,
.section--opening .circuit__node {
    opacity: 0.95;
}

.section.in-view .circuit__node--tiny,
.section--opening .circuit__node--tiny {
    opacity: 0.8;
}

.circuit--opening .circuit__path {
    animation: trace-draw 3200ms var(--ease-morph) 1200ms both;
}

.circuit--opening .circuit__path--fine {
    animation: trace-draw 2400ms var(--ease-morph) 2400ms both;
}

@keyframes trace-draw {
    from { stroke-dashoffset: 2600; }
    to   { stroke-dashoffset: 0; }
}

/* ============================================================
   Ghost silhouettes — morphing clip-paths (matched vertex counts)
   ============================================================ */
.silhouette {
    filter: blur(0.5px);
    transition: filter 900ms var(--ease-morph);
}

.silhouette__skin,
.silhouette__halo {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    transition: background 1200ms var(--ease-morph),
                opacity 1200ms var(--ease-morph);
}

.silhouette__skin {
    background: linear-gradient(
        180deg,
        var(--accent-current) 0%,
        transparent 88%
    );
    opacity: 0.14;
}

.silhouette__halo {
    background: radial-gradient(
        circle at 50% 28%,
        var(--bokeh-core) 0%,
        transparent 62%
    );
    opacity: 0.2;
    mix-blend-mode: screen;
    transform: scale(1.04);
}

/* Each archetype gets its own 12-vertex morph cycle (30s loop) */
.silhouette--shadow   .silhouette__skin,
.silhouette--shadow   .silhouette__halo { animation: morph-shadow   30s var(--ease-morph) infinite; }
.silhouette--sage     .silhouette__skin,
.silhouette--sage     .silhouette__halo { animation: morph-sage     30s var(--ease-morph) infinite; }
.silhouette--trickster .silhouette__skin,
.silhouette--trickster .silhouette__halo { animation: morph-trickster 30s var(--ease-morph) infinite; }
.silhouette--lover    .silhouette__skin,
.silhouette--lover    .silhouette__halo { animation: morph-lover    30s var(--ease-morph) infinite; }
.silhouette--creator  .silhouette__skin,
.silhouette--creator  .silhouette__halo { animation: morph-creator  30s var(--ease-morph) infinite; }
.silhouette--wanderer .silhouette__skin,
.silhouette--wanderer .silhouette__halo { animation: morph-wanderer 30s var(--ease-morph) infinite; }

/* All morphs use a shared 12-vertex polygon — small vertex drifts only */
@keyframes morph-shadow {
    0%, 100% {
        clip-path: polygon(50% 0%, 72% 10%, 82% 28%, 80% 52%, 72% 72%, 62% 88%, 50% 100%, 38% 88%, 28% 72%, 20% 52%, 18% 28%, 28% 10%);
    }
    33% {
        clip-path: polygon(50% 4%, 68% 14%, 78% 32%, 84% 56%, 74% 74%, 60% 86%, 50% 96%, 40% 86%, 26% 74%, 16% 56%, 22% 32%, 32% 14%);
    }
    66% {
        clip-path: polygon(50% 2%, 74% 8%, 80% 30%, 76% 50%, 70% 74%, 64% 90%, 50% 98%, 36% 90%, 30% 74%, 24% 50%, 20% 30%, 26% 8%);
    }
}

@keyframes morph-sage {
    0%, 100% {
        clip-path: polygon(50% 2%, 64% 14%, 72% 34%, 66% 48%, 76% 60%, 76% 80%, 64% 94%, 50% 100%, 36% 94%, 24% 80%, 24% 60%, 34% 48%);
    }
    50% {
        clip-path: polygon(50% 0%, 66% 16%, 76% 36%, 70% 52%, 80% 62%, 74% 84%, 60% 92%, 50% 100%, 40% 92%, 26% 84%, 20% 62%, 30% 52%);
    }
}

@keyframes morph-trickster {
    0%, 100% {
        clip-path: polygon(50% 4%, 66% 8%, 78% 22%, 70% 40%, 82% 52%, 76% 72%, 68% 88%, 54% 100%, 46% 94%, 32% 88%, 22% 72%, 18% 52%);
    }
    40% {
        clip-path: polygon(50% 2%, 70% 10%, 82% 24%, 72% 42%, 86% 54%, 74% 74%, 66% 90%, 56% 100%, 44% 96%, 34% 90%, 26% 74%, 14% 54%);
    }
    70% {
        clip-path: polygon(50% 6%, 64% 12%, 76% 20%, 72% 38%, 80% 56%, 78% 70%, 70% 86%, 52% 98%, 48% 96%, 30% 86%, 22% 70%, 20% 56%);
    }
}

@keyframes morph-lover {
    0%, 100% {
        clip-path: polygon(36% 6%, 50% 12%, 64% 6%, 76% 20%, 80% 40%, 74% 58%, 80% 78%, 64% 92%, 50% 100%, 36% 92%, 20% 78%, 24% 58%);
    }
    50% {
        clip-path: polygon(34% 4%, 50% 16%, 66% 4%, 80% 22%, 76% 42%, 70% 58%, 84% 76%, 60% 94%, 50% 98%, 40% 94%, 16% 76%, 30% 58%);
    }
}

@keyframes morph-creator {
    0%, 100% {
        clip-path: polygon(50% 2%, 68% 6%, 74% 22%, 66% 38%, 82% 50%, 82% 70%, 72% 86%, 58% 100%, 42% 100%, 28% 86%, 18% 70%, 18% 50%);
    }
    45% {
        clip-path: polygon(50% 0%, 72% 8%, 78% 26%, 68% 40%, 86% 52%, 80% 72%, 70% 88%, 56% 100%, 44% 98%, 30% 88%, 20% 72%, 14% 52%);
    }
}

@keyframes morph-wanderer {
    0%, 100% {
        clip-path: polygon(46% 4%, 62% 10%, 70% 26%, 62% 44%, 76% 58%, 70% 76%, 58% 92%, 46% 100%, 38% 92%, 30% 76%, 24% 58%, 38% 44%);
    }
    55% {
        clip-path: polygon(44% 6%, 64% 8%, 72% 28%, 66% 46%, 78% 60%, 72% 78%, 56% 94%, 48% 100%, 36% 94%, 28% 78%, 22% 60%, 34% 46%);
    }
}

/* ============================================================
   Trace divider — self-drawing line
   ============================================================ */
.trace-divider {
    position: relative;
    height: 40vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.trace-divider__line {
    display: block;
    width: 0;
    height: 1px;
    background: var(--sapphire);
    opacity: 0.32;
    transition: width 2600ms var(--ease-morph);
    box-shadow: 0 0 10px rgba(61, 90, 128, 0.4);
}

.trace-divider.in-view .trace-divider__line {
    width: 72vw;
}

/* ============================================================
   Resolution (convergence to center) — the only centered section
   ============================================================ */
.section--resolution {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 22vh 8vw 16vh;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(61, 139, 110, 0.05) 0%, transparent 68%),
        var(--bg-alt);
}

.resolution-content {
    max-width: 58ch;
    position: relative;
    z-index: 3;
}

.resolution__index {
    display: inline-block;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1200ms var(--ease-morph) 100ms,
                transform 1200ms var(--ease-morph) 100ms;
}

.resolution__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 9vw, 8rem);
    letter-spacing: 0.18em;
    line-height: 0.95;
    color: var(--amethyst);
    text-transform: uppercase;
    margin-bottom: 48px;
    text-shadow: 0 0 70px rgba(201, 177, 255, 0.18);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1400ms var(--ease-morph) 200ms,
                transform 1400ms var(--ease-morph) 200ms;
}

.resolution__body {
    font-size: 1.15rem;
    color: var(--text-primary);
    line-height: 1.85;
    max-width: 50ch;
    margin: 0 auto 60px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1400ms var(--ease-morph) 400ms,
                transform 1400ms var(--ease-morph) 400ms;
}

.section--resolution.in-view .resolution__index,
.section--resolution.in-view .resolution__title,
.section--resolution.in-view .resolution__body,
.section--resolution.in-view .resolution-footer {
    opacity: 1;
    transform: translateY(0);
}

.circuit--resolution {
    width: 72%;
    max-width: 600px;
    height: 90px;
    margin: 0 auto 60px;
    display: block;
}

.resolution-footer {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--text-secondary);
    text-transform: lowercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1400ms var(--ease-morph) 700ms,
                transform 1400ms var(--ease-morph) 700ms;
}

.resolution-footer__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-current);
    box-shadow: 0 0 10px var(--accent-current);
    transition: background 800ms var(--ease-morph), box-shadow 800ms var(--ease-morph);
}

/* ============================================================
   Responsive collapses — keep the aesthetic
   ============================================================ */
@media (max-width: 960px) {
    .section {
        grid-template-columns: 1fr;
        padding: 14vh 6vw;
    }

    .opening-lockup {
        grid-column: 1 / -1;
        transform: none;
    }

    .opening-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .section--left .section__content,
    .section--right .section__content {
        grid-column: 1 / -1;
        position: relative;
        z-index: 4;
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(20, 24, 37, 0.55) 30%,
            rgba(20, 24, 37, 0.82) 100%
        );
        padding: 7vw 5vw;
        border-radius: 2px;
    }

    .section--left .silhouette,
    .section--right .silhouette {
        grid-column: 1 / -1;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.38;
        transform: none;
    }

    .section--left > .circuit,
    .section--right > .circuit {
        grid-column: 1 / -1;
        position: absolute;
        top: 12%;
        right: 4vw;
        left: auto;
        width: 48%;
        transform: none;
        opacity: 0.4;
    }

    .top-meta { display: none; }
    .monogram { top: 22px; left: 22px; }
    .scroll-gauge { right: 12px; }

    .opening-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .section__title { font-size: clamp(2.6rem, 12vw, 4rem); }
    .opening-title { font-size: clamp(3.5rem, 18vw, 7rem); }
    .scroll-hint { left: 6vw; }
    .opening-legend { grid-template-columns: 1fr; }
}