@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@500;700;800;900&display=swap');

:root {
  --background: 222 30% 10%;
  --foreground: 210 20% 92%;
  --border: 222 20% 22%;
  --card: 222 28% 14%;
  --card-foreground: 210 20% 92%;
  --card-border: 222 20% 22%;
  --popover: 222 30% 12%;
  --popover-foreground: 210 20% 92%;
  --popover-border: 222 20% 22%;
  --primary: 70 100% 63%;
  --primary-foreground: 222 30% 8%;
  --secondary: 12 72% 60%;
  --secondary-foreground: 210 20% 92%;
  --muted: 222 22% 18%;
  --muted-foreground: 222 12% 58%;
  --accent: 222 22% 20%;
  --accent-foreground: 210 20% 92%;
  --radius: 0.5rem;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
}

.grain-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.055;
  pointer-events: none;
  z-index: 1;
}

.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 2;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-reverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.animate-marquee         { animation: marquee 22s linear infinite; }
.animate-marquee-reverse { animation: marquee-reverse 18s linear infinite; }

@keyframes glitch-1 {
  0%, 100% { clip-path: inset(0 0 95% 0); transform: translate(-4px, 0); }
  20%       { clip-path: inset(30% 0 50% 0); transform: translate(4px, 0); }
  40%       { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
  60%       { clip-path: inset(10% 0 80% 0); transform: translate(3px, 0); }
  80%       { clip-path: inset(75% 0 5% 0);  transform: translate(-3px, 0); }
}
@keyframes glitch-2 {
  0%, 100% { clip-path: inset(80% 0 5% 0);  transform: translate(4px, 0); color: hsl(var(--secondary)); }
  20%       { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); }
  40%       { clip-path: inset(50% 0 30% 0); transform: translate(2px, 0); color: hsl(var(--primary)); }
  60%       { clip-path: inset(5% 0 85% 0);  transform: translate(-2px, 0); }
  80%       { clip-path: inset(40% 0 40% 0); transform: translate(3px, 0); }
}

.glitch-text {
  position: relative;
  display: inline-block;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: transparent;
}
.glitch-text::before {
  animation: glitch-1 4s infinite steps(1);
  color: hsl(var(--primary));
}
.glitch-text::after {
  animation: glitch-2 4s infinite steps(1);
  color: hsl(var(--secondary));
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.blink { animation: blink 1s step-end infinite; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px hsl(var(--primary) / 0.3); }
  50%       { box-shadow: 0 0 50px hsl(var(--primary) / 0.7), 0 0 100px hsl(var(--primary) / 0.2); }
}
.pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}