/* The season on the site — App\Support\Season, public/js/season.js. Loaded only while a season is on.
   Theme tokens where a colour must follow light/dark; the season's own colours (orange, red, gold) are
   the same in both, set on dark-enough grounds. */
:root {
  --ps-season-ink: #0f172a;
  --ps-season-card: #ffffff;
  --ps-season-glow: rgba(233, 118, 31, .35);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ps-season-ink: #f1f5f9; --ps-season-card: #121b2e; } }
:root[data-theme="dark"] { --ps-season-ink: #f1f5f9; --ps-season-card: #121b2e; }
.ps-season--christmas { --ps-season-glow: rgba(247, 195, 44, .45); }
.ps-season--easter { --ps-season-glow: rgba(232, 70, 124, .4); }
.ps-season--newyear { --ps-season-glow: rgba(247, 195, 44, .55); }

/* ── the top band carries the sky ── */
.ps-season .ph-hero, .ps-season .ss-hero { position: relative; overflow: hidden; }
.ps-season-sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ps-season-sky canvas { display: block; width: 100%; height: 100%; }
.ps-season .ph-hero-inner, .ps-season .ss-hero-inner { position: relative; z-index: 2; }
/* Halloween dusk: a warm glow low in the band, a cold one at the top. Under the text, over the photo. */
.ps-season--halloween .ph-hero-overlay { background: linear-gradient(180deg, rgba(39, 16, 62, .72) 0%, rgba(15, 23, 42, .55) 55%, rgba(233, 118, 31, .38) 100%); }
.ps-season--halloween .ss-hero { background-image: radial-gradient(120% 90% at 85% 120%, rgba(233, 118, 31, .32), transparent 60%); }

/* ── Halloween: the "Storybook" design (owner, 2026-10-06 — picked from three, without the sweets; the proposals are in
   work/halloween-designs). season.js draws the pieces as SVG; here are their places, sizes and motion. The homepage's
   tall photo band gets the full size, the short bands (.ss-hero) a smaller one. All under the words, never clickable. */
/* the crescent moon, top right, with twinkling stars around it */
.ps-hw-moon { position: absolute; right: clamp(0px, 4.7vw, 60px); top: clamp(0px, 1.4vw, 18px); width: clamp(104px, 15vw, 190px); aspect-ratio: 1; }
.ss-hero .ps-hw-moon { right: clamp(0px, 11vw, 150px); top: -16px; width: clamp(84px, 10vw, 128px); }
.ps-hw-moon > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ps-hw-star { position: absolute; width: 9%; aspect-ratio: 1; animation: ps-hw-twinkle 2.6s ease-in-out infinite alternate; }
.ps-hw-star svg { display: block; width: 100%; height: 100%; }
@keyframes ps-hw-twinkle { from { opacity: .25; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
/* the web, top left; its spider lets itself down slowly (11 s), waits, climbs back (8 s) and rests */
.ps-hw-web { position: absolute; left: 0; top: 0; width: clamp(100px, 15vw, 190px); aspect-ratio: 1;
  --ps-hw-drop: clamp(130px, 18vw, 230px); --ps-hw-spider: clamp(20px, 2.4vw, 30px); }
.ss-hero .ps-hw-web { width: clamp(84px, 10.3vw, 132px); --ps-hw-drop: clamp(48px, 5vw, 64px); --ps-hw-spider: clamp(18px, 1.8vw, 22px); }
.ps-hw-web > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ps-hw-drop { position: absolute; left: 36%; top: 36%; }
.ps-hw-thread { position: absolute; left: 0; top: 0; width: 1px; height: var(--ps-hw-drop); background: rgba(243, 234, 219, .85);
  transform-origin: 50% 0; animation: ps-hw-thread 26s ease-in-out -9s infinite; }
.ps-hw-spider { position: absolute; top: 0; left: calc(var(--ps-hw-spider) * -.5); width: var(--ps-hw-spider); animation: ps-hw-spider 26s ease-in-out -9s infinite; }
.ps-hw-spider svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 0; animation: ps-hw-sway 3.6s ease-in-out infinite alternate; }
@keyframes ps-hw-thread { 0%, 6% { transform: scaleY(.04); } 48%, 60% { transform: scaleY(1); } 90%, 100% { transform: scaleY(.04); } }
@keyframes ps-hw-spider { 0%, 6% { transform: translateY(calc(var(--ps-hw-drop) * .04)); } 48%, 60% { transform: translateY(var(--ps-hw-drop)); } 90%, 100% { transform: translateY(calc(var(--ps-hw-drop) * .04)); } }
@keyframes ps-hw-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
/* ONE ghost Miško at a time (Maria, 2026-10-06: instead of the bats; owner the same day: one, slower, more see-through) —
   33 s across, 9 s away, then back at another height (season.js) */
.ps-ghost { position: absolute; left: -120px; top: var(--y); width: clamp(54px, 6.6vw, 84px); opacity: .55; pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(214, 226, 255, .45)); animation: ps-ghost-cross 42s linear -10s infinite; }
.ss-hero .ps-ghost { width: clamp(44px, 4.4vw, 56px); }
.ps-ghost > span { display: block; animation: ps-ghost-bob 4.8s ease-in-out infinite alternate; }
.ps-ghost img { display: block; width: 100%; height: auto; transform-origin: 50% 90%; animation: ps-ghost-waddle 1.4s ease-in-out infinite alternate; }
@keyframes ps-ghost-cross { 0% { transform: translateX(0); } 78%, 100% { transform: translateX(calc(100vw + 240px)); } }
@keyframes ps-ghost-bob { from { transform: translateY(-9px); } to { transform: translateY(9px); } }
@keyframes ps-ghost-waddle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
/* carved pumpkins, bottom right, their candles flickering */
.ps-hw-pumpkins { position: absolute; right: clamp(4px, 2vw, 26px); bottom: -6px; width: clamp(130px, 21vw, 270px); aspect-ratio: 270 / 126; }
.ss-hero .ps-hw-pumpkins { right: clamp(4px, 5.5vw, 70px); width: clamp(100px, 12.5vw, 160px); }
.ps-hw-pumpkins > svg { position: absolute; height: auto; overflow: visible; }
.ps-hw-pk-big { right: 0; bottom: 0; width: 50%; z-index: 1; }
.ps-hw-pk-mid { right: 41%; bottom: 5%; width: 39%; z-index: 0; }
.ps-hw-pk-small { right: 31%; bottom: -3%; width: 25%; z-index: 2; }
.ps-hw-light { position: absolute; left: -10%; right: -14%; bottom: -16%; height: 46%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 160, 60, .5), transparent); }
.ps-hw-flame { animation: ps-hw-flicker 3.1s linear infinite; }
.ps-hw-pk-mid .ps-hw-flame { animation-delay: -1.2s; animation-duration: 2.7s; }
.ps-hw-pk-small .ps-hw-flame { animation-delay: -2s; animation-duration: 3.5s; }
@keyframes ps-hw-flicker { 0% { opacity: .78; } 9% { opacity: 1; } 17% { opacity: .84; } 28% { opacity: .97; } 41% { opacity: .76; } 52% { opacity: 1; } 66% { opacity: .86; } 79% { opacity: .98; } 90% { opacity: .82; } 100% { opacity: .78; } }
/* The hunt's pumpkins leave the bottom-right corner to the carved ones (owner, 2026-10-06) — the bottom-left is free now
   that the design has no sweets. Halloween only: the other seasons keep their places. */
.ps-season--halloween .ps-hunt--home { right: auto; left: 5%; }
.ps-season--halloween .ps-hunt--stones { right: auto; left: max(10px, calc((100% - var(--ps-content, 1100px)) / 2 - 46px)); }
.ps-season--halloween .ps-hunt--countries { top: auto; bottom: 12px; right: 36%; }
.ps-season--halloween .ps-hunt--about { right: auto; left: 28%; }

/* Easter's butterflies cross the band on this path. */
@keyframes ps-sky-cross {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(28vw, -18px); }
  50%  { transform: translate(55vw, 10px); }
  75%  { transform: translate(82vw, -12px); }
  100% { transform: translate(calc(100vw + 120px), 6px); }
}

/* Christmas: a string of lights under the site header. */
.ps-season--christmas .ps-h { position: relative; }
.ps-season--christmas .ps-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 10px; pointer-events: none; z-index: 5;
  background:
    radial-gradient(circle 4px at 12px 5px, #f7c32c 98%, transparent) 0 0 / 96px 10px repeat-x,
    radial-gradient(circle 4px at 36px 5px, #e14d4d 98%, transparent) 0 0 / 96px 10px repeat-x,
    radial-gradient(circle 4px at 60px 5px, #37c27a 98%, transparent) 0 0 / 96px 10px repeat-x,
    radial-gradient(circle 4px at 84px 5px, #6ab4ff 98%, transparent) 0 0 / 96px 10px repeat-x;
  animation: ps-twinkle 2.4s ease-in-out infinite alternate; }
@keyframes ps-twinkle { from { opacity: .75; } to { opacity: 1; } }

/* Easter: a spring glow low in the band, butterflies crossing it, and painted eggs hung under the header. */
.ps-season--easter .ss-hero { background-image: radial-gradient(120% 90% at 15% 120%, rgba(245, 159, 191, .28), transparent 60%); }
.ps-season--easter .ps-h { position: relative; }
.ps-season--easter .ps-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 16px; pointer-events: none; z-index: 5;
  background:
    radial-gradient(ellipse 5px 7.5px at 12px 8px, #e8467c 96%, transparent) 0 0 / 96px 16px repeat-x,
    radial-gradient(ellipse 5px 7.5px at 36px 8px, #f7c32c 96%, transparent) 0 0 / 96px 16px repeat-x,
    radial-gradient(ellipse 5px 7.5px at 60px 8px, #6ab4ff 96%, transparent) 0 0 / 96px 16px repeat-x,
    radial-gradient(ellipse 5px 7.5px at 84px 8px, #37c27a 96%, transparent) 0 0 / 96px 16px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.ps-fly { position: absolute; left: -60px; top: var(--y); width: calc(48px * var(--s)); pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); animation: ps-sky-cross var(--d) linear var(--delay) infinite; }
.ps-fly svg { display: block; width: 100%; height: auto; overflow: visible; }
.ps-fly-wings { fill: currentColor; transform-origin: 50% 50%; animation: ps-fly-flap .45s ease-in-out infinite alternate; }
@keyframes ps-fly-flap { from { transform: scaleX(1); } to { transform: scaleX(.35); } }

/* New Year: fireworks over the band (season.js, on a canvas) and a strip of confetti under the header. */
.ps-season--newyear .ph-hero-overlay { background: linear-gradient(180deg, rgba(5, 10, 28, .7) 0%, rgba(15, 23, 42, .55) 60%, rgba(28, 42, 90, .5) 100%); }
.ps-season--newyear .ps-h { position: relative; }
.ps-season--newyear .ps-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(110deg, #f7c32c 0 10px, transparent 10px 18px, #ff6b9a 18px 28px, transparent 28px 36px, #6ad7ff 36px 46px, transparent 46px 54px);
  opacity: .9; }

/* ── the hidden things ── */
.ps-hunt { position: absolute; z-index: 3; display: inline-flex; padding: 6px; margin: -6px; border: 0; background: none; cursor: pointer;
  border-radius: 50%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); animation: ps-hunt-wobble 4.5s ease-in-out infinite; }
.ps-hunt:hover, .ps-hunt:focus-visible { filter: drop-shadow(0 0 10px var(--ps-season-glow)) drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.ps-hunt:focus-visible { outline: 3px solid #f7c32c; outline-offset: 2px; }
.ps-hunt.is-found { opacity: .45; animation: none; }
.ps-hunt.is-found::after { content: "✓"; position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%;
  background: #16a34a; color: #fff; font: 700 11px/16px system-ui, sans-serif; text-align: center; }
.ps-hunt.is-popping { animation: ps-hunt-pop .7s ease-out; opacity: 1; }
@keyframes ps-hunt-wobble { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-12deg); } 95% { transform: rotate(10deg); } }
@keyframes ps-hunt-pop { 0% { transform: scale(1); } 40% { transform: scale(1.6) rotate(-8deg); } 100% { transform: scale(1); } }
/* Where each one sits: a different corner of a different band, small, never over the words. */
.ps-hunt--home { right: 5%; bottom: 22px; }
.ps-hunt--stones { right: max(16px, calc((100% - var(--ps-content, 1100px)) / 2)); bottom: 14px; }
.ps-hunt--countries { right: max(16px, calc((100% - var(--ps-content, 1100px)) / 2 + 40px)); top: 16px; }
.ps-hunt--faq { left: max(10px, calc((100% - var(--ps-content, 1100px)) / 2 - 46px)); bottom: 12px; }
.ps-hunt--about { right: 24%; bottom: 10px; transform: rotate(8deg); }

/* ── what the script shows ── */
.ps-hunt-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 2000; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; background: #0f172a; color: #fff;
  font: 600 14px/1.3 var(--ps-font, system-ui); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: opacity .3s, transform .3s; }
.ps-hunt-toast.is-out { opacity: 0; transform: translate(-50%, 8px); }
.ps-hunt-pill { position: fixed; left: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 1900; padding: 6px 10px;
  border-radius: 999px; background: var(--ps-season-card); color: var(--ps-season-ink); border: 1px solid rgba(233, 118, 31, .5);
  font: 700 13px/1 var(--ps-font, system-ui); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.ps-hunt-pill.is-complete { border-color: #16a34a; }
@media (min-width: 761px) { .ps-hunt-toast { bottom: 28px; } .ps-hunt-pill { bottom: 18px; } }
.ps-hunt-dialog { max-width: min(420px, calc(100vw - 32px)); padding: 26px 22px 22px; border: 0; border-radius: 16px; text-align: center;
  background: var(--ps-season-card); color: var(--ps-season-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.ps-hunt-dialog::backdrop { background: rgba(11, 18, 32, .6); }
.ps-hunt-dialog__art { font-size: 34px; letter-spacing: 6px; margin-bottom: 6px; }
.ps-hunt-dialog h2 { margin: 0 0 6px; font-family: var(--ps-font-heading, system-ui); font-weight: 400; font-size: 26px; line-height: 1.15; }
.ps-hunt-dialog p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.ps-hunt-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .ps-ghost, .ps-ghost > span, .ps-ghost img, .ps-hw-star, .ps-hw-flame, .ps-hw-spider svg,
  .ps-fly, .ps-fly-wings, .ps-hunt, .ps-season--christmas .ps-h::after { animation: none; }
  .ps-fly { transform: translateX(calc(var(--y) * 6)); }
  .ps-ghost { left: auto; right: 22%; }
  /* a still picture: the spider halfway down, the candles glowing steadily */
  .ps-hw-thread { animation: none; transform: scaleY(.55); }
  .ps-hw-spider { animation: none; transform: translateY(calc(var(--ps-hw-drop) * .55)); }
}