/*
 * Halloween dress for the storefront, loaded by theme-assets only while SeasonTheme is "halloween".
 * Colours come from the --hw-* and recoloured tokens in ui-core.css (:root[data-season="halloween"]);
 * this file only draws the decorations, unlayered so they sit over the layered shop rules:
 *   .hw-sky ......... fixed night behind the page: the login's sun and moon (.sky-orb, ui-core.css; the moon is the
 *                     author's amber glass one), stars, the video author's mountains with his clouds and his wolf
 *                     (x-shop.scene-land, ui-core.css) and rolling mist; it cross-fades between day and night with the page
 *   .sky-flight ..... the bats and the witch (x-shop.sky-flight, season-flight.js), in the sky behind the page: they
 *                     cross the sky at night and leave it when day breaks (.is-retiring)
 *   .season-spider .. the canvas the author's spider walks on after the pointer at night on the login (season-spider.js)
 *   .hw-candles ..... candles on an iron dish: shaded wax, melted rim and drips, wick, layered flame + halo
 *   footer .......... graveyard skyline on top of .footer-dark, skulls with ember eyes among the graves (.hw-skulls)
 *   .season-vines ... the video author's vine frame with pumpkins and lanterns (season-vines.js) round the login card and the
 *                     home banner; it grows at night, the lanterns flicker and the pumpkins grin and chuckle in the torch light
 * Anything that moves only runs with <html data-season-fx> (the season.effects setting) and never under
 * prefers-reduced-motion. Images: assets/shop/season/*.svg (black ones are used as masks).
 */

:root[data-season="halloween"] {
    --footer-bg: var(--hw-footer);
    --footer-box: var(--hw-footer-box);
}

::selection { background: color-mix(in srgb, var(--primary) 32%, transparent); }

/* ---------- Night sky ---------- */
.hw-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(1.4px 1.4px at 8% 22%, var(--hw-star) 98%, transparent),
        radial-gradient(1px 1px at 23% 12%, var(--hw-star) 98%, transparent),
        radial-gradient(1.6px 1.6px at 37% 30%, var(--hw-star) 98%, transparent),
        radial-gradient(1px 1px at 52% 16%, var(--hw-star) 98%, transparent),
        radial-gradient(1.3px 1.3px at 64% 34%, var(--hw-star) 98%, transparent),
        radial-gradient(1px 1px at 71% 9%, var(--hw-star) 98%, transparent),
        radial-gradient(1.5px 1.5px at 93% 41%, var(--hw-star) 98%, transparent),
        radial-gradient(1px 1px at 15% 47%, var(--hw-star) 98%, transparent),
        radial-gradient(1.2px 1.2px at 46% 55%, var(--hw-star) 98%, transparent),
        radial-gradient(420px 320px at 88% 12%, var(--hw-moon), transparent 70%);
}
/* The sun and the moon where the witch circles (.sky-flight below), the moon the author's amber glass disc with its
   craters, here and on the login. */
.hw-sky { --orb-size: 64px; --orb-right: 9%; --orb-top: calc(var(--sticky-top) + 34px); }
.sky-orb.is-moon { border: 1px solid var(--hw-moon-rim); background: url(season/moon-halloween.svg) center / cover; box-shadow: var(--hw-moon-shade); }
/* The mountains under the night sky, lower than behind the login so they stay a backdrop. */
.hw-sky .scene-land { --land-w: max(118vw, 162vh); }
/* Mist drifting along the bottom of the screen, over the foot of the mountains. */
.hw-sky::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: 0; height: 38vh;
    background: radial-gradient(40% 60% at 20% 100%, var(--hw-mist), transparent 70%), radial-gradient(35% 50% at 60% 100%, var(--hw-mist), transparent 70%), radial-gradient(30% 55% at 90% 100%, var(--hw-mist), transparent 70%); }
@media (min-width: 768px) { .hw-sky { --orb-size: 92px; --orb-right: 6%; } }


/* ---------- The author's bats and witch (x-shop.sky-flight) ---------- */
/* Each crosses the sky and back on a gentle wave, turning round at either end; the witch rides to and fro across the face
   of the moon (--moon-right/-top/-size: the .hw-sky moon here, the login's in auth.css). Only at night. The flight
   starts under the sticky header and menu so nothing flies hidden behind them. Each flyer rides a track as wide as the sky
   that the graphics card slides across (translate, in % of the track: of the sky), its wave on the drawing inside; nothing
   is laid out or repainted as they cross. */
.sky-flight { --moon-right: 9%; --moon-top: 34px; --moon-size: 64px; position: absolute; z-index: 1; inset: var(--sticky-top) 0 0; overflow: hidden; opacity: 0; transition: opacity .5s ease; }
:root[data-theme="dark"] .sky-flight, .sky-flight.is-retiring { opacity: 1; }
.sky-bat, .sky-witch { position: absolute; left: 0; top: var(--fly-height, 24%); width: 100%; translate: -18% 0; color: var(--sky-bat); will-change: transform; animation: sky-roam var(--fly-duration, 19s) linear var(--fly-delay, 0s) infinite paused; }
.flyer-facing { display: block; width: var(--fly-size, 30px); animation: flight-turn var(--fly-duration, 19s) steps(1) var(--fly-delay, 0s) infinite paused; }
.flyer-facing > * { animation: sky-wave var(--fly-duration, 19s) linear var(--fly-delay, 0s) infinite paused; }
.sky-flight svg { display: block; width: 100%; height: auto; overflow: visible; }
.bat-wing { transform-origin: 0 1px; animation: bat-flap .22s ease-in-out infinite alternate paused; }
.bat-wing-right { animation-name: bat-flap-right; }
:root[data-theme="dark"] .sky-flight:not(.is-retiring) .sky-bat, :root[data-theme="dark"] .sky-flight:not(.is-retiring) .sky-witch, :root[data-theme="dark"] .sky-flight:not(.is-retiring) .flyer-facing, :root[data-theme="dark"] .sky-flight:not(.is-retiring) .flyer-facing > *, :root[data-theme="dark"] .sky-flight:not(.is-retiring) .bat-wing { animation-play-state: running; }
.sky-flight.is-retiring .sky-witch, .sky-flight.is-retiring .sky-witch .flyer-facing, .sky-flight.is-retiring .sky-witch .flyer-facing > * { animation-play-state: running; }
/* Our night is darker than the author's, so each bat is rimmed by the moon and faintly lit by the lanterns. */
.sky-bat .flyer-facing { filter: drop-shadow(0 0 .6px var(--sky-bat-rim)) drop-shadow(0 0 5px var(--sky-bat-glow)); }
.sky-bat.is-bat-1 { --fly-height: 18%; --fly-duration: 23s; --fly-delay: -4s; --fly-size: 29px; }
.sky-bat.is-bat-2 { --fly-height: 31%; --fly-duration: 29s; --fly-delay: -12s; --fly-size: 23px; opacity: .78; }
.sky-bat.is-bat-3 { --fly-height: 9%; --fly-duration: 18s; --fly-delay: -9s; --fly-size: 19px; opacity: .68; }
.sky-bat.is-bat-4 { --fly-height: 25%; --fly-duration: 26s; --fly-delay: -18s; --fly-size: 34px; }
.sky-bat.is-bat-5 { --fly-height: 13%; --fly-duration: 31s; --fly-delay: -6s; --fly-size: 17px; opacity: .65; }
.sky-bat.is-bat-6 { --fly-height: 35%; --fly-duration: 22s; --fly-delay: -15s; --fly-size: 25px; }
.sky-witch { --fly-size: 100px; --fly-duration: 17s; --fly-delay: -4s; --witch-from: calc(100% - var(--moon-right) - var(--moon-size) - var(--fly-size) * 1.75); --witch-to: calc(100% - var(--moon-right) - var(--fly-size) * .25);
    translate: var(--witch-from) 0; top: calc(var(--moon-top) + var(--moon-size) / 2 - var(--fly-size) * .5); animation-name: witch-roam; color: var(--sky-witch); }
.sky-witch .flyer-facing { filter: drop-shadow(0 1px 0 var(--sky-witch-rim)); }
.sky-witch .flyer-facing > * { animation-name: witch-wave; }
.sky-witch-art { display: block; width: 100%; aspect-ratio: 3600 / 3400; background: currentColor; -webkit-mask: url(season/witch.svg) center / contain no-repeat; mask: url(season/witch.svg) center / contain no-repeat; transform: scaleX(-1); }
@media (max-width: 640px) { .sky-witch { --fly-size: 72px; } }
@media (min-width: 768px) { .sky-flight { --moon-right: 6%; --moon-size: 92px; } }
/* The spider's canvas over the whole screen (season-spider.js), faded in at night. */
.season-spider { position: fixed; z-index: 994; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.season-spider.is-active { opacity: 1; }

/* ---------- Candles ---------- */
/* A group stands on a small iron dish; each candle (.hw-candle > .hw-flame) is lit from above. */
.hw-candles { position: relative; display: flex; align-items: flex-end; gap: 5px; padding: 0 4px 4px; pointer-events: none; }
.hw-candles::after { content: ''; position: absolute; left: -3px; right: -3px; bottom: 0; height: 6px; border-radius: 2px 2px 8px 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hw-ember) 55%, var(--hw-castle)) 0 1.5px, color-mix(in srgb, var(--hw-ember) 18%, var(--hw-castle)) 2px, var(--hw-castle));
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .45); }
.hw-candle { position: relative; display: block; width: 11px; height: var(--h, 28px); border-radius: 2px 2px 1px 1px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hw-flame) 55%, transparent), transparent 45%), linear-gradient(90deg, var(--hw-wax-shade), var(--hw-wax) 32%, var(--hw-flame-core) 46%, var(--hw-wax) 62%, var(--hw-wax-shade));
    box-shadow: inset 0 -5px 6px -3px color-mix(in srgb, var(--hw-wax-shade) 80%, var(--hw-castle)); }
/* The melted rim at the top, and two runs of wax down the front. */
.hw-candle::before { content: ''; position: absolute; top: -2px; left: -1px; right: -1px; height: 5px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, var(--hw-flame-core), var(--hw-wax) 55%, var(--hw-wax-shade)); }
.hw-candle::after { content: ''; position: absolute; top: 1px; left: 0; width: 100%; height: 14px;
    background: linear-gradient(var(--hw-wax), var(--hw-wax)) 1px 0 / 3px 8px no-repeat, radial-gradient(circle, var(--hw-wax) 1.8px, transparent 2.1px) .5px 6px / 4px 4px no-repeat, linear-gradient(var(--hw-flame-core), var(--hw-flame-core)) 7px 0 / 2.4px 4px no-repeat, radial-gradient(circle, var(--hw-flame-core) 1.4px, transparent 1.7px) 6.2px 2.4px / 4px 4px no-repeat; }
/* Flame: a bright core inside a yellow-orange teardrop, a dark wick at its foot and a soft halo around it. */
.hw-flame { position: absolute; z-index: 1; bottom: calc(100% + 1px); left: 50%; width: 9px; height: 18px; margin-left: -4.5px; border-radius: 50% 50% 50% 50% / 72% 72% 28% 28%; transform-origin: 50% 92%;
    background: radial-gradient(ellipse 30% 26% at 50% 76%, var(--hw-flame-core) 0 60%, transparent), radial-gradient(ellipse 54% 70% at 50% 66%, var(--hw-flame) 0 50%, var(--hw-orange) 82%, color-mix(in srgb, var(--hw-orange) 0%, transparent)); }
.hw-flame::before { content: ''; position: absolute; bottom: -2px; left: 50%; width: 1.6px; height: 5px; margin-left: -.8px; border-radius: 1px; background: var(--hw-castle); }
.hw-flame::after { content: ''; position: absolute; z-index: -1; inset: -16px -18px -10px; border-radius: 50%; background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--hw-flame) 34%, transparent), color-mix(in srgb, var(--hw-orange) 10%, transparent) 45%, transparent 68%); }
.hw-candle.is-sm { width: 9px; }
.hw-candle.is-sm > .hw-flame { width: 7.5px; height: 15px; margin-left: -3.75px; }

/* ---------- Login / register (layouts.auth) ---------- */
.auth-shell { box-shadow: var(--auth-glass-shadow), 0 0 0 1px color-mix(in srgb, var(--hw-orange) 22%, transparent); }

/* ---------- The author's vine frame (season-vines.js) ---------- */
/* Drawn round its target with this margin (--vines-x / --vines-y) so the pumpkins and lanterns hang just outside it; the
   pumpkins at --vines-pumpkin of the author's size (smaller round the wide home banner, where his would crowd it). On a layer
   of its own, so its growing and its lanterns repaint only the frame, not the banner under it.
   The frame stops at the screen's sides (season-vines.js) and clips its leaves there, so nothing pushes the page wider than
   the phone. */
.season-vines { --vines-x: 44px; --vines-y: 42px; --vines-pumpkin: 1; position: absolute; z-index: 3; pointer-events: none; will-change: transform; overflow-x: clip; }
.season-vines > svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 640px) { .season-vines { --vines-x: 27px; --vines-y: 25px; } }
html:has(.season-vines) body { overflow-x: clip; }
.hero:has(> .season-vines) { position: relative; }
.hero > .season-vines { --vines-pumpkin: .6; }
@media (max-width: 640px) { .hero > .season-vines { --vines-pumpkin: .75; } }
.season-vines .lantern-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.season-vines .pumpkin-face-normal, .season-vines .pumpkin-face-smile { transition: opacity .24s ease; }
.season-vines .pumpkin-face-smile { opacity: 0; }
.season-vines .pumpkin-reaction.is-beam-lit .pumpkin-face-normal { opacity: 0; }
.season-vines .pumpkin-reaction.is-beam-lit .pumpkin-face-smile { opacity: 1; }
.season-vines .pumpkin-reaction { transform-origin: 0 30px; }
.season-vines .leaf-reaction { transform-box: view-box; transform-origin: 0 0; }

/* ---------- Dialogs (deposit methods, card, bank, gifts) ---------- */
.dlg { border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); box-shadow: var(--shadow-pop), 0 0 46px -12px color-mix(in srgb, var(--hw-orange) 50%, transparent); }
.dlg-head h3 { display: flex; align-items: center; gap: 8px; }
.dlg-head h3::before { content: ''; flex: none; width: 26px; height: 26px; background: url(season/pumpkin.svg) center / contain no-repeat; }

/* ---------- Header and footer ---------- */
.header, .main-nav { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary) 30%, transparent), 0 10px 26px -16px color-mix(in srgb, var(--primary) 55%, transparent); }
@media (min-width: 768px) { .header { box-shadow: none; } }

.footer-dark { position: relative; margin-top: 46px; }
/* An ember glow on the horizon behind the graves, so their outline reads on the dark page too. */
.footer-dark::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 90px; background: radial-gradient(60% 100% at 30% 100%, color-mix(in srgb, var(--hw-orange) 26%, transparent), transparent 72%), radial-gradient(50% 90% at 80% 100%, color-mix(in srgb, var(--hw-purple) 30%, transparent), transparent 72%); pointer-events: none; }
.footer-dark::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 44px; background: var(--hw-grave); -webkit-mask: url(season/graves.svg) 0 100% / 400px 44px repeat-x; mask: url(season/graves.svg) 0 100% / 400px 44px repeat-x; pointer-events: none; }
.footer-dark > .hw-candles { position: absolute; z-index: 1; bottom: calc(100% + 2px); right: 18%; }
/* Skulls lying among the graves (season/skull*.svg, drawn art, their eyes flicker by themselves). */
.footer-dark > .hw-skulls { position: absolute; z-index: 1; left: 0; right: 0; bottom: 100%; height: 30px; pointer-events: none;
    background: url(season/skull-bones.svg) 4% 100% / 34px auto no-repeat, url(season/skull.svg) 47% 100% / 26px auto no-repeat, url(season/skull.svg) 94% 100% / 22px auto no-repeat; }
@media (min-width: 768px) {
    .footer-dark > .hw-skulls { height: 42px; background-size: 46px auto, 34px auto, 28px auto; }
}
@media (min-width: 768px) {
    .footer-dark::after { height: 58px; -webkit-mask-size: 520px 58px; mask-size: 520px 58px; }
    .footer-dark { margin-top: 60px; }
}

/* ---------- Motion (season.effects) ---------- */
@media (prefers-reduced-motion: no-preference) {
    [data-season-fx] .hw-flame { animation: hw-flicker 1.6s ease-in-out infinite; }
    [data-season-fx] .hw-flame::after { animation: hw-glow 2.4s ease-in-out infinite alternate; }
    [data-season-fx] .hw-candle:nth-child(2n) > .hw-flame { animation-duration: 1.2s; animation-delay: -.4s; }
    [data-season-fx] .hw-sky::after { animation: hw-mist 26s ease-in-out infinite alternate; }
    /* The author's lanterns and pumpkins, alive only at night. */
    :root[data-theme="dark"][data-season-fx] .season-vines .lantern-flame { animation: candle-flame .87s ease-in-out var(--fire-delay, 0ms) infinite alternate; }
    :root[data-theme="dark"][data-season-fx] .season-vines .lantern-glass { animation: candle-glass 1.73s ease-in-out var(--glow-delay, 0ms) infinite; }
    :root[data-theme="dark"][data-season-fx] .season-vines .lantern-halo { animation: candle-halo 2.19s ease-in-out var(--glow-delay, 0ms) infinite; }
    :root[data-theme="dark"][data-season-fx] .season-vines .pumpkin-glow { animation: pumpkin-light 3.1s ease-in-out infinite; }
    :root[data-theme="dark"][data-season-fx] .season-vines .lantern-swing { transform-origin: 0 -25px; animation: lantern-sway 4.7s ease-in-out infinite; }
    :root[data-theme="dark"][data-season-fx] .season-vines .lantern-ember { animation: candle-ember 1.9s ease-out infinite; }
    .season-vines .pumpkin-reaction.is-beam-lit { animation: pumpkin-chuckle 1.1s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .sky-flight * { animation: none !important; }
    .sky-bat { translate: 22% 0; }
    .sky-bat.is-bat-2 { translate: 72% 0; }
    .sky-bat.is-bat-3 { translate: 48% 0; }
    .sky-bat:is(.is-bat-4, .is-bat-5, .is-bat-6), .sky-witch { display: none; }
    .season-spider { transition-duration: .01ms; }
}

@keyframes hw-flicker { 0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; } 30% { transform: scale(.92, 1.08) rotate(2deg); } 55% { transform: scale(1.05, .9) rotate(-1deg); opacity: .85; } 80% { transform: scale(.96, 1.04) rotate(1.5deg); } }
@keyframes hw-glow { from { opacity: .75; scale: .94; } to { opacity: 1; scale: 1.06; } }
@keyframes hw-mist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
/* The author's flight: across the sky and back on a gentle wave, turning round halfway (flight-turn). */
@keyframes sky-roam { 0%, 100% { translate: -18% 0; } 50% { translate: 112% 0; } }
@keyframes sky-wave {
    0% { translate: 0 0; rotate: -3deg; }
    12% { translate: 0 -12px; rotate: 3deg; }
    25% { translate: 0 9px; rotate: -4deg; }
    38% { translate: 0 -8px; rotate: 2deg; }
    50% { translate: 0 0; rotate: 0deg; }
    62% { translate: 0 10px; rotate: -2deg; }
    75% { translate: 0 -13px; rotate: 3deg; }
    88% { translate: 0 7px; rotate: -3deg; }
    100% { translate: 0 0; rotate: 0deg; }
}
/* The witch across the moon and back. */
@keyframes witch-roam { 0%, 100% { translate: var(--witch-from) 0; } 50% { translate: var(--witch-to) 0; } }
@keyframes witch-wave {
    0%, 100% { translate: 0 0; rotate: -3deg; }
    12%, 62% { translate: 0 -8px; rotate: 2deg; }
    25%, 75% { translate: 0 7px; rotate: -2deg; }
    38%, 88% { translate: 0 -5px; rotate: 2deg; }
    50% { translate: 0 0; rotate: 3deg; }
}
@keyframes flight-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes bat-flap { from { transform: rotate(-13deg) scaleY(.58); } to { transform: rotate(15deg) scaleY(1); } }
@keyframes bat-flap-right { from { transform: rotate(13deg) scaleY(.58); } to { transform: rotate(-15deg) scaleY(1); } }
/* The author's candle light and the pumpkins' chuckle. */
@keyframes candle-flame {
    0% { transform: scale(.9, 1.05) skewX(-5deg); opacity: .9; }
    22% { transform: scale(1.08, .88) skewX(4deg); }
    45% { transform: scale(.85, 1.16) skewX(-3deg); opacity: 1; }
    68% { transform: scale(1.03, .97) skewX(6deg); }
    100% { transform: scale(.92, 1.1) skewX(-4deg); opacity: .94; }
}
@keyframes candle-glass { 0%, 100% { opacity: .62; } 15%, 54% { opacity: .78; } 34%, 72% { opacity: .57; } 86% { opacity: .73; } }
@keyframes candle-halo { 0%, 100% { opacity: .18; } 31% { opacity: .32; } 51% { opacity: .22; } 76% { opacity: .29; } }
@keyframes pumpkin-light { 0%, 100% { opacity: .75; } 43% { opacity: 1; } 68% { opacity: .83; } }
@keyframes lantern-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes candle-ember { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .8; } 100% { transform: translate(3px, -20px); opacity: 0; } }
@keyframes pumpkin-chuckle {
    0%, 52%, 100% { transform: translateY(0) rotate(0) scale(1); }
    16% { transform: translateY(-1.5px) rotate(-2deg) scale(1.025, .985); }
    30% { transform: translateY(0) rotate(1.5deg) scale(.99, 1.015); }
    42% { transform: translateY(-.7px) rotate(-1deg) scale(1.012, .992); }
}