/* ============================================================
   SYKAAA2 — ANIMATIONS MODULE
   ============================================================ */

/* Page load stagger */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}

.anim-up   { animation: fadeInUp 0.65s cubic-bezier(0.16,1,0.3,1) both; }
.anim-fade { animation: fadeIn  0.5s ease both; }
.anim-d1 { animation-delay: 0.12s; }
.anim-d2 { animation-delay: 0.24s; }
.anim-d3 { animation-delay: 0.36s; }
.anim-d4 { animation-delay: 0.48s; }

/* Neon border pulse on elements */
@keyframes neon-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0,255,136,0.20), 0 0 0 1px rgba(0,255,136,0.10);
  }
  50% {
    box-shadow: 0 0 22px rgba(0,255,136,0.45), 0 0 0 1px rgba(0,255,136,0.25);
  }
}
.neon-pulse { animation: neon-pulse 3s ease-in-out infinite; }

/* Data flow line — circuit board animation */
@keyframes data-flow {
  0%   { stroke-dashoffset: 200; opacity: 0.3; }
  50%  { opacity: 0.8; }
  100% { stroke-dashoffset: 0; opacity: 0.3; }
}

/* Flicker — neon sign effect */
@keyframes flicker {
  0%, 89%, 91%, 93%, 95%, 100% { opacity: 1; }
  90%, 92%, 94% { opacity: 0.4; }
}
.flicker { animation: flicker 6s ease-in-out infinite; animation-delay: 4s; }

/* Counter number tick */
@keyframes count-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Stat value pop in */
.stat-pop { animation: count-up 0.4s ease both; }

/* Live indicator pulse */
@keyframes live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff3355;
  box-shadow: 0 0 8px #ff3355;
  animation: live-pulse 1.5s ease-in-out infinite;
  display: inline-block;
}

/* Amber shimmer on bonus value */
@keyframes shimmer-amber {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shimmer {
  background: linear-gradient(90deg,
    var(--amber) 0%, #fff5cc 40%, var(--amber) 60%, #ffcc55 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-amber 3s linear infinite;
}

/* Diagonal moving border (hero CTA hover) */
@keyframes border-march {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Entrance for hero h1 word by word */
.word-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease forwards;
}
.word-reveal span:nth-child(1) { animation-delay: 0.1s; }
.word-reveal span:nth-child(2) { animation-delay: 0.2s; }
.word-reveal span:nth-child(3) { animation-delay: 0.3s; }
.word-reveal span:nth-child(4) { animation-delay: 0.4s; }
.word-reveal span:nth-child(5) { animation-delay: 0.5s; }

/* Scan highlight for mirror section */
@keyframes scan-highlight {
  0%, 100% { opacity: 0; transform: translateX(-100%); }
  20%, 80% { opacity: 0.08; }
  50%       { opacity: 0.12; transform: translateX(100%); }
}
.scan-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--green) 50%, transparent 100%);
  animation: scan-highlight 5s ease-in-out infinite;
  pointer-events: none;
}

/* Grid lines appearing on scroll */
@keyframes grid-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}