/* ==========================================================================
   ANIMATIONS — Revelado al hacer scroll, fondo ambiental y keyframes
   Regla del proyecto: movimiento breve, con proposito y siempre desactivable.
   ========================================================================== */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* Respiracion lenta del degradado de fondo. */
@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, -3%, 0) scale(1.06);
  }
}

/* Punto de estado "disponible" en el hero. */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(61, 220, 151, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 151, 0);
  }
}

/* Indicador de scroll al pie del hero. */
@keyframes nudge {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

/* ==========================================================================
   REVELADO AL HACER SCROLL
   Estado inicial en CSS; IntersectionObserver anade .is-revealed una sola vez.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Variantes de entrada. El escalonado llega por --reveal-delay desde el JS. */
.reveal--left {
  transform: translateX(-20px);
}

.reveal--right {
  transform: translateX(20px);
}

.reveal--zoom {
  transform: scale(0.96);
}

/* Sin JavaScript el contenido debe verse igual: nunca se oculta de forma permanente. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   FONDO AMBIENTAL — aurora de marca detras del hero
   ========================================================================== */

.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
  animation: drift 18s var(--ease) infinite;
}

.aurora__blob--1 {
  top: -12%;
  left: -8%;
  width: 46vw;
  height: 46vw;
  background: rgba(133, 25, 247, 0.34);
}

.aurora__blob--2 {
  bottom: -18%;
  right: -6%;
  width: 38vw;
  height: 38vw;
  background: rgba(160, 87, 255, 0.24);
  animation-duration: 24s;
  animation-direction: reverse;
}

/* ==========================================================================
   DETALLES ANIMADOS PUNTUALES
   ========================================================================== */

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-success);
  animation: pulse 2.4s var(--ease) infinite;
}

.scroll-hint {
  display: inline-flex;
  color: var(--c-text-dim);
  animation: nudge 2s var(--ease) infinite;
}

.scroll-hint svg {
  width: 20px;
  height: 20px;
}

/* Subrayado de marca que crece cuando el bloque entra en pantalla. */
.underline-grow {
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--t-slow) var(--ease-out);
}

.is-revealed .underline-grow,
.underline-grow.is-revealed {
  background-size: 100% 2px;
}

/* ==========================================================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   Los tokens ya acortan las transiciones; aqui se detienen los bucles.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .aurora__blob,
  .status-dot,
  .scroll-hint,
  .btn__spinner {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}