@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-dark text-white antialiased;
  }
}

@layer components {
  .scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .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; }

  .glass-card {
    background: rgba(0, 40, 80, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 136, 255, 0.4);
    border-radius: 1rem;
    box-shadow:
      0 8px 32px rgba(0, 136, 255, 0.1),
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .glass-card:hover {
    border-color: rgba(0, 136, 255, 0.7);
    box-shadow:
      0 12px 48px rgba(0, 136, 255, 0.2),
      0 4px 16px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
  }

  .subtle-gradient {
    background: linear-gradient(135deg, rgba(0, 136, 255, 0.05) 0%, rgba(102, 0, 255, 0.03) 50%, rgba(0, 221, 255, 0.05) 100%);
  }
}

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

  .text-balance {
    text-wrap: balance;
  }
}

/* Glitch animation keyframes */
@keyframes glitch-anim-1 {
  0%, 100% { clip-path: inset(40% 0 61% 0); transform: translate(-3px, 3px); }
  15% { clip-path: inset(92% 0 1% 0); transform: translate(3px, -3px); }
  30% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); }
  45% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -2px); }
  60% { clip-path: inset(60% 0 20% 0); transform: translate(-1px, 1px); }
  75% { clip-path: inset(10% 0 80% 0); transform: translate(1px, -1px); }
  90% { clip-path: inset(80% 0 10% 0); transform: translate(0, 0); }
}

@keyframes glitch-anim-2 {
  0%, 100% { clip-path: inset(65% 0 36% 0); transform: translate(3px, -3px); }
  15% { clip-path: inset(10% 0 80% 0); transform: translate(-3px, 3px); }
  30% { clip-path: inset(60% 0 20% 0); transform: translate(2px, -2px); }
  45% { clip-path: inset(25% 0 55% 0); transform: translate(-2px, 2px); }
  60% { clip-path: inset(75% 0 15% 0); transform: translate(1px, -1px); }
  75% { clip-path: inset(35% 0 65% 0); transform: translate(-1px, 1px); }
  90% { clip-path: inset(50% 0 30% 0); transform: translate(0, 0); }
}

/* Pulse glow animation */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 136, 255, 0.4), 0 0 16px rgba(0, 136, 255, 0.2); }
  50% { box-shadow: 0 0 12px rgba(0, 136, 255, 0.7), 0 0 24px rgba(0, 136, 255, 0.4); }
}

/* Bounce slow animation */
@keyframes bonce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-bonce-slow {
  animation: bonce-slow 2s ease-in-out infinite;
}

/* Glitch base class */
.glitch {
  position: relative;
  color: white;
  line-height: 1.1;
}

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

.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;
  mix-blend-mode: screen;
}

.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;
  mix-blend-mode: screen;
}

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

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

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

  * {
    scroll-behavior: auto !important;
  }
}