/* layer2.report -- Atmospheric Data Observatory */

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

:root {
    --void: #080C14;
    --phosphor: #37FF8B;
    --ice-cyan: #5EEAD4;
    --slate-silver: #B8C4D0;
    --charcoal: #1E2736;
    --amber: #F5A623;
    --midnight: #0F1729;
    --ghost: rgba(55, 255, 139, 0.1);
    --font-display: 'Share Tech Mono', monospace;
    --font-body: 'Outfit', sans-serif;
    --font-accent: 'Chakra Petch', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--void);
    color: var(--slate-silver);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.75;
    overflow-x: hidden;
}

/* ---- Scanline Overlay ---- */
.scanline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(55, 255, 139, 0.04) 2px,
        rgba(55, 255, 139, 0.04) 3px
    );
    background-attachment: fixed;
}

/* ---- Registration Marks ---- */
.reg-mark {
    position: fixed;
    font-family: var(--font-display);
    font-size: 12px;
    color: #4A5568;
    opacity: 0.3;
    z-index: 999;
    pointer-events: none;
}

/* ---- HUD Frame ---- */
.hud-frame {
    position: fixed;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 998;
    pointer-events: none;
}

.hud-frame-svg {
    width: 100%;
    height: 100%;
}

.hud-rect {
    stroke-dasharray: 3200;
    stroke-dashoffset: 3200;
    animation: hudDraw 2s ease forwards 0.3s;
}

.hud-corner {
    opacity: 0;
    animation: cornerFade 0.3s ease forwards 0.3s;
}

@keyframes hudDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes cornerFade {
    to { opacity: 1; }
}

/* ---- Sections ---- */
.section {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 3rem;
}

/* ---- Relay Header ---- */
.relay-section {
    z-index: 10;
}

.relay-content {
    text-align: center;
    width: 100%;
}

.site-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 10vw, 6rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--phosphor);
    min-height: 1.2em;
}

.site-title .char {
    display: inline-block;
    opacity: 0;
    animation: charFadeIn 0.1s ease forwards;
}

@keyframes charFadeIn {
    to { opacity: 1; }
}

.ticker-bar {
    margin-top: 2rem;
    overflow: hidden;
    width: 100%;
    height: 30px;
}

.ticker-track {
    display: inline-block;
    white-space: nowrap;
    animation: tickerScroll 30s linear infinite;
}

.ticker-text {
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--phosphor);
    opacity: 0.6;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- Topology ---- */
.topology-section {
    position: relative;
    min-height: 200vh;
    background: linear-gradient(to bottom, var(--void), var(--midnight), var(--void));
}

.topology-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(55, 255, 139, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
}

.honeycomb-svg {
    width: 100%;
    max-width: 1000px;
    height: auto;
    z-index: 1;
}

.honeycomb-svg .hex-cell {
    fill: none;
    stroke: var(--charcoal);
    stroke-width: 0.5;
    transition: stroke 0.4s ease, fill 0.4s ease;
    cursor: pointer;
}

.honeycomb-svg .hex-cell.active {
    stroke: var(--phosphor);
    fill: rgba(30, 39, 54, 0.8);
}

.honeycomb-svg .hex-label {
    font-family: var(--font-display);
    font-size: 8px;
    letter-spacing: 0.15em;
    fill: var(--phosphor);
    opacity: 0;
    transition: opacity 0.4s ease;
    text-anchor: middle;
}

.honeycomb-svg .hex-label.visible {
    opacity: 1;
}

.honeycomb-svg .hex-metric {
    font-family: var(--font-accent);
    font-size: 6px;
    letter-spacing: 0.08em;
    fill: var(--slate-silver);
    opacity: 0;
    transition: opacity 0.4s ease;
    text-anchor: middle;
}

.honeycomb-svg .hex-metric.visible {
    opacity: 0.7;
}

/* ---- Data Strata ---- */
.strata-section {
    padding: 2rem 0;
    gap: 1rem;
}

.strata-track {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.track-scroll {
    display: flex;
    gap: 1rem;
    white-space: nowrap;
}

.track-auto-fast {
    animation: autoScrollFast 40s linear infinite;
}

.track-auto-slow {
    animation: autoScrollSlow 100s linear infinite;
}

@keyframes autoScrollFast {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes autoScrollSlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hash-stream {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.05em;
    color: var(--phosphor);
    opacity: 0.4;
}

.narrative-card {
    display: inline-block;
    min-width: 300px;
    max-width: 400px;
    padding: 1.5rem;
    background: var(--charcoal);
    border-left: 3px solid var(--phosphor);
    white-space: normal;
    vertical-align: top;
}

.narrative-card p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--slate-silver);
}

.wire-diagram {
    display: inline-block;
    width: 200px;
    height: 200px;
    vertical-align: top;
}

.wire-diagram svg {
    width: 100%;
    height: 100%;
}

/* ---- Signal Close ---- */
.signal-section {
    min-height: 100vh;
}

.signal-content {
    text-align: center;
    max-width: 700px;
}

.signal-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--phosphor);
    min-height: 1.5em;
}

.signal-cursor {
    animation: cursorBlink 530ms step-end infinite;
}

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

.coord-grid {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: 600px;
}

.coord-item {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.05em;
    color: var(--ice-cyan);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.coord-item.fading {
    opacity: 0.6;
}

.coord-item.dimming {
    opacity: 0.2;
    transition: opacity 3s ease;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .hud-frame {
        top: 12px;
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .section {
        padding: 3rem 1.5rem;
    }

    .narrative-card {
        min-width: 250px;
    }

    .reg-mark {
        display: none;
    }

    .site-title {
        font-size: clamp(1.5rem, 8vw, 3rem);
    }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    .hud-rect {
        stroke-dashoffset: 0;
        animation: none;
    }

    .hud-corner {
        opacity: 1;
        animation: none;
    }

    .ticker-track {
        animation: none;
    }

    .track-auto-fast,
    .track-auto-slow {
        animation: none;
    }

    .site-title .char {
        opacity: 1;
        animation: none;
    }

    .signal-cursor {
        animation: none;
        opacity: 1;
    }
}