/* ============================================
   Pray4Meta — Enhanced Animations
   AAA-Grade Temple Atmosphere
   ============================================ */

/* ============================================
   Ambient & Background Animations
   ============================================ */
@keyframes ambientPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes smokeRise {
  0% {
    transform: translateY(0) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.25;
  }
  30% {
    opacity: 0.2;
    transform: translateY(-20vh) scale(0.8) rotate(5deg);
  }
  60% {
    opacity: 0.12;
    transform: translateY(-50vh) scale(1.4) rotate(-3deg);
  }
  100% {
    transform: translateY(-100vh) scale(2.2) rotate(8deg);
    opacity: 0;
  }
}

@keyframes emberFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  40% {
    opacity: 0.6;
    transform: translateY(-30vh) translateX(20px) scale(0.8);
  }
  70% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-80vh) translateX(-10px) scale(0.2);
    opacity: 0;
  }
}

/* ============================================
   Pearl & Glow Effects
   ============================================ */
@keyframes pearlGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(255, 215, 0, 0.5),
      0 0 40px rgba(255, 215, 0, 0.3),
      0 0 60px rgba(255, 215, 0, 0.15);
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 215, 0, 0.8),
      0 0 60px rgba(255, 215, 0, 0.5),
      0 0 90px rgba(255, 215, 0, 0.25);
  }
}

@keyframes pearlGlowPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.8;
  }
}

@keyframes divineGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes deityRaysSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================
   Lantern Animation
   ============================================ */
@keyframes lanternSway {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

/* ============================================
   Incense Animations
   ============================================ */
@keyframes incenseBurn {
  0%, 100% {
    opacity: 0.7;
    box-shadow:
      0 0 6px #FF4500,
      0 0 12px #FF6600,
      0 0 20px rgba(255, 100, 0, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 10px #FF4500,
      0 0 20px #FF6600,
      0 0 30px rgba(255, 100, 0, 0.5);
  }
}

@keyframes incenseSmoke {
  0% {
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
    opacity: 0.3;
  }
  30% {
    transform: translateX(-50%) translateY(-15px) scale(1.3) rotate(3deg);
    opacity: 0.2;
  }
  60% {
    transform: translateX(-50%) translateY(-30px) scale(1.8) rotate(-2deg);
    opacity: 0.1;
  }
  100% {
    transform: translateX(-50%) translateY(-60px) scale(2.5) rotate(5deg);
    opacity: 0;
  }
}

/* ============================================
   General UI Animations
   ============================================ */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   Moon Block Animations — OVERHAULED
   3D crescent with realistic toss physics
   ============================================ */

/* Left block toss — arcs slightly left */
@keyframes blockTossLeft {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    filter: blur(0);
  }
  5% {
    transform: translateY(-30px) translateX(-5px) rotate(-15deg) scale(0.95);
  }
  12% {
    transform: translateY(-100px) translateX(-18px) rotate(-60deg) scale(0.85);
    filter: blur(0.5px);
  }
  22% {
    transform: translateY(-180px) translateX(-25px) rotate(-180deg) scale(0.75);
    filter: blur(1.5px);
  }
  35% {
    transform: translateY(-210px) translateX(-20px) rotate(-320deg) scale(0.7);
    filter: blur(2px);
  }
  50% {
    transform: translateY(-170px) translateX(-12px) rotate(-480deg) scale(0.75);
    filter: blur(1.5px);
  }
  65% {
    transform: translateY(-100px) translateX(-5px) rotate(-600deg) scale(0.85);
    filter: blur(1px);
  }
  78% {
    transform: translateY(-30px) translateX(2px) rotate(-680deg) scale(0.95);
    filter: blur(0.5px);
  }
  88% {
    transform: translateY(8px) translateX(0) rotate(var(--final-rot-left)) scale(1.02);
    filter: blur(0);
  }
  94% {
    transform: translateY(-6px) translateX(0) rotate(var(--final-rot-left)) scale(1);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(var(--final-rot-left)) scale(1);
  }
}

/* Right block toss — arcs slightly right, different timing */
@keyframes blockTossRight {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    filter: blur(0);
  }
  4% {
    transform: translateY(-25px) translateX(8px) rotate(20deg) scale(0.95);
  }
  14% {
    transform: translateY(-120px) translateX(22px) rotate(80deg) scale(0.82);
    filter: blur(0.8px);
  }
  25% {
    transform: translateY(-200px) translateX(28px) rotate(200deg) scale(0.72);
    filter: blur(2px);
  }
  38% {
    transform: translateY(-220px) translateX(22px) rotate(360deg) scale(0.68);
    filter: blur(2.5px);
  }
  52% {
    transform: translateY(-160px) translateX(15px) rotate(520deg) scale(0.78);
    filter: blur(1.5px);
  }
  68% {
    transform: translateY(-80px) translateX(6px) rotate(640deg) scale(0.88);
    filter: blur(0.8px);
  }
  82% {
    transform: translateY(-15px) translateX(-2px) rotate(700deg) scale(0.98);
    filter: blur(0);
  }
  92% {
    transform: translateY(10px) translateX(0) rotate(var(--final-rot-right)) scale(1.03);
  }
  97% {
    transform: translateY(-4px) translateX(0) rotate(var(--final-rot-right)) scale(1);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(var(--final-rot-right)) scale(1);
  }
}

/* Landing bounce for flat side (left) */
@keyframes blockBounceFlat {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  15% {
    transform: translateY(-12px) rotate(-2deg);
  }
  35% {
    transform: translateY(3px) rotate(1deg);
  }
  55% {
    transform: translateY(-5px) rotate(-0.5deg);
  }
  75% {
    transform: translateY(1px) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Landing bounce for round side */
@keyframes blockBounceRound {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  15% {
    transform: translateY(-14px) rotate(3deg);
  }
  35% {
    transform: translateY(4px) rotate(-1.5deg);
  }
  55% {
    transform: translateY(-6px) rotate(0.8deg);
  }
  75% {
    transform: translateY(2px) rotate(-0.3deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Ground shadow — impact pulse */
@keyframes groundImpact {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.3) scaleY(0.5);
  }
  20% {
    opacity: 0.9;
    transform: translateX(-50%) scaleX(1.4) scaleY(1);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-50%) scaleX(1.1) scaleY(0.8);
  }
  100% {
    opacity: 0.15;
    transform: translateX(-50%) scaleX(1) scaleY(0.7);
  }
}

/* Block shadow during flight — scales and moves with height */
@keyframes blockShadowFlight {
  0% {
    opacity: 0.4;
    transform: translateX(-50%) scaleX(1) scaleY(1);
    filter: blur(3px);
  }
  30% {
    opacity: 0.12;
    transform: translateX(-50%) scaleX(0.4) scaleY(0.4);
    filter: blur(8px);
  }
  50% {
    opacity: 0.08;
    transform: translateX(-50%) scaleX(0.3) scaleY(0.3);
    filter: blur(10px);
  }
  80% {
    opacity: 0.25;
    transform: translateX(-50%) scaleX(0.7) scaleY(0.7);
    filter: blur(5px);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-50%) scaleX(1) scaleY(1);
    filter: blur(3px);
  }
}

/* ============================================
   Holy Dot Animations
   ============================================ */
@keyframes holyBurst {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8);
    transform: scale(1);
  }
  20% {
    transform: scale(1.3);
    box-shadow:
      0 0 20px rgba(255, 215, 0, 0.9),
      0 0 40px rgba(255, 215, 0, 0.5),
      0 0 60px rgba(255, 215, 0, 0.2);
  }
  40% {
    transform: scale(0.95);
  }
  60% {
    transform: scale(1.1);
    box-shadow:
      0 0 15px rgba(255, 215, 0, 0.6),
      0 0 30px rgba(255, 215, 0, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  }
}

@keyframes holyRing {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    border-width: 3px;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes holyCelebrate {
  0%, 100% {
    filter: brightness(1);
  }
  10% {
    filter: brightness(1.5);
  }
  20% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.4);
  }
  40% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.6);
  }
  70% {
    filter: brightness(1.2);
  }
}

@keyframes celebrateGlow {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes sparkBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--spark-x), var(--spark-y)) scale(0);
    opacity: 0;
  }
}

/* ============================================
   Fortune Cylinder — OVERHAULED
   ============================================ */
@keyframes cylinderShake {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  4% { transform: rotate(-8deg) translateY(-5px); }
  8% { transform: rotate(10deg) translateY(-3px); }
  12% { transform: rotate(-12deg) translateY(-7px); }
  16% { transform: rotate(11deg) translateY(-4px); }
  20% { transform: rotate(-10deg) translateY(-8px); }
  24% { transform: rotate(9deg) translateY(-2px); }
  28% { transform: rotate(-11deg) translateY(-6px); }
  32% { transform: rotate(8deg) translateY(-3px); }
  36% { transform: rotate(-9deg) translateY(-7px); }
  40% { transform: rotate(7deg) translateY(-4px); }
  44% { transform: rotate(-8deg) translateY(-5px); }
  48% { transform: rotate(6deg) translateY(-2px); }
  52% { transform: rotate(-7deg) translateY(-6px); }
  56% { transform: rotate(5deg) translateY(-3px); }
  60% { transform: rotate(-6deg) translateY(-4px); }
  65% { transform: rotate(4deg) translateY(-2px); }
  70% { transform: rotate(-4deg) translateY(-3px); }
  76% { transform: rotate(3deg) translateY(-1px); }
  82% { transform: rotate(-2deg) translateY(-2px); }
  88% { transform: rotate(1deg) translateY(-1px); }
  94% { transform: rotate(-1deg) translateY(0); }
}

/* Individual stick rattle during shaking */
@keyframes stickRattle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10% { transform: translateX(var(--rattle-x, 2px)) rotate(var(--rattle-r, 3deg)); }
  20% { transform: translateX(calc(var(--rattle-x, 2px) * -0.8)) rotate(calc(var(--rattle-r, 3deg) * -1.2)); }
  30% { transform: translateX(var(--rattle-x, 2px)) rotate(var(--rattle-r, 3deg)); }
  40% { transform: translateX(calc(var(--rattle-x, 2px) * -0.6)) rotate(calc(var(--rattle-r, 3deg) * -0.8)); }
  50% { transform: translateX(var(--rattle-x, 2px)) rotate(var(--rattle-r, 3deg)); }
  60% { transform: translateX(calc(var(--rattle-x, 2px) * -0.5)) rotate(calc(var(--rattle-r, 3deg) * -0.6)); }
  70% { transform: translateX(calc(var(--rattle-x, 2px) * 0.4)) rotate(calc(var(--rattle-r, 3deg) * 0.4)); }
  80% { transform: translateX(calc(var(--rattle-x, 2px) * -0.3)) rotate(calc(var(--rattle-r, 3deg) * -0.3)); }
  90% { transform: translateX(calc(var(--rattle-x, 2px) * 0.1)) rotate(calc(var(--rattle-r, 3deg) * 0.1)); }
}

/* Stick pop out from cylinder */
@keyframes stickPopOut {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translateY(-100px) rotate(-5deg);
    opacity: 1;
  }
  60% {
    transform: translateY(-180px) rotate(-8deg);
    opacity: 1;
  }
  80% {
    transform: translateY(-240px) rotate(-3deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-280px) rotate(0deg) scale(1.2);
    opacity: 0;
  }
}

/* Cylinder glow pulse during shaking */
@keyframes cylinderGlowPulse {
  0%, 100% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.5),
      inset 0 0 20px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(255, 215, 0, 0.2),
      inset 0 0 20px rgba(0, 0, 0, 0.3),
      inset 0 0 15px rgba(255, 215, 0, 0.1);
  }
}

/* Fortune number reveal */
@keyframes fortuneNumberReveal {
  0% {
    opacity: 0;
    transform: scale(3) rotate(10deg);
    filter: blur(8px);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(-2deg);
    filter: blur(0);
  }
  70% {
    transform: scale(0.95) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
  }
}

/* ============================================
   Fire / Burn Animations
   ============================================ */
@keyframes fireFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  30% {
    opacity: 0.9;
    transform: translateY(-50px) scale(1.1) translateX(10px);
  }
  60% {
    opacity: 0.5;
    transform: translateY(-100px) scale(0.7) translateX(-5px);
  }
  100% {
    transform: translateY(-180px) scale(0);
    opacity: 0;
  }
}

@keyframes burnTextPulse {
  0%, 100% {
    opacity: 0.5;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 20px rgba(255, 215, 0, 0.5),
      0 0 40px rgba(255, 140, 0, 0.3);
  }
}

@keyframes paperBurn {
  0% {
    clip-path: inset(0 0 0 0);
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.5) sepia(0.5);
  }
  60% {
    clip-path: inset(0 0 30% 0);
    filter: brightness(0.8) sepia(1);
  }
  100% {
    clip-path: inset(0 0 100% 0);
    filter: brightness(0.3);
    opacity: 0;
  }
}

@keyframes wishFloat {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px);
    opacity: 0;
  }
}

/* ============================================
   Button Shimmer Effect
   ============================================ */
@keyframes btnShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* Add shimmer to ritual buttons on hover */
.ritual-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.1),
    transparent
  );
  transition: none;
  pointer-events: none;
}

.ritual-btn:hover::after {
  animation: btnShimmer 1.2s ease-in-out;
}

/* ============================================
   Offering Card Selection Flash
   ============================================ */
@keyframes selectFlash {
  0% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
  }
}

.offering-card.selected .offering-card-inner {
  animation: selectFlash 0.5s ease-out;
}

/* ============================================
   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;
  }
  .smoke-particle,
  .ember-particle {
    display: none;
  }
}