/* animations.css - Smooth animations for Asha Boutique Hotel */

/* Fade-in animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 1s ease-in-out forwards;
}

.animate-fade-in-delay {
  animation: fadeIn 1s ease-in-out 0.3s forwards;
}

.animate-fade-in-delay-2 {
  animation: fadeIn 1s ease-in-out 0.6s forwards;
}

/* Slide-up animations */
@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Hover effects */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.03);
}

/* Parallax effect for hero */
.hero-video {
  will-change: transform;
}

/* Loading spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner-circle {
  animation: spin 1.2s linear infinite;
}

/* Button pulse effect */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(147, 204, 250, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(147, 204, 250, 0); }
  100% { box-shadow: 0 0 0 0 rgba(147, 204, 250, 0); }
}

.btn-pulse:hover {
  animation: pulse 1s infinite;
}

/* Text reveal animation */
.text-reveal {
  overflow: hidden;
  position: relative;
}

.text-reveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  animation: textReveal 1.5s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  transform-origin: right;
}

@keyframes textReveal {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* Scroll-triggered animations */
[data-animate] {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-animate="fade"] {
  transform: translateY(20px);
}

[data-animate="fade"].animate {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="left"] {
  transform: translateX(-50px);
}

[data-animate="left"].animate {
  opacity: 1;
  transform: translateX(0);
}

[data-animate="right"] {
  transform: translateX(50px);
}

[data-animate="right"].animate {
  opacity: 1;
  transform: translateX(0);
}