/* ============================================
   🕉️ CHAMUNDA PUJA SERVICE — Smooth Animations & iOS Easing
   ============================================ */

/* ━━━━━ iOS SMOOTH SCROLL & REVEAL ━━━━━ */
html {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(35px) scale(0.97);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ━━━━━ CARD HOVER SPRING EFFECT (iOS FEEL) ━━━━━ */
.service-card, .puja-card, .astro-card, .why-card, .testimonial-card, .selectable-card, .gallery-item {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  will-change: transform, box-shadow;
}

.service-card:hover, .puja-card:hover, .astro-card:hover, .why-card:hover, .selectable-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(255, 140, 0, 0.22) !important;
}

/* ━━━━━ BUTTON HOVER MICRO-ANIMATION ━━━━━ */
.btn, .wizard-btn, .vc-btn-next {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.3s ease !important;
}

.btn:hover, .wizard-btn:hover, .vc-btn-next:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

.btn:active, .wizard-btn:active, .vc-btn-next:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ━━━━━ FLOATING DIYAS ━━━━━ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(2deg); }
  66% { transform: translateY(-8px) rotate(-1deg); }
}

/* ━━━━━ GOLDEN GLOW ━━━━━ */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
  50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.4), 0 0 80px rgba(255, 215, 0, 0.1); }
}

@keyframes glow-text {
  0%, 100% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
  50% { text-shadow: 0 0 40px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 140, 0, 0.3); }
}

/* ━━━━━ SHIMMER ━━━━━ */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ━━━━━ DIYA FLAME ━━━━━ */
@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; }
  25% { transform: scaleY(1.1) scaleX(0.9); opacity: 0.9; }
  50% { transform: scaleY(0.95) scaleX(1.05); opacity: 1; }
  75% { transform: scaleY(1.05) scaleX(0.95); opacity: 0.85; }
}

/* ━━━━━ TEMPLE BELL ━━━━━ */
@keyframes bell-swing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

/* ━━━━━ GPU HARDWARE ACCELERATION & FAST LAZY LOADING ━━━━━ */
.hero, .about-section, .services-section, .pujas-section, .astrology-section, .why-section, .reviews-section, .gallery-section, .festival-section, .panchang-section, .contact-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

.gallery-item {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
  will-change: opacity, transform;
  transform-origin: center center;
}

.gallery-item.hidden {
  opacity: 0 !important;
  transform: scale(0.92) !important;
  pointer-events: none !important;
}

/* Glass & Card GPU Layering */
.service-card, .puja-card, .card-dark, .why-card, .review-card, .panchang-card, .festival-item {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}