*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--abyss:#0a0e1a;--deep-ink:#111827;--midnight-slate:#1e293b;--neon-cyan:#00e5ff;--electric-violet:#7c3aed;--hazard-amber:#f59e0b;--bone-white:#f1f5f9;--steel-mist:#8892b0;--ash-gray:#e0e0e0;--cyan-plasma:rgba(0,229,255,0.3)}
body{background:var(--abyss);color:var(--steel-mist);font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:14px;line-height:1.6;overflow-x:hidden}

/* Tilted Grid */
.tilted-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.08;
background-image:
    repeating-linear-gradient(11deg,var(--neon-cyan) 0px,var(--neon-cyan) 0.5px,transparent 0.5px,transparent 80px),
    repeating-linear-gradient(101deg,var(--neon-cyan) 0px,var(--neon-cyan) 0.5px,transparent 0.5px,transparent 80px)}

/* Light Bleeds */
.light-bleed{position:fixed;border-radius:50%;z-index:0;pointer-events:none}
.bleed-1{width:600px;height:600px;top:10%;left:-10%;background:radial-gradient(circle,rgba(124,58,237,0.06),transparent 70%)}
.bleed-2{width:500px;height:500px;top:40%;right:-5%;background:radial-gradient(circle,rgba(0,229,255,0.05),transparent 70%)}
.bleed-3{width:400px;height:400px;bottom:10%;left:30%;background:radial-gradient(circle,rgba(0,229,255,0.04),transparent 70%)}

main{position:relative;z-index:1}

/* Scenes */
.scene{min-height:90vh;padding:clamp(4rem,8vh,8rem) clamp(1rem,4vw,4rem);position:relative}

/* Scene 1: Breach Zero */
.scene-breach{min-height:100vh;display:flex;align-items:center;justify-content:center}
.breach-panels{position:relative;width:100%;max-width:900px}
.panel{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);background:var(--deep-ink);border:1px solid var(--cyan-plasma);padding:clamp(1.5rem,3vw,3rem);box-shadow:0 0 8px rgba(0,229,255,0.4),0 0 24px rgba(0,229,255,0.15),inset 0 0 8px rgba(0,229,255,0.1);margin-bottom:1.5rem}
.panel-title{background:transparent;border:none;box-shadow:none;clip-path:none}
.breach-title{font-family:'Playfair Display',serif;font-weight:900;font-style:italic;font-size:clamp(3rem,10vw,9rem);color:var(--bone-white);letter-spacing:-0.04em;text-shadow:0 0 12px rgba(0,229,255,0.6),0 0 40px rgba(0,229,255,0.2);line-height:0.95}
.title-line{display:block}
.title-overlap{margin-top:-0.15em;position:relative;z-index:-1;opacity:0.8}
.mono-text{font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:clamp(0.7rem,1.2vw,0.85rem);color:var(--steel-mist);letter-spacing:0.02em}
.hazard-pulse{color:var(--hazard-amber);animation:hazardPulse 2s ease-in-out infinite}
@keyframes hazardPulse{0%,100%{opacity:1}50%{opacity:0.4}}

.panel-metric{display:flex;flex-direction:column;max-width:300px}
.metric-label{font-size:0.7rem;color:var(--steel-mist);letter-spacing:0.04em;margin-bottom:0.3rem}
.metric-value{font-family:'DM Serif Display',serif;font-size:clamp(2rem,5vw,4rem);color:var(--neon-cyan);text-shadow:0 0 12px rgba(0,229,255,0.6)}

/* Scene 2: Fractured Metrics */
.scene-metrics{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,3vw,3rem);align-items:center;justify-content:center}
.metric-panel{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);background:var(--deep-ink);border:1px solid var(--cyan-plasma);padding:clamp(2rem,4vw,4rem);box-shadow:0 0 8px rgba(0,229,255,0.4),0 0 24px rgba(0,229,255,0.15),inset 0 0 8px rgba(0,229,255,0.1);display:flex;flex-direction:column;min-width:clamp(200px,25vw,280px);animation:panelGlow 3s ease-in-out infinite}
.metric-panel-1{animation-duration:2s}.metric-panel-2{animation-duration:3s}.metric-panel-3{animation-duration:5s}
@keyframes panelGlow{0%,100%{box-shadow:0 0 8px rgba(0,229,255,0.4),0 0 24px rgba(0,229,255,0.15)}50%{box-shadow:0 0 12px rgba(0,229,255,0.6),0 0 32px rgba(0,229,255,0.25)}}
.metric-sub-label{font-size:0.65rem;letter-spacing:0.06em;color:var(--steel-mist);margin-bottom:0.5rem}
.metric-big{font-family:'DM Serif Display',serif;font-size:clamp(2.5rem,5vw,4.5rem);color:var(--neon-cyan);text-shadow:0 0 12px rgba(0,229,255,0.6)}
.metric-currency{font-size:0.7rem;letter-spacing:0.04em;color:var(--steel-mist);margin-top:0.3rem}

/* Scene 3: The Grid */
.scene-grid{min-height:100vh;display:flex;align-items:center;justify-content:center;perspective:600px}
.perspective-grid{position:absolute;inset:0;background-image:
    repeating-linear-gradient(0deg,var(--neon-cyan) 0px,var(--neon-cyan) 0.5px,transparent 0.5px,transparent 60px),
    repeating-linear-gradient(90deg,var(--neon-cyan) 0px,var(--neon-cyan) 0.5px,transparent 0.5px,transparent 60px);
opacity:0.06;transform:perspective(600px) rotateX(45deg);transform-origin:center bottom}
.grid-fragments{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(2rem,4vh,4rem);align-items:center}
.grid-frag{font-family:'Playfair Display',serif;font-weight:900;font-style:italic;color:var(--bone-white);text-shadow:0 0 12px rgba(0,229,255,0.4);text-align:center}
.frag-1{font-size:clamp(1.5rem,3vw,2.5rem);opacity:0.9}
.frag-2{font-size:clamp(1.2rem,2.5vw,2rem);opacity:0.7}
.frag-3{font-size:clamp(1rem,2vw,1.6rem);opacity:0.5}
.frag-4{font-size:clamp(0.8rem,1.5vw,1.2rem);opacity:0.35}

/* Scene 4: Corrupted Ledger */
.scene-ledger{padding:clamp(2rem,4vh,4rem) clamp(0.5rem,2vw,2rem)}
.ledger-table{max-width:1000px;margin:0 auto;overflow-x:auto}
.ledger-header,.ledger-row{display:grid;grid-template-columns:1fr 1.2fr 0.8fr 0.8fr 1fr;gap:2px;padding:0.6rem clamp(0.5rem,1vw,1rem);font-size:clamp(0.65rem,1vw,0.8rem);letter-spacing:0.02em}
.ledger-header{font-family:'DM Serif Display',serif;font-size:clamp(0.8rem,1.2vw,1rem);color:var(--ash-gray);border-bottom:1px solid var(--cyan-plasma)}
.ledger-row{border-bottom:1px solid rgba(0,229,255,0.05)}
.ledger-row:nth-child(odd){background:var(--deep-ink)}
.ledger-row:nth-child(even){background:var(--abyss)}
.ledger-glitch{position:relative;background-image:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,229,255,0.03) 1px,rgba(0,229,255,0.03) 2px)}
.ledger-glitch span{animation:glitchShift 4s ease-in-out infinite}
@keyframes glitchShift{0%,90%,100%{transform:translateY(0)}95%{transform:translateY(-2px)}}
.redacted{background:#000;color:#000;padding:0 0.5rem}
.hazard-text{color:var(--hazard-amber)}

/* Scanline overlay on ledger */
.ledger-table::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,229,255,0.02) 1px,rgba(0,229,255,0.02) 2px)}

/* Scene 5: Signal Decay */
.scene-signal{display:flex;flex-direction:column;align-items:center;justify-content:center}
.signal-title{font-family:'Playfair Display',serif;font-weight:900;font-style:italic;font-size:clamp(2rem,6vw,5rem);color:var(--bone-white);text-shadow:0 0 12px rgba(0,229,255,0.4);margin-bottom:2rem}
.sparkline-container{width:80%;max-width:1000px}
.sparkline-svg{width:100%;height:auto}
.signal-line{filter:drop-shadow(0 0 6px rgba(0,229,255,0.5));stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 2s ease-out}
.signal-line.drawn{stroke-dashoffset:0}

/* Scene 6: Protocol Status */
.scene-protocol{display:flex;flex-direction:column;align-items:center;justify-content:center}
.protocol-log{max-width:700px;width:100%;margin-bottom:3rem}
.log-line{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:clamp(0.7rem,1.1vw,0.85rem);color:var(--steel-mist);margin-bottom:0.4rem;letter-spacing:0.01em}
.hazard-log{color:var(--hazard-amber)}
.cursor-blink{animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.footer-panel{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);background:var(--deep-ink);border:1px solid var(--cyan-plasma);padding:clamp(1.5rem,3vw,3rem);box-shadow:0 0 12px rgba(0,229,255,0.5),0 0 40px rgba(0,229,255,0.2);text-align:center}
.footer-title{font-family:'Playfair Display',serif;font-weight:900;font-style:italic;font-size:clamp(1.5rem,3vw,3rem);color:var(--bone-white);text-shadow:0 0 16px rgba(0,229,255,0.8),0 0 48px rgba(0,229,255,0.3)}

/* Reveals */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.6s cubic-bezier(0.68,-0.55,0.265,1.55),transform 0.6s cubic-bezier(0.68,-0.55,0.265,1.55)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Stagger log lines */
.log-line:nth-child(2)[data-reveal]{transition-delay:0.1s}
.log-line:nth-child(3)[data-reveal]{transition-delay:0.2s}
.log-line:nth-child(4)[data-reveal]{transition-delay:0.3s}
.log-line:nth-child(5)[data-reveal]{transition-delay:0.4s}
.log-line:nth-child(6)[data-reveal]{transition-delay:0.5s}
.log-line:nth-child(7)[data-reveal]{transition-delay:0.6s}
.log-line:nth-child(8)[data-reveal]{transition-delay:0.7s}

/* Responsive */
@media(max-width:768px){
    .scene-metrics{flex-direction:column}
    .metric-panel{transform:none!important;min-width:auto;width:100%}
    .ledger-header,.ledger-row{grid-template-columns:1fr 1fr 1fr;font-size:0.6rem}
    .ledger-header span:nth-child(4),.ledger-header span:nth-child(5),.ledger-row span:nth-child(4),.ledger-row span:nth-child(5){display:none}
}