/* ============================================
   BASE STYLES - Luminous Research Terminal
   ============================================ */

/* Environment theming via CSS variables */
:root {
    --env-primary: #2d3a8c;
    --env-accent: #4ecdc4;
    --env-glow: rgba(45, 58, 140, 0.5);
    --env-tint: transparent;
    --env-border: rgba(45, 58, 140, 0.08);
    --env-selection: #2d3a8c;
}

/* Earth environment overrides - DRAMATIC RESIDUE */
body.env-earth {
    --env-primary: #4a6741;
    --env-accent: #8fbc8f;
    --env-glow: rgba(74, 103, 65, 0.6);
    --env-border: rgba(74, 103, 65, 0.2);
    --env-selection: #4a6741;
}

/* Mars environment overrides - DRAMATIC RESIDUE */
body.env-mars {
    --env-primary: #c45a3b;
    --env-accent: #e07b5f;
    --env-glow: rgba(196, 90, 59, 0.6);
    --env-border: rgba(196, 90, 59, 0.2);
    --env-selection: #c45a3b;
}

/* Orbit environment overrides */
body.env-orbit {
    --env-primary: #6b8cce;
    --env-accent: #f0c674;
    --env-glow: rgba(107, 140, 206, 0.5);
    --env-border: rgba(107, 140, 206, 0.15);
    --env-selection: #6b8cce;
}

html, body {
    margin: 0;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    background-color: #fbfbfc;
    color: #1a1a2e;
}

/* ============================================
   RESIDUE - Applied directly to body background
   Visible on white bg, all content sits on top naturally
   ============================================ */

/* Earth residue - organic bleed from LEFT */
body.env-earth {
    background-color: #fbfbfc;
    background-image:
        /* Large extending blobs */
        radial-gradient(ellipse 90% 50% at 0% 20%, rgba(74, 103, 65, 0.25) 0%, transparent 80%),
        radial-gradient(ellipse 100% 45% at -5% 55%, rgba(74, 103, 65, 0.22) 0%, transparent 75%),
        radial-gradient(ellipse 85% 60% at 5% 85%, rgba(74, 103, 65, 0.20) 0%, transparent 70%),
        radial-gradient(ellipse 95% 40% at -10% 40%, rgba(74, 103, 65, 0.18) 0%, transparent 75%),
        /* Medium reaching blobs */
        radial-gradient(ellipse 70% 55% at 15% 10%, rgba(74, 103, 65, 0.16) 0%, transparent 65%),
        radial-gradient(ellipse 80% 65% at 10% 70%, rgba(74, 103, 65, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 75% 50% at 20% 35%, rgba(74, 103, 65, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 65% 70% at 5% 95%, rgba(74, 103, 65, 0.13) 0%, transparent 60%),
        /* Furthest reaching tendrils */
        radial-gradient(ellipse 60% 40% at 35% 25%, rgba(74, 103, 65, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse 55% 45% at 40% 60%, rgba(74, 103, 65, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse 50% 35% at 45% 80%, rgba(74, 103, 65, 0.07) 0%, transparent 40%),
        /* Base wash */
        radial-gradient(ellipse 80% 120% at -15% 50%, rgba(74, 103, 65, 0.15) 0%, transparent 70%);
    background-attachment: fixed;
}

/* Mars residue - organic bleed from RIGHT */
body.env-mars {
    background-color: #fbfbfc;
    background-image:
        /* Large extending blobs */
        radial-gradient(ellipse 90% 50% at 100% 25%, rgba(196, 90, 59, 0.25) 0%, transparent 80%),
        radial-gradient(ellipse 100% 45% at 105% 60%, rgba(196, 90, 59, 0.22) 0%, transparent 75%),
        radial-gradient(ellipse 85% 60% at 95% 90%, rgba(196, 90, 59, 0.20) 0%, transparent 70%),
        radial-gradient(ellipse 95% 40% at 110% 35%, rgba(196, 90, 59, 0.18) 0%, transparent 75%),
        /* Medium reaching blobs */
        radial-gradient(ellipse 70% 55% at 85% 15%, rgba(196, 90, 59, 0.16) 0%, transparent 65%),
        radial-gradient(ellipse 80% 65% at 90% 75%, rgba(196, 90, 59, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 75% 50% at 80% 45%, rgba(196, 90, 59, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 65% 70% at 95% 5%, rgba(196, 90, 59, 0.13) 0%, transparent 60%),
        /* Furthest reaching tendrils */
        radial-gradient(ellipse 60% 40% at 65% 30%, rgba(196, 90, 59, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse 55% 45% at 60% 65%, rgba(196, 90, 59, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse 50% 35% at 55% 85%, rgba(196, 90, 59, 0.07) 0%, transparent 40%),
        /* Base wash */
        radial-gradient(ellipse 80% 120% at 115% 50%, rgba(196, 90, 59, 0.15) 0%, transparent 70%);
    background-attachment: fixed;
}

/* Space residue - organic dark bleed from TOP with stars (extended ~2x) */
body.env-orbit {
    background-color: #fbfbfc;
    background-image:
        /* Stars scattered throughout dark area (extended positions) */
        radial-gradient(1.5px 1.5px at 20% 24%, white, transparent),
        radial-gradient(1px 1px at 40% 56%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 60% 16%, rgba(255,255,255,0.95), transparent),
        radial-gradient(1px 1px at 80% 36%, white, transparent),
        radial-gradient(2px 2px at 10% 70%, rgba(107, 140, 206, 0.9), transparent),
        radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 30% 44%, rgba(240, 198, 116, 0.7), transparent),
        radial-gradient(1px 1px at 70% 84%, white, transparent),
        radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 15% 96%, white, transparent),
        radial-gradient(1px 1px at 85% 12%, rgba(107, 140, 206, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 45% 65%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 25% 78%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 75% 52%, white, transparent),
        radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.6), transparent),
        /* Large dark blobs from top (extended ~2x vertically) */
        radial-gradient(ellipse 60% 140% at 20% -10%, rgba(5, 5, 15, 0.60) 0%, transparent 80%),
        radial-gradient(ellipse 55% 150% at 50% -5%, rgba(5, 5, 15, 0.55) 0%, transparent 75%),
        radial-gradient(ellipse 65% 130% at 80% -15%, rgba(5, 5, 15, 0.58) 0%, transparent 70%),
        radial-gradient(ellipse 50% 160% at 35% 10%, rgba(5, 5, 15, 0.50) 0%, transparent 65%),
        radial-gradient(ellipse 70% 110% at 65% 20%, rgba(5, 5, 15, 0.48) 0%, transparent 60%),
        /* Medium extending blobs (extended) */
        radial-gradient(ellipse 80% 100% at 10% 40%, rgba(5, 5, 15, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse 75% 120% at 90% 30%, rgba(5, 5, 15, 0.42) 0%, transparent 50%),
        radial-gradient(ellipse 65% 90% at 45% 60%, rgba(5, 5, 15, 0.38) 0%, transparent 45%),
        /* Furthest reaching tendrils (extended) */
        radial-gradient(ellipse 60% 80% at 25% 85%, rgba(5, 5, 15, 0.25) 0%, transparent 40%),
        radial-gradient(ellipse 55% 70% at 70% 95%, rgba(5, 5, 15, 0.20) 0%, transparent 35%),
        radial-gradient(ellipse 50% 60% at 50% 100%, rgba(5, 5, 15, 0.15) 0%, transparent 30%),
        /* Base dark wash (extended ~2x) */
        radial-gradient(ellipse 160% 120% at 50% -25%, rgba(5, 5, 15, 0.55) 0%, transparent 75%);
    background-attachment: fixed;
}

/* Orbit: Hero text becomes white/light for contrast against dark top */
body.env-orbit .hero-gradient h1 {
    color: #ffffff;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    background-clip: unset;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
body.env-orbit .hero-gradient p {
    color: rgba(255, 255, 255, 0.9);
}
body.env-orbit .hero-gradient .font-mono {
    color: rgba(200, 210, 255, 0.9);
}
body.env-orbit .hero-gradient a:not(.btn-primary):not(.subscribe-btn) {
    color: #a0c4ff !important;
    -webkit-text-fill-color: #a0c4ff !important;
}
/* Keep other text normal outside hero */
body.env-orbit h1:not(.hero-gradient h1),
body.env-orbit h2, body.env-orbit h3,
body.env-orbit strong, body.env-orbit b {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: inherit;
    background-clip: unset;
}
/* Profile picture pops above Space residue (very subtle) */
body.env-orbit .hero-gradient img[alt="Avi Parrack"] {
    position: relative;
    z-index: 20;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 20px rgba(107, 140, 206, 0.2));
}
/* Profile picture glow for Earth residue (exaggerated) */
body.env-earth .hero-gradient img[alt="Avi Parrack"] {
    position: relative;
    z-index: 20;
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(74, 103, 65, 0.8)) drop-shadow(0 0 80px rgba(74, 103, 65, 0.5));
}
/* Profile picture glow for Mars residue (exaggerated) */
body.env-mars .hero-gradient img[alt="Avi Parrack"] {
    position: relative;
    z-index: 20;
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(196, 90, 59, 0.8)) drop-shadow(0 0 80px rgba(196, 90, 59, 0.5));
}
/* Localized Mars residue glob around profile picture */
body.env-mars .hero-gradient img[alt="Avi Parrack"]::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(ellipse at center, rgba(196, 90, 59, 0.25) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}
/* Mars residue glob container needs positioning */
body.env-mars .hero-gradient > div:first-child > div:first-child {
    position: relative;
}
body.env-mars .hero-gradient > div:first-child > div:first-child::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    right: -30%;
    bottom: -30%;
    background: radial-gradient(ellipse at center, rgba(196, 90, 59, 0.3) 0%, rgba(196, 90, 59, 0.15) 40%, transparent 70%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

/* DEFAULT STATE (no residue) - Blue glow and glob */
body:not(.env-earth):not(.env-mars):not(.env-orbit) .hero-gradient img[alt="Avi Parrack"] {
    position: relative;
    z-index: 20;
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(45, 58, 140, 0.7)) drop-shadow(0 0 80px rgba(45, 58, 140, 0.5));
}
/* Default blue glob around profile picture - organic blob, contained to left */
body:not(.env-earth):not(.env-mars):not(.env-orbit) .hero-gradient > div:first-child > div:first-child {
    position: relative;
}
body:not(.env-earth):not(.env-mars):not(.env-orbit) .hero-gradient > div:first-child > div:first-child::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -80%;
    background:
        radial-gradient(ellipse 45% 55% at 35% 45%, rgba(45, 58, 140, 0.28) 0%, transparent 100%),
        radial-gradient(ellipse 35% 45% at 50% 60%, rgba(45, 58, 140, 0.20) 0%, transparent 100%),
        radial-gradient(ellipse 40% 35% at 25% 35%, rgba(45, 58, 140, 0.18) 0%, transparent 100%);
    z-index: -1;
    pointer-events: none;
    filter: blur(20px);
}
/* Default state - Avi Parrack text is blue */
body:not(.env-earth):not(.env-mars):not(.env-orbit) .hero-gradient h1 {
    color: #2d3a8c;
}

/* ============================================
   RESIDUE COLOR TRANSFORMS
   - Links: solid residue color
   - Titles/bold: smooth gradient from residue to blue
   - Buttons: unchanged (keep original blue background AND white text)
   ============================================ */

/* Protect ALL button styling - background stays blue, text stays white */
body.env-earth a[class*="bg-primary"],
body.env-earth button[class*="bg-primary"],
body.env-earth a[class*="shadow"][class*="rounded-full"],
body.env-earth .btn-primary,
body.env-earth .subscribe-btn,
body.env-mars a[class*="bg-primary"],
body.env-mars button[class*="bg-primary"],
body.env-mars a[class*="shadow"][class*="rounded-full"],
body.env-mars .btn-primary,
body.env-mars .subscribe-btn,
body.env-orbit a[class*="bg-primary"],
body.env-orbit button[class*="bg-primary"],
body.env-orbit a[class*="shadow"][class*="rounded-full"],
body.env-orbit .btn-primary,
body.env-orbit .subscribe-btn {
    color: white !important;
    -webkit-text-fill-color: white !important;
    background: #2d3a8c !important;
    background-color: #2d3a8c !important;
}
/* Also protect ALL inner elements of buttons */
body.env-earth a[class*="bg-primary"] *,
body.env-earth a[class*="bg-primary"] span,
body.env-mars a[class*="bg-primary"] *,
body.env-mars a[class*="bg-primary"] span,
body.env-orbit a[class*="bg-primary"] *,
body.env-orbit a[class*="bg-primary"] span {
    color: white !important;
    -webkit-text-fill-color: white !important;
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

/* Earth: Links = solid green (excludes ALL button-like elements) */
body.env-earth a:not(.nav-link):not([class*="bg-primary"]):not([class*="btn"]):not([class*="subscribe"]):not([class*="rounded-full"][class*="shadow"]) {
    color: #4a6741 !important;
    -webkit-text-fill-color: #4a6741 !important;
}
/* Earth: Titles & bold = smooth green-to-blue gradient (50/50) */
body.env-earth h1, body.env-earth h2, body.env-earth h3,
body.env-earth strong, body.env-earth b {
    background: linear-gradient(90deg, #4a6741 0%, #2d3a8c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mars: Links = solid orange (excludes ALL button-like elements) */
body.env-mars a:not(.nav-link):not([class*="bg-primary"]):not([class*="btn"]):not([class*="subscribe"]):not([class*="rounded-full"][class*="shadow"]) {
    color: #c45a3b !important;
    -webkit-text-fill-color: #c45a3b !important;
}
/* Mars: Titles & bold = smooth orange-to-blue gradient (50/50) */
body.env-mars h1, body.env-mars h2, body.env-mars h3,
body.env-mars strong, body.env-mars b {
    background: linear-gradient(-90deg, #c45a3b 0%, #2d3a8c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Orbit: Links = solid cosmic blue (excludes ALL button-like elements) */
body.env-orbit a:not(.nav-link):not([class*="bg-primary"]):not([class*="btn"]):not([class*="subscribe"]):not([class*="rounded-full"][class*="shadow"]) {
    color: #6b8cce !important;
    -webkit-text-fill-color: #6b8cce !important;
}

/* Subtle cosmic grain */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
    z-index: 1000;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fbfbfc; }
::-webkit-scrollbar-thumb { background: var(--env-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--env-accent); }

::selection { background: var(--env-selection); color: white; }

/* Signal dot - measurement light aesthetic */
.signal-dot {
    width: 8px; height: 8px;
    background: linear-gradient(135deg, var(--env-accent) 0%, var(--env-primary) 100%);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--env-glow), 0 0 24px rgba(78, 205, 196, 0.3);
    animation: signal 2s ease-in-out infinite;
}

/* Nav logo - replaces signal dot */
.nav-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px var(--env-glow));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.nav-logo:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px var(--env-glow)) drop-shadow(0 0 20px var(--env-glow));
}

/* Page-specific logo colorization */
.env-earth .nav-logo {
    filter: drop-shadow(0 0 6px rgba(74, 103, 65, 0.5)) hue-rotate(-40deg) saturate(0.8);
}

.env-mars .nav-logo {
    filter: drop-shadow(0 0 6px rgba(196, 90, 59, 0.5)) hue-rotate(-20deg) saturate(1.4) brightness(0.95);
}

.env-orbit .nav-logo {
    filter: drop-shadow(0 0 6px rgba(107, 140, 206, 0.5)) hue-rotate(180deg) saturate(0.9) brightness(1.1);
}

/* Glass navigation - observatory style */
.glass-nav {
    background: rgba(251, 251, 252, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--env-border);
}

/* Observatory pane cards - 3D depth */
.observatory-pane {
    background: white;
    border: 1px solid var(--env-border);
    border-radius: 1.25rem;
    box-shadow:
        0 1px 2px rgba(45, 58, 140, 0.04),
        0 4px 12px rgba(45, 58, 140, 0.04),
        0 16px 32px rgba(45, 58, 140, 0.04);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.observatory-pane::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--env-accent), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.observatory-pane:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 8px rgba(45, 58, 140, 0.06),
        0 12px 24px rgba(45, 58, 140, 0.08),
        0 24px 48px rgba(45, 58, 140, 0.08);
}
.observatory-pane:hover::before {
    opacity: 1;
}

/* Environment-aware link and button colors */
.env-link {
    color: var(--env-primary);
}
.env-link:hover {
    color: var(--env-accent);
}
.env-btn {
    background: var(--env-primary);
    color: white;
}
.env-btn:hover {
    background: var(--env-accent);
}
.env-border {
    border-color: var(--env-border);
}
.env-text {
    color: var(--env-primary);
}

/* ============================================
   STATUS CONDITION TAG - Pill style, bottom left
   Z-index: 50 (above most content, clickable)
   ============================================ */
.status-condition {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 40;
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

/* Earth status - pill style */
body.env-earth .status-condition {
    display: flex;
    background: rgba(74, 103, 65, 0.9);
    color: white;
    border: 1px solid rgba(143, 188, 143, 0.5);
    box-shadow: 0 2px 10px rgba(74, 103, 65, 0.3);
}

/* Mars status - pill style */
body.env-mars .status-condition {
    display: flex;
    background: rgba(196, 90, 59, 0.9);
    color: white;
    border: 1px solid rgba(224, 123, 95, 0.5);
    box-shadow: 0 2px 10px rgba(196, 90, 59, 0.3);
}

/* Orbit status - pill style */
body.env-orbit .status-condition {
    display: flex;
    background: rgba(107, 140, 206, 0.9);
    color: white;
    border: 1px solid rgba(163, 184, 217, 0.5);
    box-shadow: 0 2px 10px rgba(107, 140, 206, 0.3);
}

.status-condition:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.status-condition-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-condition-text {
    font-weight: 500;
}

.status-condition-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 0.25rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.status-condition:hover .status-condition-clear {
    opacity: 1;
}

/* Legacy indicator - hidden */
.env-indicator {
    display: none;
}

/* ============================================
   Z-INDEX HIERARCHY
   Hero: 0, Status tag: 40, Panels: 45, Buttons: 50
   Status tag slides behind panels but stays clickable over hero
   ============================================ */
.hero-gradient {
    position: relative;
    z-index: 0;
}
section:not(.hero-gradient) {
    position: relative;
    z-index: 45;
    background-color: #fbfbfc;
}

/* ===== ANIMUS GRID MESH - Digital tabula rasa ===== */
section:not(.hero-gradient)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
    background-image:
        /* Vertical lines */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 59px,
            rgba(45, 58, 140, 0.1) 59px,
            rgba(45, 58, 140, 0.1) 60px
        ),
        /* Horizontal lines */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 59px,
            rgba(45, 58, 140, 0.1) 59px,
            rgba(45, 58, 140, 0.1) 60px
        ),
        /* Glowing intersection points */
        radial-gradient(circle at 60px 60px, rgba(78, 205, 196, 0.35) 0%, transparent 4px);
    background-size: 60px 60px, 60px 60px, 60px 60px;
    background-attachment: fixed;
    /* Base mask - keeps most of grid visible */
    mask-image:
        radial-gradient(ellipse 25% 20% at 20% 30%, transparent 0%, black 100%),
        radial-gradient(ellipse 20% 25% at 70% 60%, transparent 0%, black 100%),
        radial-gradient(ellipse 30% 15% at 40% 80%, transparent 0%, black 100%),
        radial-gradient(ellipse 15% 30% at 85% 20%, transparent 0%, black 100%);
    -webkit-mask-image:
        radial-gradient(ellipse 25% 20% at 20% 30%, transparent 0%, black 100%),
        radial-gradient(ellipse 20% 25% at 70% 60%, transparent 0%, black 100%),
        radial-gradient(ellipse 30% 15% at 40% 80%, transparent 0%, black 100%),
        radial-gradient(ellipse 15% 30% at 85% 20%, transparent 0%, black 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    mask-attachment: fixed;
    -webkit-mask-attachment: fixed;
    animation: grid-organic 25s ease-in-out infinite;
}

@keyframes grid-organic {
    0%, 100% {
        mask-image:
            radial-gradient(ellipse 25% 20% at 20% 30%, transparent 0%, black 100%),
            radial-gradient(ellipse 20% 25% at 70% 60%, transparent 0%, black 100%),
            radial-gradient(ellipse 30% 15% at 40% 80%, transparent 0%, black 100%),
            radial-gradient(ellipse 15% 30% at 85% 20%, transparent 0%, black 100%);
        -webkit-mask-image:
            radial-gradient(ellipse 25% 20% at 20% 30%, transparent 0%, black 100%),
            radial-gradient(ellipse 20% 25% at 70% 60%, transparent 0%, black 100%),
            radial-gradient(ellipse 30% 15% at 40% 80%, transparent 0%, black 100%),
            radial-gradient(ellipse 15% 30% at 85% 20%, transparent 0%, black 100%);
    }
    33% {
        mask-image:
            radial-gradient(ellipse 20% 25% at 60% 20%, transparent 0%, black 100%),
            radial-gradient(ellipse 25% 20% at 30% 70%, transparent 0%, black 100%),
            radial-gradient(ellipse 15% 30% at 80% 50%, transparent 0%, black 100%),
            radial-gradient(ellipse 30% 15% at 15% 85%, transparent 0%, black 100%);
        -webkit-mask-image:
            radial-gradient(ellipse 20% 25% at 60% 20%, transparent 0%, black 100%),
            radial-gradient(ellipse 25% 20% at 30% 70%, transparent 0%, black 100%),
            radial-gradient(ellipse 15% 30% at 80% 50%, transparent 0%, black 100%),
            radial-gradient(ellipse 30% 15% at 15% 85%, transparent 0%, black 100%);
    }
    66% {
        mask-image:
            radial-gradient(ellipse 30% 20% at 45% 45%, transparent 0%, black 100%),
            radial-gradient(ellipse 15% 25% at 10% 25%, transparent 0%, black 100%),
            radial-gradient(ellipse 25% 30% at 75% 85%, transparent 0%, black 100%),
            radial-gradient(ellipse 20% 15% at 90% 40%, transparent 0%, black 100%);
        -webkit-mask-image:
            radial-gradient(ellipse 30% 20% at 45% 45%, transparent 0%, black 100%),
            radial-gradient(ellipse 15% 25% at 10% 25%, transparent 0%, black 100%),
            radial-gradient(ellipse 25% 30% at 75% 85%, transparent 0%, black 100%),
            radial-gradient(ellipse 20% 15% at 90% 40%, transparent 0%, black 100%);
    }
}

/* Ensure section content stays above grid */
section:not(.hero-gradient) > * {
    position: relative;
    z-index: 1;
}
footer {
    position: relative;
    z-index: 45;
    background-color: #fbfbfc;
    transform: translateZ(0);
    isolation: isolate;
}
.btn-primary, .subscribe-btn, button[class*="bg-primary"] {
    position: relative;
    z-index: 50;
}

/* Hero gradient - cosmic observatory */
.hero-gradient {
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(45, 58, 140, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 30% 70%, rgba(78, 205, 196, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(212, 168, 75, 0.03) 0%, transparent 40%);
}

/* Section divider - measurement line */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45, 58, 140, 0.15), transparent);
}

/* ========== TERMINAL/WIREFRAME DECORATIVE ELEMENTS ========== */

/* Grid overlay - blueprint aesthetic */
.grid-overlay {
    background-image:
        linear-gradient(rgba(45, 58, 140, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 58, 140, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Coordinate markers */
.coord-marker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: rgba(45, 58, 140, 0.25);
    letter-spacing: 0.05em;
}

/* Terminal text style */
.terminal-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(45, 58, 140, 0.35);
    letter-spacing: 0.02em;
}

/* Wireframe line */
.wireframe-line {
    stroke: rgba(45, 58, 140, 0.15);
    stroke-width: 1;
    fill: none;
}
.wireframe-line-accent {
    stroke: rgba(78, 205, 196, 0.25);
    stroke-width: 1;
    fill: none;
}

/* ASCII render effect - characters that appear to build */
.ascii-render {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    line-height: 1.1;
    color: rgba(45, 58, 140, 0.12);
    white-space: pre;
    user-select: none;
}

/* Scanning line animation */
@keyframes scan {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}
.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.4), transparent);
    animation: scan 8s ease-in-out infinite;
}

/* Building/rendering animation */
@keyframes render-in {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}
.render-in {
    animation: render-in 0.6s ease-out forwards;
}

/* Bracket decorations */
.bracket-left::before {
    content: '[';
    font-family: 'JetBrains Mono', monospace;
    color: rgba(45, 58, 140, 0.2);
    margin-right: 0.5rem;
}
.bracket-right::after {
    content: ']';
    font-family: 'JetBrains Mono', monospace;
    color: rgba(45, 58, 140, 0.2);
    margin-left: 0.5rem;
}

/* Dot matrix pattern */
.dot-matrix {
    background-image: radial-gradient(rgba(45, 58, 140, 0.08) 1px, transparent 1px);
    background-size: 8px 8px;
}

/* Corner coordinates */
.corner-coord {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: rgba(45, 58, 140, 0.2);
    padding: 0.5rem;
}
.corner-coord.top-left { top: 0; left: 0; }
.corner-coord.top-right { top: 0; right: 0; }
.corner-coord.bottom-left { bottom: 0; left: 0; }
.corner-coord.bottom-right { bottom: 0; right: 0; }

/* Tag pills - instrument labels */
.tag {
    font-size: 9px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.tag-earth { background: rgba(74, 103, 65, 0.1); color: #4a6741; border: 1px solid rgba(74, 103, 65, 0.15); }
.tag-mars { background: rgba(196, 90, 59, 0.1); color: #c45a3b; border: 1px solid rgba(196, 90, 59, 0.15); }
.tag-orbit { background: rgba(45, 58, 140, 0.1); color: #2d3a8c; border: 1px solid rgba(45, 58, 140, 0.15); }

/* Tab switcher */
.tab-btn {
    transition: all 0.3s ease;
}
.tab-btn.active {
    background: white;
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(45, 58, 140, 0.1);
}

/* SEA-style writing cards with prominent images */
.writing-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.writing-card-image {
    height: 10rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(45, 58, 140, 0.08), rgba(78, 205, 196, 0.08));
    margin-bottom: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.writing-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.writing-card-image.no-image {
    background: linear-gradient(135deg, rgba(45, 58, 140, 0.06), rgba(78, 205, 196, 0.06));
}
.observatory-pane:hover .writing-card-image img {
    transform: scale(1.05);
}
.writing-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.writing-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* Category tag themes */
.category-tag {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.tag-indigo { background: rgba(45, 58, 140, 0.1); color: #2d3a8c; }
.tag-teal { background: rgba(78, 205, 196, 0.15); color: #0d9488; }
.tag-amber { background: rgba(212, 168, 75, 0.15); color: #b45309; }
.tag-rose { background: rgba(232, 93, 76, 0.12); color: #be123c; }
.tag-purple { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.tag-emerald { background: rgba(16, 185, 129, 0.12); color: #059669; }

/* Load more button */
.load-more-btn {
    background: linear-gradient(135deg, rgba(45, 58, 140, 0.05), rgba(78, 205, 196, 0.05));
    border: 1px dashed rgba(45, 58, 140, 0.2);
    transition: all 0.3s ease;
}
.load-more-btn:hover {
    background: linear-gradient(135deg, rgba(45, 58, 140, 0.1), rgba(78, 205, 196, 0.1));
    border-style: solid;
}

/* Project card image area */
.project-visual {
    aspect-ratio: 16/9;
    border-radius: 0.75rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(45, 58, 140, 0.03), rgba(78, 205, 196, 0.03));
    position: relative;
}
.project-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.observatory-pane:hover .project-visual::after {
    opacity: 1;
}

/* ===== AUDIO TOGGLE ===== */
.audio-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--env-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--env-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.audio-toggle:hover {
    transform: scale(1.05);
    border-color: var(--env-primary);
    box-shadow: 0 0 15px var(--env-glow);
}
.audio-toggle.audio-enabled {
    background: var(--env-primary);
    color: white;
    border-color: var(--env-primary);
}
.audio-toggle.audio-enabled:hover {
    box-shadow: 0 0 20px var(--env-glow);
}
/* Pulse animation when audio is on */
.audio-toggle.audio-enabled::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--env-primary);
    opacity: 0;
    animation: audio-pulse 2s ease-out infinite;
}
@keyframes audio-pulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* ===== HERO SIMULATION CONTROLS ===== */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(45, 58, 140, 0.1);
    box-shadow: 0 4px 20px rgba(45, 58, 140, 0.08);
}

.hero-sim-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(45, 58, 140, 0.1);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.2s;
}
.hero-sim-slider:hover {
    background: rgba(45, 58, 140, 0.15);
}
.hero-sim-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #2d3a8c;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(45, 58, 140, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.hero-sim-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(45, 58, 140, 0.4);
}
.hero-sim-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}
.hero-sim-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #2d3a8c;
    border: none;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(45, 58, 140, 0.3);
}

/* Residue-aware control panel - adjust for dark backgrounds */
body.env-orbit .glass-panel {
    background: rgba(10, 15, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
}
body.env-orbit .glass-panel .text-muted,
body.env-orbit .glass-panel span {
    color: rgba(255, 255, 255, 0.7);
}
body.env-orbit .hero-sim-slider {
    background: rgba(255, 255, 255, 0.15);
}
body.env-orbit .hero-sim-slider::-webkit-slider-thumb {
    background: #4ecdc4;
}

/* Hero Simulation Activation */
.hero-live-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(78, 205, 196, 0.15);
    border-radius: 12px;
    z-index: 10;
}
.hero-live-dot {
    width: 8px;
    height: 8px;
    background: #4ecdc4;
    border-radius: 50%;
    animation: livePulse 2s ease-in-out infinite;
}
.hero-live-text {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4ecdc4;
}
@keyframes livePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(78, 205, 196, 0.6);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 8px 4px rgba(78, 205, 196, 0.3);
        opacity: 0.8;
    }
}
.hero-activate-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
    backdrop-filter: blur(4px);
}
.hero-activate-btn:hover {
    background: rgba(78, 205, 196, 0.3);
    border-color: rgba(78, 205, 196, 0.6);
    color: #4ecdc4;
}
.hero-activate-btn.active {
    background: rgba(78, 205, 196, 0.15);
    border-color: rgba(78, 205, 196, 0.3);
    color: #2d9d96;
}
.hero-activate-btn.active:hover {
    background: rgba(196, 90, 59, 0.15);
    border-color: rgba(196, 90, 59, 0.3);
    color: #c45a3b;
}

/* ===== PROJECT FILTER TAGS ===== */
.tag-filter {
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}
.tag-filter:hover {
    opacity: 1;
}
.tag-filter.active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--env-primary);
}

/* Project card filter animation */
.observatory-pane.filtering-out {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}
.observatory-pane.filtering-in {
    animation: filterIn 0.3s ease forwards;
}
@keyframes filterIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== PROFILE IMAGE CROSSFADE ===== */
.profile-flip-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-flip-container:hover .profile-flip-image {
    transform: scale(1.05);
}

.profile-flip-image {
    transition: transform 0.3s ease, opacity 0.75s ease;
}

.profile-flip-image.fading-out {
    opacity: 0;
}

/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 40;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--env-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--env-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    box-shadow: 0 2px 10px rgba(45, 58, 140, 0.1);
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    transform: translateY(-2px);
    border-color: var(--env-primary);
    box-shadow: 0 4px 15px var(--env-glow);
}

/* ===== SKIP TO CONTENT (Accessibility) ===== */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--env-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0 0 0.5rem 0.5rem;
    text-decoration: none;
    transition: top 0.3s ease;
}
.skip-to-content:focus {
    top: 0;
    outline: 2px solid var(--env-accent);
    outline-offset: 2px;
}

/* ===== DARK MODE ===== */
body.dark-mode {
    background-color: #0a0a12;
    color: #e8e8f0;
}

body.dark-mode::before {
    opacity: 0.04;
}

/* Dark mode glass nav */
body.dark-mode .glass-nav {
    background: rgba(10, 10, 18, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode mobile menu */
body.dark-mode #mobile-menu {
    background: rgba(10, 10, 18, 0.98);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode cards */
body.dark-mode .observatory-pane {
    background: #12121a;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 16px 32px rgba(0, 0, 0, 0.2);
}

body.dark-mode .observatory-pane:hover {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 24px 48px rgba(0, 0, 0, 0.3);
}

/* Dark mode text colors */
body.dark-mode .text-text {
    color: #e8e8f0;
}

body.dark-mode .text-muted {
    color: rgba(232, 232, 240, 0.6);
}

/* Dark mode buttons and inputs */
body.dark-mode .audio-toggle {
    background: #1a1a24;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .audio-toggle:hover {
    border-color: var(--env-primary);
}

/* Dark mode nav icon buttons (X link, mobile menu) */
body.dark-mode .glass-nav a[target="_blank"].bg-white,
body.dark-mode .glass-nav button.bg-white {
    background: #1a1a24;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .glass-nav a[target="_blank"].bg-white:hover,
body.dark-mode .glass-nav button.bg-white:hover {
    border-color: var(--env-primary);
}

/* Dark mode bio social links (X, Substack, LinkedIn under name) */
body.dark-mode .hero-gradient .bg-white.border-border {
    background: #1a1a24;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .hero-gradient .bg-white.border-border:hover {
    border-color: var(--env-primary);
}

/* Dark mode footer links */
body.dark-mode footer a:not(.signal-dot) {
    color: rgba(232, 232, 240, 0.7);
}

body.dark-mode footer a:not(.signal-dot):hover {
    color: var(--env-primary);
}

/* Dark mode writing card images */
body.dark-mode .writing-card-image {
    background: linear-gradient(135deg, rgba(45, 58, 140, 0.15), rgba(78, 205, 196, 0.15));
}

body.dark-mode .writing-card-image.no-image {
    background: linear-gradient(135deg, rgba(45, 58, 140, 0.1), rgba(78, 205, 196, 0.1));
}

/* Dark mode sections */
body.dark-mode section:not(.hero-gradient) {
    background-color: #0a0a12;
}

body.dark-mode footer {
    background-color: #0a0a12;
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode grid mesh */
body.dark-mode section:not(.hero-gradient)::before {
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 59px,
            rgba(78, 205, 196, 0.08) 59px,
            rgba(78, 205, 196, 0.08) 60px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 59px,
            rgba(78, 205, 196, 0.08) 59px,
            rgba(78, 205, 196, 0.08) 60px
        ),
        radial-gradient(circle at 60px 60px, rgba(78, 205, 196, 0.25) 0%, transparent 4px);
}

/* Dark mode scrollbar */
body.dark-mode::-webkit-scrollbar-track {
    background: #0a0a12;
}

/* Dark mode load more button */
body.dark-mode .load-more-btn {
    background: linear-gradient(135deg, rgba(45, 58, 140, 0.1), rgba(78, 205, 196, 0.1));
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .load-more-btn:hover {
    background: linear-gradient(135deg, rgba(45, 58, 140, 0.2), rgba(78, 205, 196, 0.2));
}

/* Dark mode tab buttons */
body.dark-mode .tab-btn.active {
    background: #1a1a24;
    color: #e8e8f0;
}

/* Dark mode back to top */
body.dark-mode .back-to-top {
    background: #1a1a24;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Dark mode status condition - boost Earth + Mars visibility */
body.dark-mode.env-earth .status-condition {
    background: rgba(100, 140, 88, 0.95);
    border-color: rgba(143, 188, 143, 0.7);
    box-shadow: 0 2px 15px rgba(74, 103, 65, 0.5);
}

body.dark-mode.env-mars .status-condition {
    background: rgba(210, 100, 70, 0.95);
    border-color: rgba(224, 123, 95, 0.7);
    box-shadow: 0 2px 15px rgba(196, 90, 59, 0.5);
}

/* Dark mode tagline pill (UPLINK_STABLE write-out) */
body.dark-mode #tagline-pill {
    background: rgba(100, 120, 220, 0.2);
    border-color: rgba(120, 140, 240, 0.4);
}
body.dark-mode #tagline-pill span {
    color: rgba(160, 180, 255, 0.9);
}

body.dark-mode.env-earth #tagline-pill {
    background: rgba(74, 103, 65, 0.25);
    border-color: rgba(143, 188, 143, 0.45);
}
body.dark-mode.env-earth #tagline-pill span {
    color: rgba(160, 210, 155, 0.9);
}

body.dark-mode.env-mars #tagline-pill {
    background: rgba(196, 90, 59, 0.25);
    border-color: rgba(224, 123, 95, 0.45);
}
body.dark-mode.env-mars #tagline-pill span {
    color: rgba(240, 150, 110, 0.9);
}

/* Dark mode hero gradient */
body.dark-mode .hero-gradient {
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(45, 58, 140, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 30% 70%, rgba(78, 205, 196, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(212, 168, 75, 0.08) 0%, transparent 40%);
}

/* Dark mode "Read Writing" CTA button */
body.dark-mode .hero-gradient a[href="#writing"] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(232, 232, 240, 0.8);
}

body.dark-mode .hero-gradient a[href="#writing"]:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--env-primary);
    border-color: var(--env-primary);
}

/* Dark mode default h1 color */
body.dark-mode:not(.env-earth):not(.env-mars):not(.env-orbit) .hero-gradient h1 {
    color: #a0b4ff;
}

/* Theme toggle active state */
#theme-toggle.dark-active {
    background: var(--env-primary);
    color: white;
    border-color: var(--env-primary);
}

/* Dark mode form inputs */
body.dark-mode input[type="email"],
body.dark-mode input[type="text"] {
    background: #1a1a24;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e8e8f0;
}

body.dark-mode input[type="email"]::placeholder,
body.dark-mode input[type="text"]::placeholder {
    color: rgba(232, 232, 240, 0.4);
}

body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="text"]:focus {
    border-color: var(--env-primary);
}

/* Lightcone canvas background */
.hero-lightcone-bg {
    background: rgba(255, 255, 255, 0.3);
}

body.dark-mode .hero-lightcone-bg {
    background: rgba(255, 255, 255, 0.15);
}

/* Dark mode hero simulation control panel - keep readable text on light background */
body.dark-mode .glass-panel {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(45, 58, 140, 0.15);
}

body.dark-mode .glass-panel .text-muted,
body.dark-mode .glass-panel span:not(.hero-live-text):not(.hero-live-dot) {
    color: #64748b;
}

body.dark-mode .glass-panel .text-primary {
    color: #2d3a8c;
}

body.dark-mode .glass-panel .font-mono {
    color: #2d3a8c;
}

body.dark-mode .glass-panel button {
    color: #2d3a8c;
}

body.dark-mode .hero-sim-slider {
    background: rgba(45, 58, 140, 0.1);
}

body.dark-mode .hero-sim-slider::-webkit-slider-thumb {
    background: #2d3a8c;
}

/* ===== SECTION TOOLTIP - "what's this?" ===== */
.section-tooltip-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
    position: relative;
}
.section-tooltip-trigger {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--env-primary);
    opacity: 0.35;
    cursor: help;
    transition: opacity 0.2s ease;
    text-transform: lowercase;
    position: relative;
}
.section-tooltip-trigger:hover {
    opacity: 0.7;
}
.section-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(20, 25, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    max-width: 300px;
    width: max-content;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.section-tooltip-trigger:hover + .section-tooltip,
.section-tooltip:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Dark mode tooltip */
body.dark-mode .section-tooltip {
    background: rgba(30, 35, 50, 0.98);
    border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .section-tooltip-trigger {
    opacity: 0.3;
}
body.dark-mode .section-tooltip-trigger:hover {
    opacity: 0.6;
}