/* =====================================================
   ANIMATIONS.CSS — Nova Services
   Keyframes · Motion · Particle effects
   ===================================================== */

/* ── Core Keyframes ── */

@keyframes nova-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--glow-blue-sm), 0 0 40px transparent; }
  50% { box-shadow: 0 0 40px var(--glow-blue), 0 0 80px var(--glow-purple-sm); }
}

@keyframes glow-pulse-purple {
  0%, 100% { box-shadow: 0 0 20px var(--glow-purple-sm); }
  50% { box-shadow: 0 0 50px var(--glow-purple), 0 0 100px var(--glow-purple-sm); }
}

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

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

@keyframes dash-flow {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

@keyframes badge-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-6px) scale(1.05); }
  75% { transform: translateY(2px) scale(0.97); }
}

@keyframes border-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes particle-drift {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

@keyframes counter-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes step-complete {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes hero-entrance {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes typing-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes data-pulse {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.02); }
}

@keyframes ring-expand {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Applied Animation Classes ── */

.animate-nova-pulse {
  animation: nova-pulse 3s ease-in-out infinite;
}

.animate-glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}

.animate-float-slow {
  animation: float-slow 7s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spin-slow 18s linear infinite;
}

.animate-spin-reverse {
  animation: spin-reverse 14s linear infinite;
}

.animate-trust-scroll {
  animation: trust-scroll 28s linear infinite;
}

/* Stagger float delays */
.float-delay-1 { animation-delay: 0.8s; }
.float-delay-2 { animation-delay: 1.6s; }
.float-delay-3 { animation-delay: 2.4s; }
.float-delay-4 { animation-delay: 3.2s; }

/* ── Dashboard Data Animation ── */
.data-bar {
  animation: data-pulse 2s ease-in-out infinite;
}
.data-bar:nth-child(2) { animation-delay: 0.3s; }
.data-bar:nth-child(3) { animation-delay: 0.6s; }
.data-bar:nth-child(4) { animation-delay: 0.9s; }

/* ── SVG Flow Lines ── */
.flow-line {
  stroke-dasharray: 8 4;
  animation: dash-flow 0.8s linear infinite;
}

.draw-in {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 2.5s var(--ease-out) forwards;
}

/* ── Ring pulse (stat section) ── */
.ring-pulse {
  position: relative;
}

.ring-pulse::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--nova-blue);
  animation: ring-expand 2.5s ease-out infinite;
}

/* ── Gradient animated background ── */
.gradient-animate {
  background-size: 300% 300%;
  animation: gradient-shift 6s ease infinite;
}

/* ── Shimmer loading effect ── */
.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%
  );
  background-size: 800px 100%;
  animation: shimmer 2s linear infinite;
}

/* ── Orbit rings (hero decoration) ── */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  pointer-events: none;
}

.orbit-ring--1 {
  width: 380px;
  height: 380px;
  border-color: rgba(26, 58, 255, 0.15);
  animation: spin-slow 25s linear infinite;
}

.orbit-ring--2 {
  width: 560px;
  height: 560px;
  border-color: rgba(106, 75, 255, 0.1);
  animation: spin-reverse 35s linear infinite;
}

.orbit-ring--3 {
  width: 740px;
  height: 740px;
  border-color: rgba(26, 58, 255, 0.06);
  animation: spin-slow 45s linear infinite;
}

/* ── Hero entrance animations ── */
.hero-title { animation: hero-entrance 0.9s var(--ease-out) 0.2s both; }
.hero-sub   { animation: hero-entrance 0.9s var(--ease-out) 0.45s both; }
.hero-ctas  { animation: hero-entrance 0.9s var(--ease-out) 0.65s both; }
.hero-badge { animation: hero-entrance 0.9s var(--ease-out) 0.1s both; }
.hero-dashboard { animation: hero-entrance 1.1s var(--ease-out) 0.9s both; }

/* ── Hover micro-interactions ── */
.hover-lift {
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 40px var(--glow-purple-sm);
}

.hover-glow {
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
.hover-glow:hover {
  box-shadow: 0 0 0 1px var(--border-glow), 0 0 30px var(--glow-purple-sm);
  border-color: rgba(106, 75, 255, 0.35) !important;
}