/* =========================================================
   Festive theme: Diwali. Switched on and off from /admin
   (Festive Season tab), which only adds or removes class="diwali"
   on the <html> tag of index.html. With the class off, nothing in
   this file applies and the homepage is the normal design.
   No animated blur behind glass: glows are static gradients.
   ========================================================= */
html:not(.diwali) .dw-fx, html:not(.diwali) .dw-on { display: none !important; }
html.diwali .dw-off { display: none !important; }
html.diwali { background: #0b0509; color-scheme: dark; }   /* dark first paint */
.diwali {
  --bg: #0b0509;
  --bg-top: #2a0d1c;
  --brand-2: #ffd27a;
  --pink: #ff5fa2;
  --gold: #ffc94d;
  --grad: linear-gradient(110deg, #ffe39a 0%, #ffb23e 35%, #ff6a3d 68%, #ffe39a 100%);
  --grad-btn: linear-gradient(120deg, #ff8a1f 0%, #f0533c 50%, #d4257a 100%);
  --glass-border: rgba(255,214,130,.2);
}
/* html holds the dark first paint, so body must stay see-through or it hides the .bg layer */
.diwali body { background: transparent; }
.diwali .cursor span { background: var(--gold); box-shadow: 0 0 18px rgba(255,180,60,.8); }

/* warm night sky: static glows instead of the drifting purple blobs */
.diwali .blob { animation: none; }
.diwali .blob--1 { background: #b4351f; opacity: .42; }
.diwali .blob--2 { background: #8a1f73; opacity: .42; }
.diwali .blob--3 { background: #e0831a; opacity: .14; }
.diwali .blob--4 { background: #5b2bb5; opacity: .3; }
.diwali .bg__grid { opacity: .35; }
.diwali .bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #ffe39a, transparent),
    radial-gradient(1.2px 1.2px at 28% 68%, #ffd27a, transparent),
    radial-gradient(1.6px 1.6px at 47% 14%, #fff1c1, transparent),
    radial-gradient(1.2px 1.2px at 63% 82%, #ffd27a, transparent),
    radial-gradient(1.5px 1.5px at 78% 36%, #ffe39a, transparent),
    radial-gradient(1.2px 1.2px at 91% 60%, #fff1c1, transparent),
    radial-gradient(1.2px 1.2px at 6% 88%, #ffd27a, transparent),
    radial-gradient(1.4px 1.4px at 36% 42%, #ffe39a, transparent);
  background-size: 620px 620px;
  opacity: .75;
}

/* buttons and accents */
.diwali .btn--primary { box-shadow: 0 14px 40px -12px rgba(255,120,40,.85), inset 0 1px 0 rgba(255,255,255,.35); }
.diwali .btn--primary:hover { box-shadow: 0 18px 50px -10px rgba(255,120,40,1), inset 0 1px 0 rgba(255,255,255,.35); }
.diwali .marquee { --glass-bg: linear-gradient(90deg, rgba(255,138,31,.24), rgba(212,37,122,.22)); }
.diwali .marquee i { color: var(--gold); }
.diwali .emblem img { filter: drop-shadow(0 10px 30px rgba(255,170,70,.5)); }

/* hero */
.diwali .hero { padding-top: 146px; padding-bottom: 128px; overflow: clip; }
/* solid enough that the garland doesn't muddy the nav / stats behind the glass */
.diwali .header__inner { --glass-bg: linear-gradient(135deg, rgba(38,14,28,.82), rgba(18,7,14,.86)); }
.diwali .float { --glass-bg: linear-gradient(135deg, rgba(44,16,32,.8), rgba(20,8,16,.84)); }
.diwali .float small { color: #e8dcc8; }
.diwali .hero__media::after {
  background:
    radial-gradient(60% 55% at 78% 40%, rgba(255,120,30,.2), transparent 70%),
    linear-gradient(90deg, rgba(20,6,10,.8) 0%, rgba(40,10,20,.45) 45%, rgba(50,14,24,.2) 75%);
}
#dwFireworks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.diwali .eyebrow .dw-mini { width: 20px; height: 20px; flex: none; }
.diwali .eyebrow b { color: var(--gold); font-weight: 600; }

/* slim string of lights under the header */
.dw-toran {
  position: absolute; top: 84px; left: 0; right: 0; height: 46px; z-index: 1; pointer-events: none;
  background: url("../images/diwali/lights.svg") center top / 260px 46px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* sky lanterns */
.dw-lantern { display: none; }
.dw-lantern--l { left: 2.4%; }
.dw-lantern--r { right: 2.4%; }
.dw-lantern img { display: block; width: 100%; height: auto; }

/* rangoli behind the logo emblem (replaces the spinning orbit) */
.diwali .orbit { display: none; }
.dw-rangoli { position: absolute; inset: -5%; width: 110%; height: 110%; max-width: none; opacity: .92; pointer-events: none; }

/* row of diyas along the bottom of the hero */
.dw-diyas {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 1; pointer-events: none;
  display: flex; justify-content: center; gap: clamp(20px, 5vw, 76px);
}
.dw-diya { position: relative; width: 62px; height: 62px; }
.dw-diya::before {   /* static glow */
  content: ""; position: absolute; left: 50%; top: 22%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,60,.42), rgba(255,120,30,.12) 42%, transparent 70%);
}
.dw-diya svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.dw-flame {
  position: absolute; left: 50%; top: 2px; width: 13px; height: 25px; margin-left: -6.5px;
  border-radius: 50% 50% 50% 50% / 68% 68% 32% 32%;
  background: radial-gradient(ellipse at 50% 78%, #fffbe0 0%, #ffe066 34%, #ff9d2e 66%, #f0533c 100%);
  transform-origin: 50% 100%; animation: dwFlicker 1.7s ease-in-out infinite alternate;
}
.dw-diya:nth-child(2n) .dw-flame { animation-duration: 1.3s; animation-delay: -.5s; }
.dw-diya:nth-child(3n) .dw-flame { animation-duration: 2.1s; animation-delay: -.9s; }
@keyframes dwFlicker {
  0%   { transform: scale(1, 1) rotate(-2deg); opacity: .95; }
  50%  { transform: scale(.92, 1.1) rotate(2.5deg); opacity: 1; }
  100% { transform: scale(1.05, .93) rotate(-1deg); opacity: .9; }
}

@media (max-width: 900px) {
  .diwali .hero { padding-top: 134px; padding-bottom: 104px; }
  .dw-toran { top: 78px; height: 36px; background-size: 203px 36px; }
  .dw-diya { width: 48px; height: 48px; }
  .dw-diya:nth-child(n+6) { display: none; }
  .dw-flame { width: 10px; height: 19px; margin-left: -5px; top: 2px; }
}
@media (max-width: 480px) { .dw-diya:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .dw-flame { animation: none; } }