/* nonri.xyz — Cinematic Surveillance Calm */

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

:root {
    --deep-black: #1a1611;
    --dark-brown: #2a241c;
    --mid-brown: #3d362b;
    --warm-grey: #706756;
    --sand: #a89b85;
    --cream: #f2e8d5;
    --amber: #d4a24e;
    --amber-bright: #ffb833;
    --steel-blue: #4a7c9b;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--deep-black);
    color: var(--cream);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    overflow-x: hidden;
}

.parallax-container {
    position: relative;
}

/* Sections */
.section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-1 { background: var(--deep-black); }
.section-2 { background: var(--dark-brown); }
.section-3 { background: var(--mid-brown); }
.section-4 { background: var(--dark-brown); }
.section-5 { background: var(--deep-black); }

/* Parallax Layers */
.parallax-deep,
.parallax-mid,
.parallax-fore {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-deep { z-index: 1; }
.parallax-mid { z-index: 2; }
.parallax-fore { z-index: 3; flex-direction: column; padding: 2rem; }

/* Typography */
.section-title {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 5.5rem);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1.1;
    text-align: center;
    color: var(--cream);
    filter: blur(8px);
    opacity: 0;
    transition: filter 1.2s ease-out, opacity 1.2s ease-out;
}

.section-title.in-view {
    filter: blur(0px);
    opacity: 1;
}

.body-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    line-height: 1.8;
    color: var(--sand);
    max-width: 600px;
    text-align: center;
    margin-top: 1.5rem;
    filter: blur(6px);
    opacity: 0;
    transition: filter 1.4s ease-out 0.3s, opacity 1.4s ease-out 0.3s;
}

.body-text.in-view {
    filter: blur(0px);
    opacity: 1;
}

.mono-caption {
    font-family: 'Fira Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.15em;
    color: var(--warm-grey);
    text-transform: uppercase;
    margin-top: 2rem;
    filter: blur(4px);
    opacity: 0;
    transition: filter 1.4s ease-out 0.5s, opacity 1.4s ease-out 0.5s;
}

.mono-caption.in-view {
    filter: blur(0px);
    opacity: 1;
}

/* Glow Effects */
.glow-element {
    box-shadow:
        0 0 4px rgba(212, 162, 78, 0.5),
        0 0 12px rgba(212, 162, 78, 0.3),
        0 0 24px rgba(212, 162, 78, 0.15);
}

/* Indicators — amber pulsing lights */
.indicator {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow:
        0 0 4px rgba(212, 162, 78, 0.6),
        0 0 12px rgba(212, 162, 78, 0.3),
        0 0 20px rgba(212, 162, 78, 0.15);
    animation: pulse 3s ease-in-out infinite;
}

.indicator-1 { top: 20%; left: 15%; animation-delay: 0s; }
.indicator-2 { top: 60%; left: 80%; animation-delay: 1.2s; }
.indicator-3 { top: 75%; left: 25%; animation-delay: 0.6s; }
.indicator-4 { top: 30%; right: 20%; animation-delay: 0.4s; }
.indicator-5 { top: 15%; left: 70%; animation-delay: 0.8s; }
.indicator-6 { bottom: 20%; left: 30%; animation-delay: 1.5s; }
.indicator-7 { top: 25%; right: 15%; animation-delay: 0.2s; }
.indicator-8 {
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse-bright 4s ease-in-out infinite;
}

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

@keyframes pulse-bright {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

/* Signal Grid — deep background */
.signal-grid {
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(168, 155, 133, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 155, 133, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Static field */
.static-field {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(168, 155, 133, 0.03) 2px,
        rgba(168, 155, 133, 0.03) 4px
    );
    animation: static-scroll 8s linear infinite;
}

@keyframes static-scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-60px); }
}

/* Grid Pattern */
.grid-pattern {
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(212, 162, 78, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(74, 124, 155, 0.03) 0%, transparent 50%);
}

/* Amber wash */
.amber-wash {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(212, 162, 78, 0.05) 0%, transparent 70%);
}

/* Waveforms */
.waveform {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity: 0.3;
    animation: waveform-pulse 5s ease-in-out infinite;
}

.waveform-1 { width: 200px; top: 45%; left: 10%; animation-delay: 0s; }
.waveform-2 { width: 300px; bottom: 35%; right: 5%; animation-delay: 1s; }
.waveform-3 { width: 250px; bottom: 40%; left: 15%; animation-delay: 2s; }

@keyframes waveform-pulse {
    0%, 100% { opacity: 0.15; transform: scaleX(0.8); }
    50% { opacity: 0.4; transform: scaleX(1); }
}

/* Scan line */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 162, 78, 0.3) 50%, transparent 100%);
    animation: scan 6s linear infinite;
}

@keyframes scan {
    0% { top: 0%; }
    100% { top: 100%; }
}

/* Data Fragments */
.data-fragments {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.fragment {
    font-family: 'Fira Mono', monospace;
    font-size: 0.75rem;
    color: var(--amber);
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(212, 162, 78, 0.3);
    letter-spacing: 0.1em;
    filter: blur(4px);
    opacity: 0;
    transition: filter 1s ease-out, opacity 1s ease-out;
}

.fragment.in-view {
    filter: blur(0px);
    opacity: 1;
}

.fragment:nth-child(1) { transition-delay: 0.4s; }
.fragment:nth-child(2) { transition-delay: 0.6s; }
.fragment:nth-child(3) { transition-delay: 0.8s; }
.fragment:nth-child(4) { transition-delay: 1.0s; }

/* Oscilloscope canvas */
.oscilloscope {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 80px;
    opacity: 0.4;
}

/* Content block */
.content-block {
    max-width: 600px;
    text-align: center;
}

/* Void */
.void {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(26, 22, 17, 0.5) 0%, var(--deep-black) 100%);
}