/* ==============================
   luminous.quest — Styles
   ============================== */

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

:root {
    --deep-earth: #1a1209;
    --forest-floor: #2a2118;
    --warm-parchment: #f5e6c8;
    --soft-tan: #c8b89a;
    --bio-teal: #2dd4a8;
    --amber-glow: #e8a044;
    --spore-violet: #b87ec8;
    --muted-sage: #7eb89a;
    --deep-teal: #0d3b2e;
    --mx: 50vw;
    --my: 50vh;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--deep-earth);
    color: var(--soft-tan);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
}

/* Noise overlay */
.noise-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.04;
    pointer-events: none;
    z-index: 1000;
}

/* Torch cursor overlay */
.torch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    background: radial-gradient(circle 300px at var(--mx) var(--my), rgba(232, 160, 68, 0.12) 0%, transparent 100%);
    transition: background 0.1s ease;
}

/* Floating elements */
.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.floater {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    pointer-events: none;
}

.floater--circle {
    border-radius: 50%;
}

.floater--square {
    border-radius: 2px;
    transform: rotate(45deg);
}

.floater--line {
    border-radius: 1px;
}

@keyframes floatX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(60px); }
}

@keyframes floatY {
    0% { transform: translateY(0); }
    100% { transform: translateY(-110vh); }
}

@keyframes floatPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.7; }
}

/* Timeline SVG */
.timeline-svg {
    position: absolute;
    top: 0;
    left: 15%;
    width: 4px;
    height: 100%;
    z-index: 5;
    overflow: visible;
    pointer-events: none;
}

.timeline-path {
    fill: none;
    stroke: var(--bio-teal);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
}

/* ==============================
   SURFACE LAYER
   ============================== */

.surface-layer {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--deep-earth);
    overflow: hidden;
    z-index: 2;
}

.surface-bg-dots {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bg-dot {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--bio-teal);
    opacity: 0;
    animation: dotFlicker var(--dur) var(--delay) infinite;
}

@keyframes dotFlicker {
    0%, 100% { opacity: 0; }
    20% { opacity: 0.8; }
    50% { opacity: 0.3; }
    80% { opacity: 0.6; }
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 10rem);
    color: var(--warm-parchment);
    text-align: center;
    z-index: 1;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero-letter {
    display: inline-block;
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: letterShift 8s ease-in-out infinite;
}

.hero-letter[data-index="0"] { background-image: linear-gradient(135deg, #e8a044, #2dd4a8, #b87ec8, #e8a044); animation-delay: 0s; }
.hero-letter[data-index="1"] { background-image: linear-gradient(135deg, #2dd4a8, #b87ec8, #e8a044, #2dd4a8); animation-delay: 0.3s; }
.hero-letter[data-index="2"] { background-image: linear-gradient(135deg, #b87ec8, #e8a044, #2dd4a8, #b87ec8); animation-delay: 0.6s; }
.hero-letter[data-index="3"] { background-image: linear-gradient(135deg, #e8a044, #2dd4a8, #b87ec8, #e8a044); animation-delay: 0.9s; }
.hero-letter[data-index="4"] { background-image: linear-gradient(135deg, #2dd4a8, #e8a044, #b87ec8, #2dd4a8); animation-delay: 1.2s; }
.hero-letter[data-index="5"] { background-image: linear-gradient(135deg, #b87ec8, #2dd4a8, #e8a044, #b87ec8); animation-delay: 1.5s; }
.hero-letter[data-index="6"] { background-image: linear-gradient(135deg, #e8a044, #b87ec8, #2dd4a8, #e8a044); animation-delay: 1.8s; }
.hero-letter[data-index="7"] { background-image: linear-gradient(135deg, #2dd4a8, #e8a044, #b87ec8, #2dd4a8); animation-delay: 2.1s; }
.hero-letter[data-index="8"] { background-image: linear-gradient(135deg, #b87ec8, #2dd4a8, #e8a044, #b87ec8); animation-delay: 2.4s; }
.hero-letter[data-index="9"] { background-image: linear-gradient(135deg, #e8a044, #2dd4a8, #b87ec8, #e8a044); animation-delay: 2.7s; }
.hero-letter[data-index="10"] { background-image: linear-gradient(135deg, #2dd4a8, #b87ec8, #e8a044, #2dd4a8); animation-delay: 3s; }
.hero-letter[data-index="11"] { background-image: linear-gradient(135deg, #b87ec8, #e8a044, #2dd4a8, #b87ec8); animation-delay: 3.3s; }
.hero-letter[data-index="12"] { background-image: linear-gradient(135deg, #e8a044, #2dd4a8, #b87ec8, #e8a044); animation-delay: 3.6s; }

.hero-dot {
    color: var(--amber-glow);
    -webkit-text-fill-color: var(--amber-glow);
}

@keyframes letterShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.scroll-chevron {
    position: absolute;
    bottom: 3rem;
    z-index: 2;
    animation: chevronBounce 2s ease-in-out infinite;
}

@keyframes chevronBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(10px); opacity: 1; }
}

/* ==============================
   SPORE DISCOVERY NODES
   ============================== */

.spore-nodes {
    position: relative;
    padding: 8rem 0;
    z-index: 2;
}

.timeline-node {
    position: relative;
    padding: 4rem 0;
    padding-left: calc(15% + 40px);
    display: flex;
    align-items: flex-start;
}

.node-circle {
    position: absolute;
    left: calc(15% - 12px);
    top: 4rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--bio-teal), var(--amber-glow));
    box-shadow: 0 0 16px rgba(45, 212, 168, 0.5);
    transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 6;
}

.node-circle.visible {
    transform: scale(1);
}

.node-panel {
    background: var(--forest-floor);
    border-radius: 16px;
    padding: 2.5rem;
    position: relative;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    box-shadow: inset 0 0 40px rgba(232, 160, 68, 0.05);
    overflow: hidden;
}

.node-panel.visible {
    opacity: 1;
    transform: translateX(0);
}

.node-panel.wide {
    width: min(60vw, 700px);
}

.node-panel.narrow {
    width: min(45vw, 520px);
}

.specimen-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-sage);
    opacity: 0.7;
    display: block;
    margin-bottom: 1rem;
}

.node-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--warm-parchment);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.node-text {
    max-width: 38em;
    margin-bottom: 2rem;
}

/* Gradient-mesh organisms */
.organism {
    width: 180px;
    height: 180px;
    position: relative;
    margin-top: 1rem;
    animation: organismShift 10s ease-in-out infinite;
}

.organism-1 {
    border-radius: 48% 52% 63% 37% / 41% 59% 43% 57%;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(45, 212, 168, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(184, 126, 200, 0.5) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 30%, rgba(232, 160, 68, 0.6) 0%, transparent 40%),
        radial-gradient(ellipse at 40% 70%, rgba(45, 212, 168, 0.3) 0%, transparent 60%);
}

.organism-2 {
    border-radius: 62% 38% 44% 56% / 53% 47% 58% 42%;
    background:
        radial-gradient(ellipse at 25% 35%, rgba(45, 212, 168, 0.8) 0%, transparent 45%),
        radial-gradient(ellipse at 65% 55%, rgba(45, 212, 168, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 45% 75%, rgba(232, 160, 68, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 75% 25%, rgba(126, 184, 154, 0.4) 0%, transparent 55%);
}

.organism-3 {
    border-radius: 55% 45% 38% 62% / 48% 52% 61% 39%;
    background:
        radial-gradient(ellipse at 35% 30%, rgba(184, 126, 200, 0.7) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 65%, rgba(232, 160, 68, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 60%, rgba(45, 212, 168, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 35%, rgba(184, 126, 200, 0.3) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(45, 212, 168, 0.2) 0%, transparent 60%);
}

.organism-4 {
    border-radius: 42% 58% 55% 45% / 60% 40% 52% 48%;
    background:
        radial-gradient(ellipse at 40% 30%, rgba(232, 160, 68, 0.8) 0%, transparent 40%),
        radial-gradient(ellipse at 65% 70%, rgba(232, 160, 68, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 65%, rgba(45, 212, 168, 0.5) 0%, transparent 45%),
        radial-gradient(ellipse at 55% 40%, rgba(184, 126, 200, 0.3) 0%, transparent 55%);
}

@keyframes organismShift {
    0%, 100% { background-position: 0% 0%; transform: scale(1); }
    33% { background-position: 5% 3%; transform: scale(1.03); }
    66% { background-position: -3% -2%; transform: scale(0.97); }
}

/* ==============================
   UNDERGLOW CHAMBER
   ============================== */

.underglow-chamber {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(to bottom, var(--deep-earth), var(--deep-teal));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

.chamber-floaters {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.chamber-float {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity, filter;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.chamber-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 2rem;
}

.chamber-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: var(--warm-parchment);
    margin-bottom: 1rem;
}

.chamber-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--soft-tan);
    opacity: 0.8;
}

/* ==============================
   ROOT NETWORK CODA
   ============================== */

.root-coda {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(to bottom, var(--deep-teal), var(--deep-earth));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

#rootCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.coda-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.coda-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.coda-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: var(--warm-parchment);
    max-width: 28em;
    line-height: 1.6;
}

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

@media (max-width: 768px) {
    .timeline-node {
        padding-left: 2rem;
    }
    .node-circle {
        left: 0.5rem;
    }
    .node-panel.wide,
    .node-panel.narrow {
        width: 85vw;
    }
    .timeline-svg {
        left: 1.2rem;
    }
}