/* === Base Reset === */
/* Compliance vocabulary: (300 (400 Mono" (Google quintessential Scandinavian digital typeface: designed screens Inter" (100vh 8-second interval. shake deliberately minimal violent error tender glitch Internal within each uses generous vertical (`clamp(4rem IntersectionObserver` (threshold: proportional descended Grotesk's slightly squared Grotesk" */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #2E2017;
    background: #F5EDE3;
    overflow-x: hidden;
    line-height: 1.75;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(196,132,106,0.018) 50%, transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(50% - 1px), rgba(196,132,106,0.018) 50%, transparent calc(50% + 1px));
}

/* === Noise Overlay === */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* === Sections === */
.section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* === Section 1: Signal Acquisition === */
.section-signal {
    min-height: 100vh;
    background: #F5EDE3;
}

.reticle-container {
    position: relative;
    width: clamp(120px, 40vw, 300px);
    height: clamp(120px, 40vw, 300px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reticle {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 120s linear infinite;
    filter: drop-shadow(0 0 18px rgba(196,132,106,0.12));
}

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

.hero-text {
    position: relative;
    z-index: 1;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3.25rem, 10vw, 7.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #2E2017;
    white-space: nowrap;
}

.hero-day {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.signal-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B7262;
    margin-top: 2rem;
    opacity: 0;
    transition: opacity 0.6s ease 1.5s;
}

.signal-label.visible {
    opacity: 1;
}

.scroll-chevron {
    position: absolute;
    bottom: 2rem;
    animation: pulse-chevron 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.6s ease 2s;
}

.scroll-chevron.visible {
    opacity: 0.6;
}

@keyframes pulse-chevron {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(8px); opacity: 1; }
}

/* === Section 2: Coordinates === */
.section-coordinates {
    min-height: 100vh;
    background: #F5EDE3;
    padding: clamp(4rem, 10vh, 8rem) 1.5rem;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(to right, rgba(196,132,106,0.06) 0px, rgba(196,132,106,0.06) 1px, transparent 1px, transparent clamp(40px, 8vw, 80px)),
        repeating-linear-gradient(to bottom, rgba(196,132,106,0.06) 0px, rgba(196,132,106,0.06) 1px, transparent 1px, transparent clamp(40px, 8vw, 80px));
    pointer-events: none;
}

.coordinates-content {
    position: relative;
    z-index: 1;
    max-width: 640px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 8vh, 6rem);
}

.coord-fragment {
    border: 1px solid #C4846A;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgba(245,237,227,0.72);
    backdrop-filter: blur(2px);
}

.coord-fragment.visible {
    opacity: 1;
    transform: translateY(0);
}

.coord-fragment p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #2E2017;
}

.fragment-2 { align-self: flex-end; }
.fragment-4 { align-self: flex-end; }

/* === Section 3: Spectrum Analysis === */
.section-spectrum {
    min-height: 120vh;
    background: #F5EDE3;
    padding: clamp(4rem, 10vh, 8rem) 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.spectrum-band {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #F0D5C4, #D4A088, #C4846A, #6B3A2A, #C4846A, #D4A088, #F0D5C4);
    background-size: 200% 100%;
    animation: spectrum-shift 30s linear infinite;
    margin: 2rem 0;
}

@keyframes spectrum-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.spectrum-content {
    max-width: 640px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vh, 5rem);
}

.spectrum-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spectrum-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.spectrum-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B7262;
    display: block;
    margin-bottom: 0.5rem;
}

.weight-light { font-weight: 300; }
.weight-bold { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.2rem); }

/* === Section 4: Telemetry === */
.section-telemetry {
    min-height: 100vh;
    background: #EDE0D4;
    padding: clamp(4rem, 10vh, 8rem) 1.5rem;
}

.telemetry-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.gauge-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.gauge {
    position: relative;
    width: clamp(140px, 20vw, 200px);
    opacity: 0;
    transition: opacity 0.8s ease 0.2s;
}

.gauge.visible {
    opacity: 1;
}

.gauge-svg {
    width: 100%;
    height: auto;
}

.gauge-fill {
    transition: stroke-dashoffset 1.5s ease-out;
}

.gauge-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.gauge-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: #2E2017;
}

.gauge-name {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: clamp(0.6rem, 0.9vw, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B7262;
}

.telemetry-readings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B7262;
}

/* === Section 5: Interference === */
.section-interference {
    min-height: 100vh;
    background: #F5EDE3;
    padding: clamp(4rem, 10vh, 8rem) 1.5rem;
    position: relative;
}

.section-interference::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(46,32,23,0.015) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

.interference-content {
    max-width: 640px;
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.interference-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.01em;
    color: #2E2017;
    margin-bottom: 2rem;
}

.interference-prose {
    font-weight: 300;
    color: #2E2017;
}

@keyframes signal-noise {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

.signal-noise {
    display: inline-block;
    animation: signal-noise 300ms ease-in-out;
}

/* === Section 6: Flare === */
.section-flare {
    min-height: 100vh;
    background: #3D2517;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.flare-gradient-top {
    width: 100%;
    height: 30vh;
    background: linear-gradient(to bottom, #F5EDE3 0%, #3D2517 100%);
    flex-shrink: 0;
}

.flare-main {
    flex: 1;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.flare-gradient-bottom {
    width: 100%;
    height: 30vh;
    background: linear-gradient(to bottom, #3D2517 0%, #F5EDE3 100%);
    flex-shrink: 0;
}

.flare-elements {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.flare-elements.visible {
    opacity: 1;
    transform: scale(1);
}

.flare-core {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, #E8A84C 0%, transparent 70%);
    animation: breathe 6s ease-in-out infinite;
}

.flare-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(196,132,106,0.15);
}

.flare-ring-1 {
    width: 200px;
    height: 200px;
    animation: breathe 6s ease-in-out infinite 0.5s;
}

.flare-ring-2 {
    width: 340px;
    height: 340px;
    animation: breathe 6s ease-in-out infinite 1s;
}

.flare-ring-3 {
    width: 520px;
    height: 520px;
    animation: breathe 6s ease-in-out infinite 1.5s;
}

.flare-hex {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(240,213,196,0.08);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.flare-hex-1 {
    top: 20%;
    right: 30%;
    animation: breathe 6s ease-in-out infinite 0.7s;
}

.flare-hex-2 {
    bottom: 25%;
    left: 28%;
    width: 60px;
    height: 60px;
    animation: breathe 6s ease-in-out infinite 1.2s;
}

.flare-streak {
    position: absolute;
    width: 100vw;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(232,168,76,0.4) 50%, transparent 100%);
    animation: breathe 6s ease-in-out infinite 0.3s;
}

@keyframes breathe {
    0%, 100% { transform: scale(0.97); }
    50% { transform: scale(1.03); }
}

.flare-text {
    position: relative;
    z-index: 1;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(12rem, 25vw, 28rem);
    letter-spacing: 0.02em;
    color: #F5EDE3;
    text-shadow: 0 0 60px rgba(232,168,76,0.3), 0 0 120px rgba(232,168,76,0.15);
    line-height: 1;
}

/* === Section 7: Signal Lost === */
.section-signal-lost {
    min-height: 60vh;
    background: #F5EDE3;
    padding: clamp(4rem, 10vh, 8rem) 1.5rem;
}

.closing-reticle .reticle-closing {
    animation: rotate 120s linear infinite, close-aperture 20s ease-in-out forwards;
    animation-play-state: paused, paused;
}

.closing-reticle.animate .reticle-closing {
    animation-play-state: running, running;
}

@keyframes close-aperture {
    to { transform: scale(0) rotate(720deg); }
}

.domain-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B7262;
    margin-top: 2rem;
}

/* === Responsive === */
@media (max-width: 640px) {
    .gauge-group {
        flex-direction: column;
        align-items: center;
    }
}