/* Diwali 2026: homepage band + header toran.

   Served from /public rather than bundled into globals.css. It is only needed
   while the festival window is open (lib/seasonal.ts), and inside the global
   stylesheet it was ~4 KB gzip of render-blocking CSS on every page, all year.
   DiwaliBanner and DiwaliToran each render a React <link precedence> for it,
   so it loads only on pages that render them, once (React dedupes by href).

   Cached for a year as immutable (next.config.ts): to change a rule, change
   the file name and DIWALI_CSS in lib/seasonal.ts. Plain CSS only — nothing
   here goes through PostCSS or Tailwind. */

/* ─── Diwali: homepage band + header toran ──────────────────── */
/* Seasonal, gated by lib/seasonal.ts — none of this markup renders outside the
   festival window, so the rules sit idle the rest of the year. Same discipline
   as the strips above: every keyframe moves only transform and opacity, glows
   are HTML layers rather than animated SVG children (those repaint on the main
   thread), and the art uses logical properties so an Arabic version mirrors
   without a separate set of rules. Static sizing uses the individual `scale`
   property so it composes with entrance keyframes on `transform` instead of
   being overwritten by them. */

/* ── Homepage band ── */
.dwl-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  color: #fff;
  background:
    radial-gradient(70% 80% at 72% 118%, rgba(255, 150, 40, 0.5) 0%, rgba(255, 150, 40, 0) 70%),
    linear-gradient(120deg, #082d4c 0%, #171a4a 52%, #3b1043 100%);
}

.dwl-copy {
  position: relative;
  z-index: 3;
  width: 52%;
  max-width: 600px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* The title's glow, behind the heading rather than inside it — see
   DiwaliBanner.tsx for why. */
.dwl-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12%;
  inset-inline-start: 0;
  width: 78%;
  height: 52%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 176, 50, 0.42), rgba(255, 176, 50, 0));
  animation: dwlTitleGlow 2.6s ease-in-out infinite alternate;
}

.dwl-eyebrow {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(249, 210, 15, 0.4);
  background: rgba(249, 210, 15, 0.12);
  color: #ffd95a;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.dwl-title {
  position: relative;
  margin: 0;
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.5px;
  color: #f9d20f;
  background: linear-gradient(180deg, #fff4b8 0%, #f9d20f 52%, #e8a10a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 186, 60, 0.35));
}

.dwl-body {
  margin: 0;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.5;
  color: #e4def5;
}

/* A ring that pings out from the button, inviting the click. */
.dwl-cta {
  position: relative;
}

.dwl-cta::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  border: 2px solid rgba(249, 210, 15, 0.85);
  opacity: 0;
  pointer-events: none;
  animation: dwlPing 2.6s ease-out 1.8s infinite;
}

/* Four-point sparkles around the wordmark, positioned against its wrapper. */
.dwl-title-wrap {
  position: relative;
}

.dwl-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff4b8;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  animation: dwlSparkle 3.1s ease-in-out infinite;
}

.dwl-spark--a {
  top: -10px;
  inset-inline-end: -16px;
}

.dwl-spark--b {
  bottom: -6px;
  inset-inline-start: 38%;
  width: 10px;
  height: 10px;
  animation-duration: 2.3s;
  animation-delay: -1.1s;
}

.dwl-spark--c {
  top: 4px;
  inset-inline-start: -14px;
  width: 9px;
  height: 9px;
  animation-duration: 3.7s;
  animation-delay: -2.2s;
}

/* Starfield. */
.dwl-stars i {
  position: absolute;
  z-index: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffe58a;
  box-shadow: 0 0 6px 1px rgba(255, 229, 138, 0.8);
  opacity: 0.3;
  animation: dwlTwinkle 2.6s ease-in-out infinite;
}

.dwl-stars i:nth-child(1) { top: 6%; inset-inline-start: 30%; animation-delay: -0.4s; }
.dwl-stars i:nth-child(2) { top: 72%; inset-inline-start: 3%; animation-duration: 3.3s; }
.dwl-stars i:nth-child(3) { top: 10%; inset-inline-start: 41%; animation-delay: -1.7s; }
.dwl-stars i:nth-child(4) { top: 30%; inset-inline-start: 49%; animation-duration: 2.1s; animation-delay: -0.9s; }
.dwl-stars i:nth-child(5) { top: 12%; inset-inline-start: 62%; animation-duration: 3.7s; }
.dwl-stars i:nth-child(6) { top: 46%; inset-inline-start: 58%; animation-delay: -2.1s; }
.dwl-stars i:nth-child(7) { top: 8%; inset-inline-start: 77%; animation-duration: 2.9s; animation-delay: -0.6s; }
.dwl-stars i:nth-child(8) { top: 38%; inset-inline-start: 72%; animation-duration: 3.1s; animation-delay: -1.3s; }
.dwl-stars i:nth-child(9) { top: 86%; inset-inline-start: 36%; animation-duration: 2.3s; animation-delay: -1.9s; }

/* Soft out-of-focus lights drifting up through the sky. */
.dwl-bokeh i {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 120, 0.5), rgba(255, 214, 120, 0) 70%);
  opacity: 0;
  animation: dwlDrift 9s ease-in-out infinite;
}

.dwl-bokeh i:nth-child(1) { width: 34px; height: 34px; bottom: 10%; inset-inline-start: 8%; animation-delay: -2s; }
.dwl-bokeh i:nth-child(2) { width: 22px; height: 22px; bottom: 30%; inset-inline-start: 30%; animation-duration: 11s; animation-delay: -5s; background: radial-gradient(circle, rgba(255, 111, 176, 0.45), rgba(255, 111, 176, 0) 70%); }
.dwl-bokeh i:nth-child(3) { width: 40px; height: 40px; bottom: 5%; inset-inline-start: 50%; animation-duration: 10s; animation-delay: -1s; }
.dwl-bokeh i:nth-child(4) { width: 18px; height: 18px; bottom: 40%; inset-inline-start: 66%; animation-duration: 8s; animation-delay: -6s; background: radial-gradient(circle, rgba(111, 240, 224, 0.4), rgba(111, 240, 224, 0) 70%); }
.dwl-bokeh i:nth-child(5) { width: 28px; height: 28px; bottom: 20%; inset-inline-start: 88%; animation-duration: 12s; animation-delay: -3s; }
.dwl-bokeh i:nth-child(6) { width: 24px; height: 24px; bottom: 58%; inset-inline-start: 20%; animation-duration: 9.5s; animation-delay: -7s; background: radial-gradient(circle, rgba(255, 111, 176, 0.45), rgba(255, 111, 176, 0) 70%); }

/* Fireworks: a rocket streaks up, then bursts into a ring of sparks. Rocket
   and burst share one duration and delay so the burst lands where the rocket
   ends. */
.dwl-firework {
  position: absolute;
  z-index: 0;
  width: var(--dwl-size);
  height: var(--dwl-size);
  color: var(--dwl-color);
}

.dwl-firework--a { --dwl-size: 92px; --dwl-color: #ffd95a; --dwl-dur: 3.6s; --dwl-delay: 1.2s; top: 6%; inset-inline-start: 43%; }
.dwl-firework--b { --dwl-size: 72px; --dwl-color: #ff6fb0; --dwl-dur: 4.4s; --dwl-delay: 2.3s; top: 3%; inset-inline-start: 84%; }
.dwl-firework--c { --dwl-size: 60px; --dwl-color: #6ff0e0; --dwl-dur: 3.9s; --dwl-delay: 3.1s; top: 20%; inset-inline-start: 63%; }

.dwl-rocket {
  position: absolute;
  top: 50%;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), currentColor);
  opacity: 0;
  animation: dwlRocket var(--dwl-dur) ease-out var(--dwl-delay) infinite;
}

.dwl-burst {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: dwlBurst var(--dwl-dur) ease-out var(--dwl-delay) infinite;
}

.dwl-burst i {
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 50%;
  transform-origin: 50% 100%;
}

.dwl-burst i::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px 1px currentColor;
}

.dwl-burst i::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 2px;
  height: 45%;
  background: linear-gradient(currentColor, rgba(255, 255, 255, 0));
  opacity: 0.7;
}

.dwl-burst i:nth-child(2) { transform: rotate(30deg); }
.dwl-burst i:nth-child(3) { transform: rotate(60deg); }
.dwl-burst i:nth-child(4) { transform: rotate(90deg); }
.dwl-burst i:nth-child(5) { transform: rotate(120deg); }
.dwl-burst i:nth-child(6) { transform: rotate(150deg); }
.dwl-burst i:nth-child(7) { transform: rotate(180deg); }
.dwl-burst i:nth-child(8) { transform: rotate(210deg); }
.dwl-burst i:nth-child(9) { transform: rotate(240deg); }
.dwl-burst i:nth-child(10) { transform: rotate(270deg); }
.dwl-burst i:nth-child(11) { transform: rotate(300deg); }
.dwl-burst i:nth-child(12) { transform: rotate(330deg); }

/* Rangoli, partly cropped by the far edge: the outer ring and the inner
   flower turn in opposite directions, and the flower breathes. */
.dwl-rangoli {
  position: absolute;
  z-index: 0;
  top: calc(50% - 140px);
  inset-inline-end: -70px;
  width: 280px;
  height: 280px;
  opacity: 0.92;
}

/* The spans are the moving layers (see DiwaliBanner.tsx); the svgs in them
   stay still. */
.dwl-rangoli > span {
  position: absolute;
  inset: 0;
}

.dwl-rangoli svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dwl-rangoli-outer {
  animation: dwlSpin 90s linear infinite;
}

.dwl-rangoli-inner {
  animation:
    dwlSpinRev 50s linear infinite,
    dwlBreathe 3.4s ease-in-out infinite alternate;
}

/* Lanterns hanging from the top edge. The outer layer is positioned (and
   dropped in by the entrance); the inner one swings. */
.dwl-kandil {
  position: absolute;
  z-index: 1;
  top: 0;
}

.dwl-kandil-swing {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: dwlSway 3.6s ease-in-out infinite alternate;
}

.dwl-kandil-string {
  display: block;
  width: 1.5px;
  height: var(--dwl-len, 24px);
  background: #c98a1b;
}

.dwl-kandil svg {
  position: relative;
  width: 34px;
  height: 62px;
}

.dwl-kandil-glow {
  position: absolute;
  bottom: -6px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 77, 0.45) 0%, rgba(255, 140, 40, 0) 68%);
  animation: dwlGlow 2.8s ease-in-out infinite alternate;
}

.dwl-kandil--a {
  --dwl-len: 34px;
  inset-inline-start: 56%;
}

.dwl-kandil--b {
  --dwl-len: 14px;
  inset-inline-start: 70%;
}

.dwl-kandil--b .dwl-kandil-swing {
  animation-duration: 4.3s;
  animation-delay: -1.4s;
}

.dwl-kandil--b .dwl-kandil-glow {
  animation-duration: 3.4s;
  animation-delay: -1s;
}

/* Diyas along the bottom. */
.dwl-diyas {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  inset-inline-start: 54%;
  inset-inline-end: 6%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.dwl-diya {
  position: relative;
  display: block;
  width: 64px;
  height: 70px;
  transform-origin: 50% 100%;
}

.dwl-diya:nth-child(1),
.dwl-diya:nth-child(5) {
  scale: 0.8;
}

.dwl-diya:nth-child(2),
.dwl-diya:nth-child(4) {
  scale: 0.92;
}

.dwl-diya:nth-child(3) {
  scale: 1.08;
}

.dwl-diya svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* Halo + flame, as one layer the entrance can ignite from the wick. */
.dwl-fire {
  position: absolute;
  inset: 0;
  transform-origin: 50% calc(100% - 21px);
}

.dwl-halo {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 42px);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 196, 77, 0.6) 0%,
    rgba(255, 150, 40, 0.18) 45%,
    rgba(255, 150, 40, 0) 70%
  );
  animation: dwlHalo 2.6s ease-in-out infinite alternate;
}

.dwl-flame {
  position: absolute;
  bottom: 21px;
  left: calc(50% - 6px);
  width: 12px;
  height: 24px;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 78%, #fff3b0 0%, #ffc53d 42%, #ff7a00 100%);
  box-shadow: 0 0 12px 3px rgba(255, 170, 40, 0.6);
  transform-origin: 50% 100%;
  animation: dwlFlicker 1.3s ease-in-out infinite;
}

.dwl-flame i {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 2px;
  height: 9px;
  border-radius: 50%;
  background: #fffbe6;
  opacity: 0.9;
}

/* Durations that share no common beat, so the flames never pulse in step. */
.dwl-diya:nth-child(2) .dwl-flame { animation-duration: 1.7s; animation-delay: -0.5s; }
.dwl-diya:nth-child(3) .dwl-flame { animation-duration: 1.1s; animation-delay: -0.2s; }
.dwl-diya:nth-child(4) .dwl-flame { animation-duration: 1.9s; animation-delay: -1.1s; }
.dwl-diya:nth-child(5) .dwl-flame { animation-duration: 1.5s; animation-delay: -0.8s; }
.dwl-diya:nth-child(2) .dwl-halo { animation-duration: 2.9s; animation-delay: -0.7s; }
.dwl-diya:nth-child(3) .dwl-halo { animation-duration: 3.1s; animation-delay: -1.6s; }
.dwl-diya:nth-child(4) .dwl-halo { animation-duration: 2.3s; animation-delay: -0.3s; }
.dwl-diya:nth-child(5) .dwl-halo { animation-duration: 3.7s; animation-delay: -2s; }

/* Embers drifting up off the lamps. */
.dwl-embers i {
  position: absolute;
  z-index: 2;
  bottom: 44px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffc24a;
  opacity: 0;
  animation: dwlEmber 4.6s ease-out infinite;
}

.dwl-embers i:nth-child(1) { inset-inline-start: 56%; }
.dwl-embers i:nth-child(2) { inset-inline-start: 62%; animation-duration: 5.3s; animation-delay: -1.7s; }
.dwl-embers i:nth-child(3) { inset-inline-start: 68%; animation-duration: 3.9s; animation-delay: -3.1s; }
.dwl-embers i:nth-child(4) { inset-inline-start: 74%; animation-duration: 4.9s; animation-delay: -0.9s; }
.dwl-embers i:nth-child(5) { inset-inline-start: 80%; animation-duration: 4.3s; animation-delay: -2.4s; }
.dwl-embers i:nth-child(6) { inset-inline-start: 86%; animation-duration: 5.7s; animation-delay: -4s; }
.dwl-embers i:nth-child(7) { inset-inline-start: 92%; animation-duration: 4.1s; animation-delay: -1.2s; }

/* ── Band entrance ── */
/* The band is server-rendered with data-dwl-enter="wait"; DiwaliEntrance flips
   it to "play" once the band is in view, and marks it data-dwl-offscreen
   whenever it is scrolled fully away. Fill mode is `backwards`, not `both`:
   each entrance holds its first frame through its delay, then lets go when it
   ends, so the element drops back to its own (identical) styles and stops
   holding a compositor layer it no longer needs. */
.dwl-band[data-dwl-enter] {
  animation: dwlBandIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.dwl-band[data-dwl-enter] .dwl-rangoli {
  animation: dwlRangoliIn 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards;
}

.dwl-band[data-dwl-enter] .dwl-kandil--a {
  animation: dwlDrop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s backwards;
}

.dwl-band[data-dwl-enter] .dwl-kandil--b {
  animation: dwlDrop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards;
}

.dwl-band[data-dwl-enter] .dwl-eyebrow {
  animation: dwlRise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards;
}

.dwl-band[data-dwl-enter] .dwl-title-wrap {
  animation: dwlTitleIn 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) 0.42s backwards;
}

.dwl-band[data-dwl-enter] .dwl-body {
  animation: dwlRise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s backwards;
}

.dwl-band[data-dwl-enter] .dwl-cta {
  animation: dwlRise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s backwards;
}

/* The lamps rise one after another, then each catches light in turn. */
.dwl-band[data-dwl-enter] .dwl-diya {
  animation: dwlRise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
}

.dwl-band[data-dwl-enter] .dwl-fire {
  animation: dwlIgnite 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s backwards;
}

.dwl-band[data-dwl-enter] .dwl-diya:nth-child(2) { animation-delay: 0.62s; }
.dwl-band[data-dwl-enter] .dwl-diya:nth-child(3) { animation-delay: 0.74s; }
.dwl-band[data-dwl-enter] .dwl-diya:nth-child(4) { animation-delay: 0.86s; }
.dwl-band[data-dwl-enter] .dwl-diya:nth-child(5) { animation-delay: 0.98s; }
.dwl-band[data-dwl-enter] .dwl-diya:nth-child(2) .dwl-fire { animation-delay: 1.14s; }
.dwl-band[data-dwl-enter] .dwl-diya:nth-child(3) .dwl-fire { animation-delay: 1.28s; }
.dwl-band[data-dwl-enter] .dwl-diya:nth-child(4) .dwl-fire { animation-delay: 1.42s; }
.dwl-band[data-dwl-enter] .dwl-diya:nth-child(5) .dwl-fire { animation-delay: 1.56s; }

.dwl-band[data-dwl-enter] .dwl-stars,
.dwl-band[data-dwl-enter] .dwl-bokeh {
  animation: dwlFadeIn 1s ease-out 0.3s backwards;
}

.dwl-band[data-dwl-enter] .dwl-embers {
  animation: dwlFadeIn 0.8s ease-out 1.4s backwards;
}

/* Everything holds — entrances and loops alike — until the band is in view,
   and again whenever it is scrolled away, so a page that is still loading or
   reading further down spends nothing on it. Holding the loops through "wait"
   also means the first firework goes up just after the band arrives. */
.dwl-band[data-dwl-enter="wait"],
.dwl-band[data-dwl-enter="wait"] *,
.dwl-band[data-dwl-enter="wait"] *::before,
.dwl-band[data-dwl-enter="wait"] *::after,
.dwl-band[data-dwl-offscreen] *,
.dwl-band[data-dwl-offscreen] *::before,
.dwl-band[data-dwl-offscreen] *::after {
  animation-play-state: paused !important;
}

@media (scripting: none) {
  .dwl-band[data-dwl-enter],
  .dwl-band[data-dwl-enter] *,
  .dwl-band[data-dwl-enter] *::before,
  .dwl-band[data-dwl-enter] *::after {
    animation-play-state: running !important;
  }
}

/* ── Header toran ── */
.dwl-toran {
  position: relative;
  height: 40px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.dwl-toran-garland {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  animation: dwlGarlandIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* Fairy lights along the cord, chasing in four phases. Each strip is one
   element painting every fourth bulb as a repeating gradient, offset one bulb
   from the last, so the chase costs four animated layers rather than one per
   bulb (see DiwaliToran.tsx). The 8px strip is centred on the cord. */
.dwl-toran-bulbs {
  --dwl-gap: 65px;
  position: absolute;
  z-index: 2;
  top: -1.5px;
  left: 0;
  right: 0;
  height: 8px;
  animation: dwlFadeIn 0.6s ease-out 0.6s backwards;
}

.dwl-toran-bulbs i {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at calc(var(--dwl-gap) / 2) 50%,
    var(--dwl-bulb) 0 1.9px,
    var(--dwl-halo) 2.5px,
    transparent 4px
  );
  background-size: calc(var(--dwl-gap) * 4) 100%;
  background-repeat: repeat-x;
  background-position: calc(var(--dwl-k) * var(--dwl-gap)) 0;
  opacity: 0.3;
  animation: dwlBulb 1.6s ease-in-out infinite;
}

.dwl-toran-bulbs i:nth-child(1) { --dwl-k: 0; --dwl-bulb: #ffc21a; --dwl-halo: rgba(255, 194, 26, 0.45); }
.dwl-toran-bulbs i:nth-child(2) { --dwl-k: 1; --dwl-bulb: #ff4fa0; --dwl-halo: rgba(255, 79, 160, 0.45); animation-delay: 0.4s; }
.dwl-toran-bulbs i:nth-child(3) { --dwl-k: 2; --dwl-bulb: #3fd8c8; --dwl-halo: rgba(63, 216, 200, 0.45); animation-delay: 0.8s; }
.dwl-toran-bulbs i:nth-child(4) { --dwl-k: 3; --dwl-bulb: #ff8a00; --dwl-halo: rgba(255, 138, 0, 0.45); animation-delay: 1.2s; }

.dwl-toran-lamp {
  position: absolute;
  z-index: 1;
  top: 2px;
  animation: dwlLampDrop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s backwards;
}

.dwl-toran-swing {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: dwlSwayWide 3.2s ease-in-out infinite alternate;
}

.dwl-toran-string {
  display: block;
  width: 1px;
  height: var(--dwl-len, 6px);
  background: #c98a1b;
}

.dwl-toran-lamp svg {
  position: relative;
  width: 13px;
  height: 24px;
}

.dwl-toran-glow {
  position: absolute;
  bottom: 0;
  left: calc(50% - 14px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 70, 0.4) 0%, rgba(255, 150, 40, 0) 70%);
}

/* Positions and string lengths, then the drop order: from the centre out. */
.dwl-toran-lamp:nth-of-type(1) { inset-inline-start: 6%; --dwl-len: 4px; animation-delay: 0.55s; }
.dwl-toran-lamp:nth-of-type(2) { inset-inline-start: 18.5%; --dwl-len: 12px; animation-delay: 0.45s; }
.dwl-toran-lamp:nth-of-type(3) { inset-inline-start: 31%; --dwl-len: 8px; animation-delay: 0.35s; }
.dwl-toran-lamp:nth-of-type(4) { inset-inline-start: 43.5%; --dwl-len: 14px; }
.dwl-toran-lamp:nth-of-type(5) { inset-inline-start: 56%; --dwl-len: 5px; }
.dwl-toran-lamp:nth-of-type(6) { inset-inline-start: 68.5%; --dwl-len: 11px; animation-delay: 0.35s; }
.dwl-toran-lamp:nth-of-type(7) { inset-inline-start: 81%; --dwl-len: 7px; animation-delay: 0.45s; }
.dwl-toran-lamp:nth-of-type(8) { inset-inline-start: 93.5%; --dwl-len: 13px; animation-delay: 0.55s; }

.dwl-toran-lamp:nth-of-type(2) .dwl-toran-swing { animation-duration: 3.9s; animation-delay: -1.2s; }
.dwl-toran-lamp:nth-of-type(3) .dwl-toran-swing { animation-duration: 2.8s; animation-delay: -0.6s; }
.dwl-toran-lamp:nth-of-type(4) .dwl-toran-swing { animation-duration: 3.5s; animation-delay: -2s; }
.dwl-toran-lamp:nth-of-type(5) .dwl-toran-swing { animation-duration: 4.1s; animation-delay: -0.3s; }
.dwl-toran-lamp:nth-of-type(6) .dwl-toran-swing { animation-duration: 3.3s; animation-delay: -1.7s; }
.dwl-toran-lamp:nth-of-type(7) .dwl-toran-swing { animation-duration: 2.9s; animation-delay: -0.9s; }
.dwl-toran-lamp:nth-of-type(8) .dwl-toran-swing { animation-duration: 3.7s; animation-delay: -2.5s; }

/* ── Keyframes ── */
@keyframes dwlFlicker {
  0%, 100% { transform: scale(1, 1) rotate(-2deg); }
  25% { transform: scale(0.94, 1.1) rotate(2deg); }
  50% { transform: scale(1.04, 0.93) rotate(-1deg); }
  75% { transform: scale(0.96, 1.14) rotate(3deg); }
}

@keyframes dwlHalo {
  from { opacity: 0.6; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.06); }
}

@keyframes dwlGlow {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@keyframes dwlTitleGlow {
  from { opacity: 0.35; transform: scale(0.94); }
  to { opacity: 0.95; transform: scale(1.06); }
}

@keyframes dwlSway {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

@keyframes dwlSwayWide {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}

@keyframes dwlSpin {
  to { transform: rotate(360deg); }
}

@keyframes dwlSpinRev {
  to { transform: rotate(-360deg); }
}

@keyframes dwlBreathe {
  from { scale: 0.95; }
  to { scale: 1.05; }
}

@keyframes dwlTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes dwlSparkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); }
  45% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes dwlEmber {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -110px); }
}

@keyframes dwlDrift {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 0.9; }
  80% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(10px, -60px); }
}

@keyframes dwlRocket {
  0% { opacity: 0; transform: translateY(120px); }
  5% { opacity: 1; }
  22% { opacity: 1; transform: translateY(0); }
  26%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes dwlBurst {
  0%, 22% { opacity: 0; transform: scale(0.15); }
  26% { opacity: 1; }
  55% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: translateY(8px) scale(1.1); }
}

@keyframes dwlPing {
  0% { opacity: 0.9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.12, 1.4); }
}

/* Entrances: each runs once and comes to rest on the element's own styles. */
@keyframes dwlBandIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
}

@keyframes dwlRangoliIn {
  from { opacity: 0; transform: rotate(-120deg) scale(0.4); }
}

@keyframes dwlDrop {
  from { transform: translateY(-120%); }
}

@keyframes dwlRise {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes dwlTitleIn {
  from { opacity: 0; transform: translateY(12px) scale(0.86); }
}

@keyframes dwlIgnite {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes dwlFadeIn {
  from { opacity: 0; }
}

@keyframes dwlGarlandIn {
  from { opacity: 0; transform: translateY(-14px); }
}

@keyframes dwlLampDrop {
  from { opacity: 0; transform: translateY(-36px); }
}

@keyframes dwlBulb {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* Tablets: three lamps, two fireworks, smaller rangoli. */
@media (max-width: 1023px) {
  .dwl-diya:nth-child(1),
  .dwl-diya:nth-child(5),
  .dwl-firework--c {
    display: none;
  }
  .dwl-diyas {
    inset-inline-start: 58%;
    inset-inline-end: 8%;
  }
  .dwl-rangoli {
    top: calc(50% - 110px);
    width: 220px;
    height: 220px;
    inset-inline-end: -64px;
  }
  .dwl-kandil--a {
    inset-inline-start: 58%;
  }
  .dwl-kandil--b {
    inset-inline-start: 74%;
  }
  .dwl-firework--a {
    inset-inline-start: 50%;
  }
}

/* Phones: the copy takes most of the width, one lantern, one firework, three
   small lamps tucked into the far bottom corner clear of the button. */
@media (max-width: 640px) {
  .dwl-band {
    min-height: 196px;
    background:
      radial-gradient(80% 70% at 82% 120%, rgba(255, 150, 40, 0.5) 0%, rgba(255, 150, 40, 0) 70%),
      linear-gradient(120deg, #082d4c 0%, #171a4a 52%, #3b1043 100%);
  }
  .dwl-copy {
    width: 70%;
    padding: 18px 14px 18px 16px;
    gap: 7px;
  }
  .dwl-eyebrow {
    height: 20px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .dwl-title {
    font-size: 30px;
  }
  .dwl-body {
    font-size: 12px;
    line-height: 1.45;
  }
  .dwl-rangoli {
    top: calc(50% - 85px);
    width: 170px;
    height: 170px;
    inset-inline-end: -66px;
  }
  .dwl-kandil--b,
  .dwl-firework--a,
  .dwl-bokeh i:nth-child(6) {
    display: none;
  }
  .dwl-firework--b {
    --dwl-size: 56px;
    top: 2%;
    inset-inline-start: 80%;
  }
  .dwl-kandil--a {
    --dwl-len: 10px;
    inset-inline-start: 74%;
  }
  .dwl-kandil svg {
    width: 22px;
    height: 40px;
  }
  .dwl-kandil-glow {
    bottom: -3px;
    left: calc(50% - 26px);
    width: 52px;
    height: 52px;
  }
  .dwl-diyas {
    bottom: 8px;
    inset-inline-start: 62%;
    inset-inline-end: 3%;
  }
  .dwl-diya {
    width: 38px;
    height: 44px;
  }
  .dwl-fire {
    transform-origin: 50% calc(100% - 12px);
  }
  .dwl-flame {
    bottom: 12px;
    left: calc(50% - 4px);
    width: 8px;
    height: 15px;
    box-shadow: 0 0 8px 2px rgba(255, 170, 40, 0.6);
  }
  .dwl-flame i {
    left: 2px;
    right: 2px;
    height: 6px;
  }
  .dwl-halo {
    bottom: -6px;
    left: calc(50% - 26px);
    width: 52px;
    height: 52px;
  }
  .dwl-embers i {
    bottom: 28px;
  }
  .dwl-embers i:nth-child(-n + 3) {
    display: none;
  }
  /* On a phone the first star sits a few pixels off the eyebrow pill, where it
     reads as a stray bullet rather than a star. */
  .dwl-stars i:nth-child(1),
  .dwl-stars i:nth-child(3),
  .dwl-stars i:nth-child(4),
  .dwl-stars i:nth-child(6) {
    display: none;
  }

  .dwl-toran {
    height: 28px;
  }
  .dwl-toran-lamp:nth-of-type(even) {
    display: none;
  }
  .dwl-toran-bulbs {
    --dwl-gap: 44px;
  }
  .dwl-toran-lamp svg {
    width: 9px;
    height: 17px;
  }
  .dwl-toran-glow {
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dwl-band,
  .dwl-band *,
  .dwl-band *::before,
  .dwl-band *::after,
  .dwl-toran *,
  .dwl-toran *::before,
  .dwl-toran *::after {
    animation: none !important;
  }
  /* These rest invisible between beats — without the animation they would
     never appear, so they come to rest lit instead. */
  .dwl-spark,
  .dwl-stars i,
  .dwl-toran-bulbs i {
    opacity: 0.8;
  }
  .dwl-bokeh i {
    opacity: 0.5;
  }
  .dwl-embers i,
  .dwl-fireworks {
    display: none;
  }
}