/* Diwali festival theme – loaded only while site.festival is active (see app.js `festival`). Remove nothing else to switch off. */
:root {
  --dw-gold: #f6c453;
  --dw-gold-2: #ffe7a3;
  --dw-maroon: #5b0f24;
  --dw-night: #1b0b2e;
  --dw-saffron: #ff8a1f;
}

/* ---------- topbar: maroon + gold ---------- */
.fest-diwali .topbar { background: linear-gradient(90deg, #4a0b1d, #7a1630 50%, #4a0b1d); color: #ffe7b0; }
.fest-diwali .topbar a:hover { color: #fff; }
.fest-diwali .topbar .i { color: var(--dw-gold); opacity: 1; }
.fest-diwali .topbar-note { font-weight: 600; }

/* ---------- toran (marigold garland) hanging under the sticky header ---------- */
.fest-diwali .header { border-bottom-color: #f1d9a6; }
.fest-diwali .header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; pointer-events: none;
  background: url("diwali/toran.svg?v=1") repeat-x 0 0 / 84px 41px;
  filter: drop-shadow(0 2px 2px rgba(120, 60, 0, .18));
  transform-origin: top center; animation: dw-sway 6s ease-in-out infinite;
}
@media (min-width: 992px) { .fest-diwali .header::after { height: 44px; background-size: 110px 53px; } }
/* the header collapses on scroll (mobile); the garland goes with it. Push page content clear of the garland. */
.fest-diwali #main { padding-top: 24px; }
@media (min-width: 992px) { .fest-diwali #main { padding-top: 34px; } }

/* ---------- home hero ---------- */
.dw-hero {
  position: relative; overflow: hidden; isolation: isolate; margin: 10px 0 0; border-radius: var(--r-lg);
  color: #fff3dc; padding: 26px 18px 0; min-height: 360px; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(255, 166, 0, .55), rgba(255, 120, 0, .12) 45%, transparent 70%),
    radial-gradient(60% 50% at 85% 10%, rgba(196, 40, 90, .45), transparent 70%),
    radial-gradient(50% 40% at 10% 20%, rgba(110, 50, 200, .35), transparent 70%),
    linear-gradient(180deg, #160828 0%, #2a0c3a 45%, #5b0f24 100%);
  box-shadow: 0 18px 40px rgba(60, 10, 30, .28), inset 0 0 0 1px rgba(246, 196, 83, .35);
}
.dw-hero::before { /* thin gold frame */
  content: ""; position: absolute; inset: 8px; border-radius: calc(var(--r-lg) - 6px); pointer-events: none; z-index: 1;
  border: 1px solid rgba(246, 196, 83, .35);
}
.dw-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.dw-rangoli { position: absolute; width: 230px; height: 230px; opacity: .22; animation: dw-spin 90s linear infinite; }
.dw-rangoli-l { left: -95px; top: -80px; }
.dw-rangoli-r { right: -110px; bottom: 30px; opacity: .16; animation-direction: reverse; }

.dw-kandils { position: absolute; top: 0; right: 10px; display: flex; gap: 6px; }
.dw-kandil { width: 34px; height: auto; transform-origin: 50% 0; animation: dw-swing 4.2s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 120, 60, .55)); }
.dw-kandil:nth-child(2) { width: 44px; animation-delay: -1.4s; animation-duration: 5s; }
.dw-kandil:nth-child(3) { width: 30px; animation-delay: -2.6s; display: none; }

.dw-sparks i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff6d6; box-shadow: 0 0 6px 2px rgba(255, 214, 120, .8); opacity: 0; animation: dw-twinkle 3.2s ease-in-out infinite; }
.dw-sparks i:nth-child(1) { left: 8%; top: 14%; animation-delay: 0s; }
.dw-sparks i:nth-child(2) { left: 18%; top: 38%; animation-delay: .7s; }
.dw-sparks i:nth-child(3) { left: 27%; top: 9%; animation-delay: 1.5s; }
.dw-sparks i:nth-child(4) { left: 36%; top: 28%; animation-delay: 2.2s; }
.dw-sparks i:nth-child(5) { left: 44%; top: 6%; animation-delay: .4s; }
.dw-sparks i:nth-child(6) { left: 52%; top: 22%; animation-delay: 1.1s; }
.dw-sparks i:nth-child(7) { left: 61%; top: 12%; animation-delay: 2.6s; }
.dw-sparks i:nth-child(8) { left: 69%; top: 34%; animation-delay: .9s; }
.dw-sparks i:nth-child(9) { left: 77%; top: 18%; animation-delay: 1.8s; }
.dw-sparks i:nth-child(10) { left: 88%; top: 40%; animation-delay: .2s; }
.dw-sparks i:nth-child(11) { left: 93%; top: 60%; animation-delay: 2.9s; }
.dw-sparks i:nth-child(12) { left: 4%; top: 58%; animation-delay: 1.3s; }
.dw-sparks i:nth-child(13) { left: 58%; top: 48%; animation-delay: 2s; width: 2px; height: 2px; }
.dw-sparks i:nth-child(14) { left: 31%; top: 52%; animation-delay: .5s; width: 2px; height: 2px; }
.dw-sparks i:nth-child(15) { left: 82%; top: 6%; animation-delay: 2.4s; width: 4px; height: 4px; }
.dw-sparks i:nth-child(16) { left: 13%; top: 4%; animation-delay: 1.7s; width: 2px; height: 2px; }
.dw-sparks i:nth-child(17) { left: 47%; top: 40%; animation-delay: 3s; width: 2px; height: 2px; }
.dw-sparks i:nth-child(18) { left: 73%; top: 54%; animation-delay: .1s; width: 2px; height: 2px; }

.dw-copy { position: relative; z-index: 2; max-width: 620px; }
.dw-eyebrow { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dw-gold); padding: 4px 10px; border: 1px solid rgba(246, 196, 83, .45); border-radius: 999px; background: rgba(246, 196, 83, .08); }
.dw-title {
  margin: 12px 0 2px; font-size: 2.35rem; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; color: var(--dw-gold);
  background: linear-gradient(180deg, #fff6d0 0%, #ffd56a 45%, #f0a020 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(255, 170, 40, .35));
}
.dw-hindi { margin: 0 0 10px; font: 700 1.35rem/1.3 "Nirmala UI", "Noto Sans Devanagari", "Mangal", "Kohinoor Devanagari", sans-serif; color: #ffd9a0; letter-spacing: .02em; }
.dw-text { margin: 0 0 16px; color: #f3dfc6; font-size: .93rem; max-width: 520px; }
.dw-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.dw-cta .btn { min-height: 44px; }
/* phones: short copy, buttons side by side, small lanterns that keep clear of the title */
@media (max-width: 575px) {
  .dw-more, .dw-sm-hide { display: none; }
  .dw-cta .btn { flex: 1 1 0; padding: 10px 8px; font-size: .9rem; text-transform: capitalize; }
  .dw-title { font-size: 2.15rem; }
  .dw-copy { padding-right: 64px; }
  .dw-kandils { right: 8px; gap: 4px; }
  .dw-kandil { width: 26px; } .dw-kandil:nth-child(2) { width: 32px; }
  .dw-hero { min-height: 0; padding-top: 22px; }
  .dw-diyas { padding-top: 14px; }
}
.dw-btn-gold { background: linear-gradient(180deg, #ffe08a, #f2b230); color: #4a1a05; box-shadow: 0 6px 18px rgba(242, 178, 48, .35); }
.dw-btn-gold:hover { background: linear-gradient(180deg, #ffe9a8, #f6be45); color: #3a1403; }

.dw-diyas { position: relative; z-index: 2; margin-top: auto; padding-top: 22px; display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.dw-diya { position: relative; display: block; width: 46px; height: 44px; }
.dw-diya:nth-child(n+6) { display: none; }
.dw-lamp { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.dw-flame { position: absolute; left: 50%; bottom: 17px; width: 16px; height: auto; margin-left: -8px; transform-origin: 50% 85%; animation: dw-flicker 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgba(255, 180, 60, .9)); }
.dw-diya:nth-child(2) .dw-flame { animation-delay: -.4s; animation-duration: 1.3s; }
.dw-diya:nth-child(3) .dw-flame { animation-delay: -.9s; animation-duration: 1.8s; }
.dw-diya:nth-child(4) .dw-flame { animation-delay: -.2s; animation-duration: 1.4s; }
.dw-diya:nth-child(5) .dw-flame { animation-delay: -1.1s; animation-duration: 1.7s; }
.dw-diya:nth-child(6) .dw-flame { animation-delay: -.6s; animation-duration: 1.5s; }
.dw-diya:nth-child(7) .dw-flame { animation-delay: -1.3s; animation-duration: 1.9s; }
.dw-diya:nth-child(4) { width: 58px; height: 52px; }
.dw-diya:nth-child(4) .dw-flame { width: 20px; margin-left: -10px; bottom: 21px; }

@media (min-width: 576px) {
  .dw-hero { padding: 30px 30px 0; min-height: 330px; }
  .dw-title { font-size: 2.9rem; }
  .dw-kandil:nth-child(3) { display: block; }
  .dw-kandil { width: 40px; } .dw-kandil:nth-child(2) { width: 52px; } .dw-kandil:nth-child(3) { width: 36px; }
  .dw-diya:nth-child(n+6) { display: block; }
  .dw-diya { width: 56px; height: 50px; }
}
@media (min-width: 992px) {
  .dw-hero { margin-top: 10px; padding: 40px 48px 0; min-height: 340px; }
  .dw-copy { max-width: 560px; }
  .dw-title { font-size: 3.6rem; }
  .dw-hindi { font-size: 1.6rem; }
  .dw-text { font-size: 1rem; }
  .dw-kandils { right: 60px; gap: 26px; }
  .dw-kandil { width: 56px; } .dw-kandil:nth-child(2) { width: 72px; } .dw-kandil:nth-child(3) { width: 48px; }
  .dw-rangoli { width: 340px; height: 340px; }
  .dw-rangoli-l { left: -150px; top: -150px; }
  .dw-rangoli-r { right: 250px; bottom: -190px; }
  /* diyas sit on the right half under the lanterns */
  .dw-diyas { position: absolute; right: 40px; bottom: 0; gap: 10px; }
  .dw-diya { width: 72px; height: 62px; } .dw-flame { width: 20px; margin-left: -10px; bottom: 24px; }
  .dw-diya:nth-child(4) { width: 92px; height: 78px; } .dw-diya:nth-child(4) .dw-flame { width: 26px; margin-left: -13px; bottom: 30px; }
  .dw-hero + .hero { margin-top: 14px; }
}

/* ---------- sitewide touches ---------- */
.fest-diwali .eyebrow { color: #c0640a; display: inline-flex; align-items: center; gap: 5px; }
.fest-diwali .eyebrow::before { content: ""; width: 15px; height: 15px; flex: none; background: url("diwali/diya-icon.svg?v=1") center / contain no-repeat; }
.fest-diwali .cat-img { background: linear-gradient(160deg, #fffaf0, #fbefdc); border-color: #f3e2c2; }
.fest-diwali .cat-tile:hover .cat-img { box-shadow: 0 8px 20px rgba(240, 160, 40, .28), 0 0 0 1px #f2c46b; }
.fest-diwali .main > .wrap > .panel:first-child, .fest-diwali .panel { border-top: 2px solid #f6d48a; }

/* ---------- footer: string of fairy lights + greeting ---------- */
.fest-diwali .footer { position: relative; padding-top: 46px; background: linear-gradient(180deg, #1c0d12 0, #111512 140px); }
.fest-diwali .footer::before { /* the wire */
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 14px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0, transparent 62%, #3d2a1a 64%, #3d2a1a 72%, transparent 74%) repeat-x 0 0 / 36px 14px;
}
.fest-diwali .footer::after { /* the bulbs */
  content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 12px; pointer-events: none;
  background:
    radial-gradient(circle at 9px 6px, #ffd34d 0 3.5px, rgba(255, 211, 77, .45) 4.5px, transparent 8px) repeat-x 0 0 / 36px 12px,
    radial-gradient(circle at 27px 6px, #ff5d7a 0 3.5px, rgba(255, 93, 122, .45) 4.5px, transparent 8px) repeat-x 0 0 / 36px 12px;
  animation: dw-bulbs 1.8s steps(2, jump-none) infinite;
}
.dw-footer-wish { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; text-align: center; color: #ffe2a8; font-weight: 650; background: linear-gradient(90deg, rgba(246, 196, 83, .05), rgba(246, 196, 83, .14), rgba(246, 196, 83, .05)); border: 1px solid rgba(246, 196, 83, .25); }
.dw-footer-wish img { width: 26px; height: 26px; flex: none; }

/* ---------- animations ---------- */
@keyframes dw-flicker {
  0% { transform: scale(1, 1) rotate(-2deg); opacity: .95; }
  35% { transform: scale(.94, 1.08) rotate(2deg); opacity: 1; }
  70% { transform: scale(1.04, .95) rotate(-1deg); opacity: .9; }
  100% { transform: scale(.97, 1.05) rotate(1.5deg); opacity: 1; }
}
@keyframes dw-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@keyframes dw-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes dw-sway { 0%, 100% { transform: skewX(0) translateY(0); } 50% { transform: skewX(.6deg) translateY(1px); } }
@keyframes dw-spin { to { transform: rotate(360deg); } }
@keyframes dw-bulbs { 0% { filter: brightness(1.15); } 100% { filter: brightness(.7) saturate(.8); } }

@media (prefers-reduced-motion: reduce) {
  .dw-hero *, .fest-diwali .header::after, .fest-diwali .footer::after { animation: none !important; }
  .dw-sparks i { opacity: .7; }
}
@media print { .dw-hero, .dw-footer-wish { display: none !important; } .fest-diwali .header::after, .fest-diwali .footer::before, .fest-diwali .footer::after { display: none; } }