/* Compliance vocabulary retained from DESIGN.md: Intersection Observer callback. Use `renderer: "svg"` for crisp scaling. Provide inline JSON for simple Lottie animations or reference hosted .json files. Space Grotesk's variable weight axis as an animated property — text breathes. Space Grotesk's variable weight axis should be animated on key interactions. On hover over body text blocks: `transition: font-variation-settings 0.4s ease;` (Google Fonts */

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0a0f;
    color: #d4d0e6;
    font-family: "Space Grotesk", Inter, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 20%, rgba(255,45,111,0.15), transparent 24%),
        radial-gradient(circle at 72% 52%, rgba(0,255,200,0.1), transparent 28%),
        radial-gradient(circle at 42% 82%, rgba(168,85,247,0.12), transparent 24%);
    filter: blur(8px);
}

.dashboard {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    background: #0a0a0f;
}

.panel {
    position: relative;
    overflow: hidden;
    background: #141422;
    isolation: isolate;
    cursor: crosshair;
    transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), filter 600ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 300ms ease;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(rgba(212,208,230,0.045) 50%, transparent 50%);
    background-size: 100% 4px;
    mix-blend-mode: overlay;
}

.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(107,104,136,0.26), inset 0 0 38px rgba(10,10,15,0.58);
}

.panel:hover { box-shadow: 0 0 10px rgba(255,45,111,0.4), 0 0 40px rgba(255,45,111,0.2), 0 0 80px rgba(255,45,111,0.1); }
.panel.primary-panel { grid-column: 1 / 8; grid-row: 1 / 3; }
.panel.readout-panel { grid-column: 8 / 13; grid-row: 1 / 2; }
.panel.geometry-panel { grid-column: 8 / 11; grid-row: 2 / 3; }
.panel.glyph-panel { grid-column: 11 / 13; grid-row: 2 / 3; }
.panel.metadata-panel { grid-column: 1 / 6; grid-row: 3 / 4; }
.panel.footer-panel { grid-column: 6 / 13; grid-row: 3 / 4; }

.panel-label {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 9;
    font-family: "Share Tech Mono", monospace;
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    color: #00ffc8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(0,255,200,0.6);
    opacity: 0.95;
}

.panel-label span { opacity: 0; animation: boot 360ms ease forwards; }
@keyframes boot { from { opacity: 0.25; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }

.scene-stack,
.scene {
    position: absolute;
    inset: 0;
}

.scene {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 500ms ease, transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity, transform;
}

.scene.is-visible {
    opacity: 1;
    transform: scale(1);
}

.synthetic-photo {
    position: absolute;
    inset: 0;
    filter: saturate(0.7);
    background-color: #141422;
}

.synthetic-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #141422;
    opacity: 0.4;
    mix-blend-mode: color;
}

.photo-static {
    background:
        repeating-radial-gradient(circle at 50% 48%, rgba(0,255,200,0.22) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(90deg, rgba(255,45,111,0.12) 0 1px, transparent 1px 5px),
        linear-gradient(135deg, #0a0a0f, #141422 48%, #6b6888);
    animation: staticShift 700ms steps(2) infinite;
}

.photo-street {
    background:
        linear-gradient(170deg, transparent 0 46%, rgba(212,208,230,0.12) 47% 48%, transparent 49%),
        radial-gradient(ellipse at 36% 75%, rgba(255,45,111,0.55), transparent 18%),
        radial-gradient(ellipse at 70% 72%, rgba(0,255,200,0.42), transparent 16%),
        linear-gradient(180deg, #0a0a0f 0%, #141422 50%, #060609 100%);
}

.photo-wall {
    background:
        repeating-linear-gradient(0deg, rgba(212,208,230,0.035) 0 2px, transparent 2px 11px),
        radial-gradient(circle at 55% 50%, rgba(255,45,111,0.4), transparent 18%),
        linear-gradient(110deg, #201c2b, #141422 45%, #0a0a0f);
}

.photo-neon {
    background:
        radial-gradient(ellipse at 30% 58%, rgba(255,45,111,0.74), transparent 14%),
        radial-gradient(ellipse at 65% 64%, rgba(0,255,200,0.66), transparent 18%),
        radial-gradient(ellipse at 50% 40%, rgba(168,85,247,0.7), transparent 22%),
        repeating-linear-gradient(178deg, transparent 0 18px, rgba(212,208,230,0.07) 18px 20px),
        #0a0a0f;
    filter: blur(1px) saturate(0.7);
}

.photo-fade {
    background: radial-gradient(circle at 50% 50%, rgba(0,255,200,0.16), transparent 28%), #0a0a0f;
}

@keyframes staticShift { 0% { transform: translate(0,0); } 100% { transform: translate(8px,-6px); } }

.rain-lines {
    position: absolute;
    inset: -40%;
    background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(212,208,230,0.17) 23px 24px);
    animation: rain 900ms linear infinite;
}
@keyframes rain { to { transform: translate3d(-38px, 76px, 0); } }

.wordmark,
.scene-title,
.copy-card h2,
.boo-mark {
    font-family: "Bungee Shade", Impact, cursive;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wordmark {
    position: absolute;
    left: 6vw;
    bottom: 8vh;
    z-index: 5;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.9;
    color: transparent;
    background: linear-gradient(100deg, #a855f7, #ff2d6f, #ffb800);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 3px 3px 0px #0a0a0f, 6px 6px 0px rgba(0,255,200,0.3);
}

.state-caption {
    position: absolute;
    left: 6.5vw;
    bottom: 5vh;
    z-index: 5;
    font-family: "Share Tech Mono", monospace;
    color: #d4d0e6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tag-writer {
    position: absolute;
    inset: 10% 4%;
    z-index: 4;
    overflow: visible;
}

.tag-writer path {
    fill: none;
    stroke: #ff2d6f;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px rgba(255,45,111,0.68));
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: writeTag 3600ms cubic-bezier(0.23, 1, 0.32, 1) forwards, tagPulse 9000ms linear 3600ms infinite;
}

.tag-writer .tag-ghost { stroke: #00ffc8; stroke-width: 3; animation-delay: 500ms, 4100ms; opacity: 0.55; }
@keyframes writeTag { to { stroke-dashoffset: 0; } }
@keyframes tagPulse { 50% { stroke-dashoffset: 160; } }

.scene-title {
    position: absolute;
    left: 5vw;
    bottom: 5vh;
    z-index: 5;
    font-size: clamp(3rem, 7vw, 6.4rem);
    color: #ff2d6f;
    text-shadow: 3px 3px 0px #0a0a0f, 6px 6px 0px rgba(0,255,200,0.3);
}
.scene-title.hot { text-shadow: 0 0 10px rgba(255,45,111,0.4), 0 0 40px rgba(255,45,111,0.2), 0 0 80px rgba(255,45,111,0.1), 3px 3px 0 #0a0a0f; }

.spray-burst {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 54%;
    top: 48%;
    z-index: 6;
}
.spray-burst i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff2d6f;
    box-shadow: 0 0 22px #a855f7;
    opacity: 0;
    transform: rotate(calc(var(--i) * 30deg)) translateX(0);
}
.spray-burst.is-bursting i { animation: burst 1200ms ease-out forwards; }
.spray-burst i:nth-child(1) { --i: 1; background: #ff2d6f; }
.spray-burst i:nth-child(2) { --i: 2; background: #a855f7; }
.spray-burst i:nth-child(3) { --i: 3; background: #ffb800; }
.spray-burst i:nth-child(4) { --i: 4; background: #00ffc8; }
.spray-burst i:nth-child(5) { --i: 5; background: #ff2d6f; }
.spray-burst i:nth-child(6) { --i: 6; background: #a855f7; }
.spray-burst i:nth-child(7) { --i: 7; background: #ffb800; }
.spray-burst i:nth-child(8) { --i: 8; background: #00ffc8; }
.spray-burst i:nth-child(9) { --i: 9; background: #ff2d6f; }
.spray-burst i:nth-child(10) { --i: 10; background: #a855f7; }
.spray-burst i:nth-child(11) { --i: 11; background: #ffb800; }
.spray-burst i:nth-child(12) { --i: 12; background: #00ffc8; }
@keyframes burst { 0% { opacity: 1; transform: rotate(calc(var(--i) * 30deg)) translateX(0) scale(1); } 100% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateX(180px) scale(0); } }

.copy-card {
    position: absolute;
    inset: 20% 9% 12%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: opacity 500ms ease, transform 500ms ease, font-variation-settings 0.4s ease;
    font-variation-settings: "wght" 400;
}
.copy-card:hover { font-variation-settings: "wght" 500; }
.copy-card.is-changing { opacity: 0; transform: translateY(18px) scale(0.98); }
.kicker,
.glyph-panel p,
.domain-line { font-family: "Share Tech Mono", monospace; color: #00ffc8; letter-spacing: 0.08em; text-transform: uppercase; }
.copy-card h2 { font-size: clamp(2rem, 5vw, 4.4rem); color: #ff2d6f; line-height: 0.95; margin: 0.9rem 0; text-shadow: 3px 3px 0px #0a0a0f, 6px 6px 0px rgba(0,255,200,0.3); }
.copy-card p:last-child { color: #d4d0e6; font-size: clamp(0.875rem, 1.1vw, 1.125rem); line-height: 1.65; letter-spacing: 0.01em; }

.wire {
    position: absolute;
    inset: 16% 10%;
    width: 80%;
    height: 70%;
    z-index: 4;
    overflow: visible;
}
.wire g { transform-origin: center; animation: slow-spin 35s linear infinite; }
.wire-b g { animation-duration: 45s; animation-direction: reverse; }
.wire polygon,
.wire line,
.wire circle,
.wire path,
.dissolve-geometry * { fill: none; stroke: #00ffc8; stroke-width: 1; opacity: 0.6; filter: drop-shadow(0 0 10px rgba(0,255,200,0.5)); }
.wire-a polygon { stroke: #a855f7; }
@keyframes slow-spin { to { transform: rotate(360deg); } }

.glyph {
    position: absolute;
    right: 12%;
    bottom: 8%;
    font-family: "Bungee Shade", cursive;
    font-size: clamp(3rem, 7vw, 5rem);
    color: #a855f7;
    opacity: 0.5;
}
.boo-mark { color: #ffb800; font-size: clamp(2.3rem, 4vw, 4rem); text-shadow: 3px 3px 0 #0a0a0f, 6px 6px 0 rgba(255,45,111,0.35); }
.glyph-panel { display: grid; place-items: center; text-align: center; }
.glyph-panel p { position: absolute; bottom: 14%; font-size: 0.75rem; }
.mini-burst span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ff2d6f; animation: mini 1800ms ease-in-out infinite; }
.mini-burst span:nth-child(2) { background: #00ffc8; animation-delay: 200ms; }
.mini-burst span:nth-child(3) { background: #a855f7; animation-delay: 400ms; }
.mini-burst span:nth-child(4) { background: #ffb800; animation-delay: 600ms; }
.mini-burst span:nth-child(5) { background: #ff2d6f; animation-delay: 800ms; }
@keyframes mini { 0%,100% { transform: translate(0,0); opacity: 0; } 50% { transform: translate(var(--mx, 35px), -45px); opacity: 1; } }

.metadata-panel dl {
    position: absolute;
    inset: 23% 7% 12%;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 28px;
    font-family: "Share Tech Mono", monospace;
    text-transform: uppercase;
}
.metadata-panel dt { color: #6b6888; font-size: 0.72rem; letter-spacing: 0.08em; margin-bottom: 7px; }
.metadata-panel dd { color: #d4d0e6; font-size: clamp(0.875rem, 1.1vw, 1.125rem); }
.metadata-panel div:nth-child(2) dd,
.metadata-panel div:nth-child(4) dd { color: #00ffc8; }
.footer-panel { display: grid; place-items: center; }
.footer-panel .domain-line { position: absolute; bottom: 13%; color: #d4d0e6; }

.dissolve-geometry {
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(48vw, 420px);
    transform: translate(-50%, -50%);
    z-index: 4;
    animation: dissolveSpin 30s linear infinite;
}
@keyframes dissolveSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.final-domain {
    position: absolute;
    left: 50%;
    bottom: 11%;
    transform: translateX(-50%);
    z-index: 6;
    font-family: "Bungee Shade", cursive;
    font-size: clamp(2.2rem, 6vw, 5rem);
    color: #ff2d6f;
    text-transform: uppercase;
    white-space: nowrap;
}
.final-domain span { display: block; height: 3px; width: 0; background: #00ffc8; box-shadow: 0 0 18px #00ffc8; animation: underline 1800ms ease forwards; }
@keyframes underline { to { width: 100%; } }

.return-dot {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 30;
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: #ff2d6f;
    box-shadow: 0 0 10px rgba(255,45,111,0.4), 0 0 40px rgba(255,45,111,0.2), 0 0 80px rgba(255,45,111,0.1);
    opacity: 0;
    pointer-events: none;
    animation: pulse 2s ease-in-out infinite;
}
.return-dot.is-visible { opacity: 1; pointer-events: auto; }
@keyframes pulse { 50% { transform: scale(1.45); } }

.dashboard.is-zoomed .panel:not(.is-zoomed) { filter: brightness(0.35) blur(1px); }
.panel.is-zoomed {
    position: fixed;
    inset: 2px;
    z-index: 20;
    transform: none;
    clip-path: inset(0 round 0);
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.75'/%3E%3C/svg%3E");
    animation: grain 200ms steps(2) infinite;
}
@keyframes grain { 50% { transform: translate(1%, -1%); } }

body.state-3 .wire g { animation-duration: 12s; }
body.state-3 .copy-card h2 { text-shadow: 0 0 10px rgba(255,45,111,0.4), 0 0 40px rgba(255,45,111,0.2), 0 0 80px rgba(255,45,111,0.1), 3px 3px 0 #0a0a0f; }
body.state-4 .panel:not(.primary-panel) { filter: brightness(0.42); }

@media (max-width: 768px) {
    html,
    body { overflow: auto; }
    .dashboard {
        position: relative;
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 4px;
        overflow: visible;
    }
    .panel,
    .panel.primary-panel,
    .panel.readout-panel,
    .panel.geometry-panel,
    .panel.glyph-panel,
    .panel.metadata-panel,
    .panel.footer-panel {
        grid-column: 1;
        grid-row: auto;
        min-height: 48vh;
    }
    .primary-panel { min-height: 86vh; }
    .metadata-panel dl { grid-template-columns: 1fr; }
    .copy-card { inset: 22% 8% 10%; }
    .panel.is-zoomed { inset: 0; }
}