/* ═══════════════════════════════════════════════════════
   UltraSinergia — Animations
   ═══════════════════════════════════════════════════════ */

/* ── Gradient mesh movement ── */
@keyframes meshDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  25%  { background-position: 20% 40%, 80% 20%, 30% 60%; }
  50%  { background-position: 40% 20%, 60% 50%, 50% 30%; }
  75%  { background-position: 10% 60%, 90% 30%, 70% 80%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
}

.hero {
  animation: meshDrift 20s ease-in-out infinite;
}

/* ── Floating particles ── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  50%      { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}

@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(10px, -15px); }
  50%      { transform: translate(-5px, -25px); }
  75%      { transform: translate(-15px, -10px); }
}

/* ── Glow pulse ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,245,212,0.2); }
  50%      { box-shadow: 0 0 40px rgba(0,245,212,0.4), 0 0 80px rgba(0,245,212,0.1); }
}

/* ── Border gradient rotation ── */
@keyframes borderRotate {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* ── Counter roll-up ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Slide in from bottom ── */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Slide in from left ── */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Slide in from right ── */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Fade in ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scale in ── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Clip reveal (bottom to top) ── */
@keyframes clipReveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ── Line draw ── */
@keyframes lineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Marquee (for scrolling text) ── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Dot pulse (for loading states) ── */
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.5); opacity: 1; }
}

/* ── Hover shimmer ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Particles ── */
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--accent-cyan);
  opacity: 0;
  animation: floatSlow var(--duration, 8s) var(--delay, 0s) ease-in-out infinite,
             fadeIn 1s var(--delay, 0s) forwards;
  pointer-events: none;
}

.particle:nth-child(even) {
  background: var(--accent-blue);
  width: 2px;
  height: 2px;
}

.particle:nth-child(3n) {
  background: #ffffff;
  width: 1.5px;
  height: 1.5px;
}

/* ── Glow orbs (decorative background elements) ── */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.18;
}

.glow-orb-cyan {
  background: var(--accent-cyan);
}

.glow-orb-blue,
.glow-orb-magenta {
  background: var(--accent-blue);
}

.glow-orb-silver,
.glow-orb-purple {
  background: var(--accent-silver);
}

/* ── Stagger children ── */
.stagger-children > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-children > .reveal:nth-child(2) { transition-delay: 80ms; }
.stagger-children > .reveal:nth-child(3) { transition-delay: 160ms; }
.stagger-children > .reveal:nth-child(4) { transition-delay: 240ms; }
.stagger-children > .reveal:nth-child(5) { transition-delay: 320ms; }
.stagger-children > .reveal:nth-child(6) { transition-delay: 400ms; }

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

  .reveal, .reveal-left, .reveal-right {
    opacity: 1;
    transform: none;
  }

  .hero {
    animation: none;
  }
}