/* ==========================================================================
   M&F HERRAMIENTAS — animations.css  (v2)
   ========================================================================== */

/* ---- Preloader ---- */
@keyframes gaugeFill {
  0%   { stroke-dashoffset: 515; }
  100% { stroke-dashoffset: 90; }
}

@keyframes needleSweep {
  0%   { transform: rotate(-130deg); }
  100% { transform: rotate(95deg); }
}

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

/* ---- Secciones giratorias ---- */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Scroll-cue needle ---- */
@keyframes scrollNeedle {
  0%   { top: -30%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* ---- Hero word reveal ---- */
@keyframes wordReveal {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Halo breath ---- */
@keyframes haloBreath {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scaleX(1); }
  50%       { opacity: 1;    transform: translateX(-50%) scaleX(1.15); }
}

/* ==========================================================================
   REVEAL — [data-reveal] elements
   Aparecen cuando el JS añade .is-visible (IntersectionObserver)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
  will-change: transform, opacity;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger automático por índice --i asignado por JS */
[data-reveal] {
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Hero bottom area: un poco más rápido sin mucho stagger */
.hero-bottom [data-reveal] {
  transition-delay: calc(var(--i, 0) * 120ms + 300ms);
}

/* Hero specs: al ser absoluto en la base, dar un delay extra */
.hero-specs[data-reveal] {
  transition-delay: 500ms;
}

/* ---- Mobile nav open state ---- */
.main-nav.is-open {
  display: flex;
}