/* ==========================================================================
   TELECLIM Premium v3.0 — Biblioteca de Animaciones
   ========================================================================== */

/* --- ANIMACIONES DE ENTRADA --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- EFECTOS CONTINUOS --- */
@keyframes gridMove {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(30px, 30px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,174,239,0.3); }
  50%      { box-shadow: 0 0 40px rgba(0,174,239,0.6), 0 0 60px rgba(0,229,160,0.2); }
}

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

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

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

@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0) scale(1);        opacity: 0.5; }
  25%      { transform: translate(10px, -20px) scale(1.1); opacity: 0.8; }
  50%      { transform: translate(-5px, -35px) scale(0.9); opacity: 0.6; }
  75%      { transform: translate(-15px, -15px) scale(1.05);opacity: 0.7; }
}

@keyframes scrollWheel {
  0%, 100% { opacity: 1;   transform: translateX(-50%) translateY(0); }
  50%      { opacity: 0.3; transform: translateX(-50%) translateY(10px); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(0,174,239,0.2); }
  50%      { border-color: rgba(0,174,239,0.6); }
}

@keyframes lineGrow {
  from { height: 0; }
  to   { height: 100%; }
}

@keyframes dashAnimation {
  to { stroke-dashoffset: 0; }
}

/* --- CLASES UTILITARIAS DE ANIMACIÓN --- */
.animate-fade-up     { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fade-down   { animation: fadeInDown 0.8s ease-out forwards; }
.animate-fade-left   { animation: fadeInLeft 0.8s ease-out forwards; }
.animate-fade-right  { animation: fadeInRight 0.8s ease-out forwards; }
.animate-fade-scale  { animation: fadeInScale 0.8s ease-out forwards; }
.animate-float       { animation: floatAnimation 3s ease-in-out infinite; }
.animate-pulse-glow  { animation: pulseGlow 2s ease-in-out infinite; }
.animate-rotate-slow { animation: rotateSlow 20s linear infinite; }
.animate-shimmer     {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* --- DELAYS DE ANIMACIÓN --- */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }

/* --- SISTEMA REVEAL (IntersectionObserver) --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Stagger children dentro de un contenedor reveal */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.stagger-children.active > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(6) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(7) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }

/* --- REDUCCIÓN DE MOVIMIENTO (Accesibilidad) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }
}