:root {
    --void: #0a081c;
    --panel: #1a1635;
    --neon-pink: #ff71ce;
    --neon-cyan: #01cdfe;
    --neon-gold: #f3d849;
    --scanline: #b967ff;
    --ghost: #ede9f7;
    --mist: #8b85a8;
}

/* Design typography tokens retained: Commissioner (Google Fonts), Inter" (Google Fonts), IBM Plex Mono. IntersectionObserver when each icon enters the viewport. IntersectionObserver`. Each card starts at `opacity: 0. Interstitial — 100vh */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-snap-type: y proximity; scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -10%, rgba(185, 103, 255, 0.18), transparent 34rem),
        radial-gradient(circle at 8% 26%, rgba(255, 113, 206, 0.12), transparent 26rem),
        radial-gradient(circle at 92% 68%, rgba(1, 205, 254, 0.1), transparent 24rem),
        var(--void);
    color: var(--ghost);
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 4px);
    mix-blend-mode: screen;
}

.tribunal { position: relative; isolation: isolate; }
.section { position: relative; min-height: 100vh; scroll-snap-align: start; overflow: hidden; }

.docket { display: flex; align-items: center; justify-content: center; text-align: center; }
.crt-grid {
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image: linear-gradient(rgba(1, 205, 254, 0.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 113, 206, 0.13) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(700px) rotateX(62deg) translateY(24vh) scale(1.5);
    transform-origin: bottom center;
}
.hero-waveform { position: absolute; inset: 0; opacity: 0.66; filter: drop-shadow(0 0 18px rgba(255, 113, 206, 0.38)); }
#hero-wave-svg, #footer-wave-svg { width: 100%; height: 100%; display: block; }
.column { position: absolute; top: 13vh; bottom: 10vh; width: clamp(42px, 7vw, 92px); border: 1px solid rgba(237, 233, 247, 0.1); opacity: 0.35; background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(237, 233, 247, 0.1) 12px 13px), linear-gradient(180deg, transparent, rgba(185, 103, 255, 0.18), transparent); }
.left-column { left: 5vw; }
.right-column { right: 5vw; }
.hero-content { position: relative; z-index: 2; padding: 2rem; }
.terminal-label, .section-kicker { font-family: "IBM Plex Mono", "Courier New", monospace; color: var(--neon-cyan); font-size: 0.75rem; letter-spacing: 0.12em; margin-bottom: 1.25rem; text-shadow: 0 0 12px rgba(1, 205, 254, 0.55); }
.hero-flanks { display: flex; align-items: center; justify-content: center; gap: clamp(0.75rem, 2vw, 1.5rem); }
.icon-scales { width: clamp(34px, 5vw, 58px); height: clamp(34px, 5vw, 58px); filter: drop-shadow(0 0 10px rgba(1, 205, 254, 0.75)); }
.hero-title {
    min-height: 1.2em;
    font-family: Commissioner, Georgia, "Times New Roman", serif;
    font-weight: 800;
    font-size: clamp(3rem, 9vw, 8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ghost);
    text-shadow: -1px 0 var(--neon-pink), 1px 0 var(--neon-cyan), 0 0 38px rgba(185, 103, 255, 0.25);
}
.char { display: inline-block; opacity: 0; transition: opacity 0.08s ease, text-shadow 0.15s ease; }
.char.visible { opacity: 1; }
.char.flash { text-shadow: 0 0 20px var(--neon-pink), -1px 0 var(--neon-pink), 1px 0 var(--neon-cyan); }
.cursor { display: inline-block; color: var(--neon-cyan); animation: blink 1s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hero-subtitle { margin-top: 1.4rem; color: var(--neon-cyan); font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.85rem; letter-spacing: 0.05em; opacity: 0; transition: opacity 0.8s ease 1.1s; }
.hero-subtitle.visible { opacity: 1; }
.progress-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.05); }
.progress-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff71ce, #f3d849); box-shadow: 0 0 18px rgba(243, 216, 73, 0.45); animation: fillBar 3s ease-out forwards, pulseBar 4s ease-in-out 3s infinite alternate; }
@keyframes fillBar { to { width: 73%; } }
@keyframes pulseBar { from { width: 70%; } to { width: 76%; } }

.evidence-wall { min-height: 200vh; padding: 7rem 2rem 9rem; background: linear-gradient(180deg, rgba(26, 22, 53, 0), rgba(26, 22, 53, 0.32) 42%, rgba(10, 8, 28, 0)); }
.section-heading { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; text-align: center; color: var(--ghost); font-family: Commissioner, Georgia, "Times New Roman", serif; font-weight: 600; font-size: clamp(1.5rem, 4vw, 3rem); text-shadow: -1px 0 var(--neon-pink), 1px 0 var(--neon-cyan); }
.inline-icon { width: 28px; height: 28px; filter: drop-shadow(0 0 8px currentColor); }
.evidence-wall .section-kicker { text-align: center; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; max-width: 1400px; margin: 0 auto; perspective: 1100px; }
.evidence-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 360px;
    padding: 1.5rem;
    background: radial-gradient(circle at 50% 0%, rgba(255, 113, 206, 0.08), transparent 70%), rgba(10, 8, 28, 0.85);
    backdrop-filter: blur(4px);
    border: 2px solid #ff71ce;
    box-shadow: 0 0 20px rgba(255, 113, 206, 0.15);
    opacity: 0;
    transform: translateY(3rem) rotateX(4deg) rotateZ(-0.5deg);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.evidence-card::before { content: attr(data-case); position: absolute; right: 1rem; bottom: 0.8rem; color: rgba(139, 133, 168, 0.12); font: 800 3rem Commissioner, Georgia, serif; letter-spacing: 0.04em; pointer-events: none; }
.evidence-card:nth-child(odd) { transform: translateY(5rem) rotateX(4deg) rotateZ(0.7deg); }
.evidence-card.in-view { opacity: 1; transform: translateY(0) rotateX(0deg) rotateZ(-0.5deg); }
.evidence-card:nth-child(odd).in-view { transform: translateY(2rem) rotateX(0deg) rotateZ(0.7deg); }
.evidence-card:hover { transform: translateY(-4px) rotateX(0deg) rotateZ(0deg); box-shadow: 0 0 30px rgba(255, 113, 206, 0.25), inset 0 0 36px rgba(1, 205, 254, 0.04); border-color: #01cdfe; }
.evidence-card:nth-child(odd):hover { transform: translateY(calc(2rem - 4px)) rotateX(0deg) rotateZ(0deg); }
.card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.card-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.case-number { color: #01cdfe; font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.85rem; letter-spacing: 0.05em; }
.card-title { margin-bottom: 0.75rem; color: var(--ghost); font-family: Commissioner, Georgia, "Times New Roman", serif; font-weight: 600; font-size: 1.25rem; text-shadow: -0.5px 0 var(--neon-pink), 0.5px 0 var(--neon-cyan); transition: font-weight 0.3s ease; }
.evidence-card:hover .card-title { font-weight: 800; }
.card-body { position: relative; z-index: 1; flex: 1; color: var(--mist); font-size: 0.95rem; }
.card-tag { align-self: flex-start; margin-top: 1rem; padding: 0.25rem 0.6rem; border: 1px solid rgba(243, 216, 73, 0.3); color: #f3d849; font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }

.draw-icon path, .draw-icon line, .draw-icon polyline, .draw-icon circle, .draw-icon ellipse, .draw-icon rect { stroke-dasharray: var(--path-length, 100); stroke-dashoffset: var(--path-length, 100); transition: stroke-dashoffset 0.6s ease-out; }
.draw-icon.drawn path, .draw-icon.drawn line, .draw-icon.drawn polyline, .draw-icon.drawn circle, .draw-icon.drawn ellipse, .draw-icon.drawn rect, .in-view .draw-icon path, .in-view .draw-icon line, .in-view .draw-icon polyline, .in-view .draw-icon circle, .in-view .draw-icon ellipse, .in-view .draw-icon rect { stroke-dashoffset: 0; }

.oscilloscope { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.scope-frame { width: min(92vw, 1050px); height: 330px; border: 1px solid rgba(1, 205, 254, 0.28); background: linear-gradient(180deg, rgba(1, 205, 254, 0.04), rgba(255, 113, 206, 0.035)); box-shadow: 0 0 34px rgba(1, 205, 254, 0.12), inset 0 0 30px rgba(10, 8, 28, 0.8); }
#oscilloscope-canvas { width: 100%; height: 100%; display: block; }
.oscilloscope-label { margin-top: 1.5rem; color: var(--mist); font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.8rem; letter-spacing: 0.05em; text-align: center; }

.verdict { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.verdict-content { position: relative; z-index: 1; text-align: center; }
.verdict-text { min-height: 5em; max-width: 820px; color: #f3d849; font-family: Commissioner, Georgia, "Times New Roman", serif; font-weight: 600; font-style: italic; font-size: clamp(1.2rem, 3vw, 2.2rem); line-height: 1.5; text-shadow: -1px 0 var(--neon-pink), 1px 0 var(--neon-cyan); }
.verdict-nav { display: flex; justify-content: center; gap: 2rem; margin-top: 3rem; }
.marker { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(237, 233, 247, 0.12); transform: rotate(45deg); background: rgba(26, 22, 53, 0.6); }
.nav-icon { width: 20px; height: 20px; opacity: 0.72; transform: rotate(-45deg); transition: opacity 0.3s ease, filter 0.3s ease; }
.marker:hover .nav-icon { opacity: 1; filter: drop-shadow(0 0 10px currentColor); }
.footer-waveform { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; }

@media (max-width: 700px) {
    .hero-flanks { flex-direction: column; gap: 0.5rem; }
    .icon-scales, .column { display: none; }
    .card-grid { grid-template-columns: 1fr; }
    .evidence-card:nth-child(odd), .evidence-card:nth-child(odd).in-view, .evidence-card:nth-child(odd):hover { transform: translateY(0); }
    .scope-frame { height: 260px; }
}