* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html,
body {
max-width: 100%;
overflow-x: hidden;
}
[hidden] { display: none !important; }
body {
margin: 0;
min-height: 100vh;
color: var(--text);
font: 14px/1.55 var(--font-body);
background:
radial-gradient(1100px 620px at 82% -8%, rgba(255, 45, 135, 0.12), transparent 60%),
radial-gradient(980px 700px at -8% 8%, rgba(47, 107, 255, 0.14), transparent 55%),
radial-gradient(700px 500px at 50% 120%, rgba(122, 92, 255, 0.10), transparent 60%),
linear-gradient(rgba(96, 132, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(96, 132, 255, 0.045) 1px, transparent 1px),
var(--bg-1);
background-size: auto, auto, auto, 40px 40px, 40px 40px, auto;
background-attachment: fixed, fixed, fixed, scroll, scroll, fixed;
}
/* CRT scanlines + vignette overlay */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
background:
repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(2, 6, 18, 0.08) 3px, rgba(2, 6, 18, 0.08) 4px),
radial-gradient(120% 100% at 50% 0%, transparent 70%, rgba(2, 4, 12, 0.34) 100%);
opacity: 0.36;
mix-blend-mode: multiply;
}
body[data-motion="on"] {
animation: gridShift 30s linear infinite;
}
body[data-motion="off"] *,
body[data-motion="off"] {
animation: none !important;
transition: none !important;
}
/* The preload script sets data-motion on before CSS loads so
animations never flash for motion-off users; it also covers the
html-level smooth scrolling that body selectors cannot reach. */
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] body,
html[data-motion="off"] body * {
animation: none !important;
transition: none !important;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }
/* ---- Shared animations migrated from legacy entrypoint ---- */
/* ---- Animations ---- */
@keyframes gridShift {
to { background-position: 0 0, 0 0, 0 0, 40px 40px, -40px 40px, 0 0; }
}
@keyframes routeDash {
to { stroke-dashoffset: -120; }
}
@keyframes tickerMove {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.78); }
}
@keyframes glitchA {
0%, 92%, 100% { transform: translate(0, 0); opacity: 0; }
93% { transform: translate(-2px, -1px); opacity: 0.75; }
96% { transform: translate(2px, 1px); opacity: 0.75; }
}
@keyframes glitchB {
0%, 90%, 100% { transform: translate(0, 0); opacity: 0; }
92% { transform: translate(2px, 1px); opacity: 0.7; }
95% { transform: translate(-2px, -1px); opacity: 0.7; }
}