/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --void-black: #0A0A0F;
    --deep-indigo: #12101F;
    --crimson-pulse: #FF003C;
    --electric-cyan: #4DEEEA;
    --bone-white: #E8E2D6;
    --aged-parchment: #C8C1B4;
    --chlorophyll: #2ECC40;
    --celestial-amber: #FFB700;
    --indigo-mid: #1a1830;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--void-black);
    color: var(--aged-parchment);
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    position: relative;
}

/* ===== STAR LAYERS (parallax) ===== */
.star-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.star-layer-1::after,
.star-layer-2::after,
.star-layer-3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
}

.star-layer-1::after {
    box-shadow:
        45vw 12vh #fff, 12vw 34vh #fff, 78vw 8vh rgba(255,255,255,0.7),
        23vw 56vh #FFB700, 91vw 23vh #fff, 56vw 67vh rgba(255,255,255,0.5),
        34vw 89vh #fff, 67vw 45vh #FFB700, 5vw 78vh rgba(255,255,255,0.6),
        88vw 92vh #fff, 15vw 15vh rgba(255,183,0,0.5), 72vw 71vh #fff,
        41vw 38vh rgba(255,255,255,0.4), 95vw 55vh #fff, 8vw 95vh #FFB700,
        63vw 18vh #fff, 29vw 82vh rgba(255,255,255,0.6), 84vw 41vh #fff,
        50vw 60vh rgba(255,183,0,0.4), 17vw 47vh #fff,
        37vw 5vh #fff, 76vw 88vh rgba(255,255,255,0.5), 2vw 62vh #fff,
        58vw 29vh #FFB700, 93vw 74vh rgba(255,255,255,0.3),
        21vw 19vh #fff, 69vw 52vh #fff, 46vw 96vh rgba(255,183,0,0.6),
        81vw 7vh #fff, 10vw 43vh rgba(255,255,255,0.7);
    animation: starDrift1 200s linear infinite;
}

.star-layer-2::after {
    box-shadow:
        22vw 28vh rgba(255,255,255,0.5), 55vw 82vh rgba(255,255,255,0.4),
        80vw 15vh rgba(255,255,255,0.3), 38vw 64vh rgba(255,255,255,0.6),
        10vw 90vh rgba(255,183,0,0.3), 65vw 35vh rgba(255,255,255,0.4),
        48vw 50vh rgba(255,255,255,0.5), 90vw 68vh rgba(255,183,0,0.4),
        30vw 10vh rgba(255,255,255,0.3), 73vw 78vh rgba(255,255,255,0.5),
        5vw 55vh rgba(255,255,255,0.4), 85vw 22vh rgba(255,255,255,0.3),
        42vw 93vh rgba(255,183,0,0.3), 60vw 42vh rgba(255,255,255,0.5),
        18vw 72vh rgba(255,255,255,0.4), 95vw 5vh rgba(255,255,255,0.3);
    animation: starDrift2 300s linear infinite;
}

.star-layer-3::after {
    box-shadow:
        33vw 20vh rgba(255,255,255,0.2), 68vw 75vh rgba(255,255,255,0.3),
        15vw 48vh rgba(255,255,255,0.2), 82vw 33vh rgba(255,255,255,0.25),
        50vw 85vh rgba(255,255,255,0.2), 7vw 12vh rgba(255,255,255,0.3),
        92vw 58vh rgba(255,255,255,0.2), 40vw 42vh rgba(255,255,255,0.25),
        75vw 95vh rgba(255,255,255,0.2), 25vw 65vh rgba(255,255,255,0.3);
    animation: starDrift3 500s linear infinite;
}

@keyframes starDrift1 {
    from { transform: translateY(0); }
    to { transform: translateY(-50vh); }
}
@keyframes starDrift2 {
    from { transform: translateY(0); }
    to { transform: translateY(-30vh); }
}
@keyframes starDrift3 {
    from { transform: translateY(0); }
    to { transform: translateY(-15vh); }
}

/* ===== BRAND ANCHOR ===== */
.brand-anchor {
    position: fixed;
    left: 0;
    top: 50%;
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: left center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--electric-cyan);
    z-index: 100;
    cursor: pointer;
    padding: 8px 16px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.brand-anchor:hover {
    color: var(--crimson-pulse);
}

/* ===== HERO ZONE ===== */
.hero-zone {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

.hero-bloom {
    position: absolute;
    width: 70vw;
    height: 80vh;
    top: 10vh;
    left: 15vw;
    opacity: 0;
    transition: opacity 0.8s ease;
    background:
        radial-gradient(ellipse 30% 50% at 50% 40%, var(--indigo-mid) 0%, transparent 70%),
        radial-gradient(ellipse 15% 60% at 45% 30%, var(--deep-indigo) 0%, transparent 60%),
        radial-gradient(ellipse 15% 60% at 55% 30%, var(--deep-indigo) 0%, transparent 60%),
        radial-gradient(ellipse 10% 40% at 40% 50%, rgba(46, 204, 64, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 10% 40% at 60% 50%, rgba(46, 204, 64, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 8% 25% at 35% 25%, var(--indigo-mid) 0%, transparent 60%),
        radial-gradient(ellipse 8% 25% at 65% 25%, var(--indigo-mid) 0%, transparent 60%),
        radial-gradient(circle 5% at 50% 55%, rgba(255, 0, 60, 0.1) 0%, transparent 70%);
    clip-path: polygon(
        50% 2%, 42% 8%, 35% 5%, 30% 12%, 22% 10%, 20% 18%, 15% 22%,
        12% 30%, 10% 40%, 12% 50%, 10% 58%, 14% 65%, 18% 72%,
        22% 78%, 28% 82%, 35% 88%, 42% 92%, 50% 95%,
        58% 92%, 65% 88%, 72% 82%, 78% 78%, 82% 72%,
        86% 65%, 90% 58%, 88% 50%, 90% 40%, 88% 30%,
        85% 22%, 80% 18%, 78% 10%, 70% 12%, 65% 5%, 58% 8%
    );
    z-index: 1;
}

.hero-bloom.visible {
    opacity: 1;
}

.hero-spine-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 0;
    background: var(--crimson-pulse);
    transform: translateX(-50%);
    z-index: 2;
    transition: height 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-spine-line.drawn {
    height: 100%;
}

.hero-title {
    font-family: 'Righteous', cursive;
    font-size: clamp(4rem, 12vw, 10rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--crimson-pulse);
    transform: rotate(-7deg) scale(1.1);
    opacity: 0;
    z-index: 3;
    position: relative;
    text-shadow: 0 0 40px rgba(255, 0, 60, 0.3);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.hero-title.visible {
    transform: rotate(-7deg) scale(1);
    opacity: 1;
}

.hero-subtitle {
    z-index: 3;
    position: relative;
    margin-top: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-subtitle.visible {
    opacity: 1;
}

.timestamp-style {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--electric-cyan);
}

.typewriter-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--electric-cyan);
    width: 0;
    animation: typewriter 2s steps(35) 2.5s forwards, blinkCursor 0.7s step-end infinite;
}

@keyframes typewriter {
    to { width: 100%; }
}

@keyframes blinkCursor {
    50% { border-color: transparent; }
}

/* ===== TIMELINE SPINE ===== */
.timeline-spine {
    position: relative;
    z-index: 1;
    padding: 0 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.spine-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(
        to bottom,
        var(--crimson-pulse) 0%,
        var(--crimson-pulse) 90%,
        transparent 100%
    );
    transform: translateX(-50%);
    z-index: 0;
}

.spine-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 60px;
    background: linear-gradient(to bottom, var(--crimson-pulse), rgba(255,0,60,0.3), var(--crimson-pulse));
    animation: spinePulseTravel 3s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255, 0, 60, 0.5);
}

@keyframes spinePulseTravel {
    0% { top: 0; opacity: 1; }
    100% { top: calc(100% - 60px); opacity: 0.3; }
}

/* ===== TIMELINE ENTRIES ===== */
.timeline-entry {
    position: relative;
    width: 100%;
    display: flex;
    margin-bottom: 180px;
}

.timeline-entry:nth-child(odd) {
    margin-bottom: 140px;
}

.timeline-entry:nth-child(even) {
    margin-bottom: 220px;
}

.entry-left {
    justify-content: flex-start;
    padding-right: calc(50% + 60px);
}

.entry-right {
    justify-content: flex-end;
    padding-left: calc(50% + 60px);
}

.entry-content {
    position: relative;
    max-width: 42vw;
    padding: 2rem 2.5rem;
    background: var(--deep-indigo);
}

.entry-left .entry-content {
    border-right: 2px solid var(--crimson-pulse);
}

.entry-right .entry-content {
    border-left: 2px solid var(--crimson-pulse);
}

/* Pulse nodes */
.pulse-node {
    position: absolute;
    left: 50%;
    top: 2rem;
    width: 16px;
    height: 16px;
    background: var(--crimson-pulse);
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: pulseGlow 2s ease-in-out infinite;
}

.pulse-node.pulse-cyan {
    background: var(--electric-cyan);
    animation: pulseGlowCyan 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 0, 60, 0.4); transform: translateX(-50%) scale(1); }
    50% { box-shadow: 0 0 20px rgba(255, 0, 60, 0.8), 0 0 40px rgba(255, 0, 60, 0.3); transform: translateX(-50%) scale(1.3); }
}

@keyframes pulseGlowCyan {
    0%, 100% { box-shadow: 0 0 4px rgba(77, 238, 234, 0.4); transform: translateX(-50%) scale(1); }
    50% { box-shadow: 0 0 20px rgba(77, 238, 234, 0.8), 0 0 40px rgba(77, 238, 234, 0.3); transform: translateX(-50%) scale(1.3); }
}

.entry-timestamp {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--electric-cyan);
    display: block;
    margin-bottom: 0.75rem;
}

.entry-title {
    font-family: 'Righteous', cursive;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bone-white);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.entry-left .entry-title {
    transform: rotate(-3deg);
}

.entry-right .entry-title {
    transform: rotate(2deg);
}

.entry-body {
    color: var(--aged-parchment);
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
}

/* Entry reveal animation */
.timeline-entry {
    opacity: 0;
}

.entry-left {
    transform: translateX(-60px);
}

.entry-right {
    transform: translateX(60px);
}

.timeline-entry.revealed {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-entry.revealed .entry-timestamp {
    animation: fadeSlideUp 0.5s 0.1s both;
}

.timeline-entry.revealed .entry-title {
    animation: fadeSlideUp 0.5s 0.2s both;
}

.timeline-entry.revealed .entry-body {
    animation: fadeSlideUp 0.5s 0.3s both;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== BOTANICAL CORNER VINES ===== */
.botanical-corner-vine {
    position: absolute;
    bottom: 0;
    left: 0;
}

.botanical-corner-vine.vine-right {
    left: auto;
    right: 0;
}

.botanical-corner-vine path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.5s ease;
}

.botanical-corner-vine .vine-leaf {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.4s 1.2s ease, transform 0.4s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(0);
}

.timeline-entry.revealed .botanical-corner-vine path {
    stroke-dashoffset: 0;
}

.timeline-entry.revealed .botanical-corner-vine .vine-leaf {
    opacity: 1;
    transform: scale(1);
}

/* ===== CONSTELLATION BREAKS ===== */
.constellation-break {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4rem 0;
    overflow: hidden;
}

.star-field {
    position: absolute;
    inset: 0;
}

.star-field::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    box-shadow:
        10vw 15vh #fff, 20vw 25vh #FFB700, 30vw 10vh rgba(255,255,255,0.6),
        40vw 35vh #fff, 50vw 20vh rgba(255,183,0,0.5), 60vw 40vh #fff,
        70vw 15vh rgba(255,255,255,0.7), 80vw 30vh #FFB700, 90vw 25vh #fff,
        15vw 50vh rgba(255,255,255,0.5), 25vw 60vh #fff, 35vw 55vh rgba(255,183,0,0.4),
        45vw 70vh #fff, 55vw 45vh rgba(255,255,255,0.6), 65vw 65vh #FFB700,
        75vw 50vh #fff, 85vw 70vh rgba(255,255,255,0.5), 95vw 60vh #fff,
        5vw 80vh rgba(255,255,255,0.4), 22vw 75vh #fff, 38vw 85vh #FFB700,
        52vw 90vh rgba(255,255,255,0.5), 68vw 80vh #fff, 82vw 88vh rgba(255,183,0,0.6),
        48vw 8vh #fff, 62vw 5vh rgba(255,255,255,0.7), 33vw 42vh #FFB700;
}

.star-field-2::after {
    box-shadow:
        8vw 20vh rgba(255,255,255,0.6), 18vw 35vh #FFB700, 28vw 15vh #fff,
        42vw 45vh rgba(255,255,255,0.5), 55vw 10vh #fff, 65vw 55vh #FFB700,
        75vw 25vh rgba(255,255,255,0.7), 85vw 40vh #fff, 92vw 60vh rgba(255,183,0,0.4),
        12vw 65vh #fff, 32vw 70vh rgba(255,255,255,0.5), 48vw 80vh #FFB700,
        58vw 30vh #fff, 72vw 75vh rgba(255,255,255,0.6), 88vw 15vh #fff,
        5vw 45vh rgba(255,183,0,0.5), 25vw 88vh #fff, 40vw 5vh rgba(255,255,255,0.4),
        60vw 92vh #FFB700, 78vw 52vh #fff, 95vw 85vh rgba(255,255,255,0.3);
}

.break-bloom {
    position: absolute;
    width: 50vw;
    height: 60vh;
    opacity: 0.15;
}

.bloom-1 {
    background:
        radial-gradient(ellipse 40% 50% at 50% 50%, var(--indigo-mid) 0%, transparent 70%),
        radial-gradient(ellipse 20% 35% at 40% 40%, var(--deep-indigo) 0%, transparent 60%),
        radial-gradient(ellipse 20% 35% at 60% 40%, var(--deep-indigo) 0%, transparent 60%);
    clip-path: polygon(
        50% 0%, 40% 10%, 30% 5%, 20% 15%, 10% 20%, 5% 35%, 10% 50%,
        5% 65%, 15% 75%, 25% 85%, 35% 90%, 50% 95%,
        65% 90%, 75% 85%, 85% 75%, 95% 65%, 90% 50%,
        95% 35%, 90% 20%, 80% 15%, 70% 5%, 60% 10%
    );
}

.bloom-2 {
    background:
        radial-gradient(ellipse 35% 55% at 50% 45%, var(--indigo-mid) 0%, transparent 70%),
        radial-gradient(ellipse 15% 30% at 45% 35%, rgba(46,204,64,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 15% 30% at 55% 55%, rgba(46,204,64,0.05) 0%, transparent 60%);
    clip-path: polygon(
        50% 2%, 45% 12%, 35% 8%, 28% 18%, 18% 15%, 12% 28%,
        8% 42%, 12% 55%, 8% 68%, 15% 78%, 25% 88%, 38% 94%, 50% 98%,
        62% 94%, 75% 88%, 85% 78%, 92% 68%, 88% 55%,
        92% 42%, 88% 28%, 82% 15%, 72% 18%, 65% 8%, 55% 12%
    );
}

.break-label {
    position: relative;
    z-index: 2;
    font-size: 0.85rem;
    color: var(--crimson-pulse);
    letter-spacing: 0.3em;
    font-family: 'Share Tech Mono', monospace;
}

/* ===== SLASHED DIVIDERS ===== */
.constellation-break::before {
    content: '/////';
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%) rotate(15deg);
    font-family: 'Share Tech Mono', monospace;
    font-size: 2rem;
    color: var(--crimson-pulse);
    letter-spacing: 0.5em;
    opacity: 0.5;
}

/* ===== TERMINAL ZONE ===== */
.terminal-zone {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

.spine-dissolve {
    width: 4px;
    height: 120px;
    background: linear-gradient(to bottom, var(--crimson-pulse), transparent);
    margin-bottom: 3rem;
}

.terminal-message {
    font-family: 'Righteous', cursive;
    font-size: clamp(1.5rem, 4vw, 3rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bone-white);
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.terminal-message.visible {
    opacity: 1;
    transform: translateY(0);
}

.terminal-sub {
    margin-top: 1rem;
    opacity: 0;
    transition: opacity 1s 0.5s ease;
}

.terminal-sub.visible {
    opacity: 0.6;
}

/* ===== BUBBLES ===== */
.bubble-cascade {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bubble {
    position: absolute;
    width: var(--size);
    height: var(--size);
    left: var(--left);
    bottom: -60px;
    border-radius: 50%;
    border: 1px solid rgba(77, 238, 234, 0.3);
    background: radial-gradient(circle at 30% 30%, rgba(77, 238, 234, 0.15), transparent);
    animation:
        bubbleFloat var(--duration) var(--delay) ease-in-out infinite,
        bubbleDrift var(--duration) var(--delay) ease-in-out infinite;
}

.bubble::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 25%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77, 238, 234, 0.6), transparent);
}

@keyframes bubbleFloat {
    0% { bottom: -60px; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.4; }
    100% { bottom: calc(100% + 60px); opacity: 0; }
}

@keyframes bubbleDrift {
    0% { transform: translateX(0); }
    25% { transform: translateX(20px); }
    50% { transform: translateX(-15px); }
    75% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .brand-anchor {
        display: none;
    }

    .entry-left,
    .entry-right {
        padding-left: 60px;
        padding-right: 1rem;
        justify-content: flex-start;
    }

    .spine-line,
    .pulse-node {
        left: 20px;
    }

    .pulse-node {
        left: 20px;
        transform: translateX(-50%);
    }

    .entry-content {
        max-width: 100%;
        border-left: 2px solid var(--crimson-pulse);
        border-right: none;
    }

    .entry-left .entry-content {
        border-right: none;
        border-left: 2px solid var(--crimson-pulse);
    }

    .hero-title {
        font-size: clamp(3rem, 15vw, 6rem);
    }
}