/* ==========================================================================
   Diwali header effects, on every page (loaded from website_v3/base.html):
     - a sparkler orbiting the logo         DiwaliFX.logoSparkler
     - a fuse burning round Donate Now      DiwaliFX.donateFuse
     - fireworks either side                DiwaliFX.sideFireworks
     - a brass diya either side             DiwaliFX.headerLamps
     - fireworks over every page            DiwaliFX.fireworks on .dw-screen-fx
   All live in js/festival/diwali_fx.js and add the classes below. To switch
   the effects off after the festival, remove the lines marked "Diwali header"
   in base.html.
   ========================================================================== */

/* ---------- Logo ---------------------------------------------------------- */
/* Stacking inside the .navbar-brand link: glow, back canvas, logo, front canvas,
   so the sparkler can pass behind the logo and come round in front of it. */
.dw-logo-fx {
  position: relative;  /* style.css also nudges it left:-50px at 1200–1399px */
  isolation: isolate;
}

.dw-logo-fx img {
  position: relative;
  z-index: 1;
}

/* warm glow behind the logo, breathing slowly */
.dw-logo-fx::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 194, 51, 0.4), rgba(255, 143, 31, 0.14) 60%, transparent);
  pointer-events: none;
  animation: dw-logo-glow 3.2s ease-in-out infinite;
}

@keyframes dw-logo-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* larger than the logo so sparks can fly clear of it; the mask fades them out
   before the canvas edge instead of cutting them off */
.dw-logo-fx__layer {
  position: absolute;
  top: -24px;
  left: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 48px);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
  mask-image: radial-gradient(closest-side, #000 62%, transparent);
}

.dw-logo-fx__layer--back { z-index: 0; }
.dw-logo-fx__layer--front { z-index: 2; }

/* ---------- Donate Now ---------------------------------------------------- */
/* The canvas covers the button plus 24px all round, drawn over the button
   (wherever the button shows there is more than 24px clear to its right, so no
   sideways scroll). The mask is a rectangle with soft edges so the button's
   corners stay fully visible. */
.dw-donate-fx__layer {
  position: absolute;
  top: -24px;
  left: -24px;
  z-index: 1;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent),
    linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent),
    linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-composite: intersect;
}

/* Donate Now is hidden below 992px (d-lg-block); hiding the canvas too lets the
   animation stop there. */
@media (max-width: 991.98px) {
  .dw-donate-fx__layer {
    display: none;
  }
}

/* the button flashes when the two sparks meet. A filter, because the button's
   .shadow class sets box-shadow with !important, which an animation can't touch. */
.dw-donate-lit {
  animation: dw-donate-flash 0.9s ease-out;
}

@keyframes dw-donate-flash {
  0% { filter: none; }
  20% { filter: drop-shadow(0 0 10px rgba(255, 176, 0, 0.95)) brightness(1.08); }
  100% { filter: none; }
}

/* ---------- Side fireworks ------------------------------------------------ */
/* One canvas in each white margin beside the header's 1320px container (left of
   the logo, right of Donate Now), the full height of the white nav bar. Soft
   edges, as for Donate Now, so sparks fade out instead of being cut off. */
.dw-side-fx {
  position: absolute;
  top: 0;
  width: calc((100% - 1320px) / 2);
  height: 100%;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent),
    linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent),
    linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  mask-composite: intersect;
}

.dw-side-fx--left { left: 0; }
.dw-side-fx--right { right: 0; }

/* From 1200px the nav card spans the screen (header.html), so there are no
   margins to fill; hiding the canvases also stops their animation. */
@media (min-width: 1200px) {
  .dw-side-fx {
    display: none;
  }
}

/* ---------- Side diyas ---------------------------------------------------- */
/* A clay diya at each end of the white bar on phones and tablets (sized
   below). From 1200px the diya sits in the logo pill instead (header.html). */
.dw-hdiya {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: var(--dw-lamp);
  height: calc(var(--dw-lamp) * 0.6833);  /* drawing is 120 x 82 */
  transform: translateY(-50%);
  pointer-events: none;
}

.dw-hdiya--left { left: 14px; }
.dw-hdiya--right { right: 14px; }

@media (min-width: 1200px) {
  .dw-hdiya {
    display: none;
  }
}

.dw-hdiya svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* the flame sways from its base on the wick; the glow behind it breathes */
.dw-hdiya__flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: dw-hdiya-flame 1.6s ease-in-out infinite;
}

.dw-hdiya__glow {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: dw-hdiya-glow 2.4s ease-in-out infinite;
}

.dw-hdiya--right .dw-hdiya__flame { animation-delay: -0.7s; }

@keyframes dw-hdiya-flame {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  25% { transform: scale(0.95, 1.06) skewX(2.5deg); }
  50% { transform: scale(1.03, 0.96) skewX(-2deg); }
  75% { transform: scale(0.97, 1.04) skewX(1deg); }
}

@keyframes dw-hdiya-glow {
  0%, 100% { opacity: 0.75; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .dw-hdiya__flame,
  .dw-hdiya__glow {
    animation: none;
  }
}

/* ---------- Phones and tablets (below 1200px) ----------------------------- */
/* The logo sits in the centre of the white bar (header.html): a lamp at each
   end of the bar and a fireworks show in each gap between lamp and logo. The
   logo is 112px wide up to 768px and 150px above. */
@media (max-width: 1199.98px) {
  .dw-hdiya {
    --dw-lamp: 44px;
    display: block;
  }

  .dw-side-fx {
    --dw-logo-half: 75px;
    display: block;
    width: calc(50% - var(--dw-logo-half) - 64px);
  }

  .dw-side-fx--left { left: 58px; }
  .dw-side-fx--right { right: 58px; }
}

@media (max-width: 768px) {
  .dw-side-fx {
    --dw-logo-half: 56px;
  }
}

@media (min-width: 769px) and (max-width: 1199.98px) {
  .dw-hdiya {
    --dw-lamp: 54px;
  }

  .dw-side-fx--left { left: 70px; }
  .dw-side-fx--right { right: 70px; }
}

/* ---------- Fireworks over every page ------------------------------------ */
/* One screen-sized canvas: rockets rise from the bottom of the screen and burst
   over whatever is in view, header and footer included, kept off YouTube videos
   and forms. Above the header (z-index 99), below the chat widget and pop-ups;
   taps pass through. Set up in base.html ("Diwali fireworks over every page"). */
.dw-screen-fx {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the phone menu lives inside the header, so it would sit under the fireworks
   and the header's lamps and side fireworks; hide them while it is open */
body:has(.offcanvas.show) .dw-screen-fx,
body:has(.offcanvas.showing) .dw-screen-fx,
body:has(.offcanvas.show) .dw-hdiya,
body:has(.offcanvas.showing) .dw-hdiya,
body:has(.offcanvas.hiding) .dw-hdiya,
body:has(.offcanvas.show) .dw-side-fx,
body:has(.offcanvas.showing) .dw-side-fx,
body:has(.offcanvas.hiding) .dw-side-fx {
  display: none;
}