/* ============================================================
   VISA ABORDO CONSULTING — ANIMATIONS
   Keyframes + scroll-triggered reveal system.
   ============================================================ */

/* ── KEYFRAMES ──────────────────────────────────────────────── */

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

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

/* Continuous */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* WhatsApp button pulse ring */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Accent dot blink on hero eyebrow */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Line draw (underline reveal) */
@keyframes drawLine {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Shimmer (skeleton) */
@keyframes shimmer {
  from { background-position: -600px 0; }
  to   { background-position:  600px 0; }
}

/* Organic orb drift — slow, multi-axis movement */
@keyframes driftOrb {
  0%   { transform: translate(0, 0)       scale(1);    }
  25%  { transform: translate(18px, -22px) scale(1.04); }
  50%  { transform: translate(-10px, 14px) scale(0.97); }
  75%  { transform: translate(14px,  8px)  scale(1.03); }
  100% { transform: translate(0, 0)       scale(1);    }
}

/* Soft glow pulse — for orbs and accent decorations */
@keyframes glowPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%       { opacity: .80; transform: scale(1.06); }
}

/* Ripple outward — for hover/click feedback */
@keyframes ripple {
  from { transform: scale(0.85); opacity: .5; }
  to   { transform: scale(2.2);  opacity: 0; }
}

/* Wave horizontal — decorative line/border accent */
@keyframes waveX {
  0%   { background-position: 0 50%; }
  100% { background-position: 200% 50%; }
}

/* ── UTILITY ANIMATION CLASSES ──────────────────────────────── */

.anim-fade-in       { animation: fadeIn      var(--dur-slow)   var(--ease) both; }
.anim-fade-in-up    { animation: fadeInUp    var(--dur-slow)   var(--ease) both; }
.anim-fade-in-down  { animation: fadeInDown  var(--dur-slow)   var(--ease) both; }
.anim-fade-in-left  { animation: fadeInLeft  var(--dur-slow)   var(--ease) both; }
.anim-fade-in-right { animation: fadeInRight var(--dur-slow)   var(--ease) both; }
.anim-scale-in      { animation: scaleIn     var(--dur-slow)   var(--ease) both; }
.anim-float         { animation: float       4s  ease-in-out infinite; }
.anim-pulse         { animation: pulse       2.5s ease-in-out infinite; }
.anim-spin          { animation: spin        0.7s linear      infinite; }
.anim-drift-orb     { animation: driftOrb    16s  ease-in-out infinite; }
.anim-glow-pulse    { animation: glowPulse   3.5s ease-in-out infinite; }
.anim-wave-x        { animation: waveX       4s   linear      infinite; }

/* Delay helpers */
.delay-100  { animation-delay: 100ms;  }
.delay-150  { animation-delay: 150ms;  }
.delay-200  { animation-delay: 200ms;  }
.delay-300  { animation-delay: 300ms;  }
.delay-400  { animation-delay: 400ms;  }
.delay-500  { animation-delay: 500ms;  }
.delay-600  { animation-delay: 600ms;  }
.delay-700  { animation-delay: 700ms;  }
.delay-800  { animation-delay: 800ms;  }
.delay-1000 { animation-delay: 1000ms; }

/* ── SCROLL-REVEAL SYSTEM ───────────────────────────────────── */
/*
  Usage:
    <div data-animate>               → fade in up (default)
    <div data-animate="fade-left">   → fade in from left
    <div data-animate="fade-right">  → fade in from right
    <div data-animate="scale">       → scale in
    <div data-animate="fade">        → simple fade
    <ul data-animate-group>          → children stagger in
    <div data-animate data-delay="200"> → delayed reveal

  JavaScript in main.js drives the IntersectionObserver
  that adds `.is-visible` to trigger the transition.
*/

/* Default hidden state — slides up */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slower) var(--ease),
              transform var(--dur-slower) var(--ease);
}

/* Variant initial states */
[data-animate="fade-left"]  { transform: translateX(-28px); }
[data-animate="fade-right"] { transform: translateX(28px);  }
[data-animate="scale"]      { transform: scale(0.94);       }
[data-animate="fade"]       { transform: none;              }

/* Revealed state (set by JS) */
[data-animate].is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger group — children revealed with offset delays */
[data-animate-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

[data-animate-group].is-visible > *:nth-child(1)  { transition-delay: 0ms;   opacity: 1; transform: none; }
[data-animate-group].is-visible > *:nth-child(2)  { transition-delay: 80ms;  opacity: 1; transform: none; }
[data-animate-group].is-visible > *:nth-child(3)  { transition-delay: 160ms; opacity: 1; transform: none; }
[data-animate-group].is-visible > *:nth-child(4)  { transition-delay: 240ms; opacity: 1; transform: none; }
[data-animate-group].is-visible > *:nth-child(5)  { transition-delay: 320ms; opacity: 1; transform: none; }
[data-animate-group].is-visible > *:nth-child(6)  { transition-delay: 400ms; opacity: 1; transform: none; }
[data-animate-group].is-visible > *:nth-child(7)  { transition-delay: 480ms; opacity: 1; transform: none; }
[data-animate-group].is-visible > *:nth-child(8)  { transition-delay: 560ms; opacity: 1; transform: none; }
[data-animate-group].is-visible > *:nth-child(9)  { transition-delay: 640ms; opacity: 1; transform: none; }
[data-animate-group].is-visible > *:nth-child(10) { transition-delay: 720ms; opacity: 1; transform: none; }

/* ── REDUCED MOTION ─────────────────────────────────────────── */

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

  [data-animate],
  [data-animate-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .testi-track {
    animation: none !important;
  }
}