/* The Diwali, firecracker and Bandi Chhor Divas designs. Base styles are each scene's resting frame, which is what people who ask
   for reduced motion see. All movement sits in the media query at the bottom. */

.wc-defs { position: absolute; width: 0; height: 0; }

.wc {
  --serif: Didot, "Bodoni 72", "Bodoni MT", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --book: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --script: "Snell Roundhand", "Apple Chancery", "Segoe Script", "URW Chancery L", cursive;
  --round: "Arial Rounded MT Bold", "Avenir Next Rounded", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --wc-title-font: var(--serif);
}

/* Foil text used by several titles. */
.wc-diyas .wc-title, .wc-lanterns .wc-title, .wc-emerald .wc-title {
  background: linear-gradient(100deg, #ffc65c 15%, #fff5cf 45%, #ffb341 75%);
  background-size: 220% 100%;
  padding-bottom: 0.16em;
  margin-bottom: -0.04em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 1. Rows of diyas ---------- */

.wc-diyas {
  --wc-bg: linear-gradient(180deg, #120824 0%, #2a0d3f 42%, #6e1c4c 74%, #c8552d 100%);
  --band: max(30cqh, 21.25cqw);
  --pad-b: max(26cqh, 19cqw);
  --wc-accent: #ffd98a;
  --wc-name: #ffe9b8;
  --wc-name-font: var(--script);
  background: var(--wc-bg);
}

/* ---------- 2. Rangoli bloom ---------- */

.wc-rangoli {
  --m: max(116cqmin, 76cqmax);
  --wc-ink: #4a0e2e;
  --wc-accent: #b00d4d;
  --wc-name: #b00d4d;
  --wc-name-font: var(--script);
  background: radial-gradient(circle, #5a1040 0%, #2d0a26 70%);
}
.dw-mandala { position: absolute; left: 50%; top: 50%; width: var(--m); height: var(--m); margin: calc(var(--m) / -2) 0 0 calc(var(--m) / -2); }
.wc-rangoli .wc-copy { padding: 0 calc(50cqw - var(--m) * 0.165); }
.wc-rangoli .wc-title { font-size: calc(var(--m) * 0.072); line-height: 1; }
.wc-rangoli .wc-eyebrow { font-size: calc(var(--m) * 0.02); }
.wc-rangoli .wc-sign { margin-top: calc(var(--m) * 0.012); }
.wc-rangoli .wc-sign-pre { font-size: calc(var(--m) * 0.0165); }
.wc-rangoli .wc-sign b { font-size: calc(var(--m) * 0.036); }
.wc-rangoli .wc-sign[data-len="m"] b { font-size: calc(var(--m) * 0.027); }
.wc-rangoli .wc-sign[data-len="l"] b { font-size: calc(var(--m) * 0.021); }
.dw-bloom, .dw-turn { transform-origin: 500px 500px; }

/* ---------- 3. City fireworks ---------- */

.wc-fireworks {
  --band: max(25cqh, 22.5cqw);
  --pad-t: 12cqh;
  --pad-b: max(21cqh, 18cqw);
  --wc-name: #ffd166;
  --wc-name-font: var(--book);
  background: linear-gradient(180deg, #03061a 0%, #0d1544 62%, #2b2a6e 100%);
}
.wc-fireworks .wc-copy { background: radial-gradient(closest-side, rgba(5, 9, 34, 0.72) 30%, rgba(5, 9, 34, 0) 100%) center 45% / min(100cqw, 130cqh) min(66cqh, 90cqw) no-repeat; }
.wc-fireworks .wc-title { text-shadow: 0 0 0.3em rgba(5, 9, 34, 0.9); }
.wc-fireworks .wc-line, .wc-fireworks .wc-sign { text-shadow: 0 0 0.5em rgba(5, 9, 34, 0.95); }

/* ---------- 4. Sky lanterns ---------- */

.wc-lanterns {
  --top: max(52cqh, 40.6cqw);
  --band: max(11cqh, 12.5cqw);
  --pad-t: max(35cqh, 24cqw);
  --pad-b: max(10cqh, 9cqw);
  --wc-accent: #ffe08a;
  --wc-name: #ffe9b8;
  --wc-name-font: var(--script);
  background: linear-gradient(180deg, #031a24 0%, #0a4553 48%, #127071 76%, #d98a3b 100%);
}
.dw-sway { transform-origin: 0 0; }
.dw-core { opacity: 0.9; }

/* ---------- 5. The open door ---------- */

.wc-doorway {
  --aw: min(84cqw, 70cqh);
  --top: max(17cqh, 15cqw);
  --band: max(13cqh, 13.75cqw);
  --pad-t: max(27cqh, 18cqw);
  --pad-b: max(14cqh, 11cqw);
  --wc-ink: #5a1208;
  --wc-accent: #8c1d10;
  --wc-name: #8c1d10;
  --wc-name-font: var(--script);
  background: #7a1022;
}
.wc-doorway .wc-copy { padding-left: calc((100cqw - var(--aw)) / 2 + 7cqmin); padding-right: calc((100cqw - var(--aw)) / 2 + 7cqmin); }
.wc-doorway .wc-title { font-size: calc(var(--aw) * 0.15); }
.wc-doorway .wc-line { font-size: calc(var(--aw) * 0.046); }
.wc-doorway .wc-eyebrow { font-size: calc(var(--aw) * 0.05); }
.wc-doorway .wc-sign-pre { font-size: calc(var(--aw) * 0.04); }
.wc-doorway .wc-sign b { font-size: calc(var(--aw) * 0.09); }
.wc-doorway .wc-sign[data-len="m"] b { font-size: calc(var(--aw) * 0.068); }
.wc-doorway .wc-sign[data-len="l"] b { font-size: calc(var(--aw) * 0.052); }
.dw-arch {
  position: absolute;
  left: 50%;
  bottom: 7cqh;
  width: var(--aw);
  height: 90cqh;
  margin-left: calc(var(--aw) / -2);
  overflow: hidden;
  border: 1.4cqmin solid #e7c36a;
  border-bottom: 0;
  border-radius: calc(var(--aw) / 2) calc(var(--aw) / 2) 0 0;
  background: radial-gradient(70% 50% at 50% 48%, #fff6c8 0%, #ffd77a 48%, #f39a35 100%);
  box-shadow: 0 0 0 0.7cqmin #8f6420, 0 0 14cqmin rgba(255, 190, 90, 0.5);
  perspective: 110cqmin;
}
.dw-rays { position: absolute; left: 50%; top: 45%; width: 220cqmax; height: 220cqmax; margin: -110cqmax 0 0 -110cqmax; background: repeating-conic-gradient(rgba(255, 255, 255, 0.28) 0 9deg, transparent 9deg 22deg); border-radius: 50%; }
.dw-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 8;
  background-color: #5b1a10;
  background-image:
    radial-gradient(circle, #f0cc72 0 13%, #9a6c22 14% 19%, transparent 20%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 22% 78%, rgba(0, 0, 0, 0.32)),
    repeating-linear-gradient(90deg, #6d2413 0 7cqmin, #5a1b0e 7cqmin 7.5cqmin);
  background-size: 9cqmin 9cqmin, auto, auto;
}
.dw-door.is-l { left: 0; transform-origin: left center; transform: rotateY(104deg); }
.dw-door.is-r { right: 0; transform-origin: right center; transform: rotateY(-104deg); }

/* The arch and art sit under the copy, but the doors must close over it for the opening. */
.wc-doorway .wc-art { z-index: auto; }
.wc-doorway .dw-arch { z-index: 6; }
.wc-doorway .dw-rays { z-index: 0; }
.wc-doorway .wc-copy { z-index: 7; pointer-events: none; }
.wc-doorway .wl { z-index: 8; }
.wc-doorway .wl.dw-over { z-index: 9; }
.wc-doorway .wl.dw-wall { z-index: 1; }
.wc-doorway { --intro: 1.9s; }

/* ---------- 6. River of lights ---------- */

.wc-river {
  --wc-name: #ffd98a;
  --wc-name-font: var(--script);
  --wc-title-font: var(--book);
  background: linear-gradient(180deg, #03071a 0%, #0a1a3f 46%, #0c3350 47%, #0a2f40 70%, #061d2b 100%);
}
.wc-river .wc-copy { justify-content: flex-start; padding-top: 7cqh; padding-bottom: 54cqh; }
.wc-river .wc-title { font-size: min(14cqw, 11cqh); }
.dw-ghat { left: 0; bottom: 53cqh; width: 100%; height: 10cqh; }
.dw-water { left: 0; bottom: 0; width: 100%; height: 53cqh; }
.dw-drift { transform: translateX(var(--x0)); }

/* ---------- 7. Emerald and gold ---------- */

.wc-emerald {
  --wc-ink: #f7ecc9;
  --wc-accent: #e7c36a;
  --wc-name: #ffe9b0;
  --wc-name-font: var(--script);
  --pad-t: 8cqmin;
  --pad-b: 10cqmin;
  background: radial-gradient(120% 90% at 50% 40%, #0e6a54 0%, #06382d 62%, #03241d 100%);
}
.wc-emerald .wc-copy { padding-left: 13cqmin; padding-right: 13cqmin; }
.wc-emerald .wc-title { font-size: min(13cqw, 11.5cqh); }
.wc-emerald .wc-eyebrow { font-family: var(--book); font-style: italic; }
.wc-emerald .wc-line { font-family: var(--book); }
.dw-frame { position: absolute; inset: 3.5cqmin; border: 0.4cqmin solid #d9a441; outline: 0.2cqmin solid rgba(231, 195, 106, 0.55); outline-offset: -1.8cqmin; }
.dw-corner { position: absolute; width: 34cqmin; height: 34cqmin; }
.dw-corner.is-tl { left: 2.3cqmin; top: 2.3cqmin; }
.dw-corner.is-tr { right: 2.3cqmin; top: 2.3cqmin; transform: scaleX(-1); }
.dw-corner.is-bl { left: 2.3cqmin; bottom: 2.3cqmin; transform: scaleY(-1); }
.dw-corner.is-br { right: 2.3cqmin; bottom: 2.3cqmin; transform: scale(-1, -1); }

/* ---------- 8. Box of mithai ---------- */

.wc-mithai {
  --wc-ink: #4a1140;
  --wc-accent: #a1123f;
  --wc-name: #a1123f;
  --wc-title-font: var(--round);
  --wc-name-font: var(--round);
  --wc-name-weight: 700;
  --band: max(38cqh, 30cqw);
  --pad-t: 6cqh;
  --pad-b: max(35cqh, 26cqw);
  background: #ffc933;
}
.wc-mithai .wc-title { font-weight: 700; letter-spacing: -0.02em; font-size: min(14cqw, 11cqh); }
.wc-mithai .wc-line { font-weight: 500; }
.dw-sunburst { position: absolute; left: 50%; top: 50%; width: 170cqmax; height: 170cqmax; margin: -85cqmax 0 0 -85cqmax; }

/* ---------- 9. Anar and chakri ---------- */

.wc-anar {
  --band: max(56cqh, 40cqw);
  --pad-t: 5cqh;
  --pad-b: max(52cqh, 34cqw);
  --wc-name: #ffd166;
  --wc-name-font: var(--script);
  background: linear-gradient(180deg, #0c0620 0%, #2a0f4a 62%, #5c1c5e 100%);
}
.dw-whirl { transform-origin: 0 0; }
.wc-anar .wl-bottom { overflow: visible; }

/* ---------- 10. Phuljhari ---------- */

.wc-sparklers {
  --band: max(62cqh, 34cqw);
  --pad-t: 4cqh;
  --pad-b: max(56cqh, 34cqw);
  --wc-accent: #ffd98a;
  --wc-name: #ffe9b8;
  --wc-name-font: var(--script);
  background: radial-gradient(90% 70% at 50% 72%, #3c1a42 0%, #17101f 70%);
}

/* ---------- 11. Ladi ---------- */

.wc-ladi {
  --top: max(100cqh, 56.25cqw);
  --pad-t: 46cqh;
  --pad-b: 8cqh;
  --wc-name: #ffd60a;
  --wc-title-font: var(--round);
  --wc-name-font: var(--round);
  --wc-name-weight: 700;
  background: linear-gradient(180deg, #1a1033 0%, #34104a 100%);
}
.wc-ladi .wc-title { font-weight: 700; letter-spacing: -0.02em; font-size: min(13.5cqw, 11cqh); }

/* ---------- 12 to 14. Bandi Chhor Divas, in Gurmukhi ---------- */

.wc-sarovar, .wc-bavan, .wc-phulkari, .wc-gwalior, .wc-chola, .wc-deepmala, .wc-parikrama {
  --gurmukhi: "Gurmukhi Sangam MN", "Gurmukhi MN", "Noto Serif Gurmukhi", "Noto Sans Gurmukhi", Raavi, sans-serif;
  --wc-title-font: var(--gurmukhi);
  font-family: var(--gurmukhi);
}
.wc-sarovar .wc-title, .wc-bavan .wc-title, .wc-phulkari .wc-title, .wc-gwalior .wc-title, .wc-chola .wc-title, .wc-deepmala .wc-title, .wc-parikrama .wc-title { font-weight: 600; line-height: 1.32; letter-spacing: 0; }
.wc-sarovar .wc-line, .wc-phulkari .wc-line, .wc-gwalior .wc-line, .wc-chola .wc-line, .wc-deepmala .wc-line, .wc-parikrama .wc-line { font-size: min(6.6cqw, 5cqh); font-weight: 500; }

.wc-sarovar {
  --band: max(62cqh, 40cqw);
  --pad-t: 6cqh;
  --pad-b: max(54cqh, 34cqw);
  --wc-name: #ffe3a3;
  --wc-name-font: var(--script);
  background: linear-gradient(180deg, #030616 0%, #0a1244 55%, #2a1c58 100%);
}
.wc-sarovar .wc-title {
  font-size: min(12cqw, 11cqh);
  background: linear-gradient(100deg, #ffc65c 15%, #fff5cf 45%, #ffb341 75%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.12em;
}

.wc-bavan {
  --m: max(112cqmin, 74cqmax);
  --wc-ink: #4a1208;
  --wc-name: #8c1d10;
  --wc-name-font: var(--script);
  background: radial-gradient(circle, #203a94 0%, #0d1950 44%, #060a26 100%);
}
.wc-bavan .wc-copy { padding: 0 calc(50cqw - var(--m) * 0.158); }
.wc-bavan .wc-title { font-size: calc(var(--m) * 0.052); }
.wc-bavan .wc-line { font-size: calc(var(--m) * 0.02); font-weight: 600; opacity: 1; display: block; }
.wc-bavan .wc-sign { margin-top: calc(var(--m) * 0.01); }
.wc-bavan .wc-sign-pre { font-size: calc(var(--m) * 0.016); opacity: 1; }
.wc-bavan .wc-sign b { font-size: calc(var(--m) * 0.032); }
.wc-bavan .wc-sign[data-len="m"] b { font-size: calc(var(--m) * 0.025); }
.wc-bavan .wc-sign[data-len="l"] b { font-size: calc(var(--m) * 0.02); }

.wc-phulkari {
  --top: max(21cqh, 17cqw);
  --band: max(21cqh, 17cqw);
  --pad-t: max(20cqh, 16cqw);
  --pad-b: max(21cqh, 17cqw);
  --wc-ink: #fff1cf;
  --wc-accent: #fbbf24;
  --wc-name: #ffd166;
  --wc-name-font: var(--book);
  background: radial-gradient(90% 55% at 50% 50%, #ab1731 0%, #6d0f20 62%, #4c0a16 100%);
}
.wc-phulkari .wc-title { font-size: min(12.5cqw, 10cqh); text-shadow: 0 0.04em 0.18em rgba(40, 0, 8, 0.55); }
.wc-phulkari .wc-badge svg { width: min(20cqw, 12cqh); }
@container (max-height: 820px) and (min-aspect-ratio: 1/1) { .wc-phulkari .wc-badge { display: none; } }
.wc-sarovar .wc-line, .wc-phulkari .wc-line, .wc-gwalior .wc-line, .wc-chola .wc-line, .wc-deepmala .wc-line, .wc-parikrama .wc-line { display: block; }
.dw-sheen { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 190, 0.24) 50%, transparent 62%); transform: translateX(-70%); pointer-events: none; }
.dw-row { transition: opacity 0.5s; }
.dw-row.is-gone { opacity: 0; transition: none; }

/* Gates of Gwalior: dusk over the fort. */
.wc-gwalior {
  --band: max(60cqh, 42cqw);
  --pad-t: 5cqh;
  --pad-b: max(54cqh, 34cqw);
  --wc-ink: #fff4dc;
  --wc-accent: #ffd98a;
  --wc-name: #ffe3a3;
  --wc-name-font: var(--script);
  background: linear-gradient(180deg, #171033 0%, #4a1f55 34%, #b2486a 58%, #f29a58 78%, #fbd089 100%);
}
@container (min-aspect-ratio: 1/1) { .wc-gwalior .wl-bottom { bottom: -16cqh; } .wc-gwalior .wc-title { font-size: 9.500cqh; } .wc-gwalior .wc-sign { margin-top: 1cqh; } }
.wc-gwalior .wc-title { font-size: min(12cqw, 10cqh); text-shadow: 0 0.04em 0.3em rgba(40, 12, 50, 0.6); }

/* 52 kalis: full saffron, a deliberately bright counterpoint to the night scenes. */
.wc-chola {
  --top: max(8cqh, 6.25cqw);
  --pad-t: 34cqh;
  --pad-b: 8cqh;
  --wc-ink: #0d1c55;
  --wc-accent: #8c1d10;
  --wc-name: #8c1d10;
  --wc-name-font: var(--script);
  background: radial-gradient(90% 70% at 50% 58%, #ffc04d 0%, #f79a1f 58%, #dd6f0b 100%);
}
.wc-chola .wc-title { font-size: min(12cqw, 11cqh); font-weight: 700; }
.dw-kalis { position: absolute; inset: 0; }
.dw-kali {
  position: absolute;
  top: 0;
  left: calc((var(--i) + 0.5) * 100% / 52);
  width: 0.5cqmin;
  min-width: 1.5px;
  height: calc(var(--l) * 1cqh);
  background: repeating-linear-gradient(180deg, #0d1c55 0 2.2cqmin, #f3c552 2.2cqmin 2.7cqmin);
  transform-origin: 50% 0;
}
.dw-kali.is-alt { background: repeating-linear-gradient(180deg, #8c1d10 0 2.2cqmin, #f3c552 2.2cqmin 2.7cqmin); }
.dw-kali::before { content: ""; position: absolute; left: 50%; bottom: -1.2cqmin; width: 1.5cqmin; height: 1.5cqmin; margin-left: -0.75cqmin; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c2, #d9a441 62%, #8f6420); }
.dw-kali::after { content: ""; position: absolute; left: 50%; bottom: -5.6cqmin; width: 1.5cqmin; height: 4.4cqmin; margin-left: -0.75cqmin; background: repeating-linear-gradient(90deg, #0d1c55 0 0.25cqmin, #f3c552 0.25cqmin 0.5cqmin); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.dw-kali.is-alt::after { background: repeating-linear-gradient(90deg, #8c1d10 0 0.25cqmin, #f3c552 0.25cqmin 0.5cqmin); }
.dw-yoke { z-index: 2; }
.wc-chola { --band: max(8cqh, 6.25cqw); }

/* Deepmala: the title's own text is invisible; the canvas draws it in lamps. */
.wc-deepmala {
  --wc-name: #ffd98a;
  --wc-name-font: var(--script);
  background: radial-gradient(70% 45% at 50% 44%, #3a1420 0%, #150810 60%, #07040a 100%);
}
.wc-deepmala .wc-title { color: transparent; white-space: nowrap; font-size: min(14.5cqw, 17cqh); line-height: 1.5; font-weight: 700; animation: none !important; }
.wc-deepmala .wc-line { color: #ffe9b8; }

/* Parikrama: the only daylight card, marble in soft morning light. */
.wc-parikrama {
  --pad-t: 6cqh;
  --pad-b: 60cqh;
  --wc-ink: #4a0f06;
  --wc-name: #8c1d10;
  --wc-name-font: var(--script);
  background: #efd9ad;
}
.wc-parikrama .wc-copy { background: radial-gradient(closest-side, rgba(255, 244, 208, 0.82) 45%, rgba(255, 244, 208, 0) 100%) center 2cqh / min(112cqw, 130cqh) 50cqh no-repeat; }
.wc-parikrama .wc-title { font-size: min(11.5cqw, 10cqh); font-weight: 700; }
.dw-walk { transform-origin: 500px 590px; }

/* "ਦੀਵਾਲੀ ਅਤੇ" opens the sentence on every Bandi Chhor card, so it gets the weight of the line
   that closes it. */
.wc-sarovar .wc-eyebrow, .wc-phulkari .wc-eyebrow, .wc-gwalior .wc-eyebrow, .wc-chola .wc-eyebrow, .wc-deepmala .wc-eyebrow, .wc-parikrama .wc-eyebrow { font-size: min(6.6cqw, 5cqh); font-weight: 500; letter-spacing: 0; opacity: 1; }
.wc-bavan .wc-eyebrow { font-size: calc(var(--m) * 0.024); font-weight: 600; letter-spacing: 0; opacity: 1; }
.wc-sarovar .wc-eyebrow { color: #ffe3a3; }
.wc-gwalior .wc-eyebrow { color: #ffe3a3; }
.wc-chola .wc-eyebrow { color: #8c1d10; font-weight: 600; }
.wc-deepmala .wc-eyebrow { color: #ffe9b8; }
.wc-parikrama .wc-eyebrow { color: #7a1a0c; font-weight: 600; }

/* On a wide screen these two have the least room between their art, so the words tighten up. */
@container (min-aspect-ratio: 1/1) {
  .wc-sarovar .wl-bottom { bottom: -9cqh; }
  .wc-phulkari .wc-eyebrow, .wc-phulkari .wc-line, .wc-parikrama .wc-eyebrow, .wc-parikrama .wc-line { font-size: 3.7cqh; }
  .wc-phulkari .wc-title, .wc-parikrama .wc-title { font-size: 8.5cqh; line-height: 1.22; }
  .wc-phulkari .wc-sign, .wc-parikrama .wc-sign { margin-top: 1cqh; }
  .wc-phulkari .wc-sign b, .wc-parikrama .wc-sign b { font-size: 5.2cqh; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .dw-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dw-flicker var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes dw-flicker {
    0% { transform: scale(1, 1) skewX(0); }
    35% { transform: scale(0.93, 1.09) skewX(2.5deg); }
    70% { transform: scale(1.05, 0.95) skewX(-2deg); }
    100% { transform: scale(0.97, 1.05) skewX(1.5deg); }
  }

  .dw-halo { transform-box: fill-box; transform-origin: center; animation: dw-breathe var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes dw-breathe { from { opacity: 0.7; transform: scale(0.93); } to { opacity: 1; transform: scale(1.06); } }

  .dw-tw { animation: dw-twinkle var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes dw-twinkle { from { opacity: 0.15; } to { opacity: 1; } }

  .dw-sh { animation: dw-shine var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes dw-shine { from { opacity: 0.05; } to { opacity: 0.4; } }

  .dw-window { animation: dw-window var(--t) steps(1) var(--d) infinite; }
  @keyframes dw-window { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0.18; } }

  .dw-ember { animation: dw-rise var(--t) linear var(--d) infinite; }
  @keyframes dw-rise {
    0% { transform: translate(0, 60px); opacity: 0; }
    12% { opacity: 1; }
    75% { opacity: 0.8; }
    100% { transform: translate(var(--x), var(--h)); opacity: 0; }
  }

  .dw-fall { transform-box: fill-box; transform-origin: center; animation: dw-fall var(--t) linear var(--d) infinite; }
  @keyframes dw-fall {
    from { transform: translate(0, calc(var(--h) * -1)) rotate(0deg); }
    to { transform: translate(var(--x), var(--h)) rotate(var(--r)); }
  }

  /* Rangoli: rings bloom outward, then keep turning in opposite directions. */
  .dw-turn { animation: dw-spin var(--t) linear infinite; }
  .dw-turn.is-rev { animation-direction: reverse; }
  @keyframes dw-spin { to { transform: rotate(360deg); } }
  .wc:not(.is-thumb) .dw-bloom { animation: dw-bloom 1.5s cubic-bezier(.2, .8, .2, 1.05) var(--b) both; }
  @keyframes dw-bloom { from { transform: scale(0.45); opacity: 0; } }

  /* Lanterns and the hanging garland drops. */
  .dw-sway { animation: dw-sway var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes dw-sway { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(var(--a)); } }
  .dw-core { animation: dw-core var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes dw-core { from { opacity: 0.55; } to { opacity: 0.98; } }

  /* The doors swing open, then the words arrive. */
  .wc:not(.is-thumb) .dw-door.is-l { animation: dw-door-l 2s cubic-bezier(.55, .05, .2, 1) 0.5s both; }
  .wc:not(.is-thumb) .dw-door.is-r { animation: dw-door-r 2s cubic-bezier(.55, .05, .2, 1) 0.5s both; }
  @keyframes dw-door-l { from { transform: rotateY(0deg); } }
  @keyframes dw-door-r { from { transform: rotateY(0deg); } }
  .dw-rays { animation: dw-spin 70s linear infinite; }

  /* River. */
  .dw-drift { animation: dw-drift var(--t) linear var(--d) infinite; }
  @keyframes dw-drift { from { transform: translateX(-200px); } to { transform: translateX(calc(var(--span) - 200px)); } }
  .dw-bob { animation: dw-bob var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes dw-bob { from { transform: translateY(-3px) rotate(-1.2deg); } to { transform: translateY(3px) rotate(1.2deg); } }
  .dw-ripple { transform-box: fill-box; transform-origin: center; animation: dw-ripple var(--t) ease-out var(--d) infinite; }
  @keyframes dw-ripple { from { transform: scale(0.55); opacity: 0.8; } to { transform: scale(1.25); opacity: 0; } }

  /* Gold ink draws in, foil keeps catching the light. */
  .wc:not(.is-thumb) .dw-ink { stroke-dasharray: 1; animation: dw-ink 2.6s ease-out 0.2s both; }
  @keyframes dw-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .wc-diyas .wc-title, .wc-lanterns .wc-title, .wc-emerald .wc-title { animation-name: wc-rise, dw-foil; animation-duration: 1.1s, 7s; animation-timing-function: cubic-bezier(.2, .7, .2, 1), linear; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
  .is-thumb.wc-diyas .wc-title, .is-thumb.wc-lanterns .wc-title, .is-thumb.wc-emerald .wc-title { animation: dw-foil 7s linear infinite; }
  @keyframes dw-foil { from { background-position: 110% 0; } to { background-position: -110% 0; } }

  /* The 52 lamps: a gold thread runs out to each one, then it catches. */
  .wc:not(.is-thumb) .dw-thread { stroke-dasharray: 1; animation: dw-ink 0.55s ease-out calc(var(--b) - 0.5s) both; }
  .wc:not(.is-thumb) .dw-lit .dw-fire { animation: dw-lit 0.6s ease-out var(--b) both; }
  @keyframes dw-lit { from { opacity: 0; } }
  .wc-bavan { --intro: 0.3s; }

  /* Phulkari: light travelling across silk, and water moving under the temple. */
  .dw-sheen { animation: dw-sheen 6.5s ease-in-out infinite; }
  @keyframes dw-sheen { 0% { transform: translateX(-70%); } 60%, 100% { transform: translateX(70%); } }
  .dw-rip { animation: dw-rip var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes dw-rip { from { transform: translateX(calc(var(--a) * -1)); } to { transform: translateX(var(--a)); } }
  .wc-sarovar .wc-title { animation-name: wc-rise, dw-foil; animation-duration: 1.1s, 7s; animation-timing-function: cubic-bezier(.2, .7, .2, 1), linear; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
  .is-thumb.wc-sarovar .wc-title { animation: dw-foil 7s linear infinite; }

  .wc:not(.is-thumb) .dw-band { animation: dw-band 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .wc:not(.is-thumb) .dw-band.is-low { animation-name: dw-band-low; }
  @keyframes dw-band { from { opacity: 0; transform: translateY(-14%); } }
  @keyframes dw-band-low { from { opacity: 0; transform: translateY(14%); } }

  /* Bandi Chhor: tassels stir, and the marble walkway slowly draws you in. */
  .dw-kali { animation: dw-kali var(--t) ease-in-out var(--d) infinite alternate; }
  @keyframes dw-kali { from { transform: rotate(-0.9deg); } to { transform: rotate(0.9deg); } }
  .wc:not(.is-thumb) .dw-walk { animation: dw-walk 24s ease-in-out infinite alternate; }
  @keyframes dw-walk { to { transform: scale(1.08); } }

  /* Mithai pops into the box. */
  .wc:not(.is-thumb) .dw-pop { animation: dw-pop 0.8s cubic-bezier(.3, 1.6, .5, 1) var(--p) both; }
  @keyframes dw-pop { from { transform: scale(0); } }
}