/* Diwali decoration (owner, 2 Nov 2026): warm-white curtain lights, a marigold toran and akash kandils on the header, fireworks
   and falling sparkles (diwali.js), and a row of diyas around a rangoli above the footer. Loaded only while it is switched on (Organisation details →
   Festival decoration). Nothing here can be clicked: every piece lets taps through to the page underneath. */

.dw-top, .dw-top *, .dw-greet * { pointer-events: none; }

/* Warm-white curtain lights hanging from the bottom of the header, like lights down a terrace: tiny LEDs with their
   glow drawn in (no filters: those are recomputed every frame and made the page lag), and a soft glow running down
   some strands (the "falling" look) */
.dw-top { position: absolute; inset: 0; z-index: 0; }
.sv-header > :not(.dw-top) { position: relative; z-index: 1; }
.dw-curtain { position: absolute; top: calc(100% - 8px); left: 0; right: 0; height: 180px; overflow: hidden; }
.dw-curtain i { position: absolute; top: 0; width: 8px; margin-left: -4px; overflow: hidden;
  background: radial-gradient(circle at 4px 6px, #fffdf6 0 1.4px, #ffe3a3 1.9px, rgba(255, 176, 64, .6) 2.8px, rgba(255, 176, 64, .18) 3.6px, transparent 4px) 0 0 / 8px 13px,
              linear-gradient(to right, transparent 3.6px, rgba(92, 70, 48, .35) 3.6px 4.4px, transparent 4.4px);
  }
/* The running glow is only on every third strand and moves with transform alone, which the browser animates cheaply */
.dw-curtain i:nth-child(3n)::after { content: ""; position: absolute; left: 1px; top: -40px; width: 6px; height: 40px; border-radius: 3px;
  background: linear-gradient(rgba(255, 244, 214, 0), rgba(255, 244, 214, .95) 85%, #fff); animation: dw-fall var(--t) linear var(--d) infinite; }
@keyframes dw-fall { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(220px); opacity: .2; } }

/* Marigold toran hanging from the bottom of the header */
.dw-toran { position: absolute; top: calc(100% - 10px); left: 0; right: 0; height: 100px; background: url(/img/diwali/toran.svg) repeat-x center top / 280px 100px; }

/* Akash kandils (star lanterns) at both ends */
.dw-kandil { position: absolute; top: calc(100% - 4px); width: 42px; height: auto; transform-origin: 50% 0; animation: dw-swing 3.6s ease-in-out infinite; will-change: transform; }
.dw-kandil--l { left: 0; }
.dw-kandil--r { right: 0; animation-delay: -1.8s; }
/* Scrolled down: a slim garland and no kandils, so the decoration never sits over the text being read */
.dw-kandil, .sv-header.is-scrolled .dw-toran { height: 30px; background-size: 140px 50px; }
.sv-header.is-scrolled .dw-kandil, .sv-header.is-scrolled .dw-curtain { opacity: 0; }
.dw-curtain { transition: opacity .35s; }
@keyframes dw-swing { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }

/* Fireworks and falling sparkles (js/live/diwali.js): one canvas over the page, below the menu, Navya and the
   cookie banner; taps go through it */
.dw-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }

/* Diyas around a rangoli, above the footer */
.dw-greet { text-align: center; padding: 56px 16px 28px; }
.dw-greet h2 { margin: 0; font-family: 'Archivo', 'Montserrat', sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.2rem); color: #8b2b89; letter-spacing: .01em; }
.dw-greet h2 span { color: #e8590c; }
.dw-greet p { margin: 8px auto 0; max-width: 34rem; color: #334155; font-size: 1rem; line-height: 1.55; }
.dw-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2.4vw, 28px); margin-top: 26px; }
.dw-diya { position: relative; width: 56px; flex: none; }
.dw-diya img { display: block; width: 100%; height: auto; }
.dw-diya i { position: absolute; left: 50%; top: -18px; width: 11px; height: 22px; margin-left: -5.5px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 75%, #fff 0 18%, #ffe066 30%, #ff922b 62%, rgba(255, 107, 0, 0) 75%); box-shadow: 0 0 14px 6px rgba(255, 170, 0, .45); transform-origin: 50% 100%; animation: dw-flame 1.3s ease-in-out infinite alternate; }
.dw-diya:nth-child(2n) i { animation-duration: 1.05s; }
.dw-diya:nth-child(3n) i { animation-delay: -.4s; }
@keyframes dw-flame { 0% { transform: scale(1, 1) rotate(-2deg); opacity: .95; } 50% { transform: scale(.9, 1.12) rotate(2deg); } 100% { transform: scale(1.05, .94) rotate(-1deg); opacity: 1; } }
.dw-rangoli { position: relative; width: 150px; flex: none; margin: 0 6px; }
.dw-rangoli > img { display: block; width: 100%; height: auto; animation: dw-turn 60s linear infinite; }
.dw-rangoli .dw-diya { position: absolute; left: 50%; top: 50%; width: 46px; margin: -6px 0 0 -23px; }
@keyframes dw-turn { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .dw-toran { height: 72px; background-size: 202px 72px; }
  .dw-curtain { height: 64px; }
  .dw-curtain i:nth-child(2n) { display: none; }
  .dw-kandil { width: 32px; }
  .dw-diya { width: 44px; }
  .dw-row > .dw-diya:first-child, .dw-row > .dw-diya:last-child { display: none; }
  .dw-rangoli { width: 112px; }
}

/* Still decorated, but nothing moves, for visitors who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .dw-kandil, .dw-diya i, .dw-rangoli > img { animation: none !important; }
  .dw-curtain i::after { display: none; }
}