/* ============================================================
   DIWALI PUJA GUIDE 2026 — Keyframe Animations
   ============================================================ */

/* ================================================================
   FLAME ANIMATIONS
   ================================================================ */

@keyframes flame-outer {
  0%   { transform: scaleX(1.00) scaleY(1.00) rotate(-1.5deg) translateY( 0px); opacity: 0.90; }
  12%  { transform: scaleX(0.93) scaleY(1.06) rotate( 2.5deg) translateY(-2px); opacity: 1.00; }
  28%  { transform: scaleX(1.05) scaleY(0.96) rotate(-2.0deg) translateY( 1px); opacity: 0.83; }
  44%  { transform: scaleX(0.96) scaleY(1.05) rotate( 1.5deg) translateY(-3px); opacity: 0.96; }
  60%  { transform: scaleX(1.03) scaleY(0.97) rotate(-1.0deg) translateY( 0px); opacity: 1.00; }
  76%  { transform: scaleX(0.94) scaleY(1.04) rotate( 2.2deg) translateY(-2px); opacity: 0.88; }
  90%  { transform: scaleX(1.04) scaleY(0.97) rotate(-1.5deg) translateY( 1px); opacity: 0.84; }
  100% { transform: scaleX(1.00) scaleY(1.00) rotate(-1.5deg) translateY( 0px); opacity: 0.90; }
}

@keyframes flame-mid {
  0%, 100% { transform: scaleX(1.00) scaleY(1.00) rotate( 1.0deg); opacity: 0.82; }
  18%       { transform: scaleX(1.09) scaleY(0.93) rotate(-2.2deg); opacity: 0.96; }
  38%       { transform: scaleX(0.91) scaleY(1.08) rotate( 2.8deg); opacity: 0.75; }
  62%       { transform: scaleX(1.06) scaleY(0.94) rotate(-1.6deg); opacity: 0.91; }
  80%       { transform: scaleX(0.95) scaleY(1.05) rotate( 1.2deg); opacity: 0.80; }
}

@keyframes flame-inner {
  0%, 100% { transform: scaleY(1.00) scaleX(1.00); opacity: 0.86; }
  25%       { transform: scaleY(1.11) scaleX(0.90); opacity: 1.00; }
  50%       { transform: scaleY(0.94) scaleX(1.06); opacity: 0.79; }
  75%       { transform: scaleY(1.06) scaleX(0.94); opacity: 0.92; }
}

@keyframes flame-core {
  0%, 100% { transform: scale(1.00); opacity: 0.72; }
  50%       { transform: scale(1.18); opacity: 0.95; }
}

@keyframes flame-glow {
  0%, 100% {
    filter: drop-shadow(0 0  8px rgba(255,140,0,0.85))
            drop-shadow(0 0 22px rgba(245,166,35,0.60))
            drop-shadow(0 0 55px rgba(245,166,35,0.28));
  }
  40% {
    filter: drop-shadow(0 0 14px rgba(255,100,0,0.90))
            drop-shadow(0 0 36px rgba(245,166,35,0.82))
            drop-shadow(0 0 75px rgba(245,166,35,0.40));
  }
  70% {
    filter: drop-shadow(0 0 10px rgba(255,200,0,0.85))
            drop-shadow(0 0 28px rgba(255,215,0,0.75))
            drop-shadow(0 0 60px rgba(245,166,35,0.35));
  }
}

/* ================================================================
   SPARK / PARTICLE ANIMATIONS
   ================================================================ */

@keyframes spark-1 {
  0%   { transform: translateY(0)    translateX( 0px) scale(1.2); opacity: 1.0; }
  70%  { opacity: 0.7; }
  100% { transform: translateY(-190px) translateX(18px)  scale(0); opacity: 0.0; }
}
@keyframes spark-2 {
  0%   { transform: translateY(0)    translateX( 0px) scale(0.9); opacity: 0.9; }
  65%  { opacity: 0.6; }
  100% { transform: translateY(-155px) translateX(-22px) scale(0); opacity: 0.0; }
}
@keyframes spark-3 {
  0%   { transform: translateY(0)    translateX( 0px) scale(1.1); opacity: 1.0; }
  55%  { opacity: 0.8; }
  100% { transform: translateY(-215px) translateX(28px)  scale(0); opacity: 0.0; }
}
@keyframes spark-4 {
  0%   { transform: translateY(0)    translateX( 0px) scale(0.8); opacity: 0.8; }
  60%  { opacity: 0.5; }
  100% { transform: translateY(-165px) translateX(-12px) scale(0); opacity: 0.0; }
}
@keyframes spark-5 {
  0%   { transform: translateY(0)    translateX( 0px) scale(1.0); opacity: 1.0; }
  50%  { opacity: 0.65; }
  100% { transform: translateY(-230px) translateX(32px)  scale(0); opacity: 0.0; }
}
@keyframes spark-6 {
  0%   { transform: translateY(0)    translateX( 0px) scale(1.3); opacity: 0.9; }
  60%  { opacity: 0.5; }
  100% { transform: translateY(-145px) translateX(-30px) scale(0); opacity: 0.0; }
}
@keyframes spark-7 {
  0%   { transform: translateY(0)    translateX( 0px) scale(0.7); opacity: 0.7; }
  55%  { opacity: 0.4; }
  100% { transform: translateY(-175px) translateX( 8px)  scale(0); opacity: 0.0; }
}

/* ================================================================
   RANGOLI ANIMATIONS
   ================================================================ */

@keyframes rangoli-pulse {
  0%, 100% {
    transform: scale(1.00) rotate(0deg);
    filter: drop-shadow(0 0 10px rgba(245,166,35,0.28));
    opacity: 0.55;
  }
  50% {
    transform: scale(1.05) rotate(1.5deg);
    filter: drop-shadow(0 0 22px rgba(245,166,35,0.55));
    opacity: 0.70;
  }
}

@keyframes rangoli-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rangoli-spin-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ================================================================
   FIREWORKS
   ================================================================ */

@keyframes fw-shoot {
  0%   { opacity: 1; transform: translateY(0) scaleY(1); }
  100% { opacity: 0; transform: translateY(var(--fy, -240px)) scaleY(0.4); }
}

@keyframes fw-burst {
  0%   { opacity: 1; transform: scale(0) rotate(var(--fr, 0deg)); }
  50%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(var(--fs, 1.2)) rotate(var(--fr, 0deg)); }
}

@keyframes fw-ray {
  0%   { opacity: 1; width: 0;   }
  50%  { opacity: 0.8; }
  100% { opacity: 0; width: var(--rl, 80px); }
}

/* ================================================================
   TEXT & SHIMMER
   ================================================================ */

@keyframes text-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--gold-primary) 0%,
    var(--gold-bright)  20%,
    var(--cream-white)  50%,
    var(--gold-bright)  80%,
    var(--gold-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 3.5s linear infinite;
}

/* ================================================================
   ENTRANCE ANIMATIONS
   ================================================================ */

@keyframes fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-up  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-dn  { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scale-in    { from { opacity: 0; transform: scale(0.87); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-left  { from { opacity: 0; transform: translateX(-35px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-right { from { opacity: 0; transform: translateX( 35px); } to { opacity: 1; transform: translateX(0); } }

/* ================================================================
   GLOW / PULSE
   ================================================================ */

@keyframes glow-gold {
  0%, 100% { box-shadow: 0 0 12px rgba(245,166,35,0.22), 0 0 35px rgba(245,166,35,0.08); }
  50%       { box-shadow: 0 0 22px rgba(245,166,35,0.45), 0 0 65px rgba(245,166,35,0.20); }
}
@keyframes glow-amber {
  0%, 100% { box-shadow: 0 0 16px rgba(255,140,0,0.28); }
  50%       { box-shadow: 0 0 32px rgba(255,140,0,0.55), 0 0 65px rgba(255,140,0,0.20); }
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1.00); }
  50%       { opacity: 0.45; transform: scale(1.08); }
}

/* ================================================================
   FLOATING / SWAYING
   ================================================================ */

@keyframes float-up   { 0%, 100% { transform: translateY( 0px); } 50% { transform: translateY(-10px); } }
@keyframes float-down { 0%, 100% { transform: translateY( 0px); } 50% { transform: translateY( 8px); } }
@keyframes sway       { 0%, 100% { transform: rotate(-2deg); }    50% { transform: rotate( 2deg); } }
@keyframes diya-bob   { 0%, 100% { transform: translateY( 0px) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }

/* ================================================================
   SCROLL-TRIGGERED REVEAL
   ================================================================ */

.anim-ready          { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; }
.anim-ready.visible  { opacity: 1; transform: none !important; }

.anim-up    { transform: translateY(30px); }
.anim-down  { transform: translateY(-20px); }
.anim-left  { transform: translateX(-30px); }
.anim-right { transform: translateX( 30px); }
.anim-scale { transform: scale(0.90); }

.d1 { transition-delay: 0.10s; }
.d2 { transition-delay: 0.20s; }
.d3 { transition-delay: 0.30s; }
.d4 { transition-delay: 0.40s; }
.d5 { transition-delay: 0.50s; }
.d6 { transition-delay: 0.60s; }

/* ================================================================
   NAV ANIMATION
   ================================================================ */

@keyframes nav-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(   0%); opacity: 1; }
}

/* ================================================================
   DIYA AMBIENT HALO
   ================================================================ */

@keyframes diya-halo {
  0%, 100% {
    box-shadow:
      0 0  60px rgba(255,140,0,0.30),
      0 0 120px rgba(245,166,35,0.18),
      0 0 200px rgba(245,166,35,0.08);
  }
  50% {
    box-shadow:
      0 0  85px rgba(255,140,0,0.50),
      0 0 165px rgba(245,166,35,0.30),
      0 0 260px rgba(245,166,35,0.12);
  }
}

/* ================================================================
   HERO DIYA MINI INDICATOR
   ================================================================ */

@keyframes diya-nav-flicker {
  0%, 100% { opacity: 1.0; }
  33%       { opacity: 0.75; }
  66%       { opacity: 0.90; }
}

/* ================================================================
   PAGE-LOAD FIREWORKS (play once)
   ================================================================ */

@keyframes burst-ring {
  0%   { transform: scale(0); opacity: 1;   }
  70%  { opacity: 0.6; }
  100% { transform: scale(var(--ring-size, 3)); opacity: 0; }
}