/* Diwali 2026: the reader site's festival skin, for 8 November only.
   Loaded by templates/newsroom/includes/diwali_head.html when
   newsroom_web/festival.py says so; every rule hangs off body.is-diwali, so the
   file does nothing on a page without it. After the owner's reference
   (a light page: cream ground, white cards on amber rules, a red-to-amber bar
   over the masthead, an orange accent, deep maroon only for the diya box),
   with Rozha One for Devanagari headlines and Mukta for Devanagari text.
   The PT24 wordmark is the package's and is never redrawn: two lit diyas
   stand beside it. */

body.is-diwali {
  --paper: #FFFDF7;
  --wash-warm: #FFFBEB;
  --rule: #F3E2B8;
  --dw-amber: #F59E0B;
  --dw-amber-7: #B45309;
  --dw-amber-8: #92400E;
  --dw-line: #FDE68A;
  --dw-wine: #7F1D1D;
}
body.is-diwali [lang="hi"], body.is-diwali [lang="mr"], body.is-diwali:lang(hi), body.is-diwali:lang(mr) {
  --serif: 'Newsreader', 'Rozha One', 'Noto Serif Devanagari', 'Noto Sans Devanagari', Georgia, 'Noto Sans Kannada', serif;
  --sans: 'Roboto', 'Mukta', 'Noto Sans Devanagari', 'Noto Sans Kannada', system-ui, sans-serif;
}
/* Rozha One has one weight; a 700 headline must not be smeared into a fake bold. */
body.is-diwali h1, body.is-diwali h2, body.is-diwali h3, body.is-diwali h4 { font-synthesis: none; }
body.is-diwali .masthead { border-bottom: 2px solid var(--dw-amber); background: #FFFFFF; }

/* the toran and the greeting bar, above the masthead */
.dw-garland { height: 10px; background: radial-gradient(#F97316 40%, #B45309 70%, transparent 72%) 0 0 / 20px 20px, radial-gradient(#FBBF24 40%, #D97706 70%, transparent 72%) 10px 0 / 20px 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.dw-bar { background: linear-gradient(90deg, #7F1D1D, #92400E 50%, #450A0A); color: #FEF3C7; font-size: 13px; border-bottom: 1px solid rgba(245, 158, 11, .3); }
.dw-bar .shell { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; }
.dw-bar .dw-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dw-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; background: #F59E0B; color: #1C1917; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 2px 10px; animation: dw-glow 2.4s ease-in-out infinite; }
.dw-greet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(253, 230, 138, .92); display: none; }
@media (min-width: 720px) { .dw-greet { display: block; } }
.dw-cta-sm { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(251, 191, 36, .5); background: rgba(245, 158, 11, .2); color: #FDE68A; border-radius: 999px; padding: 3px 12px 3px 8px; font-weight: 700; font-size: 12.5px; text-decoration: none; }
.dw-cta-sm:hover { background: rgba(245, 158, 11, .4); color: #FFF; }
.dw-pill svg, .dw-cta-sm svg { width: 16px; height: 17px; }

/* the two diyas beside the wordmark */
body.is-diwali .masthead-mark { display: flex; align-items: center; gap: 4px; }
.dw-diya { flex: none; display: inline-block; width: 26px; height: 29px; }
.dw-diya svg { width: 100%; height: 100%; overflow: visible; }
@media (min-width: 900px) { .dw-diya { width: 32px; height: 35px; } }

/* the lit flame, the same drawing everywhere */
.dw-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dw-flick 1.7s ease-in-out infinite; }
.dw-halo { animation: dw-breathe 2.6s ease-in-out infinite; }
.dw-diya.r .dw-flame { animation-delay: -.8s; }
.dw-lamp .dw-flame, .dw-lamp .dw-halo { opacity: 0; transform: scale(.2); transition: opacity .35s, transform .45s cubic-bezier(.2, 1.6, .4, 1); animation: none; }
.dw-lamp.is-lit .dw-flame { opacity: 1; transform: none; animation: dw-flick 1.6s ease-in-out infinite; }
.dw-lamp.is-lit .dw-halo { opacity: 1; transform: none; animation: dw-breathe 2.6s ease-in-out infinite; }

/* the front page's festival band */
.dw-band { display: grid; gap: 14px; margin: 16px 0 6px; }
@media (min-width: 900px) { .dw-band { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; } }
.dw-hello { position: relative; overflow: hidden; border: 1px solid var(--dw-line); border-radius: 18px; padding: 18px 18px 16px; background: linear-gradient(135deg, #FFFBEB, #FFFFFF 55%, #FEF3C7); }
.dw-hello::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(rgba(245, 158, 11, .25), transparent 70%); }
.dw-eyebrow { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #B91C1C; background: #FFFFFF; border: 1px solid var(--dw-line); border-radius: 999px; padding: 2px 10px; }
.dw-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #DC2626; animation: dw-ping 1.6s infinite; }
.dw-shubh { position: relative; font-family: 'Rozha One', 'Noto Serif Devanagari', serif; font-weight: 400; font-synthesis: none; font-size: clamp(44px, 12vw, 76px); line-height: 1.2; margin: 6px 0 2px; padding-top: 6px; background: linear-gradient(180deg, #F59E0B, #DC2626 60%, #92400E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dw-sub { position: relative; font-size: 15px; color: #57534E; margin: 0; }
.dw-sub b { color: #92400E; }
.dw-mu { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: #92400E; }
.dw-clock { font-family: Roboto, sans-serif; background: #7F1D1D; color: #FEF3C7; border-radius: 999px; padding: 2px 11px; letter-spacing: .03em; }
.dw-live { color: #047857; }
.dw-box { position: relative; overflow: hidden; border-radius: 18px; padding: 16px; text-align: center; color: #FEF3C7; background: linear-gradient(135deg, #450A0A, #1C1917 50%, #451A03); border: 2px solid rgba(245, 158, 11, .6); box-shadow: 0 10px 25px -10px #450A0A; }
.dw-box h2 { font-family: 'Rozha One', 'Noto Serif Devanagari', serif; font-weight: 400; font-size: 21px; line-height: 1.35; color: #FDE047; margin: 2px 0 2px; }
.dw-box p { margin: 0; font-size: 13px; color: rgba(253, 230, 138, .82); }
.dw-lamps { display: flex; justify-content: center; gap: 6px; margin: 12px 0 6px; }
.dw-lamp { width: 48px; height: 53px; padding: 0; border: 0; background: none; cursor: pointer; }
.dw-lamp svg { width: 100%; height: 100%; overflow: visible; }
.dw-lamp:active { transform: scale(.92); }
.dw-hint { display: inline-block; font-size: 12px; color: #FCD34D; background: rgba(0, 0, 0, .4); border: 1px solid rgba(251, 191, 36, .3); border-radius: 999px; padding: 1px 10px; margin-bottom: 12px; }
.dw-go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 12px; background: linear-gradient(100deg, #FCD34D, #F59E0B); color: #1C1917; font-weight: 800; font-size: 15px; text-decoration: none; }
.dw-go:hover { color: #1C1917; filter: brightness(1.05); }
.dw-go svg { width: 18px; height: 18px; }

#dw-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147483000; }

@keyframes dw-flick { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 25% { transform: scale(1.06, .94) rotate(2deg); } 50% { transform: scale(.95, 1.07) rotate(-1deg); } 75% { transform: scale(1.03, 1) rotate(2deg); } }
@keyframes dw-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes dw-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 0 14px 2px rgba(245, 158, 11, .45); } }
@keyframes dw-ping { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 100% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) { .dw-flame, .dw-halo, .dw-pill, .dw-eyebrow i { animation: none !important; } }

/* the phone's top bar: one diya after the compact mark */
body.is-diwali .mtop-mark { display: flex; align-items: center; gap: 4px; }
body.is-diwali .mtop-mark .dw-diya { width: 20px; height: 22px; }