/* ============================================================
   ANIMATIONS — glitch, entrance, scanline, particles, neon pulse
   ============================================================ */

/* ----------------------------------------------------------
   Glitch keyframes — two-layer clip-path + skewX corruption
   ---------------------------------------------------------- */
@keyframes glitch {
  0%   { clip-path: inset(0 0 98% 0);   transform: skewX(0deg);    left: 0; }
  4%   { clip-path: inset(15% 0 60% 0); transform: skewX(-5deg);   left: -5px; }
  8%   { clip-path: inset(40% 0 40% 0); transform: skewX(4deg);    left: 4px; }
  12%  { clip-path: inset(70% 0 10% 0); transform: skewX(-3deg);   left: -3px; }
  16%  { clip-path: inset(90% 0 2% 0);  transform: skewX(6deg);    left: 5px; }
  20%  { clip-path: inset(0 0 98% 0);   transform: skewX(0deg);    left: 0; }
  100% { clip-path: inset(0 0 98% 0);   transform: skewX(0deg);    left: 0; }
}

@keyframes glitch-2 {
  0%   { clip-path: inset(50% 0 30% 0); transform: skewX(3deg);    left: 3px; }
  4%   { clip-path: inset(20% 0 70% 0); transform: skewX(-6deg);   left: -4px; }
  8%   { clip-path: inset(80% 0 5% 0);  transform: skewX(5deg);    left: 6px; }
  12%  { clip-path: inset(5% 0 85% 0);  transform: skewX(-4deg);   left: -5px; }
  16%  { clip-path: inset(60% 0 25% 0); transform: skewX(3deg);    left: 3px; }
  20%  { clip-path: inset(50% 0 30% 0); transform: skewX(0deg);    left: 0; }
  100% { clip-path: inset(50% 0 30% 0); transform: skewX(0deg);    left: 0; }
}

/* ----------------------------------------------------------
   Entrance animations
   ---------------------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------------------------
   Scanline sweep
   ---------------------------------------------------------- */
@keyframes scanline {
  0%   { top: -5%; }
  100% { top: 105%; }
}

/* ----------------------------------------------------------
   Neon pulse
   ---------------------------------------------------------- */
@keyframes neonPulse {
  0%, 100% {
    text-shadow: 0 0 4px var(--color-accent), 0 0 10px var(--color-accent), 0 0 20px var(--color-accent);
  }
  50% {
    text-shadow: 0 0 8px var(--color-accent), 0 0 20px var(--color-accent), 0 0 40px var(--color-accent), 0 0 60px rgba(0,229,255,0.3);
  }
}

/* ----------------------------------------------------------
   Float animation (for decorative elements)
   ---------------------------------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* ----------------------------------------------------------
   Shimmer (loading / highlight)
   ---------------------------------------------------------- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ----------------------------------------------------------
   Border glow pulse
   ---------------------------------------------------------- */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(0,229,255,0.3), 0 0 8px rgba(0,229,255,0.1); }
  50%       { box-shadow: 0 0 12px rgba(0,229,255,0.6), 0 0 24px rgba(0,229,255,0.2), 0 0 40px rgba(0,229,255,0.1); }
}

/* ----------------------------------------------------------
   Typing cursor
   ---------------------------------------------------------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ----------------------------------------------------------
   Particle drift (decorative floating dots)
   ---------------------------------------------------------- */
@keyframes particleDrift {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
  33%  { transform: translateY(-20px) translateX(10px) scale(1.1); opacity: 1; }
  66%  { transform: translateY(-10px) translateX(-8px) scale(0.9); opacity: 0.7; }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
}

/* ----------------------------------------------------------
   .glitch class — pseudo-element layers
   NOTE: data-text is kept in sync by initTextScramble() in main.js
         so the CSS layers always mirror the scrambled characters.
   ---------------------------------------------------------- */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: inherit;
  overflow: hidden;
  /* Prevent pseudo-elements from blocking pointer events */
  pointer-events: none;
}

.glitch::before {
  color: var(--color-accent, #00e5ff);
  text-shadow: -2px 0 rgba(0, 229, 255, 0.6);
  animation: glitch 3.5s infinite linear;
}

.glitch::after {
  color: rgba(255, 255, 255, 0.15);
  text-shadow: 2px 0 rgba(0, 229, 255, 0.3);
  animation: glitch-2 3.5s infinite linear;
  animation-delay: 0.18s;
}

/* Hero h1 gets stronger glitch layers */
#hero h1.glitch::before {
  text-shadow: -4px 0 rgba(0, 229, 255, 0.7);
}

#hero h1.glitch::after {
  text-shadow: 4px 0 rgba(0, 229, 255, 0.3);
}

/* ----------------------------------------------------------
   Entrance classes
   ---------------------------------------------------------- */
.fade-in-up {
  animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-in-left {
  animation: fadeInLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-in-scale {
  animation: fadeInScale 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

[data-animate] {
  opacity: 0;
  transform: translateY(30px);
}

[data-animate].fade-in-up {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.services-grid .card:nth-child(1) { animation-delay: 0.05s; }
.services-grid .card:nth-child(2) { animation-delay: 0.12s; }
.services-grid .card:nth-child(3) { animation-delay: 0.19s; }
.services-grid .card:nth-child(4) { animation-delay: 0.26s; }

.team-grid .card:nth-child(1) { animation-delay: 0.05s; }
.team-grid .card:nth-child(2) { animation-delay: 0.12s; }
.team-grid .card:nth-child(3) { animation-delay: 0.19s; }
.team-grid .card:nth-child(4) { animation-delay: 0.26s; }

/* ----------------------------------------------------------
   Scanline sweep overlay
   ---------------------------------------------------------- */
.scanline-sweep::before {
  content: '';
  position: fixed;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.08), transparent);
  pointer-events: none;
  z-index: 9998;
  animation: scanline 10s linear infinite;
}

/* ----------------------------------------------------------
   Neon pulse utility
   ---------------------------------------------------------- */
.neon-pulse {
  animation: neonPulse 2.5s ease-in-out infinite;
}

/* ----------------------------------------------------------
   Float utility
   ---------------------------------------------------------- */
.float {
  animation: float 4s ease-in-out infinite;
}

/* ----------------------------------------------------------
   Shimmer text
   ---------------------------------------------------------- */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--color-fg-dim) 0%,
    var(--color-accent) 40%,
    var(--color-accent2) 60%,
    var(--color-fg-dim) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ----------------------------------------------------------
   Border glow pulse utility
   ---------------------------------------------------------- */
.border-glow-pulse {
  animation: borderGlow 2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   Global transitions
   ---------------------------------------------------------- */
.btn   { transition: all 0.3s ease; }
.card  { transition: all 0.3s ease; }
a      { transition: all 0.3s ease; }