/* ==========================================================================
   BIG BOSS — animations.css
   Keyframes, scroll-reveal states, marquee, microinteracciones
   ========================================================================== */

/* ---- Scroll reveal ---------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* stagger children helper: JS sets --reveal-delay inline per index */

/* ---- Keyframes --------------------------------------------------------------- */
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(217, 70, 239, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(217, 70, 239, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 70, 239, 0); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes drawIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

/* ---- Applied animations ------------------------------------------------------- */
.floater { animation: floatY 6s ease-in-out infinite; }
.floater.f1 { --rot: -4deg; animation-delay: 0s; }
.floater.f2 { --rot: 3deg; animation-delay: 1.2s; }
.floater.f3 { --rot: -2deg; animation-delay: 2.1s; }

.hero-badge .dot { animation: pulseDot 2.2s infinite; }

.page-loaded .hero h1,
.page-loaded .hero-badge,
.page-loaded .hero .lead,
.page-loaded .hero-ctas,
.page-loaded .hero-stats {
  animation: drawIn 0.9s var(--ease) both;
}
.page-loaded .hero-badge { animation-delay: 0.05s; }
.page-loaded .hero h1 { animation-delay: 0.15s; }
.page-loaded .hero .lead { animation-delay: 0.3s; }
.page-loaded .hero-ctas { animation-delay: 0.42s; }
.page-loaded .hero-stats { animation-delay: 0.54s; }
.page-loaded .hero-visual { animation: fadeIn 1.2s var(--ease) 0.3s both; }

/* magnetic button micro-interaction handled via transform in JS;
   this keeps a smooth spring-back when the mouse leaves */
.magnetic > * { transition: transform 0.35s var(--ease); }

/* counters: no motion needed beyond the JS-driven number tick */
.stat-card, .hero-stats .stat { will-change: contents; }

/* accessibility: respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}