/* ============================================================
   WEB TECHNOCRATS — Animations
   Phase 1: Hero + Global Micro-interactions
   ============================================================ */

/* ---------- Keyframes ---------- */

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes glowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

@keyframes orbPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
  50% { opacity: 0.7; transform: scale(1.15); box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); }
}

@keyframes gradientShift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes dashMove {
  to { stroke-dashoffset: -200; }
}

@keyframes scrollPulse {
  0% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  10% {
    opacity: 0.8;
    transform: translateY(-10vh) scale(1);
  }
  90% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateY(-100vh) scale(0.5);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes blurReveal {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes flareSweep {
  0%, 100% { opacity: 0.25; transform: scaleX(0.85); }
  50% { opacity: 0.95; transform: scaleX(1); }
}

/* Infinite Marquee — driven primarily by GSAP; CSS fallback */
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.clients-marquee[data-direction="left"] .marquee-track {
  animation: marqueeLeft 35s linear infinite;
}

.clients-marquee[data-direction="right"] .marquee-track {
  animation: marqueeRight 40s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .clients-marquee .marquee-track {
    animation: none !important;
  }
}

/* ---------- Text Reveal Helpers ---------- */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
}

.split-word {
  display: inline-block;
  overflow: hidden;
}

/* ---------- Magnetic Button Helper ---------- */
.magnetic-btn {
  transition: transform 0.3s var(--ease-out);
}

/* ---------- Glow Hover Utility ---------- */
.glow-hover {
  transition: box-shadow 0.4s, border-color 0.4s;
}

.glow-hover:hover {
  box-shadow: 0 0 30px var(--accent-glow);
  border-color: rgba(212, 175, 55, 0.4);
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-grid,
  .hero-glow,
  .float-card,
  .float-icon,
  .center-orb,
  .scroll-line {
    animation: none !important;
  }
}