/* =====================================================================
   DIWALI theme
   Re-colours the design tokens from css/style.css and adds decorations.
   Page content is untouched. Active only while <html data-festival="diwali">.
   ===================================================================== */

/* ---------- 1. Tokens: diya gold, saffron, rani pink, maroon night ---------- */
html[data-festival="diwali"] {
  --bm-primary:   #3b0d1f;
  --bm-blue:      #b45309;   /* links & accents - 5:1 on white */
  --bm-blue-600:  #92400e;
  --bm-gold:      #be185d;
  --bm-navy-soft: #5a1530;

  --bm-bg:        #fffaf2;
  --bm-light:     #fff4e2;
  --bm-surface:   #fdf0dc;
  --bm-border:    #f0dcc0;
  --bm-muted:     #6e5547;
  --bm-ink:       #2a0f17;

  --bm-grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(245,158,11,.22), transparent 60%),
                  radial-gradient(900px 500px at 0% 10%, rgba(190,24,93,.12), transparent 55%);
  --bm-grad-blue: linear-gradient(135deg, #9a3412 0%, #c2410c 50%, #d97706 100%);
  --bm-grad-navy: linear-gradient(160deg, #1f0a12 0%, #3b0d1f 60%, #5a1530 100%);
  --bm-grad-gold: linear-gradient(135deg, #be185d 0%, #db2777 100%);
  --bm-grad-cta:  linear-gradient(120deg, #1f0a12 0%, #5a1530 50%, #b45309 100%);

  --bm-shadow-blue: 0 20px 50px rgba(217,119,6,.32);

  --dw-gold:   #fbbf24;
  --dw-flame:  #ffb52e;
}

html[data-festival="diwali"][data-bs-theme="dark"] {
  --bm-blue:    #fbbf24;
  --bm-blue-600:#f59e0b;
  --bm-gold:    #f472b6;

  --bm-bg:      #12060b;
  --bm-light:   #1c0a12;
  --bm-card:    #1f0c15;
  --bm-surface: #170910;
  --bm-border:  #3d1a27;
  --bm-ink:     #fdf3e7;
  --bm-muted:   #d4b8a8;

  --bm-grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(251,191,36,.18), transparent 60%),
                  radial-gradient(900px 500px at 0% 10%, rgba(244,114,182,.14), transparent 55%);
}

/* ---------- 2. Hard-coded blues in style.css that would clash ---------- */
html[data-festival="diwali"] .btn-bm-primary,
html[data-festival="diwali"] .bm-leadform-fields .btn-bm-primary { box-shadow: 0 10px 24px rgba(217,119,6,.35); }
html[data-festival="diwali"] .btn-bm-primary:hover { box-shadow: 0 0 0 4px rgba(251,191,36,.22), 0 18px 40px rgba(217,119,6,.45); }
html[data-festival="diwali"] .btn-bm-gold,
html[data-festival="diwali"] .btn-bm-gold:hover { color: #fff; box-shadow: 0 10px 24px rgba(190,24,93,.35); }

html[data-festival="diwali"] .bm-navbar .nav-link.active { background: rgba(217,119,6,.12); }
html[data-festival="diwali"] .bm-navbar .dropdown-item:hover { background: rgba(217,119,6,.09); }
html[data-festival="diwali"][data-bs-theme="dark"] .bm-navbar { background: rgba(18,6,11,.8); }

html[data-festival="diwali"] .bm-card:hover,
html[data-festival="diwali"] .bm-step:hover,
html[data-festival="diwali"] .bm-stack-card:hover { border-color: rgba(217,119,6,.5); }

html[data-festival="diwali"] .bm-hero2-glow,
html[data-festival="diwali"] .bm-demo-hero-glow {
  background:
    radial-gradient(50% 55% at 22% 0%, rgba(245,158,11,.22), transparent 70%),
    radial-gradient(40% 45% at 85% 10%, rgba(190,24,93,.16), transparent 70%);
}
html[data-festival="diwali"] .bm-hero2-blob.b1,
html[data-festival="diwali"] .bm-demo-blob.b1 { background: radial-gradient(circle, rgba(245,158,11,.34), transparent 70%); }
html[data-festival="diwali"] .bm-hero2-blob.b2,
html[data-festival="diwali"] .bm-demo-blob.b2 { background: radial-gradient(circle, rgba(219,39,119,.28), transparent 70%); }
html[data-festival="diwali"] .bm-hero2-blob.b3 { background: radial-gradient(circle, rgba(251,191,36,.18), transparent 70%); }

html[data-festival="diwali"] .bm-ind-hero::before {
  background: radial-gradient(900px 420px at 78% -10%, rgba(245,158,11,.36), transparent 62%),
              radial-gradient(700px 380px at 8% 110%, rgba(190,24,93,.24), transparent 60%);
}
html[data-festival="diwali"] .bm-metric-band::before {
  background: radial-gradient(700px 320px at 85% 0%, rgba(245,158,11,.35), transparent 62%);
}
html[data-festival="diwali"] .bm-cta::before {
  background: radial-gradient(600px 300px at 90% 0%, rgba(251,191,36,.3), transparent 60%);
}
/* Pale blue icon tiles, chips and tags across the pages */
html[data-festival="diwali"] .bm-card-icon,
html[data-festival="diwali"] .bm-feature-row .fic,
html[data-festival="diwali"] .bm-req-head i,
html[data-festival="diwali"] .bm-token-arrow,
html[data-festival="diwali"] .bm-hero-badge,
html[data-festival="diwali"] .bm-solve-tag.is-answer,
html[data-festival="diwali"] .bm-doc-main code,
html[data-festival="diwali"] .bm-thanks-counter,
html[data-festival="diwali"] .bm-mega-foot:hover { background: rgba(217,119,6,.13); }
html[data-festival="diwali"] .bm-hero-badge,
html[data-festival="diwali"] .bm-thanks-counter { border-color: rgba(217,119,6,.3); }
html[data-festival="diwali"] .bm-card-icon { box-shadow: 0 8px 18px -8px rgba(217,119,6,.45); }
html[data-festival="diwali"] .bm-card:hover .bm-card-icon { background: var(--bm-grad-blue); box-shadow: 0 12px 26px -8px rgba(217,119,6,.6); }
html[data-festival="diwali"] .bm-step-num,
html[data-festival="diwali"] .bm-stack-icon,
html[data-festival="diwali"] .bm-tl-dot,
html[data-festival="diwali"] .bm-doc-rail-cta { box-shadow: 0 10px 22px -10px rgba(217,119,6,.75); }
html[data-festival="diwali"] .bm-step:hover .bm-step-num { box-shadow: 0 16px 30px -10px rgba(217,119,6,.85); }
html[data-festival="diwali"] .bm-chip:hover { background: rgba(217,119,6,.08); }

html[data-festival="diwali"] .bm-leadform-bar,
html[data-festival="diwali"] .bm-thanks-mark { background: linear-gradient(90deg, #b45309, #be185d); }

/* Live-payments map: diya-gold dots and pings */
html[data-festival="diwali"] .bm-worldmap-canvas {
  --map-dot: rgba(217,119,6,.55); --map-line: rgba(190,24,93,.3);
  --map-3d-side: rgba(110,40,8,.92); --map-3d-top-a: #d97706; --map-3d-top-b: #fbbf24;
  --map-ping: #d97706; --map-ping-gold: #be185d;
}
html[data-festival="diwali"][data-bs-theme="dark"] .bm-worldmap-canvas {
  --map-dot: rgba(251,191,36,.5); --map-line: rgba(244,114,182,.32);
  --map-3d-side: rgba(70,24,6,.95); --map-3d-top-a: #f59e0b; --map-3d-top-b: #fde68a;
  --map-ping: #fbbf24; --map-ping-gold: #f472b6; --map-ping-halo: #12060b;
}

/* Home hero canvas (js/hero-bg.js): map dots, payment arcs and volume line */
html[data-festival="diwali"] .bm-hero2-map { --hero-bg-a: 245,158,11; --hero-bg-b: 219,39,119; }

::selection { background: rgba(251,191,36,.38); }
html[data-festival="diwali"] .bm-text-gradient {
  background-image: linear-gradient(100deg, var(--bm-blue), var(--bm-gold));
}

/* ---------- 3. Navbar: toran (marigold + mango leaves) along the bottom ---------- */
html[data-festival="diwali"] .bm-navbar { border-bottom-color: rgba(217,164,65,.6); }
html[data-festival="diwali"] .bm-navbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px;
  pointer-events: none;
  background: url("images/toran.svg") repeat-x left top / auto 34px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.18));
}

/* ---------- 4. Hero: rangoli + a row of lit diyas ---------- */
html[data-festival="diwali"] .bm-hero2,
html[data-festival="diwali"] .bm-page-hero,
html[data-festival="diwali"] .bm-ind-hero,
html[data-festival="diwali"] .bm-demo-hero { position: relative; overflow: hidden; }

/* Hero content must sit above the rangoli and diyas. */
html[data-festival="diwali"] .bm-page-hero > .container,
html[data-festival="diwali"] .bm-demo-hero > .container { position: relative; z-index: 2; }

.bm-dw-rangoli {
  position: absolute; z-index: 0; pointer-events: none;
  top: calc(var(--bm-nav-h) + 30px); right: 3%;
  width: clamp(130px, 16vw, 230px); height: auto;
  opacity: .85;
  filter: drop-shadow(0 0 26px rgba(251,191,36,.35));
  animation: dwSpin 90s linear infinite;
}
[data-bs-theme="light"] .bm-dw-rangoli { opacity: .5; filter: none; }

.bm-dw-diyas {
  position: absolute; left: 0; right: 0; bottom: 6px; z-index: 1;
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 0 4%; pointer-events: none;
}
.bm-dw-diya { position: relative; width: 58px; flex: 0 0 auto; }
.bm-dw-diya img { width: 100%; display: block; }
.bm-dw-diya::before {          /* warm glow pooled around the lamp */
  content: ""; position: absolute; left: 50%; bottom: 10%;
  width: 150%; aspect-ratio: 1; transform: translateX(-40%);
  background: radial-gradient(circle, rgba(255,190,70,.38), transparent 62%);
  animation: dwGlow 2.6s ease-in-out infinite;
}
[data-bs-theme="light"] .bm-dw-diya::before { background: radial-gradient(circle, rgba(255,170,40,.28), transparent 62%); }

/* Live flame: sits on the spout tip of diya-base.svg (x 98%, y 39%) */
.bm-dw-flame {
  position: absolute; left: 96%; bottom: 58%;
  width: 11px; height: 20px; margin-left: -5.5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fff 0 18%, #fff2a8 32%, #ffb52e 62%, #ff6a00 88%, transparent 100%);
  box-shadow: 0 0 10px 3px rgba(255,180,50,.55), 0 0 26px 8px rgba(255,140,30,.25);
  transform-origin: 50% 100%;
  animation: dwFlicker 1.6s ease-in-out infinite;
}

/* ---------- 5. Akash kandil lanterns hanging under the navbar ---------- */
.bm-dw-kandil {
  position: fixed; top: calc(var(--bm-nav-h) + 6px); z-index: 1019; pointer-events: none;
  width: 64px; transform-origin: 50% 0;
  animation: dwSwing 4.6s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255,170,60,.6));
}
/* In the side gutter, clear of the 1320px container; hidden where there is no gutter. */
.bm-dw-kandil.left  { left: max(8px, calc((100vw - 1320px) / 4 - 32px)); }
.bm-dw-kandil.right { right: max(8px, calc((100vw - 1320px) / 4 - 32px)); animation-delay: -2.3s; }
@media (max-width: 1439.98px) { .bm-dw-kandil { display: none; } }
[data-bs-theme="light"] .bm-dw-kandil { filter: drop-shadow(0 4px 8px rgba(120,40,10,.25)); }
.bm-dw-kandil img { width: 100%; display: block; }

/* ---------- 6. Fireworks canvas + rising sky lanterns (built by diwali.js) ---------- */
.bm-dw-fireworks { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-bs-theme="light"] .bm-dw-fireworks { opacity: .75; }

.bm-dw-sky {
  position: absolute; top: 0; left: 0; width: 34px; will-change: transform, opacity;
  filter: drop-shadow(0 0 12px rgba(255,180,60,.8));
}
.bm-dw-sky img { width: 100%; display: block; animation: dwSway 3s ease-in-out infinite; }

/* ---------- 7. Footer: a ledge of lit diyas along the top edge ---------- */
/* style.css hard-codes blue-grey text for the navy footer and navy panels;
   warm it up to sit on the maroon. */
html[data-festival="diwali"] .bm-footer,
html[data-festival="diwali"] .bm-footer-about,
html[data-festival="diwali"] .bm-footer-links a,
html[data-festival="diwali"] .bm-legal-row a,
html[data-festival="diwali"] .bm-navy-bg p { color: #e3c9b8; }
html[data-festival="diwali"] .bm-footer-links a:hover,
html[data-festival="diwali"] .bm-legal-row a:hover { color: #fbbf24; }
html[data-festival="diwali"] .bm-footer-heading { color: #fbbf24; }
html[data-festival="diwali"] .bm-badge { color: #f5dfcf; }
html[data-festival="diwali"] .bm-badge i { color: #fbbf24; }
html[data-festival="diwali"] .bm-footer-bottom p { color: #c4a191; }
html[data-festival="diwali"] .bm-footer-badges { border-color: rgba(251,191,36,.18); }
html[data-festival="diwali"] .bm-navy-bg { color: #f5dfcf; }
html[data-festival="diwali"] .bm-cta p { color: #f5dfcf; }

html[data-festival="diwali"] .bm-footer { position: relative; }
html[data-festival="diwali"] .bm-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 14px); height: 46px;
  pointer-events: none;
  background: url("images/diya.svg") space no-repeat left bottom / 52px auto;
  background-repeat: space no-repeat;
  filter: drop-shadow(0 0 10px rgba(255,170,50,.7));
  animation: dwGlowFilter 3s ease-in-out infinite;
}

/* ---------- 8. Keyframes ---------- */
@keyframes dwSpin   { to { transform: rotate(360deg); } }
@keyframes dwSwing  { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes dwSway   { 0%,100% { transform: translateX(0) rotate(-3deg); } 50% { transform: translateX(6px) rotate(3deg); } }
@keyframes dwFlicker {
  0%,100% { transform: scale(1, 1) rotate(-2deg); opacity: 1; }
  20%     { transform: scale(.92, 1.08) rotate(2deg); }
  45%     { transform: scale(1.05, .9) rotate(-3deg); opacity: .9; }
  70%     { transform: scale(.96, 1.12) rotate(1deg); }
}
@keyframes dwGlow   { 0%,100% { opacity: .85; } 50% { opacity: .55; } }
@keyframes dwGlowFilter {
  0%,100% { filter: drop-shadow(0 0 10px rgba(255,170,50,.7)); }
  50%     { filter: drop-shadow(0 0 5px rgba(255,170,50,.45)); }
}

/* Effects switched off: decorations stay, motion stops. */
.fx-off .bm-dw-rangoli, .fx-off .bm-dw-flame, .fx-off .bm-dw-diya::before,
html.fx-off[data-festival="diwali"] .bm-footer::before { animation: none; }

/* ---------- 9. Small screens + reduced motion ---------- */
@media (max-width: 767.98px) {
  html[data-festival="diwali"] .bm-navbar::after { height: 24px; background-size: auto 24px; }
  .bm-dw-rangoli { width: 96px; top: calc(var(--bm-nav-h) + 26px); right: 2%; opacity: .5; }
  .bm-dw-diya { width: 42px; }
  html[data-festival="diwali"] .bm-footer::before { height: 36px; background-size: 40px auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-dw-rangoli, .bm-dw-flame, .bm-dw-diya::before, .bm-dw-kandil, .bm-dw-sky img,
  html[data-festival="diwali"] .bm-footer::before { animation: none !important; }
}