/* ============================================
   SERVLINK LLC — Animations
   ============================================ */

/* --- Glitch Effect --- */
.glitch {
  position: relative;
  display: inline-block;
}

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

.glitch::before {
  color: var(--accent);
  z-index: -1;
  animation: glitch-1 3s infinite linear alternate-reverse;
}

.glitch::after {
  color: var(--secondary);
  z-index: -2;
  animation: glitch-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
  0%, 95% { clip-path: inset(0 0 0 0); transform: translate(0); }
  96% { clip-path: inset(20% 0 40% 0); transform: translate(-3px, 1px); }
  97% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); }
  98% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 2px); }
  99% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -2px); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0); }
}

@keyframes glitch-2 {
  0%, 95% { clip-path: inset(0 0 0 0); transform: translate(0); }
  96% { clip-path: inset(50% 0 20% 0); transform: translate(3px, -1px); }
  97% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, 1px); }
  98% { clip-path: inset(70% 0 5% 0); transform: translate(2px, -2px); }
  99% { clip-path: inset(30% 0 30% 0); transform: translate(-2px, 2px); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0); }
}

/* --- Reveal Animations --- */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.reveal-up {
  transform: translateY(40px);
}

.reveal-left {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* --- Neon Glow Pulse --- */
@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.2), 0 0 20px rgba(var(--accent-rgb), 0.1); }
  50% { box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4), 0 0 40px rgba(var(--accent-rgb), 0.2), 0 0 60px rgba(var(--accent-rgb), 0.1); }
}

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

/* --- Gradient Shift --- */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Counter Animation (handled via JS, styling only) --- */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* --- Stagger children --- */
.services-grid .service-card:nth-child(1) { transition-delay: 0s; }
.services-grid .service-card:nth-child(2) { transition-delay: 0.08s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.16s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.24s; }
.services-grid .service-card:nth-child(5) { transition-delay: 0.32s; }
.services-grid .service-card:nth-child(6) { transition-delay: 0.4s; }

/* --- Smooth Section Transitions --- */
#services {
  background: linear-gradient(180deg, transparent 0%, rgba(var(--secondary-rgb), 0.02) 50%, transparent 100%);
}

#process {
  background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-rgb), 0.015) 50%, transparent 100%);
}

#tech {
  background: linear-gradient(180deg, transparent 0%, rgba(var(--secondary-rgb), 0.02) 50%, transparent 100%);
}

#why {
  background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-rgb), 0.015) 50%, transparent 100%);
}

/* --- Loading Screen (optional) --- */
@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}