/* ==========================================
   SISTEMA DE ANIMACIONES PREMIUM - VITALNATURAL
   ========================================== */

/* ===== 1. CARGA INICIAL Y TRANSICIONES DE PÁGINA ===== */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--navy-deep);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Animación de carga para imágenes difusas (Lazy load effect) */
.lazy-loaded {
  animation: fadeIn 0.8s ease forwards;
}

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

/* ===== 2. SCROLL REVEAL (INTERSECTION OBSERVER) ===== */
.reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Variante: Desplazar hacia arriba */
.reveal-up {
  transform: translateY(40px);
}

/* Variante: Desplazar hacia la izquierda (entra por la derecha) */
.reveal-left {
  transform: translateX(40px);
}

/* Variante: Desplazar hacia la derecha (entra por la izquierda) */
.reveal-right {
  transform: translateX(-40px);
}

/* Variante: Escala e ingreso suave */
.reveal-scale {
  transform: scale(0.94);
}

/* Estado activo aplicado por JavaScript */
.reveal.active {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Retrasos secuenciales para animar elementos hijos en grupo (Stagger Effect) */
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }

/* ===== 3. EFECTOS HOLOGRÁFICOS Y DE MOVIMIENTO SUAVE ===== */
/* Animación de flotación oscilatoria suave para las hojas del Hero */
.float-leaf {
  animation: floatLeaf 8s ease-in-out infinite;
}

@keyframes floatLeaf {
  0%, 100% {
    transform: rotate(0deg) translateY(0px) translateX(0px);
  }
  33% {
    transform: rotate(1.5deg) translateY(-12px) translateX(4px);
  }
  66% {
    transform: rotate(-1deg) translateY(6px) translateX(-6px);
  }
}

/* Animación de balanceo para los anillos visuales del logo */
.rotate-ring-slow {
  animation: rotateRing 25s linear infinite;
}

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

/* Pulsación sutil para el botón flotante de WhatsApp */
.pulse-wa {
  animation: pulseWa 2s infinite;
}

@keyframes pulseWa {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Brillo metálico dinámico en botones importantes (Hover Shine) */
.btn-shine-effect {
  position: relative;
  overflow: hidden;
}

.btn-shine-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transition: 0.5s;
}

.btn-shine-effect:hover::after {
  left: 100%;
  transition: 0.6s ease-in-out;
}

/* Animación de vibración sutil para destacar el botón de WhatsApp cuando el carrito califica para envío gratis */
.shake-cart-highlight {
  animation: shakeCart 0.5s ease-in-out 2;
}

@keyframes shakeCart {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}