/**
 * ANIMACIONES, KEYFRAMES Y EFECTOS REVEAL
 * Dr. Andrés Herrera - Cirugía Plástica y Estética
 */

/* ==========================================================================
   1. KEYFRAMES PRINCIPALES
   ========================================================================== */

/* Efecto Ken Burns (zoom suave y paneo en imagen del Hero) */
@keyframes kenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-1%, -1%);
  }
  100% {
    transform: scale(1.15) translate(1%, 1%);
  }
}

/* Rotación del Preloader */
@keyframes girar {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Pulso suave */
@keyframes pulso {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

/* Pulso de onda en botón de WhatsApp */
@keyframes pulsoOnda {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Movimiento de rueda de ratón en indicador de scroll */
@keyframes ruedaScroll {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
}

/* Aparición suave (Fade In) */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Desvanecimiento de brillo médico azul */
@keyframes resplandorDorado {
  0%, 100% {
    box-shadow: 0 0 15px rgba(15, 117, 189, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.6);
  }
}

/* ==========================================================================
   2. SISTEMA SCROLL-REVEAL (IntersectionObserver)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.85s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Fade Up (Aparición desde abajo) */
[data-reveal="fade-up"] {
  transform: translateY(30px);
}

/* Fade Left (Aparición desde la izquierda) */
[data-reveal="fade-left"] {
  transform: translateX(-25px);
}

/* Fade Right (Aparición desde la derecha) */
[data-reveal="fade-right"] {
  transform: translateX(25px);
}

/* Zoom In (Escalado suave) */
[data-reveal="zoom-in"] {
  transform: scale(0.94);
}

/* En dispositivos móviles y tablets evitamos desplazamientos horizontales para proteger el ancho de pantalla */
@media (max-width: 868px) {
  [data-reveal="fade-left"],
  [data-reveal="fade-right"] {
    transform: translateY(25px);
  }
}

/* Estado activo revelado */
[data-reveal].revelado {
  opacity: 1;
  transform: translate(0, 0) scale(1) !important;
}

/* Retardos escalonados (Delays) */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }

/* ==========================================================================
   3. EFECTOS DE MICRO-INTERACCIÓN
   ========================================================================== */
.flotar-suave {
  animation: pulso 4s ease-in-out infinite;
}

.brillo-dorado-activo {
  animation: resplandorDorado 3s infinite;
}

/* ==========================================================================
   4. ACCESIBILIDAD: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-imagen {
    animation: none !important;
    transform: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn-whatsapp-flotante::before {
    animation: none !important;
  }
}