/* ============================================
   SocialDebug.Org - Styles
   Frutiger Aero + Debug Console Aesthetic
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    /* Jewel-Tone Palette */
    --midnight-sapphire: #0B1D3A;
    --obsidian-plum: #1A0A2E;
    --emerald-pulse: #50C878;
    --amethyst-glow: #9B59B6;
    --ruby-signal: #E74C6F;
    --topaz-spark: #F4C542;
    --deep-teal: #0D4F4F;
    --jade-mist: #1A8A6E;
    --frost-white: #E8ECF1;
    --quartz-gray: #8B95A5;
    --sapphire-dim: #2E4A6E;

    /* Cursor tracking */
    --cursor-x: 50%;
    --cursor-y: 50%;

    /* Layout */
    --left-col: 45fr;
    --right-col: 55fr;
}

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

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

body {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--frost-white);
    background: var(--midnight-sapphire);
    overflow-x: hidden;
}

/* --- Progress Bar --- */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(11, 29, 58, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
}

#progress-fill {
    height: 100%;
    width: 0%;
    background: var(--emerald-pulse);
    box-shadow: 0 0 8px var(--emerald-pulse), 0 0 16px rgba(80, 200, 120, 0.4);
    transition: width 0.1s linear;
}

#progress-label {
    position: fixed;
    top: 6px;
    right: 16px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--emerald-pulse);
    text-transform: uppercase;
    z-index: 1001;
    text-shadow: 0 0 8px rgba(80, 200, 120, 0.6);
}

/* --- Split-Screen Container --- */
#split-container {
    display: grid;
    grid-template-columns: var(--left-col) var(--right-col);
    min-height: 100vh;
    transition: grid-template-columns 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
}

/* --- Split Divider --- */
#split-divider {
    position: fixed;
    top: 0;
    left: calc(45% - 0.5px);
    width: 1px;
    height: 100vh;
    background: var(--emerald-pulse);
    box-shadow: 0 0 4px var(--emerald-pulse), 0 0 8px rgba(80, 200, 120, 0.3);
    z-index: 100;
    opacity: 0.7;
    transition: left 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
}

/* --- Left Panel (Debug Console) --- */
#left-panel {
    background: var(--midnight-sapphire);
    position: relative;
    z-index: 10;
    overflow: hidden;
}

#left-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1.7em,
            rgba(46, 74, 110, 0.05) 1.7em,
            rgba(46, 74, 110, 0.05) calc(1.7em + 1px)
        );
    pointer-events: none;
    z-index: 1;
}

/* Leaf venation watermark */
#left-panel::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 45%;
    height: 100vh;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(244, 197, 66, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(244, 197, 66, 0.03) 0%, transparent 40%),
        radial-gradient(ellipse at 40% 80%, rgba(244, 197, 66, 0.02) 0%, transparent 35%);
    pointer-events: none;
    z-index: 2;
}

/* --- Beat Sections --- */
.beat {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 60px 40px 60px 30px;
    position: relative;
    z-index: 5;
}

.beat-content {
    width: 100%;
    max-width: 600px;
}

/* --- Debug Lines --- */
.debug-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 3px 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.debug-line.visible {
    opacity: 1;
    transform: translateX(0);
}

.line-number {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    color: var(--sapphire-dim);
    opacity: 0.6;
    min-width: 32px;
    text-align: right;
    user-select: none;
    flex-shrink: 0;
    padding-top: 3px;
}

.prompt {
    color: var(--emerald-pulse);
    font-weight: 600;
    flex-shrink: 0;
    text-shadow: 0 0 6px rgba(80, 200, 120, 0.4);
}

.text-content {
    flex: 1;
}

/* Syntax Highlighting */
.keyword {
    color: var(--emerald-pulse);
    font-weight: 600;
}

.string {
    color: var(--topaz-spark);
}

.error {
    color: var(--ruby-signal);
    font-weight: 600;
}

.comment {
    color: var(--quartz-gray);
    font-style: italic;
}

/* Blinking Cursor */
.cursor {
    color: var(--emerald-pulse);
    animation: blink 1s step-end infinite;
    text-shadow: 0 0 8px rgba(80, 200, 120, 0.6);
}

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

/* Hero Text */
.hero-line {
    margin: 24px 0;
}

.hero-text {
    font-size: clamp(32px, 6vw, 72px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--frost-white);
    text-shadow:
        0 0 20px rgba(80, 200, 120, 0.3),
        0 0 40px rgba(80, 200, 120, 0.15);
}

/* --- Breath Zones (Left Panel) --- */
.breath-zone {
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}

.breath-zone .breath-word {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 3vw, 36px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--quartz-gray);
    opacity: 0.5;
    text-shadow: 0 0 12px rgba(139, 149, 165, 0.3);
    animation: breathPulse 3s ease-in-out infinite;
}

@keyframes breathPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* --- Right Panel (Living System) --- */
#right-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 55%;
    height: 100vh;
    overflow: hidden;
    z-index: 5;
    transition: width 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- Gradient Mesh Layers --- */
.mesh-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.mesh-layer.active {
    opacity: 1;
}

/* Beat 1: Emerald-to-teal mesh with sapphire nodes */
#mesh-beat-1 {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(80, 200, 120, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 20%, rgba(13, 79, 79, 0.8) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 70%, rgba(26, 138, 110, 0.7) 0%, transparent 55%),
        radial-gradient(circle at 20% 80%, rgba(46, 74, 110, 0.5) 0%, transparent 30%),
        radial-gradient(circle at 80% 60%, rgba(46, 74, 110, 0.4) 0%, transparent 25%),
        radial-gradient(circle at 60% 30%, rgba(11, 29, 58, 0.6) 0%, transparent 35%),
        linear-gradient(135deg, var(--deep-teal), var(--jade-mist));
    animation: meshDrift1 60s ease-in-out infinite alternate;
}

@keyframes meshDrift1 {
    0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%, 100% 50%, 50% 0%, 0% 0%; }
    50% { background-position: 10% 15%, 85% 10%, 40% 85%, 15% 90%, 90% 40%, 60% 15%, 5% 5%; }
    100% { background-position: 20% 30%, 70% 20%, 30% 70%, 30% 80%, 80% 30%, 70% 30%, 10% 10%; }
}

/* Beat 2: Amethyst-to-ruby mesh with vein patterns */
#mesh-beat-2 {
    background:
        radial-gradient(ellipse at 40% 30%, rgba(155, 89, 182, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(231, 76, 111, 0.6) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 70%, rgba(155, 89, 182, 0.5) 0%, transparent 40%),
        radial-gradient(circle at 60% 20%, rgba(26, 10, 46, 0.6) 0%, transparent 35%),
        radial-gradient(circle at 30% 50%, rgba(231, 76, 111, 0.3) 0%, transparent 30%),
        linear-gradient(160deg, #1A0A2E, #9B59B6 40%, #E74C6F);
    animation: meshDrift2 55s ease-in-out infinite alternate;
}

@keyframes meshDrift2 {
    0% { background-position: 0% 0%, 100% 50%, 0% 100%, 50% 0%, 30% 50%, 0% 0%; }
    50% { background-position: 15% 20%, 80% 40%, 20% 80%, 60% 15%, 40% 60%, 10% 10%; }
    100% { background-position: 30% 40%, 60% 30%, 40% 60%, 70% 30%, 50% 70%, 20% 20%; }
}

/* Beat 3: Topaz-to-emerald with pulsing ripples */
#mesh-beat-3 {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(244, 197, 66, 0.6) 0%, transparent 40%),
        radial-gradient(ellipse at 30% 30%, rgba(80, 200, 120, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(244, 197, 66, 0.4) 0%, transparent 45%),
        radial-gradient(circle at 20% 60%, rgba(26, 138, 110, 0.5) 0%, transparent 35%),
        radial-gradient(circle at 80% 40%, rgba(13, 79, 79, 0.4) 0%, transparent 30%),
        linear-gradient(145deg, #0D4F4F, #F4C542 50%, #50C878);
    animation: meshDrift3 50s ease-in-out infinite alternate;
}

@keyframes meshDrift3 {
    0% { background-position: 50% 50%, 0% 0%, 100% 100%, 0% 50%, 100% 50%, 0% 0%; }
    50% { background-position: 45% 55%, 15% 15%, 85% 85%, 15% 45%, 85% 55%, 5% 5%; }
    100% { background-position: 40% 60%, 30% 30%, 70% 70%, 30% 40%, 70% 60%, 10% 10%; }
}

/* Beat 4: Full spectrum convergence */
#mesh-beat-4 {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(80, 200, 120, 0.5) 0%, transparent 35%),
        radial-gradient(ellipse at 25% 25%, rgba(155, 89, 182, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 75% 75%, rgba(231, 76, 111, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 25% 75%, rgba(244, 197, 66, 0.4) 0%, transparent 35%),
        radial-gradient(ellipse at 75% 25%, rgba(13, 79, 79, 0.5) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(26, 138, 110, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #1A0A2E, #0D4F4F, #9B59B6, #E74C6F, #50C878);
    background-size: 200% 200%;
    animation: meshDrift4 45s ease-in-out infinite alternate;
}

@keyframes meshDrift4 {
    0% { background-position: 0% 0%; }
    25% { background-position: 50% 25%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 75%; }
    100% { background-position: 0% 100%; }
}

/* Beat 5: Calm jade-to-frost */
#mesh-beat-5 {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(26, 138, 110, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 60%, rgba(232, 236, 241, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(13, 79, 79, 0.3) 0%, transparent 45%),
        linear-gradient(180deg, #0D4F4F, #1A8A6E 50%, rgba(232, 236, 241, 0.15));
    animation: meshDrift5 70s ease-in-out infinite alternate;
}

@keyframes meshDrift5 {
    0% { background-position: 0% 0%, 0% 0%, 100% 0%, 0% 0%; }
    100% { background-position: 10% 10%, 10% 10%, 90% 10%, 0% 0%; }
}

/* --- Mycelium Network SVG --- */
#mycelium-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

#mycelium-paths path {
    stroke: var(--emerald-pulse);
    stroke-width: 1;
    fill: none;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

#mycelium-paths path.bright {
    opacity: 0.8;
}

/* --- Bioluminescent Particles --- */
#particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
    overflow: hidden;
}

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

.particle-amethyst {
    background: radial-gradient(circle, rgba(155, 89, 182, 0.8), rgba(155, 89, 182, 0) 70%);
    box-shadow: 0 0 6px rgba(155, 89, 182, 0.5), 0 0 12px rgba(155, 89, 182, 0.3);
}

.particle-ruby {
    background: radial-gradient(circle, rgba(231, 76, 111, 0.8), rgba(231, 76, 111, 0) 70%);
    box-shadow: 0 0 6px rgba(231, 76, 111, 0.5), 0 0 12px rgba(231, 76, 111, 0.3);
}

.particle-emerald {
    background: radial-gradient(circle, rgba(80, 200, 120, 0.8), rgba(80, 200, 120, 0) 70%);
    box-shadow: 0 0 6px rgba(80, 200, 120, 0.5), 0 0 12px rgba(80, 200, 120, 0.3);
}

.particle-topaz {
    background: radial-gradient(circle, rgba(244, 197, 66, 0.8), rgba(244, 197, 66, 0) 70%);
    box-shadow: 0 0 6px rgba(244, 197, 66, 0.5), 0 0 12px rgba(244, 197, 66, 0.3);
}

.particle.attracted {
    transition: box-shadow 0.3s ease;
    box-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
}

/* --- Water Caustics Overlay --- */
#caustics-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    pointer-events: none;
    opacity: 0.15;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(80, 200, 120, 0.4) 0%, transparent 30%),
        radial-gradient(ellipse at 70% 50%, rgba(155, 89, 182, 0.3) 0%, transparent 25%),
        radial-gradient(ellipse at 40% 80%, rgba(244, 197, 66, 0.3) 0%, transparent 28%),
        radial-gradient(ellipse at 60% 30%, rgba(231, 76, 111, 0.2) 0%, transparent 22%);
    background-size: 150% 150%, 130% 130%, 140% 140%, 120% 120%;
    animation: causticsShift 15s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

@keyframes causticsShift {
    0% {
        background-position: 0% 0%, 100% 50%, 50% 100%, 30% 20%;
    }
    33% {
        background-position: 30% 20%, 70% 30%, 20% 70%, 60% 50%;
    }
    66% {
        background-position: 60% 40%, 40% 60%, 80% 20%, 20% 80%;
    }
    100% {
        background-position: 100% 60%, 0% 80%, 60% 40%, 50% 10%;
    }
}

/* --- Cursor Spotlight --- */
#cursor-spotlight {
    position: fixed;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    will-change: transform;
}

#cursor-spotlight.visible {
    opacity: 1;
}

#cursor-spotlight.emerald {
    background: radial-gradient(circle, rgba(80, 200, 120, 0.25) 0%, rgba(80, 200, 120, 0.05) 50%, transparent 70%);
}

#cursor-spotlight.amethyst {
    background: radial-gradient(circle, rgba(155, 89, 182, 0.25) 0%, rgba(155, 89, 182, 0.05) 50%, transparent 70%);
}

/* --- Breath Zone Visuals (Right Panel) --- */
.breath-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.breath-visual.active {
    opacity: 1;
}

.breath-word-visual {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 4vw, 56px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--frost-white);
    opacity: 0.7;
    text-shadow: 0 0 20px rgba(232, 236, 241, 0.4), 0 0 40px rgba(80, 200, 120, 0.2);
    animation: breathFloat 3s ease-in-out infinite;
}

@keyframes breathFloat {
    0%, 100% { transform: translateY(0px); opacity: 0.5; }
    50% { transform: translateY(-8px); opacity: 0.8; }
}

/* --- Frutiger Aero Glass Effects --- */
.glass-panel {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(11, 29, 58, 0.75);
    border: 1px solid rgba(80, 200, 120, 0.15);
}

/* --- Heartbeat Pulse (Sound Design Visual Cue) --- */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.02); }
    30% { transform: scale(1); }
    45% { transform: scale(1.015); }
    60% { transform: scale(1); }
}

/* --- Responsive Split --- */
#split-container.left-dominant {
    --left-col: 60fr;
    --right-col: 40fr;
}

#split-container.right-dominant {
    --left-col: 35fr;
    --right-col: 65fr;
}

#split-container.left-dominant ~ #split-divider {
    left: calc(60% - 0.5px);
}

#split-container.right-dominant ~ #split-divider {
    left: calc(35% - 0.5px);
}

/* Update right panel width to match */
body.left-dominant #right-panel {
    width: 40%;
}

body.right-dominant #right-panel {
    width: 65%;
}

body:not(.left-dominant):not(.right-dominant) #right-panel {
    width: 55%;
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--midnight-sapphire);
}

::-webkit-scrollbar-thumb {
    background: var(--sapphire-dim);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--emerald-pulse);
}

/* --- Selection Color --- */
::selection {
    background: rgba(80, 200, 120, 0.3);
    color: var(--frost-white);
}

/* --- Mobile Fallback --- */
@media (max-width: 768px) {
    #split-container {
        grid-template-columns: 1fr;
    }

    #right-panel {
        position: relative;
        width: 100% !important;
        height: 50vh;
    }

    #split-divider {
        display: none;
    }

    .beat {
        min-height: 80vh;
        padding: 40px 20px;
    }

    .hero-text {
        font-size: clamp(28px, 10vw, 48px);
    }

    #progress-label {
        right: 8px;
        font-size: 9px;
    }
}