/* ============================================================
   AIMOQ — Animations & Keyframes
   ============================================================ */

/* ── Keyframes ── */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(5deg); }
  66%       { transform: translateY(-6px) rotate(-3deg); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes blob-move {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1) rotate(0deg); }
  33%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.05) rotate(10deg); }
  66%       { border-radius: 70% 30% 50% 50% / 30% 40% 60% 70%; transform: scale(0.98) rotate(-8deg); }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-left {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes grid-fade {
  from { opacity: 0; }
  to   { opacity: 0.08; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(77,95,187,0.2); }
  50%       { box-shadow: 0 0 60px rgba(77,95,187,0.45); }
}

@keyframes particle-move {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(var(--tx, 60px), var(--ty, -80px)); opacity: 0; }
}

/* ── Hero Entry Animation ── */

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(44px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-enter {
  opacity: 0;
  animation: hero-fade-up 0.9s var(--ease-out) forwards;
}

.hero-enter-1  { animation-delay: 0.05s; }
.hero-enter-2  { animation-delay: 0.20s; }
.hero-enter-3  { animation-delay: 0.38s; }
.hero-enter-4  { animation-delay: 0.54s; }
.hero-enter-5  { animation-delay: 0.72s; }

/* ── Reveal on Scroll ── */

/* Safety: if JS never runs, elements are visible */
.reveal {
  opacity: 1;
  transform: none;
}

/* JS running: solo define la transición — los elementos NO se ocultan por defecto */
.js-ready .reveal {
  transition: opacity 0.78s var(--ease-out), transform 0.78s var(--ease-out);
}

/* Solo se ocultan los elementos debajo del fold (JS añade esta clase) */
.js-ready .reveal.reveal-hidden {
  opacity: 0;
  transform: translateY(56px);
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Móvil: solo fade, sin translateY — evita el salto visual durante scroll */
@media (max-width: 768px) {
  .js-ready .reveal.reveal-hidden {
    transform: none;
  }
  .js-ready .reveal.is-visible {
    transform: none;
  }
}

.js-ready .reveal--left {
  transform: translateX(-52px);
}

.js-ready .reveal--left.is-visible { transform: translateX(0); }

.js-ready .reveal--right {
  transform: translateX(52px);
}

.js-ready .reveal--right.is-visible { transform: translateX(0); }

.js-ready .reveal--scale {
  transform: scale(0.88);
}

.js-ready .reveal--scale.is-visible { transform: scale(1); }

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }
.reveal-delay-5 { transition-delay: 0.60s; }
.reveal-delay-6 { transition-delay: 0.72s; }

/* ── Hero Background Blobs ── */

.hero-blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  filter: blur(80px);
  animation: blob-move 12s ease-in-out infinite;
  pointer-events: none;
}

.hero-blob--1 {
  width: clamp(300px, 45vw, 600px);
  height: clamp(300px, 45vw, 600px);
  background: radial-gradient(circle, rgba(77,95,187,0.14) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  animation-delay: 0s;
}

.hero-blob--2 {
  width: clamp(200px, 35vw, 450px);
  height: clamp(200px, 35vw, 450px);
  background: radial-gradient(circle, rgba(126,184,247,0.12) 0%, transparent 70%);
  bottom: -80px;
  left: -80px;
  animation-delay: -4s;
  animation-duration: 16s;
}

.hero-blob--3 {
  width: clamp(150px, 25vw, 300px);
  height: clamp(150px, 25vw, 300px);
  background: radial-gradient(circle, rgba(167,139,250,0.10) 0%, transparent 70%);
  top: 40%;
  left: 30%;
  animation-delay: -8s;
  animation-duration: 20s;
}

/* ── Dot Grid Pattern ── */

.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(77,95,187,0.12) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  animation: grid-fade 1s ease forwards;
}

/* ── Floating Elements ── */

.float-el { animation: float 6s ease-in-out infinite; }
.float-el--slow { animation: float-slow 9s ease-in-out infinite; }
.float-el--delay { animation-delay: -3s; }

/* ── Gradient Border Card ── */

.card-gradient-border {
  position: relative;
  z-index: 0;
}

.card-gradient-border::before {
  content: '';
  position: absolute;
  top: -1px; right: -1px; bottom: -1px; left: -1px;
  inset: -1px;
  background: linear-gradient(135deg, var(--clr-brand), var(--clr-accent), var(--clr-accent-2));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--tr-base);
}

.card-gradient-border:hover::before { opacity: 1; }

/* ── Shimmer Text ── */

.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--clr-brand-lighter) 0%,
    var(--clr-white) 30%,
    var(--clr-accent) 50%,
    var(--clr-white) 70%,
    var(--clr-brand-lighter) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── Glow Card ── */

.glow-on-hover {
  transition: all var(--tr-base);
}

.glow-on-hover:hover {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ── Marquee ── */
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-slide-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── Counter done glow ── */
@keyframes counter-glow {
  0%   { text-shadow: none; }
  25%  { text-shadow: 0 0 40px rgba(255,255,255,1), 0 0 80px rgba(126,184,247,0.9); }
  100% { text-shadow: none; }
}

.stats-band__number.counter-done {
  animation: counter-glow 1.3s ease-out forwards;
}

/* ── AI icon pulse ── */
@keyframes ai-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

/* ── CTA floating particle ── */
@keyframes cta-float {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  15%  { opacity: var(--p-opacity, 0.5); }
  85%  { opacity: var(--p-opacity, 0.5); }
  100% { transform: translateY(var(--p-y, -120px)) translateX(var(--p-x, 30px)) scale(0.2); opacity: 0; }
}