/* ==========================================================================
   ANIMATIONS — Premium CSS-only motion system
   ==========================================================================
   - Reveal: CSS Scroll-Driven Animations with IntersectionObserver fallback.
   - Counters: `@property` for animated integers.
   - Parallax: hero orbs drift on scroll.
   - Shimmer: hero accent text gradient.
   - View Transitions: smooth cross-fade between pages.
   - All wrapped in `prefers-reduced-motion` overrides.
   ========================================================================== */

/* -----------------------------------------------------------------------
   KEYFRAMES
   ----------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes scanner {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes bounceDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-6px); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  to { background-position: 200% 0; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--fa-color-primary-glow); }
  50%      { box-shadow: 0 0 0 12px transparent; }
}

/* -----------------------------------------------------------------------
   ANIMATION UTILITY CLASSES
   ----------------------------------------------------------------------- */
.animate-float {
  animation: float 6s var(--fa-ease-in-out) infinite;
}
.animate-shimmer {
  background: var(--fa-gradient-ai-shimmer);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.animate-pulse-glow {
  animation: pulseGlow 2.4s var(--fa-ease-in-out) infinite;
}

/* -----------------------------------------------------------------------
   SCROLL-DRIVEN REVEAL (modern path)
   Reveal fades up as the element enters the viewport.
   Activated only when the browser supports `animation-timeline: view()`.
   ----------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }
  @keyframes reveal-fade {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Parallax on hero orbs */
  .hero__orb--1 { animation: orbDrift-1 linear both; animation-timeline: scroll(root); animation-range: cover; }
  .hero__orb--2 { animation: orbDrift-2 linear both; animation-timeline: scroll(root); animation-range: cover; }
  .hero__orb--3 { animation: orbDrift-3 linear both; animation-timeline: scroll(root); animation-range: cover; }
  .hero__orb--4 { animation: orbDrift-4 linear both; animation-timeline: scroll(root); animation-range: cover; }
  @keyframes orbDrift-1 { to { transform: translate(40px, -60px) scale(1.1); } }
  @keyframes orbDrift-2 { to { transform: translate(-50px, -40px) scale(0.9); } }
  @keyframes orbDrift-3 { to { transform: translate(30px, 40px) scale(1.05); } }
  @keyframes orbDrift-4 { to { transform: translate(-30px, 60px) scale(0.95); } }

  /* Stagger: cada delay completa un poco más tarde dentro de la entrada */
  .reveal--delay-1 { animation-range: entry 5% entry 90%; }
  .reveal--delay-2 { animation-range: entry 10% entry 95%; }
  .reveal--delay-3 { animation-range: entry 15% entry 100%; }
  .reveal--delay-4 { animation-range: entry 20% entry 100%; }
  .reveal--delay-5 { animation-range: entry 25% entry 100%; }
}

/* -----------------------------------------------------------------------
   FALLBACK REVEAL (legacy path, IO toggled in JS)
   ----------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--fa-motion-slow) var(--fa-ease-emphasized),
              transform var(--fa-motion-slow) var(--fa-ease-emphasized);
  will-change: opacity, transform;
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }
.reveal--delay-5 { transition-delay: 400ms; }

/* -----------------------------------------------------------------------
   COUNTERS — CSS @property animated integers (modern path)
   Markup: <span data-count-to="24500" data-count-prefix="₡">0</span>
   ----------------------------------------------------------------------- */
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
@supports (animation-timeline: view()) {
  [data-count-to] {
    counter-reset: num var(--num);
    animation: count-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  [data-count-to]::after {
    content: counter(num);
  }
  [data-count-to]::before {
    content: attr(data-count-prefix);
  }
  @keyframes count-up {
    to { --num: attr(data-count-to number); }
  }
}

/* -----------------------------------------------------------------------
   VIEW TRANSITIONS API
   Page cross-fade. Browser support: Chrome/Edge/Safari 18+/Firefox 134+.
   Browsers without support simply navigate without animation.
   ----------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-fade-out 200ms var(--fa-ease-emphasized) both;
}
::view-transition-new(root) {
  animation: vt-fade-in 280ms var(--fa-ease-emphasized) both;
}
@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Named transitions for hero, blog cards, etc. */
::view-transition-group(hero-title) { animation-duration: 400ms; }
::view-transition-old(hero-title)   { animation: vt-fade-out 320ms var(--fa-ease-emphasized) both; }
::view-transition-new(hero-title)   { animation: vt-fade-in 320ms var(--fa-ease-emphasized) both; }

/* -----------------------------------------------------------------------
   PREFERS REDUCED MOTION — kill everything
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .animate-float, .animate-pulse-glow { animation: none !important; }
  .animate-shimmer { animation: none !important; }
  .hero-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* -----------------------------------------------------------------------
   HERO STAGGER (Phase 2 polish)
   Targets with [data-hero-reveal] inside .hero fade + lift in with a
   delay driven by `--hero-reveal-delay` set inline by initHeroStagger().
   Falls through cleanly if JS is disabled (the JS adds the class, so
   the un-revealed state only exists when JS is running).
   ----------------------------------------------------------------------- */
.hero-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--fa-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) var(--hero-reveal-delay, 0ms),
              transform 620ms var(--fa-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) var(--hero-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.hero-reveal--in {
  opacity: 1;
  transform: translateY(0);
}