/*
 * ApniSite Celebration animations — landing-side stylesheet.
 * Mirrors the <style is:global> block in shared/components/Celebration.astro.
 */
#apnisite-celebration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  will-change: opacity;
}
#apnisite-celebration.fade-out {
  opacity: 0;
  transition: opacity 0.6s ease;
}
#apnisite-celebration .toast {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%) translateY(40px);
  background: rgba(0, 0, 0, 0.78);
  color: white;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: 'Inter', 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.45;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  opacity: 0;
  animation: apnisite-toast 2.0s ease-out forwards;
  animation-delay: 0.8s;
  max-width: min(520px, 90vw);
}
#apnisite-celebration .toast .hi {
  display: block;
  font-size: 1.05rem;
  font-family: 'Noto Sans Devanagari', sans-serif;
  margin-bottom: 0.15rem;
}
@keyframes apnisite-toast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(40px); }
  25%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

/* ====== MARIGOLD ====== */
#apnisite-celebration .petal,
#apnisite-celebration .confetti {
  position: absolute;
  top: -8%;
  will-change: transform, opacity;
}
#apnisite-celebration .petal {
  width: var(--sz, 80px);
  height: var(--sz, 80px);
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(180, 80, 0, 0.18));
  animation: apnisite-fall var(--dur, 2.4s) ease-in forwards;
  animation-delay: var(--del, 0s);
}
#apnisite-celebration .confetti {
  width: var(--sz, 14px);
  height: var(--sz, 14px);
  object-fit: contain;
  animation: apnisite-confetti var(--dur, 2.6s) ease-in forwards;
  animation-delay: var(--del, 0s);
}
@keyframes apnisite-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(var(--r0, 0deg)); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0px), 110vh, 0) rotate(var(--r1, 360deg)); opacity: 0.9; }
}
@keyframes apnisite-confetti {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0px), 110vh, 0) rotate(720deg); opacity: 0.85; }
}

/* ====== DIYA ====== */
#apnisite-celebration .diya-stage {
  position: absolute;
  inset: auto 0 0 0;
  height: 40vh;
}
#apnisite-celebration .glow {
  position: absolute;
  bottom: 4vh;
  width: 280px;
  height: 280px;
  object-fit: contain;
  opacity: 0;
  animation: apnisite-glow 2.4s ease-out forwards;
  animation-delay: var(--del, 0s);
  transform: translateX(-50%);
  mix-blend-mode: screen;
}
@keyframes apnisite-glow {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.6); }
  50%  { opacity: 0.9; transform: translateX(-50%) scale(1); }
  100% { opacity: 0.65; transform: translateX(-50%) scale(1.05); }
}
#apnisite-celebration .diya {
  position: absolute;
  bottom: 8vh;
  width: 110px;
  height: 82px;
  object-fit: contain;
  opacity: 0;
  transform: translateX(-50%) translateY(60px);
  animation: apnisite-diya-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--del, 0s);
  filter: drop-shadow(0 8px 16px rgba(120, 70, 0, 0.4));
}
@keyframes apnisite-diya-rise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(60px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#apnisite-celebration .flame {
  position: absolute;
  bottom: 16vh;
  width: 30px;
  height: 50px;
  object-fit: contain;
  opacity: 0;
  transform: translateX(-50%) scale(0.4);
  animation: apnisite-flame-ignite 0.6s ease-out forwards;
  animation-delay: var(--del, 0.4s);
  filter: drop-shadow(0 0 12px rgba(255, 180, 60, 0.85));
}
@keyframes apnisite-flame-ignite {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.4); }
  50%  { opacity: 1; transform: translateX(-50%) scale(1.15); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
#apnisite-celebration .rangoli {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 5vh;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  animation: apnisite-rangoli 1.4s ease-out forwards;
  animation-delay: 1.0s;
}
@keyframes apnisite-rangoli {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 0.92; transform: translateY(0); }
}

/* ====== PATAKA ====== */
#apnisite-celebration .streak {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 240px;
  object-fit: contain;
  opacity: 0;
  animation: apnisite-streak 0.45s ease-out forwards;
  animation-delay: var(--del, 0s);
  transform-origin: bottom center;
}
#apnisite-celebration .streak.left  { left: 12vw;  animation-name: apnisite-streak-l; }
#apnisite-celebration .streak.right { right: 12vw; animation-name: apnisite-streak-r; }
@keyframes apnisite-streak-l {
  0%   { opacity: 0; transform: translate3d(0, 60vh, 0) rotate(-22deg) scaleY(0.4); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(35vw, 0, 0) rotate(-22deg) scaleY(1.1); }
}
@keyframes apnisite-streak-r {
  0%   { opacity: 0; transform: translate3d(0, 60vh, 0) rotate(22deg) scaleY(0.4); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-35vw, 0, 0) rotate(22deg) scaleY(1.1); }
}
#apnisite-celebration .sparkle {
  position: absolute;
  width: var(--sz, 26px);
  height: var(--sz, 26px);
  object-fit: contain;
  opacity: 0;
  animation: apnisite-sparkle var(--dur, 1.6s) ease-out forwards;
  animation-delay: var(--del, 0.45s);
  will-change: transform, opacity;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.6));
}
@keyframes apnisite-sparkle {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  20%  { opacity: 1; transform: translate3d(calc(var(--dx, 0px) * 0.4), calc(var(--dy, 0px) * 0.4), 0) scale(1); }
  70%  { opacity: 0.9; transform: translate3d(var(--dx, 0px), calc(var(--dy, 0px) + 30px), 0) scale(0.95); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), calc(var(--dy, 0px) + 80px), 0) scale(0.6); }
}
#apnisite-celebration .bunting {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  animation: apnisite-bunting 1.6s ease-out forwards;
  animation-delay: 0.2s;
}
@keyframes apnisite-bunting {
  0%   { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 0.94; transform: translateY(0); }
}

/* ====== HOLI ====== */
#apnisite-celebration .gulal {
  position: absolute;
  bottom: -10%;
  width: var(--sz, 220px);
  height: var(--sz, 220px);
  object-fit: contain;
  opacity: 0;
  animation: apnisite-gulal var(--dur, 2.6s) ease-out forwards;
  animation-delay: var(--del, 0s);
  filter: blur(0px) drop-shadow(0 0 12px rgba(0, 0, 0, 0.08));
  will-change: transform, opacity;
}
@keyframes apnisite-gulal {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
  25%  { opacity: 0.95; transform: translate3d(var(--dx, 0px), -20vh, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), -40vh, 0) scale(1.4); }
}