/* =================================================================
   TOWER CONSULTING — animations.css
   Keyframes globales y clases de revelado al hacer scroll
   (activadas vía Intersection Observer en js/scroll.js)
   ================================================================= */

/* -----------------------------------------------------------------
   Keyframes
   ----------------------------------------------------------------- */
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes loaderRing {
  0% { stroke-dashoffset: 339; transform-origin: center; }
  50% { stroke-dashoffset: 60; }
  100% { stroke-dashoffset: 339; transform: rotate(360deg); }
}

@keyframes scrollLine {
  0% { top: -100%; }
  60%, 100% { top: 100%; }
}

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

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

@keyframes drawArrow {
  from { stroke-dashoffset: 400; }
  to { stroke-dashoffset: 0; }
}

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.06); }
}

@keyframes avatarGlowPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.08); }
}

/* -----------------------------------------------------------------
   Animaciones ambientales del Hero (SVG)
   ----------------------------------------------------------------- */
.hero-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: barGrow 1s var(--ease) backwards;
}
.hero-bar:nth-of-type(1) { animation-delay: 0.15s; }
.hero-bar:nth-of-type(2) { animation-delay: 0.3s; }
.hero-bar:nth-of-type(3) { animation-delay: 0.45s; }
.hero-bar:nth-of-type(4) { animation-delay: 0.6s; }

.hero-arrow path {
  stroke-dasharray: 400;
  animation: drawArrow 1.4s var(--ease) 0.6s backwards;
}

.hero-dot { animation: floatSlow 5s ease-in-out infinite; }
.hero-dot:nth-of-type(2) { animation-duration: 6.5s; animation-delay: 0.5s; }
.hero-dot:nth-of-type(3) { animation-duration: 4.5s; animation-delay: 1s; }
.hero-dot:nth-of-type(4) { animation-duration: 7s; animation-delay: 1.5s; }

.hero-orbit, .hero-orbit-thin { animation: pulseGlow 6s ease-in-out infinite; }

.hero__glow--1 { animation: floatY 8s ease-in-out infinite; }
.hero__glow--2 { animation: floatY 10s ease-in-out infinite reverse; }

/* -----------------------------------------------------------------
   Revelado al hacer scroll (Intersection Observer añade .is-visible)
   ----------------------------------------------------------------- */
.reveal-up, .reveal-scale, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: transform, opacity;
}

.reveal-up { transform: translateY(36px); }
.reveal-scale { transform: scale(0.92); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal-up.is-visible,
.reveal-scale.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Retrasos escalonados para elementos en grupo (data-delay="1..6") */
.reveal-up[data-delay="1"], .reveal-scale[data-delay="1"] { transition-delay: 0.05s; }
.reveal-up[data-delay="2"], .reveal-scale[data-delay="2"] { transition-delay: 0.15s; }
.reveal-up[data-delay="3"], .reveal-scale[data-delay="3"] { transition-delay: 0.25s; }
.reveal-up[data-delay="4"], .reveal-scale[data-delay="4"] { transition-delay: 0.35s; }
.reveal-up[data-delay="5"], .reveal-scale[data-delay="5"] { transition-delay: 0.45s; }
.reveal-up[data-delay="6"], .reveal-scale[data-delay="6"] { transition-delay: 0.55s; }

/* -----------------------------------------------------------------
   Divisor "skyline" — barras que suben al entrar en viewport
   ----------------------------------------------------------------- */
.skyline-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.7s var(--ease);
}
.skyline-divider.is-visible .skyline-bar { transform: scaleY(1); }
.skyline-divider.is-visible .skyline-bar:nth-child(1) { transition-delay: 0s; }
.skyline-divider.is-visible .skyline-bar:nth-child(2) { transition-delay: 0.1s; }
.skyline-divider.is-visible .skyline-bar:nth-child(3) { transition-delay: 0.2s; }
.skyline-divider.is-visible .skyline-bar:nth-child(4) { transition-delay: 0.3s; }

.skyline-arrow {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s var(--ease) 0.4s;
}
.skyline-divider.is-visible .skyline-arrow { stroke-dashoffset: 0; }

.skyline-arrow-head {
  opacity: 0;
  transition: opacity 0.3s var(--ease) 1.2s;
}
.skyline-divider.is-visible .skyline-arrow-head { opacity: 1; }

/* -----------------------------------------------------------------
   Reducción de movimiento — accesibilidad
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-up, .reveal-scale, .reveal-left, .reveal-right { opacity: 1; transform: none; }
}