/* ==========================================================
   completengine.net — neubrutalist zen cosmic observatory
   ========================================================== */

:root {
    --bg-obsidian: #0D0D1A;
    --bg-indigo: #131326;
    --border-sapphire: #1B3A5C;
    --shadow-amethyst: #6B3FA0;
    --headline-emerald: #50C878;
    --body-silver: #C0C7D0;
    --label-amethyst: #9B7FBF;
    --star-ruby: #C23B5E;
    --hover-topaz: #D4A843;

    --display-font: 'Space Mono', ui-monospace, 'Courier New', monospace;
    --body-font: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

    --column-width: 640px;
}

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

html, body {
    background: var(--bg-obsidian);
    color: var(--body-silver);
    font-family: var(--body-font);
    min-height: 100vh;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    position: relative;
    /* Constellation grid as radial-gradient layers */
    background-color: var(--bg-obsidian);
    background-image:
        radial-gradient(circle at 20% 12%, rgba(192, 199, 208, 0.15) 1px, transparent 1.5px),
        radial-gradient(circle at 68% 25%, rgba(155, 127, 191, 0.15) 1px, transparent 1.5px),
        radial-gradient(circle at 42% 48%, rgba(80, 200, 120, 0.12) 1px, transparent 1.5px),
        radial-gradient(circle at 82% 65%, rgba(194, 59, 94, 0.15) 1px, transparent 1.5px),
        radial-gradient(circle at 12% 82%, rgba(192, 199, 208, 0.15) 1px, transparent 1.5px),
        radial-gradient(circle at 55% 95%, rgba(155, 127, 191, 0.15) 1px, transparent 1.5px),
        radial-gradient(circle at 32% 32%, rgba(192, 199, 208, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 88% 40%, rgba(80, 200, 120, 0.08) 1px, transparent 1px);
    background-size:
        320px 420px,
        520px 380px,
        440px 460px,
        380px 520px,
        460px 340px,
        500px 500px,
        260px 260px,
        340px 300px;
    background-attachment: fixed;
}

/* Star-field fixed layer (bright sparse stars) */
.star-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 15% 20%, rgba(80, 200, 120, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 85% 40%, rgba(194, 59, 94, 0.6), transparent),
        radial-gradient(1px 1px at 50% 70%, rgba(155, 127, 191, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 25% 85%, rgba(192, 199, 208, 0.6), transparent),
        radial-gradient(1px 1px at 70% 15%, rgba(80, 200, 120, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 40% 50%, rgba(194, 59, 94, 0.5), transparent);
    background-repeat: no-repeat;
    opacity: 0.9;
    animation: starTwinkle 8s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.55; }
}

/* Void margins — only visible on wide screens */
.void-margin {
    position: fixed;
    top: 0;
    width: calc((100vw - var(--column-width)) / 2);
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    display: none;
    overflow: hidden;
}

.void-margin--left { left: 0; }
.void-margin--right { right: 0; }

.drifting-constellation {
    width: 100%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.star-shape {
    animation: starPulse 4s ease-in-out infinite;
}

.star-shape:nth-child(2n) { animation-delay: 1s; }
.star-shape:nth-child(3n) { animation-delay: 2s; }
.star-shape:nth-child(5n) { animation-delay: 3s; }

@keyframes starPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

@media (min-width: 1200px) {
    .void-margin { display: block; }
}

/* ==========================================================
   Telescope Column
   ========================================================== */
.telescope-column {
    position: relative;
    max-width: var(--column-width);
    margin: 0 auto;
    padding: 0 24px;
    z-index: 2;
}

/* ==========================================================
   Void Entry
   ========================================================== */
.void-entry {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.entry-star {
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 2s ease-out, transform 2s ease-out;
    margin-bottom: 48px;
    filter: drop-shadow(0 0 24px rgba(80, 200, 120, 0.5));
}

.entry-star.revealed {
    opacity: 1;
    transform: scale(1);
    animation: entryStarPulse 4s ease-in-out infinite 2s;
}

@keyframes entryStarPulse {
    0%, 100% { filter: drop-shadow(0 0 24px rgba(80, 200, 120, 0.45)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 36px rgba(80, 200, 120, 0.8)); transform: scale(1.05); }
}

.site-title {
    font-family: var(--display-font);
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--headline-emerald);
    margin-bottom: 32px;
    min-height: 1.2em;
    line-height: 1.2;
}

.title-text {
    display: inline-block;
}

.title-char {
    display: inline-block;
    animation: charGlitchIn 300ms ease-out;
}

@keyframes charGlitchIn {
    0% {
        text-shadow:
            -3px 0 var(--star-ruby),
            3px 0 var(--shadow-amethyst),
            0 0 var(--headline-emerald);
        transform: translateY(-4px);
        opacity: 0;
    }
    40% {
        text-shadow:
            -2px 0 var(--star-ruby),
            2px 0 var(--shadow-amethyst),
            0 0 var(--headline-emerald);
        opacity: 1;
    }
    100% {
        text-shadow: 0 0 18px rgba(80, 200, 120, 0.35);
        transform: translateY(0);
    }
}

.title-cursor {
    display: inline-block;
    color: var(--headline-emerald);
    animation: blinkCursor 1s step-end infinite;
}

.title-cursor.title-cursor--hidden { opacity: 0; }

@keyframes blinkCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.site-subtitle {
    font-family: var(--body-font);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    color: var(--body-silver);
    letter-spacing: 0.02em;
    line-height: 1.85;
    opacity: 0;
    transition: opacity 2s ease-out 0.5s;
    max-width: 40ch;
}

.site-subtitle.revealed {
    opacity: 1;
}

/* ==========================================================
   Breathing Gaps
   ========================================================== */
.breathing-gap {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.breathing-gap--large {
    height: 320px;
}

.pulse-star {
    width: 12px;
    height: 12px;
    position: relative;
    display: block;
    animation: pulseStar 4s ease-in-out infinite;
}

.pulse-star--large {
    width: 20px;
    height: 20px;
}

.pulse-star::before,
.pulse-star::after {
    content: '';
    position: absolute;
    background: var(--star-ruby);
    top: 50%;
    left: 50%;
}

.pulse-star::before {
    width: 100%;
    height: 2px;
    transform: translate(-50%, -50%);
}

.pulse-star::after {
    width: 2px;
    height: 100%;
    transform: translate(-50%, -50%);
}

.pulse-star--ruby::before,
.pulse-star--ruby::after { background: var(--star-ruby); }

.pulse-star--amethyst::before,
.pulse-star--amethyst::after { background: var(--shadow-amethyst); }

.pulse-star--emerald::before,
.pulse-star--emerald::after { background: var(--headline-emerald); }

@keyframes pulseStar {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50% { opacity: 0.8; transform: scale(1.15); }
}

/* ==========================================================
   Neubrutalist Frames
   ========================================================== */
.frame {
    position: relative;
    background: var(--bg-indigo);
    border: 3px solid var(--border-sapphire);
    box-shadow: 8px 8px 0 var(--shadow-amethyst);
    padding: 40px 32px;
    margin: 60px 0;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: box-shadow 600ms ease;
}

.frame.revealed {
    animation: frameAssemble 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes frameAssemble {
    0% {
        opacity: 0;
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
        transform: translateY(20px);
    }
    30% {
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 0% 25%);
        transform: translate(-3px, 18px);
    }
    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 55%, 0% 55%);
        transform: translate(2px, 12px);
    }
    70% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 80%);
        transform: translate(-1px, 6px);
    }
    100% {
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transform: translateY(0);
    }
}

.frame:hover {
    box-shadow: 12px 12px 0 var(--shadow-amethyst);
}

/* Corner brackets */
.frame-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.frame-corner--tl {
    top: -3px;
    left: -3px;
    border-top: 3px solid var(--hover-topaz);
    border-left: 3px solid var(--hover-topaz);
}

.frame-corner--tr {
    top: -3px;
    right: -3px;
    border-top: 3px solid var(--hover-topaz);
    border-right: 3px solid var(--hover-topaz);
}

.frame-corner--bl {
    bottom: -3px;
    left: -3px;
    border-bottom: 3px solid var(--hover-topaz);
    border-left: 3px solid var(--hover-topaz);
}

.frame-corner--br {
    bottom: -3px;
    right: -3px;
    border-bottom: 3px solid var(--hover-topaz);
    border-right: 3px solid var(--hover-topaz);
}

/* Labels + headings */
.section-label {
    display: block;
    font-family: var(--display-font);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--label-amethyst);
    margin-bottom: 20px;
    position: relative;
    animation: terminalGlitch 3s steps(2, end) infinite;
}

@keyframes terminalGlitch {
    0%, 95%, 100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
    96% { clip-path: inset(20% 0 60% 0); transform: translateX(2px); }
    97% { clip-path: inset(60% 0 20% 0); transform: translateX(-2px); }
    98% { clip-path: inset(40% 0 40% 0); transform: translateX(1px); }
}

.section-heading {
    font-family: var(--display-font);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--headline-emerald);
    margin-bottom: 32px;
    line-height: 1.2;
    position: relative;
}

/* RGB glitch-text effect on scroll-enter */
.glitch-text {
    position: relative;
}

.glitch-text.glitch-active::before,
.glitch-text.glitch-active::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.glitch-text.glitch-active::before {
    color: var(--shadow-amethyst);
    animation: glitchLayerA 800ms ease-out forwards;
    clip-path: inset(0 0 55% 0);
}

.glitch-text.glitch-active::after {
    color: var(--star-ruby);
    animation: glitchLayerB 800ms ease-out forwards;
    clip-path: inset(55% 0 0 0);
}

@keyframes glitchLayerA {
    0% { transform: translate(-4px, 0); opacity: 0.9; }
    40% { transform: translate(-2px, 0); opacity: 0.8; }
    80% { transform: translate(-1px, 0); opacity: 0.3; }
    100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes glitchLayerB {
    0% { transform: translate(4px, 0); opacity: 0.9; }
    40% { transform: translate(2px, 0); opacity: 0.8; }
    80% { transform: translate(1px, 0); opacity: 0.3; }
    100% { transform: translate(0, 0); opacity: 0; }
}

/* Body text */
.body-text {
    font-family: var(--body-font);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.85;
    letter-spacing: 0.02em;
    color: var(--body-silver);
    max-width: 60ch;
    margin-bottom: 20px;
}

.body-text:last-child { margin-bottom: 0; }

/* ==========================================================
   Duotone image treatment (CSS-only, no preprocessed image)
   ========================================================== */
.duotone {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: 32px;
    background: #050510;
    border: 1px solid var(--border-sapphire);
}

.duotone__image {
    position: absolute;
    inset: 0;
    filter: grayscale(1) contrast(1.15) brightness(0.8);
    mix-blend-mode: luminosity;
}

/* Gears — layered radial/conic gradients */
.duotone__image--gears {
    background:
        radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.6) 0 8%, transparent 8.5% 10%, rgba(255, 255, 255, 0.35) 10% 18%, transparent 18.5% 20%, rgba(255, 255, 255, 0.5) 20% 30%, transparent 31% 34%, rgba(255, 255, 255, 0.25) 34% 48%, transparent 49% 52%),
        conic-gradient(from 0deg at 30% 50%, rgba(255, 255, 255, 0.2) 0 10deg, transparent 10deg 20deg, rgba(255, 255, 255, 0.2) 20deg 30deg, transparent 30deg 40deg, rgba(255, 255, 255, 0.2) 40deg 50deg, transparent 50deg 60deg, rgba(255, 255, 255, 0.2) 60deg 70deg, transparent 70deg 80deg, rgba(255, 255, 255, 0.2) 80deg 90deg, transparent 90deg 100deg, rgba(255, 255, 255, 0.2) 100deg 110deg, transparent 110deg 120deg),
        radial-gradient(circle at 72% 45%, rgba(255, 255, 255, 0.55) 0 5%, transparent 5.5% 8%, rgba(255, 255, 255, 0.3) 8% 14%, transparent 14.5% 16%, rgba(255, 255, 255, 0.45) 16% 24%, transparent 25% 28%, rgba(255, 255, 255, 0.22) 28% 38%, transparent 39% 42%),
        conic-gradient(from 15deg at 72% 45%, rgba(255, 255, 255, 0.2) 0 12deg, transparent 12deg 24deg, rgba(255, 255, 255, 0.2) 24deg 36deg, transparent 36deg 48deg, rgba(255, 255, 255, 0.2) 48deg 60deg, transparent 60deg 72deg, rgba(255, 255, 255, 0.2) 72deg 84deg, transparent 84deg 96deg, rgba(255, 255, 255, 0.2) 96deg 108deg, transparent 108deg 120deg),
        #1a1a1a;
    background-blend-mode: screen, overlay, screen, overlay, normal;
}

/* Observatory — domed structure silhouette */
.duotone__image--observatory {
    background:
        radial-gradient(ellipse 70% 45% at 50% 60%, rgba(255, 255, 255, 0.5), transparent 65%),
        radial-gradient(ellipse 35% 25% at 50% 45%, rgba(255, 255, 255, 0.7), transparent 70%),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9), transparent 1.5%),
        radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.8), transparent 1.5%),
        radial-gradient(circle at 60% 30%, rgba(255, 255, 255, 0.85), transparent 1%),
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.7), transparent 1%),
        radial-gradient(circle at 15% 35%, rgba(255, 255, 255, 0.6), transparent 1%),
        radial-gradient(circle at 88% 45%, rgba(255, 255, 255, 0.7), transparent 1%),
        radial-gradient(circle at 45% 15%, rgba(255, 255, 255, 0.65), transparent 1%),
        linear-gradient(180deg, #0b0b14 0%, #252540 70%, #0f0f1a 100%);
    background-blend-mode: screen, screen, screen, screen, screen, screen, screen, screen, screen, normal;
}

/* Overlay: duotone color map */
.duotone__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: color;
}

.duotone--emerald .duotone__overlay {
    background: linear-gradient(135deg, #0D0D1A 0%, #50C878 100%);
}

.duotone--amethyst .duotone__overlay {
    background: linear-gradient(135deg, #0D0D1A 0%, #6B3FA0 100%);
}

.duotone--ruby .duotone__overlay {
    background: linear-gradient(135deg, #0D0D1A 0%, #C23B5E 100%);
}

/* ==========================================================
   Heartbeat glitch on frame 2
   ========================================================== */
.heartbeat-image {
    position: relative;
}

.heartbeat-image.pulsing .duotone__image {
    animation: heartbeatGlitch 400ms ease-out;
}

.heartbeat-image.pulsing .duotone__overlay {
    animation: heartbeatOverlay 400ms ease-out;
}

.heartbeat-image.pulsing .scanlines {
    animation: scanlineSweep 400ms linear;
    opacity: 1;
}

@keyframes heartbeatGlitch {
    0% { transform: translate(0, 0); filter: grayscale(1) contrast(1.15) brightness(0.8); }
    20% { transform: translate(-4px, 2px); filter: grayscale(0.7) contrast(1.5) brightness(1) hue-rotate(30deg); }
    40% { transform: translate(4px, -2px); filter: grayscale(0.9) contrast(1.4) brightness(0.9) hue-rotate(-20deg); }
    60% { transform: translate(-2px, 1px); filter: grayscale(1) contrast(1.2) brightness(0.85); }
    100% { transform: translate(0, 0); filter: grayscale(1) contrast(1.15) brightness(0.8); }
}

@keyframes heartbeatOverlay {
    0%, 100% { mix-blend-mode: color; opacity: 1; }
    30% { mix-blend-mode: screen; opacity: 0.7; }
    60% { mix-blend-mode: difference; opacity: 0.9; }
}

.scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(80, 200, 120, 0.12) 0,
            rgba(80, 200, 120, 0.12) 1px,
            transparent 1px,
            transparent 4px
        );
    opacity: 0;
    transition: opacity 200ms ease;
}

@keyframes scanlineSweep {
    0% { transform: translateY(-100%); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

/* ==========================================================
   Terminal frame
   ========================================================== */
.terminal {
    background: #050510;
    border: 2px solid var(--border-sapphire);
    box-shadow: 4px 4px 0 var(--shadow-amethyst);
    overflow: hidden;
    margin-bottom: 20px;
}

.terminal__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--border-sapphire);
    border-bottom: 2px solid var(--border-sapphire);
}

.terminal__dot {
    width: 10px;
    height: 10px;
    background: var(--body-silver);
    border: 1px solid var(--bg-obsidian);
    display: inline-block;
}

.terminal__dot:nth-child(1) { background: var(--star-ruby); }
.terminal__dot:nth-child(2) { background: var(--hover-topaz); }
.terminal__dot:nth-child(3) { background: var(--headline-emerald); }

.terminal__title {
    font-family: var(--display-font);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--body-silver);
    margin-left: 12px;
    text-transform: uppercase;
}

.terminal__screen {
    font-family: var(--body-font);
    font-size: 0.88rem;
    color: var(--headline-emerald);
    padding: 20px 18px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    min-height: 260px;
    white-space: pre-wrap;
    overflow: hidden;
}

.terminal__line {
    display: block;
    min-height: 1.5em;
}

.terminal__line--typed {
    color: var(--headline-emerald);
}

.terminal__line--typed.terminal__line--label {
    color: var(--label-amethyst);
}

.terminal__caret {
    display: inline-block;
    width: 0.5em;
    background: var(--headline-emerald);
    color: var(--headline-emerald);
    animation: blinkCursor 0.8s step-end infinite;
}

/* ==========================================================
   Completion Ring
   ========================================================== */
.completion-ring-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0 32px;
}

.completion-ring {
    display: block;
    transform: rotate(-90deg);
}

.ring-track {
    fill: none;
    stroke: var(--border-sapphire);
    stroke-width: 2;
    opacity: 0.5;
}

.ring-fill {
    fill: none;
    stroke: var(--headline-emerald);
    stroke-width: 3;
    stroke-linecap: square;
    stroke-dasharray: 628.3;
    stroke-dashoffset: 628.3;
    transition: stroke-dashoffset 120ms linear;
    filter: drop-shadow(0 0 6px rgba(80, 200, 120, 0.6));
}

.ring-stars {
    animation: ringRotate 120s linear infinite;
    transform-origin: 120px 120px;
}

.ring-star-pulse {
    animation: ringStarPulse 3s ease-in-out infinite;
}

@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringStarPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ==========================================================
   Celestial divider
   ========================================================== */
.celestial-divider {
    max-width: 480px;
    margin: 40px auto;
    opacity: 0.7;
}

/* ==========================================================
   Progress ring (bottom-right, fixed)
   ========================================================== */
.progress-ring {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    z-index: 10;
    opacity: 0.6;
    transition: opacity 300ms ease;
}

.progress-ring:hover { opacity: 1; }

.progress-ring__track {
    fill: none;
    stroke: var(--border-sapphire);
    stroke-width: 2;
    opacity: 0.6;
}

.progress-ring__fill {
    fill: none;
    stroke: var(--headline-emerald);
    stroke-width: 2;
    stroke-linecap: square;
    stroke-dasharray: 125.66;
    stroke-dashoffset: 125.66;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 120ms linear;
    filter: drop-shadow(0 0 4px rgba(80, 200, 120, 0.5));
}

.progress-ring__star {
    fill: var(--headline-emerald);
    opacity: 0.8;
    animation: entryStarPulse 3s ease-in-out infinite;
    transform-origin: 24px 24px;
}

/* ==========================================================
   Celestial Horizon — final section
   ========================================================== */
.celestial-horizon {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 120px 24px 0;
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 2;
    transition: max-width 0.6s ease;
}

.horizon-starfield {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 5% 15%, rgba(80, 200, 120, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 15% 35%, rgba(194, 59, 94, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 25% 55%, rgba(155, 127, 191, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 35% 75%, rgba(192, 199, 208, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 45% 25%, rgba(80, 200, 120, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 55% 45%, rgba(194, 59, 94, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 65% 65%, rgba(155, 127, 191, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 75% 85%, rgba(192, 199, 208, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(80, 200, 120, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 95% 40%, rgba(194, 59, 94, 0.7), transparent),
        radial-gradient(1px 1px at 10% 60%, rgba(192, 199, 208, 0.5), transparent),
        radial-gradient(1px 1px at 40% 90%, rgba(80, 200, 120, 0.5), transparent),
        radial-gradient(1px 1px at 70% 10%, rgba(155, 127, 191, 0.6), transparent),
        radial-gradient(1px 1px at 90% 70%, rgba(194, 59, 94, 0.5), transparent);
}

.horizon-heading {
    font-family: var(--display-font);
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 3.6rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--headline-emerald);
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.2;
    max-width: 90%;
    position: relative;
}

.horizon-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    position: relative;
}

.horizon-letter.horizon-letter--revealed {
    animation: horizonLetterGlitch 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes horizonLetterGlitch {
    0% {
        opacity: 0;
        transform: translateY(10px);
        text-shadow: -4px 0 var(--star-ruby), 4px 0 var(--shadow-amethyst);
    }
    30% {
        opacity: 0.7;
        transform: translateY(5px);
        text-shadow: -3px 0 var(--star-ruby), 3px 0 var(--shadow-amethyst);
    }
    60% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: -1px 0 var(--star-ruby), 1px 0 var(--shadow-amethyst);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: 0 0 18px rgba(80, 200, 120, 0.4);
    }
}

.horizon-space {
    display: inline-block;
    width: 0.6em;
}

.horizon-ring-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
}

.horizon-ring {
    display: block;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 40px rgba(80, 200, 120, 0.2));
}

.horizon-ring-track {
    fill: none;
    stroke: var(--border-sapphire);
    stroke-width: 1.5;
    opacity: 0.4;
}

.horizon-ring-fill {
    fill: none;
    stroke: var(--headline-emerald);
    stroke-width: 2;
    stroke-linecap: square;
    stroke-dasharray: 816.8;
    stroke-dashoffset: 816.8;
    transition: stroke-dashoffset 1500ms ease;
    filter: drop-shadow(0 0 6px rgba(80, 200, 120, 0.6));
}

.horizon-ring-fill.horizon-ring-fill--drawn {
    stroke-dashoffset: 0;
}

.horizon-ring-stars {
    animation: ringRotate 120s linear infinite;
    transform-origin: 160px 160px;
}

.horizon-caption {
    font-family: var(--body-font);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    color: var(--label-amethyst);
    text-transform: lowercase;
    margin-bottom: 40px;
    opacity: 0.75;
}

.final-silence {
    height: 200px;
    width: 100%;
}

/* Horizon expansion — when section is in view, widen */
.celestial-horizon.horizon--expanded {
    /* No-op — section always full width; used for potential triggers */
}

/* ==========================================================
   Reveal state for frames (IntersectionObserver)
   ========================================================== */
.reveal-frame {
    will-change: opacity, transform, clip-path;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 720px) {
    .telescope-column {
        padding: 0 16px;
    }
    .frame {
        padding: 32px 20px;
        margin: 40px 0;
        box-shadow: 6px 6px 0 var(--shadow-amethyst);
    }
    .breathing-gap { height: 140px; }
    .breathing-gap--large { height: 220px; }
    .progress-ring {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
    .progress-ring svg { width: 40px; height: 40px; }
    .completion-ring {
        width: 200px;
        height: 200px;
    }
    .horizon-ring {
        width: 240px;
        height: 240px;
    }
}