/* --- Clases de Scroll Trigger (Observador) --- */
.reveal {
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.reveal-fade {
  transform: none;
}

.reveal.reveal-up {
  transform: translateY(50px);
}

.reveal.reveal-scale {
  transform: scale(0.92);
}

.reveal.reveal-left {
  transform: translateX(-50px);
}

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

/* Estado activo (cuando el Intersection Observer agrega .active) */
.reveal.active {
  opacity: 1;
  transform: none;
}

/* Staggered Reveals (retrasos progresivos) */
.reveal-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.5s; }

/* Animaciones del Split Text */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
}

.split-char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.reveal.active .split-char {
  transform: translateY(0);
}

/* Retrasos progresivos de caracteres en el split text */
/* Generado dinámicamente con JS, pero agregamos soporte base en CSS */
.reveal.active .char-delay-0 { transition-delay: 0.02s; }
.reveal.active .char-delay-1 { transition-delay: 0.04s; }
.reveal.active .char-delay-2 { transition-delay: 0.06s; }
.reveal.active .char-delay-3 { transition-delay: 0.08s; }
.reveal.active .char-delay-4 { transition-delay: 0.1s; }
.reveal.active .char-delay-5 { transition-delay: 0.12s; }
.reveal.active .char-delay-6 { transition-delay: 0.14s; }
.reveal.active .char-delay-7 { transition-delay: 0.16s; }
.reveal.active .char-delay-8 { transition-delay: 0.18s; }
.reveal.active .char-delay-9 { transition-delay: 0.2s; }

/* --- Animaciones Continuas --- */

/* Flotación sutil */
.floating-element {
  animation: float 6s ease-in-out infinite;
}

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

/* Brillo Shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-bg {
  background: linear-gradient(
    90deg,
    rgba(27, 42, 74, 0.8) 25%,
    rgba(212, 32, 39, 0.1) 37%,
    rgba(27, 42, 74, 0.8) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
}

/* Pulsación sutil de luz */
.pulse-light {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.2); }
  50% { box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.5); }
  100% { box-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.2); }
}

/* Giro suave continuo */
.slow-spin {
  animation: spin 20s linear infinite;
}

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