/* ============================================================
   BECHY — Animaciones y Micro-interacciones
   Estilo Simplificando Tu Web (simplificandotuweb.com)
   ============================================================ */

/* --- Scroll Reveal Classes --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left {
  transform: translateX(-30px);
}
.reveal--left.visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(30px);
}
.reveal--right.visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.94);
}
.reveal--scale.visible {
  transform: scale(1);
}

/* Stagger Delays */
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }


/* --- Floating Pulse for WhatsApp --- */
@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.floating-whatsapp {
  animation: pulse-green 2.5s infinite;
}


/* --- Soft Badge Float Animation --- */
@keyframes soft-float {
  0%, 100% {
    transform: rotate(4deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-6px);
  }
}

.split-about__floating-badge {
  animation: soft-float 4s ease-in-out infinite;
}


/* --- Glow Animation for Hero Background --- */
@keyframes hero-glow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}


/* --- Smooth Page Transition --- */
body.page-transition {
  animation: fadeInPage 0.45s ease-out forwards;
}

@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --- Media query for 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;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}