/* ═══════════════════════════════════════════════════════════════
   GESAPROV — ANIMACIONES PREMIUM v2.0.0
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   SCROLL REVEAL
   ────────────────────────────────────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity  0.70s cubic-bezier(0.22,1,0.36,1) var(--delay,0s),
    transform 0.70s cubic-bezier(0.22,1,0.36,1) var(--delay,0s);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-44px);
  transition:
    opacity  0.70s cubic-bezier(0.22,1,0.36,1) var(--delay,0s),
    transform 0.70s cubic-bezier(0.22,1,0.36,1) var(--delay,0s);
}
.reveal-right {
  opacity: 0;
  transform: translateX(44px);
  transition:
    opacity  0.70s cubic-bezier(0.22,1,0.36,1) var(--delay,0s),
    transform 0.70s cubic-bezier(0.22,1,0.36,1) var(--delay,0s);
}
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0,0);
}

/* ──────────────────────────────────────────────────────────────
   FLOAT (hero cards)
   ────────────────────────────────────────────────────────────── */
.float-anim               { animation: floatCard 5.5s ease-in-out infinite; }
.float-delay-1            { animation-delay: 0.8s; }
.float-delay-2            { animation-delay: 1.8s; }
.float-delay-3            { animation-delay: 2.8s; }

@keyframes floatCard {
  0%,100% { transform: translateY(0)   rotate(0deg); }
  30%     { transform: translateY(-8px) rotate(.4deg); }
  70%     { transform: translateY(5px)  rotate(-.4deg); }
}

/* ──────────────────────────────────────────────────────────────
   TEXT SHINE (hero title gradient)
   ────────────────────────────────────────────────────────────── */
@keyframes textShine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ──────────────────────────────────────────────────────────────
   DOT PULSE (badge activo)
   ────────────────────────────────────────────────────────────── */
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(0,184,148,.25); }
  50%     { box-shadow: 0 0 0 7px rgba(0,184,148,.08); }
}

/* ──────────────────────────────────────────────────────────────
   RING PULSE (hero visual)
   ────────────────────────────────────────────────────────────── */
@keyframes ringPulse {
  0%,100% { opacity: .6; transform: scale(1); }
  50%     { opacity: .25; transform: scale(1.05); }
}

/* ──────────────────────────────────────────────────────────────
   SCROLL BOUNCE (indicator)
   ────────────────────────────────────────────────────────────── */
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .8; }
  50%     { transform: translateX(-50%) translateY(9px); opacity: .2; }
}

/* ──────────────────────────────────────────────────────────────
   MARQUEE SCROLL
   ────────────────────────────────────────────────────────────── */
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ──────────────────────────────────────────────────────────────
   STAT COUNTER (fade up)
   ────────────────────────────────────────────────────────────── */
@keyframes countFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-item.visible .stat-item__value {
  animation: countFadeUp 0.6s var(--delay,0s) cubic-bezier(0.22,1,0.36,1) both;
}

/* ──────────────────────────────────────────────────────────────
   BUTTON HOVER SHIMMER
   ────────────────────────────────────────────────────────────── */
.btn--primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn--primary:hover::before { left: 160%; }

/* ──────────────────────────────────────────────────────────────
   GRADIENT BORDER GLOW on hover (sol-card)
   ────────────────────────────────────────────────────────────── */
.sol-card {
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.28s cubic-bezier(0.22,1,0.36,1);
}

/* ──────────────────────────────────────────────────────────────
   HERO CORE GLOW PULSE
   ────────────────────────────────────────────────────────────── */
.hero__visual-core {
  animation: corePulse 3s ease-in-out infinite;
}
@keyframes corePulse {
  0%,100% { box-shadow: 0 0 60px rgba(0,91,255,.6), 0 0 120px rgba(0,91,255,.3); }
  50%     { box-shadow: 0 0 80px rgba(0,91,255,.8), 0 0 160px rgba(0,194,255,.4); }
}

/* ──────────────────────────────────────────────────────────────
   PAGE LOAD
   ────────────────────────────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: pageFadeIn 0.4s ease forwards; }

/* ──────────────────────────────────────────────────────────────
   FOOTER LINK SLIDE
   ────────────────────────────────────────────────────────────── */
.footer__col a {
  position: relative;
}
.footer__col a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--color-cyan, #00C2FF);
  transition: width 0.22s ease;
}
.footer__col a:hover::after { width: 100%; }

/* ──────────────────────────────────────────────────────────────
   NAV ACTIVE BAR
   ────────────────────────────────────────────────────────────── */
.nav__link { position: relative; }
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 1px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--color-cyan, #00C2FF);
  border-radius: 2px;
  transition: width 0.22s ease;
}
.nav__link.active::after,
.nav__link:hover::after { width: 55%; }

/* ──────────────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-up, .reveal-left, .reveal-right {
    opacity: 1; transform: none; transition: none;
  }
}