/* ── Diwali 2026 theme ─────────────────────────────────────────────────────
   Loaded only while app.services.festive.diwali_active() is true. Everything
   is hidden unless the inline script in base.html has added html.diwali (IST
   date check), and html.dw-hide (visitor closed it) hides the card and ribbon.
   All names carry a dw- prefix so nothing collides with style.css.
   Fraunces is SIL Open Font Licence (latin subset, self-hosted). */

@font-face {
  font-family: "Fraunces DW"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/fraunces-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces DW"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/static/fonts/fraunces-400-italic.woff2") format("woff2");
}

:root {
  --dw-night: linear-gradient(155deg, #2a030a 0%, #4a0711 36%, #6b0b16 70%, #7d1a0e 100%);
  --dw-card-shadow: 0 18px 40px -18px rgba(90, 8, 18, .6), 0 2px 6px rgba(60, 6, 14, .2);
  --dw-serif: "Fraunces DW", Georgia, "Times New Roman", serif;
}
:root[data-theme="dark"] {
  --dw-card-shadow: 0 0 0 1px rgba(251, 191, 36, .18), 0 20px 50px -20px rgba(249, 115, 22, .35);
}

/* Hidden by default; only html.diwali shows anything */
.dw-hero, .dw-ribbon, .dw-footer-diyas { display: none; }
html.diwali .dw-hero { display: block; }
html.diwali .dw-ribbon { display: flex; }
html.diwali .dw-footer-diyas { display: flex; }
html.dw-hide .dw-hero, html.dw-hide .dw-ribbon { display: none; }
@media print { .dw-hero, .dw-ribbon, .dw-footer-diyas { display: none !important; } }

/* ── Logo: gold rim + tiny flame on the RB tile ── */
html.diwali .nav-brand-mark { position: relative; box-shadow: 0 0 0 2px #fbbf24, 0 0 14px rgba(251, 191, 36, .55); }
html.diwali .nav-brand-mark::after {
  content: ""; position: absolute; top: -9px; left: 50%; width: 8px; height: 11px; margin-left: -4px;
  background: radial-gradient(ellipse at 50% 70%, #fff7d6 0 22%, #fbbf24 45%, #f97316 75%, transparent 76%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, .9)); transform-origin: 50% 100%;
}

/* ── Home: festive card ── */
.dw-hero {
  position: relative; margin: var(--space-6, 24px) 0 var(--space-2, 8px); border-radius: 20px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 70% 55% at 45% 118%, rgba(251, 146, 60, .55), transparent 70%),
    radial-gradient(ellipse 45% 60% at 82% 45%, rgba(251, 191, 36, .16), transparent 70%),
    radial-gradient(rgba(251, 191, 36, .07) 1px, transparent 1.6px) 0 0 / 22px 22px,
    var(--dw-night);
  box-shadow: var(--dw-card-shadow); color: #fde7c4; min-height: 300px;
}
.dw-hero::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .38), inset 0 0 0 9px rgba(251, 191, 36, .0), inset 0 0 0 9px rgba(251, 191, 36, .16);
}
.dw-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: #ffe7a8; opacity: .6; }
.dw-mandala { position: absolute; width: 440px; height: 440px; right: -70px; top: 50%; margin-top: -220px; z-index: -1; opacity: .55; overflow: visible; }
.dw-mg, .dw-mg-inner { transform-origin: 0 0; }
.dw-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.dw-copy { position: relative; z-index: 2; padding: 38px 44px 118px; max-width: 620px; }
.dw-title {
  margin: 0 0 4px; font-family: var(--dw-serif); font-weight: 600; font-size: 64px; line-height: 1.05; letter-spacing: -.01em;
  background: linear-gradient(100deg, #d97706 0%, #fbbf24 28%, #fff7d6 44%, #fbbf24 58%, #d97706 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(251, 191, 36, .35));
}
.dw-sub { margin: 0 0 10px; font-family: var(--dw-serif); font-style: italic; font-weight: 400; font-size: 22px; color: #ffe2b0; }
.dw-msg { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255, 232, 205, .8); max-width: 440px; }

/* Hanging akash kandils */
.dw-kandil { position: absolute; top: -2px; z-index: 1; transform-origin: 50% 0; }
.dw-kandil svg { display: block; width: 100%; height: auto; overflow: visible; }
.dw-kandil.dw-k0 { right: 400px; width: 46px; }
.dw-kandil.dw-k1 { right: 300px; width: 58px; }
.dw-kandil.dw-k2 { right: 225px; width: 40px; }

/* Diya ledge */
.dw-ledge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 3;
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 3.4vw, 46px); padding-bottom: 16px;
  background: linear-gradient(180deg, transparent 0, rgba(20, 6, 18, 0) 40%, rgba(20, 6, 18, .55) 100%);
}
.dw-ledge::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 20px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .6), transparent);
}
.dw-diya { position: relative; width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.dw-diya:focus-visible { outline: 2px solid #fbbf24; outline-offset: 4px; }
.dw-diya svg { width: 100%; height: 100%; overflow: visible; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.dw-diya:hover svg { transform: translateY(-3px) scale(1.06); }
.dw-diya:active svg { transform: translateY(1px) scale(.97); }
.dw-diya::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 70px; height: 16px; margin-left: -35px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(251, 146, 60, .55), transparent 70%);
}
.dw-diya .dw-dl { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.dw-intro .dw-diya:not(.lit) .dw-dl { transform: scale(0); }
/* Safety net: if diwali.js never runs, the flames still come on after 3s */
.dw-intro .dw-diya:not(.lit) .dw-dl { animation: dw-autolight .5s 3s forwards; }
@keyframes dw-autolight { to { transform: scale(1); } }
.dw-diya.flare .dw-dl { transform: scale(1.35); transition-duration: .12s; }
.dw-fl, .dw-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.dw-halo { transform-box: fill-box; transform-origin: 50% 50%; }

.dw-hint { position: absolute; right: 22px; bottom: 12px; z-index: 4; font-size: 11.5px; color: rgba(253, 230, 138, .65); }
.dw-close {
  position: absolute; top: 12px; right: 12px; z-index: 5; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(251, 191, 36, .35); background: rgba(40, 4, 10, .45); color: #fde68a; font-size: 18px; line-height: 1; padding: 0;
}
.dw-close:hover { background: rgba(251, 191, 36, .18); }
.dw-close:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }

/* Fanush sky lanterns */
.dw-fanush { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dw-fz { position: absolute; bottom: -80px; left: var(--x); width: var(--w); margin-left: calc(var(--w) / -2); opacity: 0; }
.dw-fz.dw-far { filter: blur(.8px) saturate(.85); }
.dw-fz svg { display: block; width: 100%; height: auto; overflow: visible; }
.dw-fzs { transform-origin: 50% 0; }

/* Embers */
.dw-embers { position: absolute; left: 0; right: 0; bottom: 40px; height: 220px; z-index: 1; pointer-events: none; }
.dw-embers i {
  position: absolute; bottom: 0; width: var(--sz); height: var(--sz); border-radius: 50%; opacity: 0;
  background: #ffd27a; box-shadow: 0 0 6px 1px rgba(255, 190, 90, .9);
}

/* ── Other pages: slim ribbon ── */
.dw-ribbon {
  position: relative; overflow: hidden; isolation: isolate; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: var(--space-5, 20px) 0 var(--space-2, 8px); padding: 12px 56px; border-radius: 14px;
  background: radial-gradient(ellipse 50% 140% at 50% 130%, rgba(251, 146, 60, .45), transparent 70%), var(--dw-night);
  color: #fde7c4; font-size: 13.5px; box-shadow: var(--dw-card-shadow);
}
.dw-ribbon .dw-rt {
  font-family: var(--dw-serif); font-weight: 600; font-size: 21px;
  background: linear-gradient(180deg, #fff3c4, #fbbf24 60%, #d97706); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dw-ribbon .dw-rf { font-family: var(--dw-serif); font-style: italic; font-size: 15.5px; color: #ffe2b0; }
.dw-ribbon .dw-mini { width: 26px; height: 26px; overflow: visible; }
.dw-ribbon .dw-close { top: 50%; margin-top: -15px; width: 30px; height: 30px; }
.dw-ribbon .dw-rg { position: absolute; width: 120px; height: 120px; top: 50%; margin-top: -60px; opacity: .45; z-index: -1; overflow: visible; }
.dw-ribbon .dw-rg-l { left: -60px; }
.dw-ribbon .dw-rg-r { right: -60px; }

/* ── Footer: diyas on its top edge ── */
html.diwali .site-footer { position: relative; }
.dw-footer-diyas { position: absolute; left: 0; right: 0; top: -28px; justify-content: space-evenly; pointer-events: none; }
.dw-footer-diyas svg { width: 34px; height: 34px; overflow: visible; }

/* ── Motion (only for visitors who have not asked for less) ── */
@media (prefers-reduced-motion: no-preference) {
  html.diwali .dw-tw { animation: dw-tw 3.6s ease-in-out infinite; }
  html.diwali .dw-mg { animation: dw-spin 180s linear infinite; }
  html.diwali .dw-mg-inner { animation: dw-spin 90s linear infinite reverse; }
  html.diwali .dw-glow { animation: dw-lamp 3s ease-in-out infinite; }
  html.diwali .dw-kandil { animation: dw-swing 5.5s ease-in-out infinite; }
  html.diwali .dw-kandil.dw-k1 { animation-duration: 6.4s; animation-delay: -2s; }
  html.diwali .dw-kandil.dw-k2 { animation-duration: 4.9s; animation-delay: -1s; }
  html.diwali .dw-diya .dw-fl { animation: dw-flicker var(--fd, 1.9s) ease-in-out infinite; animation-delay: var(--d, 0s); }
  html.diwali .dw-diya .dw-halo { animation: dw-halo var(--fd, 1.9s) ease-in-out infinite; animation-delay: var(--d, 0s); }
  html.diwali .dw-flame { animation: dw-flicker 1.9s ease-in-out infinite; animation-delay: var(--d, 0s); }
  html.diwali .dw-halo { animation: dw-halo 1.9s ease-in-out infinite; animation-delay: var(--d, 0s); }
  html.diwali .dw-embers i { animation: dw-ember var(--dur) linear infinite; animation-delay: var(--del); }
  html.diwali .dw-fz { animation: dw-rise var(--dur) linear infinite; animation-delay: var(--del); }
  html.diwali .dw-fzs { animation: dw-sway var(--sw) ease-in-out infinite alternate; }
  html.diwali .dw-fzf { animation: dw-halo 1.3s ease-in-out infinite; }
  html.diwali .dw-title { animation: dw-shimmer 7s ease-in-out infinite; }
  html.diwali .nav-brand-mark::after { animation: dw-flicker 1.7s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-embers { display: none; }
  .dw-fz { opacity: var(--op); transform: translateY(var(--still)); }
}
@keyframes dw-tw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes dw-spin { to { transform: rotate(360deg); } }
@keyframes dw-lamp { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes dw-swing { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
@keyframes dw-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.92, 1.08) skewX(-3deg); }
  55% { transform: scale(1.05, .94) skewX(2deg); } 80% { transform: scale(.97, 1.04) skewX(-1deg); }
}
@keyframes dw-halo { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes dw-ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: .95; } 60% { opacity: .7; }
  100% { transform: translate(var(--dx), -210px) scale(.3); opacity: 0; }
}
@keyframes dw-rise {
  0% { transform: translateY(0); opacity: 0; } 7% { opacity: var(--op); } 78% { opacity: var(--op); }
  100% { transform: translateY(-480px); opacity: 0; }
}
@keyframes dw-sway {
  from { transform: translateX(calc(var(--a) * -1)) rotate(-4deg); }
  to { transform: translateX(var(--a)) rotate(4deg); }
}
@keyframes dw-shimmer { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }

/* ── Responsive ── */
@media (max-width: 900px) {
  .dw-kandil.dw-k0 { display: none; }
  .dw-kandil.dw-k1 { right: 180px; }
  .dw-kandil.dw-k2 { right: 90px; }
  .dw-mandala { opacity: .35; }
}
@media (max-width: 640px) {
  .dw-hero { min-height: 0; border-radius: 16px; }
  .dw-copy { padding: 26px 20px 104px; }
  .dw-title { font-size: 46px; padding-right: 40px; }
  .dw-sub { font-size: 18px; padding-right: 40px; }
  .dw-embers i:nth-child(n+9) { display: none; }
  .dw-fz.dw-far { display: none; }
  .dw-fx { opacity: .62; }
  .dw-mandala { width: 300px; height: 300px; right: -120px; margin-top: -210px; opacity: .3; }
  .dw-kandil.dw-k1 { right: 16px; width: 44px; }
  .dw-kandil.dw-k2 { display: none; }
  .dw-diya { width: 44px; height: 44px; }
  .dw-diya:nth-child(n+6) { display: none; }
  .dw-hint { display: none; }
  .dw-ribbon { padding: 10px 48px; }
  .dw-ribbon .dw-rf, .dw-ribbon .dw-rg-r { display: none; }
  .dw-footer-diyas svg:nth-child(n+6) { display: none; }
}