/* ====== CSS CUSTOM PROPERTIES - DESIGN SYSTEM ====== */

:root {
    /* Color Palette - Analogous Copper-Dusk */
    --bg-deep: #0D0F1A;           /* Midnight Indigo - page background */
    --bg-surface: #1A1D2E;        /* Deep Twilight - node container bg */
    --trace-color: #D4A574;       /* Copper Trace - spine, borders, traces */
    --accent-warm: #E8D5B7;       /* Warm Parchment - headings, emphasized */
    --text-body: #C4B097;         /* Aged Ink - body text */
    --text-muted: #8B7355;        /* Muted Copper - metadata, secondary */
    --glow-ember: #E8A04F;        /* Ember Glow - traveling light, hover */
    --grid-ghost: #2A2D3E;        /* Ghost Grid - texture, faint lines */

    /* Typography Scales */
    --font-display: 'Silkscreen', monospace;
    --font-title: 'Caveat', cursive;
    --font-body: 'Kalam', cursive;
    --font-mono: 'VT323', monospace;

    /* Spacing System (powers of 8) */
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-64: 64px;
    --space-128: 128px;

    /* Timeline Layout */
    --spine-width: 4px;
    --spine-x: 38.2%;
    --node-width: 360px;
    --pin-size: 8px;
    --branch-length: 32px;

    /* Animations */
    --transition-smooth: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --tilt-duration: 600ms ease-out;
    --typewriter-char-delay: 200ms;
}

/* ====== GLOBAL RESET ====== */

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

html {
    scroll-behavior: auto;
    background: var(--bg-deep);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-deep);
    color: var(--text-body);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden;
    position: relative;

    /* Background grid texture */
    background-image:
        radial-gradient(circle, var(--grid-ghost) 1px, transparent 1px);
    background-size: 8px 8px;
    background-position: 0 0;
    background-attachment: fixed;
}

/* ====== TRAVELING LIGHT ====== */

.traveling-light {
    position: fixed;
    width: 4px;
    height: 4px;
    background-color: var(--glow-ember);
    box-shadow: 0 0 8px 2px rgba(232, 160, 79, 0.25);
    left: calc(var(--spine-x) + var(--spine-width) / 2 - 2px);
    top: 0;
    z-index: 100;
    pointer-events: none;
    animation: traveling-light-descent 60s linear infinite;
}

@keyframes traveling-light-descent {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(3600px);
    }
}

/* ====== TIMELINE SPINE ====== */

.timeline-spine {
    position: fixed;
    width: var(--spine-width);
    height: 100%;
    left: calc(var(--spine-x) + var(--spine-width) / 2 - var(--spine-width) / 2);
    top: 0;
    background: linear-gradient(180deg, var(--trace-color) 50%, transparent 50%);
    background-size: 1px 8px;
    background-repeat: repeat-y;
    z-index: 10;
    opacity: 0.9;
}

/* ====== HERO SECTION ====== */

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--bg-deep);
}

.hero-title {
    font-family: var(--font-display);
    font-size: 128px;
    font-weight: 400;
    color: var(--trace-color);
    letter-spacing: 0.05em;
    text-align: center;
    animation: typewriter-fade 8.2s steps(5, end) forwards;
    opacity: 0;
}

@keyframes typewriter-fade {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* ====== TIMELINE FEED ====== */

.timeline-feed {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100vh;
    padding-bottom: var(--space-128);
}

/* ====== TIMELINE NODES ====== */

.timeline-node {
    position: relative;
    width: var(--node-width);
    margin-bottom: var(--space-128);
    opacity: 0;
    transform: perspective(800px) rotateY(0deg);
    animation: node-entrance var(--tilt-duration) forwards;
}

@keyframes node-entrance {
    from {
        opacity: 0;
        transform: perspective(800px) rotateY(-8deg);
    }
    to {
        opacity: 1;
        transform: perspective(800px) rotateY(0deg);
    }
}

.timeline-node.node-left {
    margin-left: auto;
    margin-right: calc(50% - var(--spine-x) + var(--space-64));
}

.timeline-node.node-left .node-branch {
    right: calc(100% + var(--branch-length));
}

.timeline-node.node-right {
    margin-right: auto;
    margin-left: calc(50% - var(--spine-x) + var(--space-64));
}

.timeline-node.node-right .node-branch {
    left: calc(100% + var(--branch-length));
}

/* Node connector elements */
.node-branch {
    position: absolute;
    width: var(--branch-length);
    height: var(--spine-width);
    background: var(--trace-color);
    top: var(--space-24);
    z-index: 9;
}

.node-pin {
    position: absolute;
    width: var(--pin-size);
    height: var(--pin-size);
    background: var(--trace-color);
    top: var(--space-24);
    z-index: 9;
}

.timeline-node.node-left .node-pin {
    right: -var(--pin-size);
}

.timeline-node.node-right .node-pin {
    left: -var(--pin-size);
}

/* Node container */
.node-container {
    background-color: var(--bg-surface);
    border: 2px solid var(--trace-color);
    padding: var(--space-24);
    border-radius: 0;
    position: relative;
    background-image:
        radial-gradient(circle, var(--grid-ghost) 0.5px, transparent 0.5px);
    background-size: 8px 8px;
    background-position: 0 0;
}

/* ====== NODE CONTENT ====== */

.node-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-16);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.node-title {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-warm);
    margin-bottom: var(--space-16);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.node-text {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: var(--space-16);
}

/* Node separator - pixelated circuit trace */
.node-separator {
    height: 2px;
    background: linear-gradient(90deg,
        var(--trace-color) 0%,
        var(--trace-color) 4px,
        transparent 4px,
        transparent 8px,
        var(--trace-color) 8px,
        var(--trace-color) 12px,
        transparent 12px,
        transparent 16px);
    background-size: 16px 100%;
    margin: var(--space-16) 0;
    background-repeat: repeat-x;
}

.node-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    font-weight: 400;
}

/* ====== HOVER STATES ====== */

.timeline-node:hover .node-container {
    border-color: var(--glow-ember);
    box-shadow: inset 0 0 16px rgba(232, 160, 79, 0.1);
}

/* ====== RESPONSIVE DESIGN ====== */

@media (max-width: 768px) {
    :root {
        --spine-x: 16px;
        --node-width: calc(100vw - 64px);
        --branch-length: 16px;
    }

    .timeline-feed {
        align-items: flex-end;
        padding-left: var(--space-32);
        padding-right: var(--space-32);
    }

    .timeline-node {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .timeline-node.node-left,
    .timeline-node.node-right {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .timeline-node.node-left .node-branch,
    .timeline-node.node-right .node-branch {
        right: 100% !important;
        left: auto !important;
        width: var(--branch-length);
    }

    .node-pin {
        right: -var(--pin-size) !important;
        left: auto !important;
    }

    .hero-title {
        font-size: 64px;
    }

    .node-title {
        font-size: 24px;
    }

    .node-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    :root {
        --node-width: calc(100vw - 48px);
    }

    .timeline-feed {
        padding-left: var(--space-16);
        padding-right: var(--space-16);
    }

    .hero-title {
        font-size: 48px;
    }

    .node-container {
        padding: var(--space-16);
    }

    .node-title {
        font-size: 20px;
    }

    .node-text {
        font-size: 13px;
    }
}

/* ====== CURSOR TRACKING (DESKTOP ONLY) ====== */

@media (hover: hover) and (pointer: fine) {
    body {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="2" fill="%23D4A574"/><circle cx="8" cy="8" r="6" fill="none" stroke="%23D4A574" stroke-width="0.5"/></svg>') 8 8, auto;
    }
}

/* ====== PRINT STYLES ====== */

@media print {
    body {
        background: white;
        color: black;
    }

    .traveling-light {
        display: none;
    }
}