/* Diwali theme, only during DIWALI_DAYS */

/* inline logo sized like an img */
svg.logo {
  width: auto;
  height: auto;
}

/* svg logo colours itself, no invert; img logos keep theirs */
body.dark svg.logo,
body.auto svg.logo {
  filter: none;
}

/* prefix beats home.html's navbar background */
.diwali-season .top-nav-holder,
.diwali-season .bottom-menu-bar::before,
.diwali-footer::before {
  background-image: var(--rangoli-layers);
  background-repeat: no-repeat;
  background-position: var(--rangoli-positions);
  background-size: var(--rangoli-sizes);
}

.diwali-season .bottom-menu-bar::before,
.diwali-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-background);
}

/* faint rangolis on phone's bottom bar */
.diwali-season .bottom-menu-bar::before {
  opacity: 0.4;
}

/* footer's glowing top edge */
#large-footer {
  position: relative;
  isolation: isolate;
  border-top: 2px solid;
  border-image: linear-gradient(
      90deg,
      transparent,
      #f59e0b 15%,
      #f97316 50%,
      #f59e0b 85%,
      transparent
    )
    1;
  box-shadow: 0 -6px 16px -8px hsla(30, 100%, 55%, 0.7);
}

.diwali-footer {
  position: absolute;
  inset: 0;
  z-index: var(--z-background);
  display: flex;
  justify-content: space-around;
  /* keeps flame aligned over bowl */
  align-items: flex-start;
  pointer-events: none;
}

/* faint, behind footer text */
.diwali-footer::before {
  opacity: 0.35;
}

/* bowl rests on the edge */
.diwali-footer > span {
  position: relative;
  margin-top: -21px;
}

.diwali-footer svg {
  display: block;
  transition: filter 0.6s;
}

/* feed's muhurat trading row */
/* muhurat row in the feed: a soft festive tint, edge to edge */
.diwali-muhurat {
  background: linear-gradient(90deg, hsla(38, 100%, 55%, 0.2), transparent);
}

.diwali-lit svg {
  filter: drop-shadow(0 0 6px hsla(38, 100%, 55%, 0.7));
}

/* html flames, unlit until seen */
.diwali-flame {
  position: absolute;
  inset: 0;
  opacity: 0;
  scale: 0;
  /* `scale`, not `transform`, keeps GPU path */
  transition:
    scale 0.5s ease-out,
    opacity 0.5s;
}

/* core and svgs fill flame box */
.diwali-flame-core,
.diwali-flame svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* logo's svg flame: turn about the points the html boxes did,
   in the logo's viewBox units */
svg.logo .diwali-flame,
svg.logo .diwali-flame-core {
  transform-box: view-box;
}

svg.logo .diwali-flame {
  transform-origin: 331px 28px;
}

svg.logo .diwali-flame-core {
  transform-origin: 331px 27px;
}

/* sway name via class keeps GPU */
.diwali-lit .diwali-flame {
  opacity: 1;
  scale: var(--flame-size);
  animation: diwali-sway-uneven var(--flame-duration) ease-in-out var(--flame-delay) infinite
    var(--flame-direction);
}

.diwali-lit .diwali-sway-gentle {
  animation-name: diwali-sway-gentle;
}

.diwali-lit .diwali-sway-wild {
  animation-name: diwali-sway-wild;
}

/* gentle: a small, even swing */
@keyframes diwali-sway-gentle {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: scale(0.96, 1.06) rotate(6deg);
  }
}

/* uneven: irregular leans, stretching tall */
@keyframes diwali-sway-uneven {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  20% {
    transform: scale(0.94, 1.1) rotate(6deg);
  }
  35% {
    transform: rotate(-3deg);
  }
  55% {
    transform: scale(0.92, 1.14) rotate(10deg);
  }
  75% {
    transform: scale(1.04, 0.96) rotate(-7deg);
  }
}

/* wild: big quick leans */
@keyframes diwali-sway-wild {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  30% {
    transform: scale(0.9, 1.2) rotate(9deg);
  }
  50% {
    transform: scale(1.05, 0.92) rotate(-5deg);
  }
  80% {
    transform: scale(0.92, 1.16) rotate(14deg);
  }
}

/* pale core flickers on its own */
.diwali-lit .diwali-flame-core {
  transform-origin: 50% 48%;
  animation: diwali-core var(--core-duration) ease-in-out infinite alternate;
}

@keyframes diwali-core {
  to {
    transform: scale(0.8, 0.88);
    opacity: 0.7;
  }
}

/* off screen: paused, after shorthand rules */
.diwali-paused .diwali-flame,
.diwali-paused .diwali-flame-core {
  animation-play-state: paused;
}

/* crackers (diwali-click.js), sitting on the top edge of cards */
.diwali-cracker {
  position: absolute;
  z-index: var(--z-sticky);
  width: 28px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none no-repeat center / contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.diwali-cracker:hover {
  transform: scale(1.2) rotate(-10deg);
}

/* lit: burning, can't be lit again; fully shown, unlike other disabled buttons (skeleton.css) */
.diwali-cracker:disabled {
  opacity: 1;
  cursor: default;
  /* upright again, so it burns where diwali-click.js puts the sparks */
  transform: none;
}

.diwali-cracker-anaar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cdefs%3E%3ClinearGradient id='pot' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%237f1d1d'/%3E%3Cstop offset='.35' stop-color='%23dc2626'/%3E%3Cstop offset='.6' stop-color='%23b91c1c'/%3E%3Cstop offset='1' stop-color='%237f1d1d'/%3E%3C/linearGradient%3E%3ClinearGradient id='band' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23b45309'/%3E%3Cstop offset='.4' stop-color='%23fde68a'/%3E%3Cstop offset='.7' stop-color='%23f59e0b'/%3E%3Cstop offset='1' stop-color='%2392400e'/%3E%3C/linearGradient%3E%3CradialGradient id='glow'%3E%3Cstop offset='0' stop-color='%23fff7d6'/%3E%3Cstop offset='.4' stop-color='%23fbbf24' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23f59e0b' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M12.5 11h7c1 6 8 13 9 22 .3 3-5 5-12.5 5S3.2 36 3.5 33c1-9 8-16 9-22z' fill='url(%23pot)'/%3E%3Cpath d='M7.6 22.5c5.5 2 11.3 2 16.8 0l1.7 4.3c-6.7 2.6-13.5 2.6-20.2 0z' fill='url("#band#band")'/%3E%3Cellipse cx='16' cy='11' rx='3.6' ry='1.4' fill='%2357534e'/%3E%3Cpath d='M16 11V8' stroke='%23a16207' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 18c-1.5 3-3 6-3.6 10' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='8' r='4' fill='url("#glow#glow")'/%3E%3C/svg%3E");
}

.diwali-cracker-sparkler {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cdefs%3E%3ClinearGradient id='coat' x1='0' x2='1' gradientTransform='rotate(90)'%3E%3Cstop offset='0' stop-color='%2344403c'/%3E%3Cstop offset='.5' stop-color='%23a8a29e'/%3E%3Cstop offset='1' stop-color='%2357534e'/%3E%3C/linearGradient%3E%3CradialGradient id='glow'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.3' stop-color='%23fef3c7'/%3E%3Cstop offset='.6' stop-color='%23fbbf24' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23f59e0b' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M8 38L19 16' stroke='%2378716c' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M15 24L23 8' stroke='url("#coat#coat")' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='23' cy='8' r='7.5' fill='url("#glow#glow")'/%3E%3Cg stroke='%23fde047' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M23 8l0-7M23 8l6-3.5M23 8l7 2M23 8l4 6M23 8l-6-4M23 8l-2-6.5M23 8l5.5-6'/%3E%3C/g%3E%3Ccircle cx='23' cy='8' r='1.6' fill='%23fff'/%3E%3C/svg%3E");
}

.diwali-cracker-bomb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.35' cy='.35'%3E%3Cstop offset='0' stop-color='%23a16207'/%3E%3Cstop offset='.6' stop-color='%2378350f'/%3E%3Cstop offset='1' stop-color='%23451a03'/%3E%3C/radialGradient%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff7d6'/%3E%3Cstop offset='.4' stop-color='%23fbbf24' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23f59e0b' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='15' cy='26' r='11' fill='url(%23b)'/%3E%3Cpath d='M5 22c6 3 14 3 20 0M4.5 28c6.5 3 14.5 3 21 0M9 16c-1 6-1 14 1 20M21 16c1 6 1 14-1 20' stroke='%23d6a35c' stroke-width='1' fill='none' opacity='.8'/%3E%3Cpath d='M15 15c0-4 2-7 5-9' stroke='%2357534e' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='20.5' cy='6' r='4' fill='url("#g#g")'/%3E%3C/svg%3E");
}

.diwali-cracker-rocket {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%231e3a8a'/%3E%3Cstop offset='.45' stop-color='%233b82f6'/%3E%3Cstop offset='1' stop-color='%231e3a8a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M16 22v17' stroke='%23a16207' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M12 9h8v14h-8z' fill='url(%23t)'/%3E%3Cpath d='M12 13h8v2.5h-8z' fill='%23fde047'/%3E%3Cpath d='M12 9l4-7 4 7z' fill='%23ef4444'/%3E%3Cpath d='M16 23c0 2-.5 3.5-1.5 4.5' stroke='%2357534e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.diwali-cracker-chakri {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='16' cy='24' r='11' stroke='%2315803d' stroke-width='3'/%3E%3Ccircle cx='16' cy='24' r='7.5' stroke='%23ef4444' stroke-width='3'/%3E%3Ccircle cx='16' cy='24' r='4' stroke='%23fde047' stroke-width='3'/%3E%3Cpath d='M16 13c5 0 10 4 11 9' stroke='%23fbbf24' stroke-width='1.2' opacity='.8'/%3E%3C/g%3E%3Ccircle cx='16' cy='24' r='1.5' fill='%2357534e'/%3E%3C/svg%3E");
}

/* lit rocket takes off, as its trail climbs (diwali-click.js) */
.diwali-cracker-rocket:disabled {
  animation: diwali-launch 0.6s ease-in forwards;
}

@keyframes diwali-launch {
  to {
    translate: 0 -260px;
    opacity: 0;
  }
}

/* lit chakri spins on the spot */
.diwali-cracker-chakri:disabled {
  /* the wheel's centre, as the svg sits in the button */
  transform-origin: 14px 18px;
  animation: diwali-spin 0.25s linear infinite;
}

@keyframes diwali-spin {
  to {
    rotate: 1turn;
  }
}

/* reduced motion: lit but still */
@media (prefers-reduced-motion: reduce) {
  .diwali-lit .diwali-flame,
  .diwali-lit .diwali-flame-core {
    animation: none;
  }

  .diwali-flame,
  .diwali-footer svg {
    transition: none;
  }
}