/*
 * Diwali theme
 * =================================================================
 * Loaded after festival-base.css, only while Diwali is live (see
 * config/festivals.php). It works the way every festival does: it
 * overrides the --pk-* tokens, so everything already built on those
 * tokens changes with it, then adds the ornaments for its slots.
 *
 * The palette is warm and rich but still PahadiKala: the Geru red
 * deepens toward maroon, brass turns to diya gold, and the cream
 * surfaces warm up. Text and status colours are NOT touched, and every
 * text pairing was checked against WCAG AA (4.5:1) when this was written.
 *
 * Page speed rules for everything that moves:
 *   - Only `transform` and `opacity` are ever animated, and only on HTML
 *     elements (or an <svg> as a whole), never on shapes inside an SVG.
 *     Those run on the GPU without repainting; animating SVG internals
 *     repaints every frame and was measured at ~20% of the main thread.
 *   - Flames, glows and wings are therefore small HTML elements, not paths.
 *   - Scenes are paused while off screen (festival-diwali.js).
 *   - Reduced motion: everything stands still, fully drawn.
 */

:root[data-festive="diwali"] {
    /* ---- Brand ---- */
    --pk-geru: #8E2A1A;
    --pk-geru-rgb: 142, 42, 26;
    --pk-geru-deep: #651A0F;
    --pk-geru-tint: #FCF0DA;
    --pk-brass: #8A5E10;

    /* ---- Dark family: maroon-black instead of brown-black ---- */
    --pk-ink: #25100A;
    --pk-night: #3A1409;
    --pk-night-deep: #240A04;
    --pk-night-line: #5E2C14;
    --pk-night-text: #D9C6A8;
    --pk-ember: #EBB44E;
    --pk-ember-soft: #F6C970;

    /* ---- Surfaces and lines: warmer cream ---- */
    --pk-paper: #FFF9EC;
    --pk-sand: #FBF2DF;
    --pk-rice: #F8ECD2;
    --pk-blush: #FFF6E6;
    --pk-blush-deep: #FCEBD0;
    --pk-wash: #FFF4E0;
    --pk-line: #EBDDBF;
    --pk-line-strong: #DBC8A0;

    /* ---- Ornament-only colours (used by the artwork below, not by pages) ---- */
    --pk-fd-gold: #E0A526;
    --pk-fd-marigold: #F08A1D;
    --pk-fd-flame: #FFC94D;
    --pk-fd-leaf: #4C7A45;
}

/* ---- Announcement bar: a gold hairline so it reads as its own band
       above the ribbon, which is a similar colour in this theme. ---- */

.pk-festive-bar { border-bottom: 1px solid rgba(224, 165, 38, .55); }

/* ---- Toran strips (header and footer slots) ---------------------- */

.pk-fd-strip {
    border-bottom: 1px solid var(--pk-line-strong);
    background: var(--pk-paper);
}

.pk-fd-strip--footer {
    border-bottom: 0;
    border-top: 1px solid var(--pk-night-line);
    background: var(--pk-night-deep);
}

.pk-fd-strip svg { height: 34px; }

/* On the product page the dividers sit between content blocks inside the
   page container, so they need space above and below (on the home page the
   sections around them supply it). */
body:has(.product-gallery) .pk-fd-divider { margin: 28px 0; }

/* On a phone the footer's last line carries a 70px margin that keeps it clear
   of the bottom menu. With the greeting after it, that margin became a big
   empty gap in the middle, so it moves to the very end instead. */
@media (max-width: 767.98px) {
    body:has(.pk-fd-greeting) .footer-copyright { margin-bottom: 0; }
    .pk-fd-strip--footer { padding-bottom: 104px; }
}

/* The product page pins its Add to Cart bar to the bottom of a phone screen
   (about 120px tall) and lifts the WhatsApp bubble above it. The greeting and
   toran sit after the footer, so they would end up behind both; this keeps
   room so the greeting ends above the bar and the bubble. */
@media (max-width: 767.98px) {
    body:has(.button-container) .pk-fd-strip--footer { padding-bottom: 170px; }
}

.pk-fd-string  { fill: none; stroke: var(--pk-fd-gold); stroke-width: 1.5; }
.pk-fd-pennant { fill: var(--pk-geru); }
.pk-fd-trim    { fill: var(--pk-fd-gold); }
.pk-fd-bead    { fill: var(--pk-fd-marigold); }
.pk-fd-core    { fill: var(--pk-fd-gold); }
.pk-fd-rule    { fill: var(--pk-fd-gold); }

.pk-fd-strip--footer .pk-fd-pennant { fill: var(--pk-fd-marigold); }

/* ---- Rangoli motif ------------------------------------------------ */

.pk-fd-rangoli { width: 40px; height: 40px; flex: 0 0 auto; }
.pk-fd-rangoli .petal-a { fill: var(--pk-fd-gold); }
.pk-fd-rangoli .petal-b { fill: var(--pk-fd-marigold); }
.pk-fd-rangoli .petal-c { fill: var(--pk-geru); }
.pk-fd-rangoli .dot     { fill: var(--pk-fd-gold); }

/* ---- The flame and glow (HTML, so they run on the GPU) -------------
   Used by every diya in the theme. The container sets where the flame
   sits (--fb bottom, --fw width) and the glow (--hb, --hw); --i staggers
   the flicker so a row of diyas never moves in step. */

.pk-fd-lit { position: relative; display: block; }

.pk-fd-lit > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

.pk-fd-lit > .halo {
    position: absolute;
    left: 50%;
    bottom: var(--hb);
    width: var(--hw);
    aspect-ratio: 1;
    margin-left: calc(var(--hw) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 201, 77, .9) 0, rgba(240, 138, 29, .42) 42%, rgba(240, 138, 29, 0) 70%);
    opacity: .65;
    animation: pk-fd-halo 2.6s ease-in-out calc(var(--i, 0) * -.45s) infinite alternate;
}

.pk-fd-lit > .flame {
    position: absolute;
    left: 50%;
    bottom: var(--fb);
    width: var(--fw);
    aspect-ratio: 1;
    margin-left: calc(var(--fw) / -2);
    border-radius: 0 50% 50% 50%;
    background: radial-gradient(circle at 42% 64%, #FFF4C2 0, var(--pk-fd-flame) 36%, var(--pk-fd-marigold) 100%);
    transform: rotate(45deg);
    transform-origin: 50% 80%;
    animation: pk-fd-flame 2.2s ease-in-out calc(var(--i, 0) * -.37s) infinite;
}

@keyframes pk-fd-flame {
    0%, 100% { transform: rotate(45deg) scale(1); }
    40%      { transform: rotate(45deg) scale(.9, 1.08); }
    70%      { transform: rotate(45deg) scale(1.05, .94); }
}

@keyframes pk-fd-halo { from { opacity: .45; } to { opacity: .85; } }

/* A standing diya. */
.pk-fd-lamp {
    width: 34px;
    height: 34px;
    --fb: 40%; --fw: 30%; --hb: -8%; --hw: 130%;
}

.pk-fd-lamp > svg path { fill: var(--pk-fd-gold); }

/* ---- Hanging lanterns --------------------------------------------
   Hung from the top edge of whatever banner they sit in, swinging from
   the string. The lantern is an HTML box turning as a whole (GPU); its
   glow is painted once and does not animate. */

.geru-hero,
.category-header,
.product-list-heading-bg { position: relative; }

.category-header,
.product-list-heading-bg { overflow: hidden; }

.pk-fd-layer { position: absolute; inset: 0; pointer-events: none; }

.pk-fd-lantern {
    position: absolute;
    top: 0;
    left: var(--x, 50%);
    width: calc(44px * var(--size, 1));
    height: calc(112px * var(--size, 1));
    z-index: 3;
    pointer-events: none;
    transform-origin: 50% 0;
    animation: pk-fd-sway var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate;
}

.pk-fd-lantern svg { display: block; width: 100%; height: 100%; overflow: visible; }

.pk-fd-lantern .string { stroke: var(--pk-fd-gold); stroke-width: 1.2; }
.pk-fd-lantern .cap    { fill: var(--pk-fd-gold); }
.pk-fd-lantern .body   { fill: var(--pk-geru); stroke: var(--pk-fd-gold); stroke-width: 1; }
.pk-fd-lantern .rib    { fill: none; stroke: var(--pk-fd-gold); stroke-width: .8; opacity: .8; }
.pk-fd-lantern .tassel { fill: none; stroke: var(--pk-fd-gold); stroke-width: 1.2; }
.pk-fd-lantern .bead   { fill: var(--pk-fd-marigold); }

@keyframes pk-fd-sway {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(4deg); }
}

/* ---- Drifting sparks --------------------------------------------- */

.pk-fd-sparks {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.pk-fd-sparks i {
    position: absolute;
    bottom: -12px;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--pk-fd-flame);
    box-shadow: 0 0 8px 3px rgba(255, 201, 77, .8);
    opacity: 0;
    animation: pk-fd-rise var(--dur) linear var(--delay) infinite;
}

@keyframes pk-fd-rise {
    0%   { transform: translate(0, 0);        opacity: 0; }
    12%  { opacity: .9; }
    50%  { transform: translate(14px, -300px); }
    88%  { opacity: .7; }
    100% { transform: translate(-8px, -620px); opacity: 0; }
}

/* Large, faint rangoli behind the headline, cut off by the column edge. */
.pk-fd-watermark {
    position: absolute;
    left: 0;
    top: 0;
    width: 560px;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.pk-fd-watermark .pk-fd-rangoli {
    position: absolute;
    left: -200px;
    bottom: -200px;
    width: 400px;
    height: 400px;
    opacity: .16;
}

.pk-fd-watermark .petal-b,
.pk-fd-watermark .petal-c,
.pk-fd-watermark .dot { fill: var(--pk-fd-gold); }

/* ---- Shubh Deepavali seal (home hero) -----------------------------
   Two stacked SVGs: the still badge, and the ring of text above it that
   turns. Turning a whole <svg> is a GPU transform; the ring never repaints. */

.pk-fd-seal {
    position: absolute;
    top: 36%;
    left: calc(560px - 64px);
    width: 128px;
    height: 128px;
    z-index: 4;
    pointer-events: none;
}

.pk-fd-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.pk-fd-seal .base { filter: drop-shadow(0 6px 14px rgba(37, 16, 10, .35)); }

.pk-fd-seal .disc  { fill: var(--pk-geru-deep); }
.pk-fd-seal .edge  { stroke: var(--pk-fd-gold); stroke-width: 1.5; }
.pk-fd-seal .core  { fill: var(--pk-fd-gold); }
.pk-fd-seal .bowl  { fill: var(--pk-geru-deep); }
.pk-fd-seal .flame { fill: var(--pk-geru); }

.pk-fd-seal text {
    fill: var(--pk-fd-flame);
    font: 600 10px var(--pk-font-body);
    letter-spacing: .08em;
}

.pk-fd-seal .ring { animation: pk-fd-turn 30s linear infinite; }

@keyframes pk-fd-turn { to { transform: rotate(360deg); } }

/* ---- Section dividers: shared base -------------------------------- */

.pk-fd-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 26px 24px;
    background: var(--pk-paper);
}

.pk-fd-divider .rule {
    flex: 1 1 0;
    max-width: 380px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pk-fd-gold));
}

.pk-fd-divider .rule:last-child { transform: scaleX(-1); }

.pk-fd-divider .pk-fd-diya { margin: 0; width: 34px; height: 34px; }
.pk-fd-divider .pk-fd-rangoli { width: 64px; height: 64px; }

/* ---- Footer: lit diyas and greeting ------------------------------- */

.pk-fd-greeting {
    padding: 26px 16px 18px;
    background: var(--pk-night-deep);
    text-align: center;
}

.pk-fd-greeting p {
    margin: 10px 0 0;
    color: var(--pk-ember-soft);
    font-family: var(--pk-font-display);
    font-size: 17px;
    letter-spacing: .03em;
}

.pk-fd-greeting .diyas { display: flex; justify-content: center; gap: 18px; }

/* ---- Diya in text (badge and note): a still picture --------------- */

.pk-fd-diya { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.pk-fd-diya .bowl  { fill: var(--pk-geru); }
.pk-fd-diya .flame { fill: var(--pk-fd-flame); }

/* =====================================================================
   Scenes: the animated dividers.
   ---------------------------------------------------------------------
   Every scene carries .pk-fd-scene. festival-diwali.js adds .is-on while
   it is on screen (animations run) and .is-lit the first time it has been
   seen (one-shot intros: diyas being lit, the rangoli being drawn). With
   the script in place, off-screen scenes are paused, so nothing animates
   where nobody can see it. Without the script they simply run.
   ===================================================================== */

.pk-fd-js .pk-fd-scene:not(.is-on),
.pk-fd-js .pk-fd-scene:not(.is-on) * { animation-play-state: paused !important; }

/* ---- 1. Diyas being lit, one after another ------------------------- */

.pk-fd-div--light .row,
.pk-fd-div--checkout .row {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 2.4vw, 26px);
}

.pk-fd-div--light .pk-fd-lamp { width: 40px; height: 40px; }
.pk-fd-div--light .pk-fd-lamp:nth-child(4) { width: 56px; height: 56px; }

@media (prefers-reduced-motion: no-preference) {
    /* The intro is a transition on `scale`, a different property from the
       flicker (transform) and the glow (opacity). Every flame and glow keeps
       exactly ONE animation: two animations on one element, even finished
       ones, pushed the browser's animation work back onto the main thread
       (measured: five times the cost). */
    .pk-fd-js .pk-fd-div--light .pk-fd-lit > .flame { transition: scale .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .3s); }
    .pk-fd-js .pk-fd-div--light .pk-fd-lit > .halo  { transition: scale .9s ease calc(var(--i) * .3s); }

    .pk-fd-js .pk-fd-div--light:not(.is-lit) .pk-fd-lit > .flame,
    .pk-fd-js .pk-fd-div--light:not(.is-lit) .pk-fd-lit > .halo { scale: 0; }
}
/* ---- 2. A rangoli that draws itself -------------------------------- */

.pk-fd-div--draw .draw { width: 84px; height: 84px; overflow: visible; }

.pk-fd-div--draw .s { stroke: var(--pk-fd-gold); stroke-width: 1.2; }
.pk-fd-div--draw .s.a { fill: var(--pk-fd-gold); }
.pk-fd-div--draw .s.b { fill: var(--pk-fd-marigold); }
.pk-fd-div--draw .s.c { fill: var(--pk-geru); }
.pk-fd-div--draw .s.d { fill: var(--pk-fd-gold); }

@keyframes pk-fd-draw {
    0%   { stroke-dashoffset: 1; fill-opacity: 0; }
    60%  { stroke-dashoffset: 0; fill-opacity: 0; }
    100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Drawing is a one-time intro (about four seconds); the slow turn after
       it is a transform on the whole <svg>, so it stays cheap. */
    .pk-fd-js .pk-fd-div--draw .s { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }

    .pk-fd-js .pk-fd-div--draw.is-lit .s {
        animation: pk-fd-draw 1.4s ease forwards;
        animation-delay: calc(var(--i) * .09s);
    }

    .pk-fd-js .pk-fd-div--draw.is-lit .draw { animation: pk-fd-turn 50s linear 3.5s infinite; }
}

/* ---- 3. Diyas floating on dark water ------------------------------- */

.pk-fd-div--water,
.pk-fd-div--sky {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
}

.pk-fd-div--water {
    height: 104px;
    background: linear-gradient(180deg, var(--pk-night-deep), var(--pk-night));
}

.pk-fd-div--water .stars i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--pk-ember-soft);
    opacity: .2;
    animation: pk-fd-twinkle var(--d) ease-in-out var(--delay) infinite alternate;
}

@keyframes pk-fd-twinkle { to { opacity: .95; } }

.pk-fd-div--water .boat {
    position: absolute;
    top: var(--top);
    left: 0;
    width: calc(58px * var(--scale));
    animation: pk-fd-drift var(--dur) linear var(--delay) infinite;
}

.pk-fd-div--water .bob {
    --fb: 55%; --fw: 20%; --hb: 20%; --hw: 90%;
    animation: pk-fd-bob var(--b) ease-in-out infinite alternate;
}

.pk-fd-div--water .bob > svg { position: static; height: auto; }
.pk-fd-div--water .bob > .halo,
.pk-fd-div--water .bob > .flame { z-index: 1; }
.pk-fd-div--water .bob > svg { position: relative; z-index: 2; }
.pk-fd-div--water .bowl { fill: var(--pk-fd-gold); }
.pk-fd-div--water .leaf { fill: var(--pk-fd-leaf); }

@keyframes pk-fd-drift {
    from { transform: translateX(-80px); }
    to   { transform: translateX(100vw); }
}

/* Where supported, travel the width of the band itself rather than the window. */
@supports (width: 1cqw) {
    .pk-fd-div--water { container-type: inline-size; }

    @keyframes pk-fd-drift {
        from { transform: translateX(-80px); }
        to   { transform: translateX(100cqw); }
    }
}

@keyframes pk-fd-bob {
    from { transform: translateY(-2px) rotate(-3deg); }
    to   { transform: translateY(3px) rotate(3deg); }
}

.pk-fd-div--water .wave {
    position: absolute;
    left: 0;
    width: 200%;
}

.pk-fd-div--water .wave.back  { bottom: 0; height: 48px; animation: pk-fd-wave 18s linear infinite; }
.pk-fd-div--water .wave.front { bottom: 0; height: 36px; animation: pk-fd-wave 11s linear infinite; }

.pk-fd-div--water .wave.back path  { fill: rgba(235, 180, 78, .18); }
.pk-fd-div--water .wave.front path { fill: var(--pk-night-deep); opacity: .94; }

@keyframes pk-fd-wave { to { transform: translateX(-50%); } }

/* ---- 4. Winged diyas flying up through the sky --------------------- */

.pk-fd-div--sky {
    height: 150px;
    background: linear-gradient(180deg, var(--pk-paper) 0%, var(--pk-blush-deep) 100%);
}

.pk-fd-div--sky .fly {
    position: absolute;
    bottom: -50px;
    left: var(--x);
    width: var(--size);
    animation: pk-fd-ascend var(--dur) linear var(--delay) infinite;
}

@keyframes pk-fd-ascend {
    0%   { transform: translateY(0);      opacity: 0; }
    12%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(-230px); opacity: 0; }
}

/* The little flying diya (sky and mini scenes): wings, flame, glow, bowl. */
.pk-fd-winged {
    width: 100%;
    aspect-ratio: 48 / 36;
    --fb: 54%; --fw: 17%; --hb: 18%; --hw: 70%;
    animation: pk-fd-wander 3.2s ease-in-out infinite alternate;
}

.pk-fd-winged > svg path { fill: var(--pk-geru); }

@keyframes pk-fd-wander {
    from { transform: translateX(-14px) rotate(-5deg); }
    to   { transform: translateX(14px) rotate(5deg); }
}

.pk-fd-winged > .wing {
    position: absolute;
    top: 38%;
    width: 36%;
    height: 26%;
    border-radius: 50%;
    background: var(--pk-fd-gold);
    opacity: .85;
}

.pk-fd-winged > .wing.l { left: 3%;  transform-origin: 100% 50%; animation: pk-fd-flap-l .7s ease-in-out infinite alternate; }
.pk-fd-winged > .wing.r { right: 3%; transform-origin: 0% 50%;   animation: pk-fd-flap-r .7s ease-in-out infinite alternate; }

@keyframes pk-fd-flap-l { from { transform: rotate(-24deg); } to { transform: rotate(10deg); } }
@keyframes pk-fd-flap-r { from { transform: rotate(24deg); }  to { transform: rotate(-10deg); } }

/* ---- 5. Product page: one diya, bobbing ---------------------------- */

.pk-fd-div--mini { padding: 10px 24px; }
.pk-fd-div--mini .float { display: block; width: 54px; animation: pk-fd-bob 3s ease-in-out infinite alternate; }

/* ---- 6. Checkout: thin and calm ------------------------------------ */

.pk-fd-div--checkout { padding: 8px 16px; background: transparent; }
.pk-fd-div--checkout .rule { opacity: .7; }
.pk-fd-div--checkout .pk-fd-lamp { width: 22px; height: 22px; }
.pk-fd-div--checkout .pk-fd-lit > .flame { animation-duration: 3.6s; }
.pk-fd-div--checkout .pk-fd-lit > .halo  { opacity: .45; animation: none; }

/* ---- Small touches on the home page ------------------------------- */

/* A gold four-point star ahead of every section label. */
.geru-home .geru-eyebrow::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E0A526' d='M12 0 C13 8 16 11 24 12 C16 13 13 16 12 24 C11 16 8 13 0 12 C8 11 11 8 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A gold sheen across the main button: once, just after the page settles, and
   on hover. It does not loop: a looping animation keeps running even when the
   button is scrolled far out of view, and that alone cost main-thread time. */
.geru-btn { position: relative; overflow: hidden; }

.geru-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 224, 140, .55) 50%, transparent 65%);
    transform: translateX(-130%);
    pointer-events: none;
}

.geru-hero .geru-btn::after { animation: pk-fd-sheen 1.4s ease-in-out 1.2s 1; }
.geru-btn:hover::after { animation: pk-fd-sheen 1s ease-in-out; }

@keyframes pk-fd-sheen {
    0%   { transform: translateX(-130%); }
    35%  { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

/* ---- Footer accents ----------------------------------------------
   The footer paints its headings and icons with .aipan-red-text (the brand
   red, !important) on a near-black ground. That is only about 2.5:1 in the
   default design and the deeper Diwali red would be worse, so inside the
   footer the accent turns to the diya gold (about 9:1). */
:root[data-festive="diwali"] .footer .aipan-red-text {
    color: var(--pk-ember) !important;
}

/* ---- Fly to cart: a diya travels from the button to the cart icon -- */

.pk-fd-flyer {
    position: fixed;
    left: 0;
    top: 0;
    width: 34px;
    z-index: 10050;
    pointer-events: none;
    will-change: transform;
}

.pk-fd-flyer svg { display: block; width: 100%; overflow: visible; }

.pk-fd-bump { animation: pk-fd-bump .5s ease; }

@keyframes pk-fd-bump {
    40% { transform: scale(1.25); }
}

/* ---- Smaller screens: fewer moving parts --------------------------- */

@media (max-width: 991px) {
    .pk-fd-seal,
    .pk-fd-watermark,
    .pk-fd-layer .pk-fd-lantern:first-of-type { display: none; }
}

/* Phones: the same artwork, much calmer. Measured scrolling the whole home page
   on a CPU slowed 4x, the running scenes were about three quarters of the extra
   cost of the festival, while the still artwork was the rest. So on small
   screens the only continuous motion left is the swaying lanterns on the
   hero; the sparks, the drifting boats, the waves, the twinkling stars, the
   flying diyas and the flickering flames all hold still in a fixed arrangement. */
@media (max-width: 767px) {
    .pk-fd-sparks { display: none; }

    /* Water: boats sit at fixed spots, waves and stars stand still. */
    .pk-fd-div--water .boat,
    .pk-fd-div--water .bob,
    .pk-fd-div--water .wave.back,
    .pk-fd-div--water .wave.front,
    .pk-fd-div--water .stars i { animation: none; }
    .pk-fd-div--water .boat:nth-of-type(1) { left: 10%; }
    .pk-fd-div--water .boat:nth-of-type(2) { left: 38%; }
    .pk-fd-div--water .boat:nth-of-type(3) { left: 66%; }

    /* Sky: the few diyas hover at different heights instead of rising. */
    .pk-fd-div--sky .fly,
    .pk-fd-winged { animation: none; opacity: 1; }
    .pk-fd-div--sky .fly { bottom: calc(26px + var(--i) * 30px); }
    .pk-fd-winged > .wing.l { animation: none; transform: rotate(-12deg); }
    .pk-fd-winged > .wing.r { animation: none; transform: rotate(12deg); }
    .pk-fd-div--sky .fly:nth-child(n+4) { display: none; }
    .pk-fd-div--mini .float { animation: none; }

    /* Glows and flames stand still. Each flickering flame is its own layer for
       the browser to build every frame, and measured on a slow phone that layer
       count was most of what scrolling cost. The flames are still drawn lit. */
    .pk-fd-lit > .halo,
    .pk-fd-lit > .flame { animation: none; }
    .pk-fd-lit > .flame { transform: rotate(45deg); }

    .pk-fd-js .pk-fd-div--draw.is-lit .draw { animation: none; }
}
@media (max-width: 575px) {
    .pk-fd-sparks i:nth-child(n+8) { display: none; }
    .pk-fd-greeting .diyas { gap: 10px; }
    .pk-fd-div--water { height: 92px; }
    .pk-fd-div--water .boat:nth-of-type(n+4) { display: none; }
    .pk-fd-div--sky { height: 130px; }
    .pk-fd-div--sky .fly:nth-child(n+5) { display: none; }
    .pk-fd-div--light .pk-fd-lamp { width: 26px; height: 26px; }
    .pk-fd-div--light .pk-fd-lamp:nth-child(4) { width: 34px; height: 34px; }
}

/* ---- Reduced motion: everything stands still, fully shown ---------- */

@media (prefers-reduced-motion: reduce) {
    .pk-fd-lantern,
    .pk-fd-sparks i,
    .pk-fd-seal .ring,
    .pk-fd-lit > .flame,
    .pk-fd-lit > .halo,
    .pk-fd-winged,
    .pk-fd-winged > .wing,
    .pk-fd-div--water .boat,
    .pk-fd-div--water .bob,
    .pk-fd-div--water .wave,
    .pk-fd-div--water .stars i,
    .pk-fd-div--sky .fly,
    .pk-fd-div--mini .float,
    .geru-btn::after { animation: none !important; }

    .pk-fd-sparks { display: none; }

    /* Standing still, the flyers must not sit at the very bottom edge. */
    .pk-fd-div--sky .fly { bottom: 28px; opacity: 1; }
    .pk-fd-flyer { display: none; }
}