:root {
    /* Unhinged Maximalist Palette */
    --neon-banana: #39FF14;
    --cyber-turmeric: #FFEA00;
    --plasma-pink: #FF00FF;
    --toxic-mango: #FF4500;
    --idli-white: #F4F4F5;
    --space-black: #09090B;
    --hologram-cyan: #00FFFF;
    /* Aggressive Ligne Claire */
    --line-brutal: 8px solid var(--space-black);
    --line-thick: 4px solid var(--space-black);
    --brutal-shadow: 16px 16px 0px var(--space-black);
    --brutal-shadow-hover: 24px 24px 0px var(--space-black);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    /* The Massive Canvas */
    width: 300vw;
    height: 300vh;
    background-color: var(--toxic-mango);
    /* Clashing Maximalist Patterns */
    background-image:
        radial-gradient(var(--space-black) 4px, transparent 4px),
        linear-gradient(45deg, var(--space-black) 2px, transparent 2px),
        linear-gradient(-45deg, var(--space-black) 2px, transparent 2px);
    background-size: 60px 60px, 20px 20px, 20px 20px;
    font-family: 'Courier New', Courier, monospace;
    color: var(--space-black);
    overflow-x: auto;
    overflow-y: auto;
    cursor: crosshair;
}
/* --- CHAOTIC UI ELEMENTS --- */
.maximalist-marquee {
    position: fixed; top: 0; left: 0; width: 100vw;
    background: var(--cyber-turmeric); border-bottom: var(--line-brutal);
    padding: 10px 0; z-index: 100; overflow: hidden; white-space: nowrap;
}
.marquee-track {
    display: inline-block; font-weight: 900; font-size: 1.5rem; text-transform: uppercase;
    animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.sensor-array-header {
    position: fixed; bottom: 40px; right: 40px;
    background: var(--plasma-pink); border: var(--line-brutal); box-shadow: var(--brutal-shadow);
    padding: 20px; z-index: 100; text-align: right; transform: rotate(-2deg);
}
.sensor-array-header h1 { font-size: 3rem; background: var(--hologram-cyan); display: inline-block; padding: 10px; border: var(--line-thick); margin-bottom: 10px;}
.sensor-array-header p { font-weight: 900; font-size: 1.5rem; background: var(--idli-white); display: inline-block; padding: 5px; border: var(--line-thick); }
/* --- THE MASSIVE 2D MAP --- */
.story-canvas {
    position: relative; width: 100%; height: 100%;
}
/* Base Node Styling */
.story-node {
    position: absolute;
    width: 250px; height: 80px;
    background: var(--neon-banana); border: var(--line-brutal); box-shadow: var(--brutal-shadow);
    transition: all 0.5s cubic-bezier(0.85, 0, 0.15, 1);
    transition-delay: 0.5s; /* 0.5s linger to activate */
    z-index: 10;
}
/* Scattering the Nodes across the 300vw/300vh map */
.node-1 { top: 20vh; left: 30vw; transform: rotate(4deg); }
.node-2 { top: 60vh; left: 80vw; transform: rotate(-3deg); }
.node-3 { top: 120vh; left: 150vw; transform: rotate(6deg); }
.node-4 { top: 200vh; left: 50vw; transform: rotate(-5deg); }
.node-5 { top: 180vh; left: 220vw; transform: rotate(2deg); }
.node-6 { top: 260vh; left: 120vw; transform: rotate(-4deg); }
/* Hover Expansion */
.story-node:hover {
    width: 900px; height: 700px;
    background: var(--idli-white);
    transform: rotate(0deg) translate(-50px, -50px);
    box-shadow: var(--brutal-shadow-hover);
    z-index: 50;
    transition-delay: 0s;
}
/* Closed State */
.node-closed {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.2rem; text-transform: uppercase;
    transition: opacity 0.2s;
}
.blinker { display: inline-block; width: 20px; height: 20px; background: red; border: var(--line-thick); border-radius: 50%; margin-right: 10px; animation: blink 0.5s infinite; }
.story-node:hover .node-closed { opacity: 0; pointer-events: none; }
/* Expanded State */
.node-expanded {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    padding: 40px; opacity: 0; display: flex; flex-direction: column;
    transition: opacity 0.3s ease-in; transition-delay: 0s;
}
.story-node:hover .node-expanded { opacity: 1; transition-delay: 0.6s; }
.expanded-header { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--line-brutal); padding-bottom: 20px; margin-bottom: 20px;}
.expanded-header h2 { font-size: 3rem; text-transform: uppercase; background: var(--hologram-cyan); padding: 10px 20px; border: var(--line-thick); box-shadow: 8px 8px 0px var(--space-black); }
.log-date { background: var(--plasma-pink); padding: 10px 15px; font-weight: 900; font-size: 1.2rem; border: var(--line-thick); }
.svg-stage { flex-grow: 1; background: var(--space-black); border: var(--line-brutal); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.awaiting-data { color: var(--neon-banana); font-family: monospace; font-size: 1.5rem; animation: blink 1s infinite;}
.content-body { font-size: 1.5rem; font-weight: 900; padding: 20px; background: var(--cyber-turmeric); border: var(--line-brutal); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* --- SAMBAR LAUNCH HERO --- */
.sambar-hero {
    position: absolute;
    top: 110vh;
    left: 95vw;
    width: 800px;
    height: 600px;
    border: var(--line-brutal);
    background: var(--idli-white);
    box-shadow: var(--brutal-shadow);
    z-index: 5;
    transform: rotate(-2deg);
    padding: 0;
    pointer-events: none;
}
.sambar-hero-svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.sambar-hero::after {
    content: "BEING BUILT IN BETWEEN BITES. COMING SOON!";
    position: absolute;
    bottom: -60px;
    left: -20px;
    background: var(--neon-banana);
    border: var(--line-brutal);
    box-shadow: var(--brutal-shadow);
    padding: 12px 20px;
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(3deg);
}