/* =========================================================
   NOVA X — Animaciones
   ========================================================= */

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes loaderBar {
  0% { transform: scaleX(0.2); opacity: 0.6; }
  50% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.2); opacity: 0.6; }
}

@keyframes skeletonSweep {
  100% { transform: translateX(100%); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateY(10px) scale(0.95); }
}

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(124, 58, 237, 0); }
  50% { box-shadow: 0 0 30px rgba(124, 58, 237, 0.45); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-spring);
}

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

.stagger > * {
  transition-delay: calc(var(--stagger-index, 0) * 70ms);
}

.hero-badge-float {
  animation: floatSlow 5s ease-in-out infinite;
}

/* ---------- Hero: animación Ken Burns solo en la imagen de fondo ---------- */
@keyframes heroKenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.09); }
}

.hero-slide-media {
  animation: heroKenBurns 16s ease-in-out infinite alternate;
}

/* ---------- Glow ambiental decorativo ---------- */
.ambient-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.ambient-glow.blue { background: var(--color-blue); }
.ambient-glow.purple { background: var(--color-purple); }
.ambient-glow.cyan { background: var(--color-cyan); }

/* ---------- Clip-path decorativo en cards destacadas ---------- */
.clip-blob {
  clip-path: polygon(0% 8%, 92% 0%, 100% 88%, 6% 100%);
}