/* 
  Abira Clinic & Salon 
  Animations & Interactions (2026 Style)
*/

/* Scroll Reveal Classes */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered Delay */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Vertical Scroll Animation for Hero Scroller */
@keyframes scrollVertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); } /* Requires duplicated images in HTML to look infinite */
}

/* Pulse Animation for WhatsApp Widget */
@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); }
}
.pulse-wa {
  animation: pulseWA 2s infinite;
}

/* Smooth Slide Up for Hero Text */
@keyframes slideUpSmooth {
  from { 
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
.slide-up {
  opacity: 0;
  animation: slideUpSmooth 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Shine Hover Effect */
.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  animation: shine 4s infinite;
}
@keyframes shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}