/* =============================================
   chloengine.com - Styles
   Forest-scale computational substrate

   Palette:
   Deep Ground / Abyssal Forest Floor: #0B1F0E
   Mid Canopy / Moss Velvet: #1A3A22
   Living Edge / Fern Glow: #2D5F3A
   Aurora Core / Bioluminescent Teal: #4ECCA3
   Aurora Whisper / Spectral Mint: #A8D5BA
   Canopy Light / Filtered Daylight: #E8F5E9
   Aurora Pulse / Deep Cyan: #17A589
   Fog Veil / Mist Grey-Green: #3B5F4A
   Scroll Accent: #3DA577

   Fonts:
   Headlines: Barlow Condensed 600
   Subheadings: Cormorant Garamond 300
   Body: Inter 400
   Accents: Fira Code 400

   Gradient System:
   Aurora gradient: linear-gradient(170deg, #0B1F0E 0%, #1A3A22 35%, #2D5F3A 65%, rgba(78,204,163,0.12) 100%)
   Glow gradient: radial-gradient(ellipse at 30% 20%, rgba(78,204,163,0.08) 0%, transparent 70%)
   ============================================= */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: #0B1F0E;
    color: #C8E6C9;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */

/* Headlines / Display: Barlow Condensed
   Tall, narrow sans-serif evoking tree trunks.
   Weight 600, letter-spacing 0.12em, uppercase. */
.title-reveal {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(2.8rem, 7vw, 5.6rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E8F5E9;
    text-shadow: 0 0 40px rgba(78, 204, 163, 0.15);
    margin: 0;
    line-height: 1.1;
}

.title-reveal span {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.title-reveal span.visible {
    opacity: 1;
}

/* Subheadings: Cormorant Garamond
   Elegant high-contrast serif, delicate hairline strokes.
   Weight 300, letter-spacing 0.06em, normal case. */
.tagline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: 0.06em;
    color: #A8D5BA;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    margin-top: 1.618em;
}

.tagline.visible {
    opacity: 1;
}

.subheading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: 0.06em;
    color: #A8D5BA;
    margin-bottom: 1em;
}

/* Body text: Inter
   Exceptional readability. Generous leading (1.75).
   Color: #C8E6C9 at 85% opacity. Max-width: 42ch. */
.body-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.75;
    color: rgba(200, 230, 201, 0.85);
    max-width: 42ch;
}

/* Display heading (Scene 4 climactic): Barlow Condensed
   Centered, breaks the left-anchor pattern for climactic moment. */
.display-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E8F5E9;
    text-shadow: 0 0 40px rgba(78, 204, 163, 0.15);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0),
                transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.display-heading.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Accents / Labels: Fira Code
   Monospace with ligatures, used sparingly for technical labels.
   Weight 400, letter-spacing 0.05em, all-caps, color: #4ECCA3 at 60% opacity. */
.terminal-prompt {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.05em;
    color: rgba(78, 204, 163, 0.4);
}

.terminal-text {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(78, 204, 163, 0.6);
}

/* Blinking cursor: border-right animation, 1s interval */
.terminal-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: #4ECCA3;
    margin-left: 4px;
    vertical-align: middle;
    animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.signal-invite {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: #A8D5BA;
    opacity: 0;
    margin-top: 2em;
    max-width: 42ch;
    transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.signal-invite.visible {
    opacity: 0.7;
}

/* --- Scene System --- */
/* Vertically stacked full-viewport narrative panels.
   Each is a self-contained cinematic scene.
   No persistent navigation bar. Linear, immersive. */
.scene {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* Background plane: heavy desaturation, scale 0.85, 6px blur */
.scene-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Midground plane: slight desaturation, scale 0.95, 2px blur
   Holds decorative line-art roots or branch silhouettes */
.scene-midground {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.6;
    transform: scale(0.95);
    filter: blur(2px);
}

/* Foreground plane: sharp, full opacity, scale 1.0
   Contains primary text. Depth through focus differentials,
   not parallax (cinema lens rack-focus). */
.scene-content {
    position: relative;
    z-index: 3;
    padding-left: 8vw;
    padding-right: 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

/* Centered content override for Scene 4 only
   Breaking the left-anchor pattern to mark climactic moment */
.scene-content-centered {
    align-items: center;
    text-align: center;
    padding-left: 8vw;
    padding-right: 8vw;
}

/* Spore layer above content for atmospheric depth */
.spore-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

/* --- Scene Backgrounds --- */

/* Scene 1: Canopy - near-total darkness (#0B1F0E) */
.scene-canopy {
    background: #0B1F0E;
}

/* Scene 2: Understory - slightly lighter base (#1A3A22) */
.scene-understory {
    background: #1A3A22;
}

/* Scene 3: Mycelium - deepest, darkest return to #0B1F0E */
.scene-mycelium {
    background: #0B1F0E;
}

/* Scene 4: Aurora Break - dramatic split gradient
   Upper half #2D5F3A, lower half #0B1F0E (soft gradient, not hard line) */
.scene-aurora-break {
    background: linear-gradient(to bottom, #2D5F3A 0%, #2D5F3A 45%, #0B1F0E 100%);
}

/* Scene 5: Signal - dark return to #0B1F0E */
.scene-signal {
    background: #0B1F0E;
}

/* --- Breathing Gutters --- */
/* 10vh transitional zone between scenes.
   No text, only atmosphere. Visual breath between narrative beats.
   Filled with overlapping bokeh glow from adjacent scenes. */
.breathing-gutter {
    position: relative;
    height: 10vh;
    background: transparent;
    overflow: hidden;
    z-index: 1;
}

/* Interstitial glow: overlapping bokeh illusion from adjacent scenes */
.breathing-gutter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(59, 95, 74, 0.3) 0%, transparent 80%);
    pointer-events: none;
}

/* --- Scene Overlap (5vh bleed for organic continuity) --- */
/* Trailing edge of one scene bleeds into leading edge of next */
.scene + .breathing-gutter {
    margin-top: -5vh;
}

.breathing-gutter + .scene {
    margin-top: -5vh;
}

/* --- Bokeh Layer --- */
/* Bokeh circles: out-of-focus points of light filtering through
   forest canopy during aurora event. CSS/canvas generated. */
.bokeh-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

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

/* --- Aurora Layer --- */
/* Aurora occupies only the upper 40% of each scene viewport,
   anchoring the light source "above" to maintain the forest canopy metaphor. */
.aurora-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    overflow: hidden;
    pointer-events: none;
}

/* Aurora curtain bands: 5-15vw wide, #4ECCA3 at 3-6% opacity, slowly drifting */
.aurora-curtain {
    position: absolute;
    top: 0;
    height: 100%;
    will-change: transform, opacity;
    background: linear-gradient(to bottom, rgba(78, 204, 163, 0.06), transparent);
}

/* Scene 4: intense aurora - curtains at 8-10% opacity */
.aurora-intense .aurora-curtain {
    background: linear-gradient(to bottom, rgba(78, 204, 163, 0.10), transparent);
}

/* Scene 5: dim aurora - single faded curtain */
.aurora-dim .aurora-curtain {
    background: linear-gradient(to bottom, rgba(78, 204, 163, 0.02), transparent);
}

/* --- Glow Overlay (Mycelium scene) --- */
/* Concentrated radial glow centered at 70% viewport height, 30% viewport width */
.glow-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 70%, rgba(78, 204, 163, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* --- Root Network SVG --- */
/* Mycelial/root networks: thin branching lines from bottom upward.
   Stroke-dasharray animations make roots appear to slowly grow when scene is in view.
   Stroke-linecap: round for organic softness. */
.root-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.root-network path {
    fill: none;
    stroke: rgba(168, 213, 186, 0.15);
    stroke-width: 0.75;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.root-network.animating path {
    stroke-dashoffset: 0;
}

/* Dense root network (mycelium scene) - 0.5px stroke, 12% opacity */
.root-network-dense path {
    stroke: rgba(168, 213, 186, 0.12);
    stroke-width: 0.5;
}

/* Converging root network (signal scene) - 10% opacity */
.root-network-converge path {
    stroke: rgba(168, 213, 186, 0.10);
}

/* --- Border Animate Pattern --- */
/* Narrative markers: borders that draw themselves into existence.
   Pseudo-element with scaleY(0) -> scaleY(1), transform-origin: bottom.
   Functions like chapter markers in a film rather than UI feedback. */
.text-block {
    position: relative;
    padding: 1.5em 2em;
    margin-bottom: 3em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.0),
                transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.text-block.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Border animate left - draws from bottom to top */
.border-animate-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: #4ECCA3;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.border-animate-left.visible::before {
    transform: scaleY(1);
}

/* Border animate right - draws from bottom to top */
.border-animate-right::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: #4ECCA3;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.border-animate-right.visible::before {
    transform: scaleY(1);
}

/* Right-aligned padding for right-bordered blocks */
.border-animate-right {
    padding-left: 2em;
    padding-right: 2em;
}

/* --- Scroll Indicator --- */
/* Thin vertical line (1px, #3DA577 at 30% opacity) along right edge.
   Small luminous dot tracks scroll progress. Emits faint glow (box-shadow).
   Trail dot follows 200ms behind. Pulses at bottom of track. */
.scroll-indicator {
    position: fixed;
    right: 20px;
    top: 10vh;
    bottom: 10vh;
    width: 1px;
    z-index: 100;
    pointer-events: none;
}

.scroll-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: #3DA577;
    opacity: 0.3;
}

.scroll-dot {
    position: absolute;
    left: 50%;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ECCA3;
    transform: translate(-50%, 0);
    box-shadow: 0 0 8px #4ECCA3, 0 0 16px rgba(78, 204, 163, 0.4);
    will-change: top;
    transition: box-shadow 0.6s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

/* Pulse state: increased glow radius when at bottom of track */
.scroll-dot.pulse {
    box-shadow: 0 0 16px #4ECCA3, 0 0 32px rgba(78, 204, 163, 0.6), 0 0 48px rgba(78, 204, 163, 0.3);
}

/* Trail dot: brief afterimage following 200ms behind */
.scroll-dot-trail {
    position: absolute;
    left: 50%;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(78, 204, 163, 0.15);
    transform: translate(-50%, 0);
    will-change: top;
}

/* --- Terminal Block (Scene 5) --- */
.terminal-block {
    display: flex;
    align-items: center;
    padding: 1em 0;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.terminal-block.visible {
    opacity: 1;
}

/* --- Aurora Gradient Overlays per Scene --- */

/* Canopy: aurora gradient at low opacity
   Near-vertical angle simulating light filtering down through canopy layers */
.scene-canopy .scene-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, #0B1F0E 0%, #1A3A22 35%, #2D5F3A 65%, rgba(78, 204, 163, 0.12) 100%);
    opacity: 0.15;
    pointer-events: none;
}

/* Understory: glow gradient overlay
   Diffuse aurora light pooling in one area */
.scene-understory .scene-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(78, 204, 163, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Mycelium: concentrated radial glow at 70% height, 30% width */
.scene-mycelium .scene-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 70%, rgba(78, 204, 163, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* --- Spore Particles --- */
/* 2-4px circles, #4ECCA3 at 20-40% opacity, drifting upward */
.spore {
    position: absolute;
    border-radius: 50%;
    background: #4ECCA3;
    pointer-events: none;
    will-change: transform, opacity;
}

/* --- Palette Accent Interactions --- */

/* Aurora Pulse: #17A589 for hover/active states */
.text-block:hover .subheading {
    color: #17A589;
    transition: color 0.6s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.terminal-block:hover .terminal-text {
    color: #17A589;
    transition: color 0.6s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.terminal-block:hover .terminal-prompt {
    color: rgba(23, 165, 137, 0.6);
    transition: color 0.6s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

/* Fog Veil: #3B5F4A for midground atmospheric color */
.scene-midground svg {
    color: #3B5F4A;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .scene-content {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .scene-content-centered {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .scroll-indicator {
        right: 10px;
    }

    .text-block {
        padding: 1em 1.2em;
    }

    .display-heading {
        font-size: clamp(1.6rem, 6vw, 3rem);
    }
}