/* === RESET === */
/* Design compliance vocabulary: IBM Plex Mono" (Google Fonts (300), IBM Plex Sans" (Google Fonts (300); Intersection Observer for underline-draw animations to detect when elements with a `.draw-underline` class enter the viewport. On entry. */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* === NOISE OVERLAY === */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    filter: url(#noise);
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
}

/* === BASE === */
body {
    background: #1c1c1e;
    color: #e8e8ec;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    line-height: 1.65;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    overflow-x: hidden;
}

/* === CIRCUIT BACKGROUND === */
.circuit-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 0.05;
    pointer-events: none;
}

/* Circuit node pulse animations */
.node { opacity: 0.04; }
.node-1 { animation: nodePulse 3s ease-in-out infinite; }
.node-2 { animation: nodePulse 4s ease-in-out infinite 0.5s; }
.node-3 { animation: nodePulse 3.5s ease-in-out infinite 1s; }
.node-4 { animation: nodePulse 5s ease-in-out infinite 1.5s; }
.node-5 { animation: nodePulse 3s ease-in-out infinite 2s; }
.node-6 { animation: nodePulse 4.5s ease-in-out infinite 0.3s; }
.node-7 { animation: nodePulse 3.8s ease-in-out infinite 1.2s; }
.node-8 { animation: nodePulse 4.2s ease-in-out infinite 2.5s; }
.node-9 { animation: nodePulse 5s ease-in-out infinite 0.8s; }
.node-10 { animation: nodePulse 3.3s ease-in-out infinite 1.8s; }
.node-11 { animation: nodePulse 4s ease-in-out infinite 3s; }
.node-12 { animation: nodePulse 3.6s ease-in-out infinite 0.6s; }

@keyframes nodePulse {
    0%, 100% { opacity: 0.03; }
    50% { opacity: 0.07; }
}

/* === TIMELINE SPINE === */
.timeline-spine {
    position: fixed;
    right: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(57, 255, 20, 0.08);
    z-index: 100;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #39ff14;
    opacity: 0.6;
    height: 0%;
    transition: height 0.1s linear;
}

.timeline-tick {
    position: absolute;
    right: 0;
    width: 20px;
    height: 1px;
    background: #39ff14;
    opacity: 0.3;
}

.timeline-date {
    position: absolute;
    right: 24px;
    top: -6px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 0.65rem;
    color: #39ff14;
    opacity: 0.4;
    white-space: nowrap;
}

/* === HERO === */
.hero {
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    padding: clamp(2rem, 5vw, 6rem);
    padding-bottom: 20vh;
    position: relative;
    background: #1c1c1e;
}

.hero::after {
    content: '';
    position: absolute;
    top: 61.8%;
    left: 0;
    right: 0;
    height: 2px;
    background: #39ff14;
    animation: heroPulse 1.6s ease-in-out infinite;
}

@keyframes heroPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1.0; }
}

.hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(4rem, 12vw, 14rem);
    line-height: 0.9;
    letter-spacing: 0.08em;
    color: #e8e8ec;
    mix-blend-mode: difference;
}

.hero-subtitle {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 7.2vw, 8.4rem);
    line-height: 0.9;
    letter-spacing: 0.08em;
    color: #e8e8ec;
}

.hero-korean {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4.8vw, 5.6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #e8e8ec;
    margin-top: 0.2em;
}

/* === SLABS === */
.slab {
    padding: clamp(2rem, 5vw, 6rem);
    padding-right: clamp(3rem, 6vw, 8rem);
    border-top: 4px solid #39ff14;
}

.slab-dark {
    background: #1c1c1e;
}

.slab-alt {
    background: #2a2a2d;
}

.slab h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    letter-spacing: 0.15em;
    color: #e8e8ec;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

/* === DRAW UNDERLINE === */
.draw-underline {
    position: relative;
    display: inline-block;
}

.draw-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #39ff14;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease-out;
}

.draw-underline.active::after {
    transform: scaleX(1);
}

/* === TEXT STYLES === */
.body-text {
    margin-bottom: 1.2em;
    max-width: 72ch;
}

.caption {
    font-weight: 300;
    color: #8a8a94;
    line-height: 1.4;
    font-size: clamp(0.82rem, 0.95vw, 0.95rem);
    margin-bottom: 1em;
    max-width: 60ch;
}

.mono-data {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    color: #8a8a94;
}

.amber-text {
    color: #ffb800;
}

.emergency-mark {
    color: #ff2e3b;
}

.key-phrase {
    display: inline;
}

/* === TIMELINE ENTRIES === */
.timeline-entry {
    margin-bottom: 2rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(57, 255, 20, 0.15);
}

.timeline-entry .mono-data {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.timeline-entry strong {
    color: #e8e8ec;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1em;
}

/* === CONCRETE TEXTURE DIVIDERS === */
.slab {
    border-image: linear-gradient(
        90deg,
        #39ff14 0%,
        #39ff14 100%
    ) 1;
}

.slab h2::before {
    content: '';
    display: block;
    height: 4px;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, #2a2a2d, #333338, #252528, #333338, #2a2a2d);
    opacity: 0;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .timeline-spine {
        display: none;
    }

    .slab {
        padding-right: clamp(2rem, 5vw, 6rem);
    }
}