/* Diwali festive theme (Festive level, marigold accent).
   Loaded only while the theme is on: <html data-festive="diwali"> in base.html.
   Switched from Manage Content -> Themes (site_themes app). The navy
   background, text colours and the gold site name stay as they are. */

/* ---- Accent: marigold replaces cinnamon ---- */
:root[data-theme][data-festive="diwali"] {
  --clr-accent: #DE9A4C;       --clr-accent-rgb: 222, 154, 76;
  --clr-accent-hover: #EDBB80; --clr-accent-hover-rgb: 237, 187, 128;
  --clr-on-accent: #2D1806;
}

/* ---- Greeting: "Happy Diwali" after the time-of-day greeting ---- */
:root[data-festive="diwali"] #sidebar-greeting:not(:empty)::after,
:root[data-festive="diwali"] #mobile-greeting:not(:empty)::after {
  content: " \00B7  Happy Diwali \2728";
  color: var(--clr-accent-hover);
  font-style: normal;
  font-weight: 600;
}

/* ---- Decoration layer (lights, lantern, sparkles) ---- */
.fx-diwali {
  position: relative;
  height: 0;              /* takes no space: the page layout is untouched */
  z-index: 50;
  pointer-events: none;
}

/* String lights hanging under the ticker */
.fx-lights {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  overflow: hidden;
  display: flex;
}
.fx-wire {
  flex: none;
  width: 58px;
  height: 14px;
  position: relative;
  border: 1.5px solid transparent;
  border-bottom-color: rgba(226, 234, 243, 0.28);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.fx-bulb {
  --c: #EDBB80;
  position: absolute;
  left: 50%; bottom: -10px;
  width: 7px; height: 10px;
  margin-left: -3.5px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--c);
  box-shadow: 0 0 6px 2px var(--c);
  animation: fx-twinkle 2.6s ease-in-out infinite;
}
.fx-bulb::before {
  content: "";
  position: absolute;
  top: -3px; left: 1.5px;
  width: 4px; height: 3px;
  border-radius: 1px;
  background: #5B6B7D;
}
.fx-wire:nth-child(4n+2) .fx-bulb { --c: #F3D27A; }
.fx-wire:nth-child(4n+3) .fx-bulb { --c: #DE9A4C; }
.fx-wire:nth-child(4n)   .fx-bulb { --c: #FFE7B0; }
.fx-wire:nth-child(5n+1) .fx-bulb { animation-delay: 0s; }
.fx-wire:nth-child(5n+2) .fx-bulb { animation-delay: .5s; }
.fx-wire:nth-child(5n+3) .fx-bulb { animation-delay: 1s; }
.fx-wire:nth-child(5n+4) .fx-bulb { animation-delay: 1.5s; }
.fx-wire:nth-child(5n)   .fx-bulb { animation-delay: 2s; }
@keyframes fx-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Hanging lantern (akash kandil), top right. Sized to fit the 40px strip right of the
   page content, so it never covers search boxes or buttons in page headers. */
.fx-lantern {
  position: absolute;
  top: 0;
  right: 8px;
  width: 30px;
  height: auto;
  transform-origin: 50% 0;
  animation: fx-swing 5s ease-in-out infinite;
}
@keyframes fx-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Kandil: paper tails sway, halo breathes */
.fx-k-tails {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: fx-tails 2.6s ease-in-out infinite;
}
.fx-k-side { animation-duration: 3.2s; animation-delay: -1s; }
@keyframes fx-tails { 0%, 100% { transform: skewX(-7deg); } 50% { transform: skewX(7deg); } }
.fx-k-halo { animation: fx-halo 3s ease-in-out infinite; }
@keyframes fx-halo { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* Soft sparkles over the viewport */
.fx-sparkles { position: fixed; inset: 0; overflow: hidden; }
.fx-sparkles i {
  position: absolute;
  width: 8px; height: 8px;
  background: #EDBB80;
  opacity: .4;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: fx-spark 3.4s ease-in-out infinite;
}
.fx-sparkles i:nth-child(1)  { left: 28%; top: 12%; animation-delay: 0s; }
.fx-sparkles i:nth-child(2)  { left: 46%; top: 34%; animation-delay: .4s; }
.fx-sparkles i:nth-child(3)  { left: 64%; top: 16%; animation-delay: .8s; }
.fx-sparkles i:nth-child(4)  { left: 78%; top: 46%; animation-delay: 1.2s; }
.fx-sparkles i:nth-child(5)  { left: 90%; top: 26%; animation-delay: 1.6s; }
.fx-sparkles i:nth-child(6)  { left: 38%; top: 62%; animation-delay: 2s; }
.fx-sparkles i:nth-child(7)  { left: 94%; top: 70%; animation-delay: 2.4s; }
.fx-sparkles i:nth-child(8)  { left: 22%; top: 84%; animation-delay: 2.8s; }
.fx-sparkles i:nth-child(9)  { left: 58%; top: 80%; animation-delay: 1s; }
.fx-sparkles i:nth-child(10) { left: 72%; top: 6%;  animation-delay: 1.8s; }
@keyframes fx-spark { 0%, 100% { opacity: .12; transform: scale(.7); } 50% { opacity: .7; transform: scale(1); } }

/* ---- Behind the page: more stars + firecracker bursts ----
   z-index -1 keeps them under cards, sidebar and text: they only show in
   empty space. Positions are viewport %, so some are always in view. */
.fx-night {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fx-stars i {
  position: absolute;
  width: 7px; height: 7px;
  background: #EDBB80;
  opacity: .35;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: fx-spark 4s ease-in-out infinite;
}
.fx-stars i:nth-child(3n)   { background: #FFF4D6; width: 5px; height: 5px; }
.fx-stars i:nth-child(4n+1) { width: 10px; height: 10px; }
.fx-stars i:nth-child(1)  { left: 4%;  top: 18%; animation-delay: .2s; }
.fx-stars i:nth-child(2)  { left: 11%; top: 47%; animation-delay: 1.4s; }
.fx-stars i:nth-child(3)  { left: 7%;  top: 66%; animation-delay: 2.6s; }
.fx-stars i:nth-child(4)  { left: 16%; top: 78%; animation-delay: .8s; }
.fx-stars i:nth-child(5)  { left: 3%;  top: 90%; animation-delay: 3.1s; }
.fx-stars i:nth-child(6)  { left: 24%; top: 58%; animation-delay: 1.9s; }
.fx-stars i:nth-child(7)  { left: 33%; top: 94%; animation-delay: .5s; }
.fx-stars i:nth-child(8)  { left: 45%; top: 72%; animation-delay: 2.2s; }
.fx-stars i:nth-child(9)  { left: 52%; top: 44%; animation-delay: 3.5s; }
.fx-stars i:nth-child(10) { left: 61%; top: 96%; animation-delay: 1.1s; }
.fx-stars i:nth-child(11) { left: 69%; top: 64%; animation-delay: 2.9s; }
.fx-stars i:nth-child(12) { left: 76%; top: 88%; animation-delay: .3s; }
.fx-stars i:nth-child(13) { left: 85%; top: 58%; animation-delay: 1.6s; }
.fx-stars i:nth-child(14) { left: 97%; top: 52%; animation-delay: 2.4s; }
.fx-stars i:nth-child(15) { left: 98%; top: 12%; animation-delay: 3.8s; }
.fx-stars i:nth-child(16) { left: 89%; top: 93%; animation-delay: .9s; }
.fx-stars i:nth-child(17) { left: 41%; top: 26%; animation-delay: 2.7s; }
.fx-stars i:nth-child(18) { left: 19%; top: 34%; animation-delay: 1.2s; }

/* Cards get their colour from `.content a` (white at 10% opacity), which would let
   the bursts show through. Same colour, made solid, while this theme is on.
   Hover keeps its own background. */
:root[data-festive="diwali"] .content a.post-card:not(:hover),
:root[data-festive="diwali"] .content a.related-card:not(:hover) {
  background-color: #25323F;
}

/* Firecracker: a rocket rises, then 12 rays burst outward and fade */
.fx-burst {
  --c: #EDBB80;
  position: absolute;
  width: 0; height: 0;
}
.fx-burst b {
  position: absolute;
  left: -1.5px; top: 0;
  width: 3px; height: 9px;
  border-radius: 2px;
  background: linear-gradient(#FFF4D6, rgba(255, 244, 214, 0));
  opacity: 0;
  animation: fx-rocket var(--t, 8s) ease-out infinite;
  animation-delay: var(--d, 0s);
}
.fx-burst i {
  position: absolute;
  left: -1px; top: -6px;
  width: 2px; height: 12px;
  border-radius: 2px;
  background: linear-gradient(var(--c), rgba(255, 255, 255, 0));
  opacity: 0;
  animation: fx-ray var(--t, 8s) ease-out infinite;
  animation-delay: var(--d, 0s);
}
.fx-burst i:nth-of-type(1)  { --r: 0deg; }   .fx-burst i:nth-of-type(2)  { --r: 30deg; }
.fx-burst i:nth-of-type(3)  { --r: 60deg; }  .fx-burst i:nth-of-type(4)  { --r: 90deg; }
.fx-burst i:nth-of-type(5)  { --r: 120deg; } .fx-burst i:nth-of-type(6)  { --r: 150deg; }
.fx-burst i:nth-of-type(7)  { --r: 180deg; } .fx-burst i:nth-of-type(8)  { --r: 210deg; }
.fx-burst i:nth-of-type(9)  { --r: 240deg; } .fx-burst i:nth-of-type(10) { --r: 270deg; }
.fx-burst i:nth-of-type(11) { --r: 300deg; } .fx-burst i:nth-of-type(12) { --r: 330deg; }
.fx-burst i:nth-of-type(odd) { background: linear-gradient(#FFF4D6, rgba(255, 255, 255, 0)); }
@keyframes fx-rocket {
  0%   { opacity: 0;  transform: translateY(150px); }
  2%   { opacity: .9; }
  11%  { opacity: .9; transform: translateY(0); }
  12%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes fx-ray {
  0%, 11% { opacity: 0;  transform: rotate(var(--r)) translateY(0); }
  13%     { opacity: .95; transform: rotate(var(--r)) translateY(-10px); }
  30%     { opacity: 0;  transform: rotate(var(--r)) translateY(-52px); }
  100%    { opacity: 0;  transform: rotate(var(--r)) translateY(-52px); }
}
.fx-burst:nth-of-type(1) { left: 11%; top: 36%; --c: #DE9A4C; --t: 7s;   --d: .5s; }
.fx-burst:nth-of-type(2) { left: 96%; top: 28%; --c: #F3D27A; --t: 8s;   --d: 2s; }
.fx-burst:nth-of-type(3) { left: 25%; top: 78%; --c: #EDBB80; --t: 9s;   --d: 3.6s; }
.fx-burst:nth-of-type(4) { left: 6%;  top: 66%; --c: #DE9A4C; --t: 7.5s; --d: 5s; }
.fx-burst:nth-of-type(5) { left: 96%; top: 74%; --c: #F3D27A; --t: 8.5s; --d: 6.4s; }
.fx-burst:nth-of-type(6) { left: 15%; top: 90%; --c: #FFE7B0; --t: 9.5s; --d: 1.2s; }

/* ---- Marigold garland in place of the line under page titles ---- */
:root[data-festive="diwali"] .title-separator {
  height: 18px;
  background: url("diwali-garland.svg") repeat-x left center / 120px 18px;
}

/* ---- Diyas sitting on top of the subscribe bar ---- */
:root[data-festive="diwali"] .footer-subscribe-bar { position: relative; }
:root[data-festive="diwali"] .footer-subscribe-bar::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 100%;
  width: 96px;
  height: 32px;
  background: url("diwali-diyas.svg") no-repeat center / contain;
  pointer-events: none;
}

/* ---- Rangoli in the footer corner ---- */
:root[data-festive="diwali"] .site-footer {
  background-image: url("diwali-rangoli.svg");
  background-repeat: no-repeat;
  background-position: right -50px center;
  background-size: 170px 170px;
}

/* ---- Tablets and phones ---- */
@media (max-width: 900px) {
  .fx-lantern { width: 30px; right: 4px; }   /* clears the full-width mobile badge */
  .fx-wire { width: 48px; }
  :root[data-festive="diwali"] .site-footer { background-position: right -60px center; background-size: 150px 150px; }
}
@media (max-width: 480px) {
  .fx-lantern { width: 26px; right: 3px; }
  .fx-wire { width: 40px; }
  .fx-sparkles i:nth-child(n+7) { display: none; }   /* fewer on small screens */
  .fx-stars i:nth-child(n+13) { display: none; }
  .fx-burst:nth-of-type(n+4) { display: none; }
  .fx-burst:nth-of-type(1) { left: 6%;  top: 34%; }   /* phone side margins */
  .fx-burst:nth-of-type(2) { left: 94%; top: 58%; }
  .fx-burst:nth-of-type(3) { left: 6%;  top: 84%; }
  :root[data-festive="diwali"] .footer-subscribe-bar::before { left: 50%; margin-left: -40px; width: 80px; height: 27px; }
}
/* Short screens (phones in landscape) */
@media (max-height: 500px) and (orientation: landscape) {
  .fx-lantern { width: 26px; }
  .fx-sparkles i:nth-child(n+6) { display: none; }
}

/* ---- Visitors who turn on reduced motion: everything stays still ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-bulb, .fx-lantern, .fx-sparkles i, .fx-stars i, .fx-k-tails, .fx-k-halo { animation: none; }
  .fx-burst { display: none; }
  :root[data-festive="diwali"] .footer-subscribe-bar::before { background-image: url("diwali-diyas-still.svg"); }
  :root[data-festive="diwali"] .site-footer { background-image: url("diwali-rangoli-still.svg"); }
}