@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-space-grotesk: var(--font-space-grotesk);
  --font-inter: var(--font-inter);
}

@layer base {
  body {
    @apply bg-primary text-white antialiased;
  }
}

@layer components {
  .scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .stagger-1 { transition-delay: 0.1s; }
  .stagger-2 { transition-delay: 0.2s; }
  .stagger-3 { transition-delay: 0.3s; }
}

@layer utilities {
  .text-muted {
    color: #8899bb;
  }
}

/* Glitch animation keyframes */
@keyframes glitch-anim-1 {
  0%, 100% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); }
  20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, -2px); }
  40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 1px); }
  60% { clip-path: inset(25% 0 58% 0); transform: translate(1px, -1px); }
  80% { clip-path: inset(54% 0 7% 0); transform: translate(0px, 0px); }
}

@keyframes glitch-anim-2 {
  0%, 100% { clip-path: inset(65% 0 36% 0); transform: translate(2px, -2px); }
  20% { clip-path: inset(79% 0 14% 0); transform: translate(-2px, 2px); }
  40% { clip-path: inset(51% 0 68% 0); transform: translate(1px, -1px); }
  60% { clip-path: inset(87% 0 13% 0); transform: translate(-1px, 1px); }
  80% { clip-path: inset(32% 0 67% 0); transform: translate(0px, 0px); }
}

/* Pulse glow animation */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 136, 255, 0.5); }
  50% { box-shadow: 0 0 15px rgba(0, 136, 255, 0.8); }
}

/* Glitch base class */
.glitch {
  position: relative;
  color: white;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  color: #00ddff;
  animation-duration: var(--glitch-duration, 2.5s);
  animation-name: glitch-anim-1;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  z-index: -1;
}

.glitch::after {
  color: #0066cc;
  animation-duration: var(--glitch-duration, 2.5s);
  animation-name: glitch-anim-2;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  z-index: -2;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glitch::before,
  .glitch::after {
    animation: none;
  }

  .scroll-reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .animate-pulse-glow {
    animation: none;
  }
}