/* The holiday themes' decorations (see `index.tsx`). Hidden unless their
   theme is the page's; never take a click, never move the layout. */
.theme-decor {
  display: none;
  pointer-events: none;
  user-select: none;
}
/* (in both of a holiday's versions, light and dark) */
[data-theme^='halloween-'] .theme-decor[data-decor='halloween'],
[data-theme^='christmas-'] .theme-decor[data-decor='christmas'],
[data-theme^='newyear-'] .theme-decor[data-decor='newyear'],
[data-theme^='memorial-'] .theme-decor[data-decor='memorial'],
[data-theme^='valentine-'] .theme-decor[data-decor='valentine'],
[data-theme^='thanksgiving-'] .theme-decor[data-decor='thanksgiving'],
[data-theme^='lunar-'] .theme-decor[data-decor='lunar'],
[data-theme^='independence-'] .theme-decor[data-decor='independence'] {
  display: block;
}
.theme-decor * {
  pointer-events: none;
}
/* Over the whole area under the top bar (`Navigation/framer.tsx`) */
.decor-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: strict;
}

/* ---- Halloween ----------------------------------------------------------- */

/* Faint, so text under a web stays readable */
.decor-web {
  opacity: 0.32;
}
/* White webs vanish on a light page: turn them dark slate */
[data-theme="halloween-light"] .decor-web {
  filter: brightness(0) saturate(0) invert(0.2);
  opacity: 0.45;
}

/* A spider on its thread (`Dangle`): the thread grows from the top while the
   spider drops by the same amount, on the same curve, so it hangs on its end.
   At rest (reduced motion) it hangs three quarters down. */
.decor-dangle {
  position: absolute;
  top: 0;
  transform-origin: 50% 0;
  animation: decor-sway calc(var(--dur) * 0.7) ease-in-out var(--delay) infinite alternate;
}
.decor-thread {
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 1px;
  height: var(--len);
  background: linear-gradient(oklch(93% 0.02 80 / 0.25), oklch(93% 0.02 80 / 0.6));
  transform-origin: 50% 0;
  transform: scaleY(0.75);
  animation: decor-thread var(--dur) ease-in-out var(--delay) infinite;
}
.decor-spider {
  position: absolute;
  top: 0;
  display: block;
  transform: translateY(calc(var(--len) * 0.75));
  animation: decor-drop var(--dur) ease-in-out var(--delay) infinite;
  /* Lifted to a dusky purple with a pale rim: drawn near-black, it would
     vanish on the night base */
  filter: brightness(2.6) drop-shadow(0 0 1px oklch(93% 0.02 80 / 0.45));
}
.decor-spider > svg {
  display: block;
}
@keyframes decor-thread {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
@keyframes decor-drop {
  0%, 100% { transform: translateY(calc(var(--len) * 0.4)); }
  50% { transform: translateY(var(--len)); }
}
/* (the bat, outlined by a candle-light glow, so it shows on the night) */
.decor-glow {
  filter: drop-shadow(0 0 1.5px oklch(92% 0.04 80 / 0.7));
}
@keyframes decor-sway {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

/* The jack-o'-lantern's candle flickers */
.decor-lantern {
  animation: decor-flicker 2.6s ease-in-out infinite;
}
@keyframes decor-flicker {
  0%, 100% { opacity: 1; }
  30% { opacity: 0.82; }
  45% { opacity: 0.95; }
  70% { opacity: 0.86; }
}

/* A bat now and then: across the top of the content for ~5s of every 45s */
.decor-bat {
  position: absolute;
  top: 14%;
  transform: translateX(-60px);
  animation: decor-bat 45s linear 6s infinite;
  filter: drop-shadow(0 0 3px oklch(72% 0.17 52 / 0.5));
}
.decor-bat__flap {
  display: block;
  animation: decor-flap 0.28s ease-in-out infinite alternate;
}
.decor-bat__flap > svg {
  display: block;
}
@keyframes decor-bat {
  0% { transform: translate(-60px, 0); }
  4% { transform: translate(30vw, -18px); }
  8% { transform: translate(62vw, 10px); }
  12% { transform: translate(calc(100vw + 60px), -12px); }
  100% { transform: translate(calc(100vw + 60px), -12px); }
}
@keyframes decor-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.55); }
}

/* ---- Christmas ----------------------------------------------------------- */

/* A string of lights hung under the top bar, as two layers of bulbs
   twinkling in turn (one background each, so any width is one element) */
.decor-lights {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 16px;
  background-repeat: repeat-x;
  background-size: 128px 16px;
}
.decor-lights--a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='16'%3E%3Cpath d='M0 1 Q16 9 32 1 T64 1 T96 1 T128 1' fill='none' stroke='%231f4a33' stroke-width='1.2'/%3E%3Crect x='14.5' y='3.5' width='3' height='3' fill='%231f4a33'/%3E%3Cellipse cx='16' cy='9.5' rx='2.6' ry='3.6' fill='%23e5483f'/%3E%3Crect x='78.5' y='3.5' width='3' height='3' fill='%231f4a33'/%3E%3Cellipse cx='80' cy='9.5' rx='2.6' ry='3.6' fill='%2341b06a'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 2px oklch(80% 0.14 85 / 0.6));
  animation: decor-twinkle 3.2s ease-in-out infinite alternate;
}
.decor-lights--b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='16'%3E%3Crect x='46.5' y='3.5' width='3' height='3' fill='%231f4a33'/%3E%3Cellipse cx='48' cy='9.5' rx='2.6' ry='3.6' fill='%23f2b92c'/%3E%3Crect x='110.5' y='3.5' width='3' height='3' fill='%231f4a33'/%3E%3Cellipse cx='112' cy='9.5' rx='2.6' ry='3.6' fill='%234aa8e8'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 2px oklch(80% 0.14 85 / 0.6));
  animation: decor-twinkle 3.2s ease-in-out -1.6s infinite alternate;
}
@keyframes decor-twinkle {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

/* Light snow: a few slow flakes, white with an icy rim so they show on the
   cream surfaces too */
.decor-snow {
  position: absolute;
  inset: 0;
}
.decor-flake {
  position: absolute;
  top: -12px;
  width: var(--size);
  height: var(--size);
  border-radius: 9999px;
  background: oklch(99.5% 0.004 230);
  box-shadow: 0 0 0 1px oklch(78% 0.05 235 / 0.5);
  animation: decor-fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.decor-flake--crystal {
  border-radius: 0;
  box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cg stroke='%2390b4cf' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 -9V9M-7.8 -4.5L7.8 4.5M-7.8 4.5L7.8 -4.5'/%3E%3Cpath d='M-2 -7L0 -5L2 -7M-2 7L0 5L2 7' fill='none'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes decor-fall {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(var(--sway), calc(var(--app-height, 1vh) * 25)) rotate(45deg); }
  50% { transform: translate(0, calc(var(--app-height, 1vh) * 50)) rotate(90deg); }
  75% { transform: translate(calc(var(--sway) * -1), calc(var(--app-height, 1vh) * 75)) rotate(135deg); }
  100% { transform: translate(0, calc(var(--app-height, 1vh) * 100 + 24px)) rotate(180deg); }
}

/* ---- New Year's (`newyear`) --------------------------------------------- */

/* A gold tinsel garland swagged under the top bar, sparkling */
.decor-tinsel {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='18'%3E%3Cpath d='M0 2 Q24 16 48 2 T96 2' fill='none' stroke='%23f2c94c' stroke-width='2.2' stroke-dasharray='1 2.6' stroke-linecap='round'/%3E%3Cpath d='M0 2 Q24 16 48 2 T96 2' fill='none' stroke='%23fff3c4' stroke-width='1'/%3E%3Ccircle cx='48' cy='3' r='2.4' fill='%23ff6fb5'/%3E%3Ccircle cx='0' cy='3' r='2.4' fill='%235ec8f2'/%3E%3Ccircle cx='96' cy='3' r='2.4' fill='%235ec8f2'/%3E%3C/svg%3E") repeat-x;
  background-size: 96px 18px;
  filter: drop-shadow(0 0 1.5px oklch(85% 0.13 90 / 0.5));
  animation: decor-twinkle 2.6s ease-in-out infinite alternate;
}
/* Confetti, falling as the snow does, tumbling */
.decor-confetti {
  position: absolute;
  top: -12px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  opacity: 0.85;
  animation: decor-fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.decor-confetti--strip {
  width: 4px;
  height: 10px;
}
/* The champagne's bubbles, rising off its neck */
.decor-bubble {
  position: absolute;
  top: 2px;
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background: #fff3c4;
  opacity: 0;
  animation: decor-bubble 2.1s ease-out infinite;
}
@keyframes decor-bubble {
  0% { transform: translateY(0); opacity: 0.9; }
  100% { transform: translate(2px, -18px); opacity: 0; }
}
/* The skyline's fireworks: each bursting out, fading, in its turn */
.decor-firework {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: decor-firework 5.6s ease-out infinite;
}
@keyframes decor-firework {
  0% { scale: 0.1; opacity: 0; }
  4% { opacity: 1; }
  22% { scale: 1; opacity: 0.9; }
  34% { scale: 1.15; opacity: 0; }
  100% { scale: 1.15; opacity: 0; }
}
/* The ball, dropping slowly down the mast to midnight, held there glowing,
   then lifted back up; it takes a click (the easter egg) */
.decor-ball {
  animation: decor-ball 26s linear infinite;
}
@keyframes decor-ball {
  0% { translate: 0 0; }
  82% { translate: 0 38px; }
  92% { translate: 0 38px; }
  100% { translate: 0 0; }
}
.theme-decor .decor-ball,
.theme-decor .decor-ball * {
  pointer-events: auto;
  cursor: var(--decor-cursor-pointer, pointer);
}
/* "Happy New Year!", popping up over the city */
.decor-cheer {
  transform-box: fill-box;
  transform-origin: center;
  animation: decor-cheer 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
@keyframes decor-cheer {
  from { scale: 0.2; opacity: 0; }
  to { scale: 1; opacity: 1; }
}
/* The top bar's banner, rippling behind its plane, and the propeller */
.decor-banner {
  transform-box: fill-box;
  transform-origin: right center;
  animation: decor-banner 0.9s ease-in-out infinite alternate;
}
@keyframes decor-banner {
  from { transform: skewY(-2deg) scaleY(0.96); }
  to { transform: skewY(2deg) scaleY(1); }
}
.decor-prop {
  transform-box: fill-box;
  transform-origin: center;
  animation: decor-prop 0.12s linear infinite alternate;
}
@keyframes decor-prop {
  from { scale: 1 1; }
  to { scale: 1 0.2; }
}

/* ---- Memorial Day (`memorial`) ------------------------------------------ */

/* Flag bunting, swagged in red, white and blue under the top bar */
.decor-swag {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22'%3E%3Cpath d='M0 0 Q60 30 120 0 Z' fill='%23c8202f'/%3E%3Cpath d='M0 0 Q60 22 120 0 Z' fill='%23ffffff'/%3E%3Cpath d='M0 0 Q60 13 120 0 Z' fill='%231f2d6b'/%3E%3Ccircle cx='60' cy='3' r='.9' fill='%23ffffff'/%3E%3Ccircle cx='48' cy='2.4' r='.8' fill='%23ffffff'/%3E%3Ccircle cx='72' cy='2.4' r='.8' fill='%23ffffff'/%3E%3Crect x='-1.5' y='0' width='3' height='6' rx='1.5' fill='%23d9b85c'/%3E%3Crect x='118.5' y='0' width='3' height='6' rx='1.5' fill='%23d9b85c'/%3E%3C/svg%3E") repeat-x;
  background-size: 120px 22px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.15));
}
/* Poppy petals, drifting down slowly as the snow does */
.decor-petal {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 7px;
  border-radius: 60% 40% 60% 40%;
  background: #d7262e;
  opacity: 0.75;
  animation: decor-fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
/* The flags, stirring */
.decor-wave {
  transform-box: fill-box;
  transform-origin: left center;
  animation: decor-wave 2.8s ease-in-out infinite alternate;
}
@keyframes decor-wave {
  from { transform: skewY(-3deg) scaleX(0.97); }
  to { transform: skewY(3deg) scaleX(1); }
}
/* The memorial's flag: at half-staff, until it's raised (the easter egg),
   slowly, to full */
.decor-staff {
  translate: 0 var(--drop);
  transition: translate 3.2s cubic-bezier(0.4, 0, 0.3, 1);
}
.decor-staff--full {
  translate: 0 0;
}
.theme-decor .decor-staff,
.theme-decor .decor-staff * {
  pointer-events: auto;
  cursor: var(--decor-cursor-pointer, pointer);
}
.theme-decor .decor-staff--full,
.theme-decor .decor-staff--full * {
  cursor: inherit;
}
/* The flyover's missing man: flying with the formation, then pulling up and
   away from it */
.decor-jet--missing {
  transform-box: fill-box;
  transform-origin: left center;
  animation: decor-missing 10s ease-in both;
}
@keyframes decor-missing {
  0%, 42% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  70% { transform: translate(40px, -40px) rotate(-55deg); opacity: 1; }
  100% { transform: translate(70px, -140px) rotate(-75deg); opacity: 0; }
}

/* ---- Valentine's (`valentine`) ------------------------------------------ */

/* A garland of hearts swagged under the top bar */
.decor-hearts {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='18'%3E%3Cpath d='M0 1 Q36 13 72 1' fill='none' stroke='%23e6b3c7' stroke-width='.8'/%3E%3Cpath transform='translate(12 5) scale(.75)' d='M6 11 C3 8.6 0 6.6 0 3.4 C0 1.4 1.5 0 3.3 0 C4.5 0 5.4 .6 6 1.6 C6.6 .6 7.5 0 8.7 0 C10.5 0 12 1.4 12 3.4 C12 6.6 9 8.6 6 11 Z' fill='%23ff4f86'/%3E%3Cpath transform='translate(31 8) scale(.8)' d='M6 11 C3 8.6 0 6.6 0 3.4 C0 1.4 1.5 0 3.3 0 C4.5 0 5.4 .6 6 1.6 C6.6 .6 7.5 0 8.7 0 C10.5 0 12 1.4 12 3.4 C12 6.6 9 8.6 6 11 Z' fill='%23e0244f'/%3E%3Cpath transform='translate(51 5) scale(.75)' d='M6 11 C3 8.6 0 6.6 0 3.4 C0 1.4 1.5 0 3.3 0 C4.5 0 5.4 .6 6 1.6 C6.6 .6 7.5 0 8.7 0 C10.5 0 12 1.4 12 3.4 C12 6.6 9 8.6 6 11 Z' fill='%23ffd1e3'/%3E%3C/svg%3E") repeat-x;
  background-size: 72px 18px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.12));
}
/* Hearts, drifting down as the snow does */
.decor-heart {
  position: absolute;
  top: -14px;
  opacity: 0.8;
  animation: decor-fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.decor-heart svg {
  display: block;
}
/* The boppers' hearts, bouncing on their springs */
.decor-bop {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: decor-bop 1.6s ease-in-out infinite alternate;
}
@keyframes decor-bop {
  from { rotate: -8deg; scale: 1 1; }
  to { rotate: 8deg; scale: 1 0.92; }
}
/* The park's string lights, glowing in turn */
.decor-glowbulb {
  filter: drop-shadow(0 0 2px #ffb347);
  animation: decor-twinkle 2.4s ease-in-out infinite alternate;
}
/* The lovebirds: hopping along the wire to meet (the easter egg) */
.decor-lovebird {
  transition: translate 1.8s cubic-bezier(0.45, 0, 0.3, 1);
}
.theme-decor .decor-lovebird,
.theme-decor .decor-lovebird * {
  pointer-events: auto;
  cursor: var(--decor-cursor-pointer, pointer);
}
/* Met: the heart between them, popping up and floating */
.decor-kiss {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation:
    decor-cheer 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 1.8s both,
    decor-kiss-float 2.4s ease-in-out 2.3s infinite alternate;
}
@keyframes decor-kiss-float {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}

/* ---- Thanksgiving (`thanksgiving`) -------------------------------------- */

/* A garland of autumn leaves swagged under the top bar */
.decor-leafswag {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='22'%3E%3Cpath d='M0 2 Q24 14 48 2 T96 2' fill='none' stroke='%23c9b37a' stroke-width='1'/%3E%3Cg transform='translate%2812 7.5%29 rotate%28-14%29 scale%28.9%29 translate%28-6 0%29'%3E%3Cpath d='M6 .5 L7.4 3.2 L10.4 2.6 L9.2 5.6 L11.6 7 L8.6 8 L8.4 10.4 L6.4 9 L6.4 11.8 L5.6 11.8 L5.6 9 L3.6 10.4 L3.4 8 L.4 7 L2.8 5.6 L1.6 2.6 L4.6 3.2 Z' fill='%23c8531f' stroke='%2300000022' stroke-width='.3'/%3E%3C/g%3E%3Cg transform='translate%2836 7.5%29 rotate%2812%29 scale%28.9%29 translate%28-6 0%29'%3E%3Cpath d='M6 .5 L7.4 3.2 L10.4 2.6 L9.2 5.6 L11.6 7 L8.6 8 L8.4 10.4 L6.4 9 L6.4 11.8 L5.6 11.8 L5.6 9 L3.6 10.4 L3.4 8 L.4 7 L2.8 5.6 L1.6 2.6 L4.6 3.2 Z' fill='%23e5b53a' stroke='%2300000022' stroke-width='.3'/%3E%3C/g%3E%3Cg transform='translate%2848 3.5%29 rotate%280%29 scale%28.9%29 translate%28-6 0%29'%3E%3Cpath d='M6 .5 L7.4 3.2 L10.4 2.6 L9.2 5.6 L11.6 7 L8.6 8 L8.4 10.4 L6.4 9 L6.4 11.8 L5.6 11.8 L5.6 9 L3.6 10.4 L3.4 8 L.4 7 L2.8 5.6 L1.6 2.6 L4.6 3.2 Z' fill='%23a8321f' stroke='%2300000022' stroke-width='.3'/%3E%3C/g%3E%3Cg transform='translate%2860 7.5%29 rotate%28-12%29 scale%28.9%29 translate%28-6 0%29'%3E%3Cpath d='M6 .5 L7.4 3.2 L10.4 2.6 L9.2 5.6 L11.6 7 L8.6 8 L8.4 10.4 L6.4 9 L6.4 11.8 L5.6 11.8 L5.6 9 L3.6 10.4 L3.4 8 L.4 7 L2.8 5.6 L1.6 2.6 L4.6 3.2 Z' fill='%23e0822b' stroke='%2300000022' stroke-width='.3'/%3E%3C/g%3E%3Cg transform='translate%2884 7.5%29 rotate%2814%29 scale%28.9%29 translate%28-6 0%29'%3E%3Cpath d='M6 .5 L7.4 3.2 L10.4 2.6 L9.2 5.6 L11.6 7 L8.6 8 L8.4 10.4 L6.4 9 L6.4 11.8 L5.6 11.8 L5.6 9 L3.6 10.4 L3.4 8 L.4 7 L2.8 5.6 L1.6 2.6 L4.6 3.2 Z' fill='%238f5a24' stroke='%2300000022' stroke-width='.3'/%3E%3C/g%3E%3C/svg%3E") repeat-x;
  background-size: 96px 22px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.15));
}
/* Leaves, falling as the snow does but tumbling more */
.decor-leaf {
  position: absolute;
  top: -20px;
  opacity: 0.85;
  animation: decor-fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.decor-leaf svg {
  display: block;
}
/* The feast's friends laughing, bobbing a little each */
.decor-friend {
  animation: decor-friend 1.5s ease-in-out infinite alternate;
}
@keyframes decor-friend {
  from { translate: 0 0; }
  to { translate: 0 -1.8px; }
}
/* The toast: the glasses leaning together, then back */
.decor-clink {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: decor-clink 3s ease-in-out infinite;
}
@keyframes decor-clink {
  0%, 52%, 100% { rotate: 0deg; }
  64% { rotate: var(--a); }
  74% { rotate: 0deg; }
}
.decor-clinkspark {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: decor-clinkspark 3s ease-out infinite;
}
@keyframes decor-clinkspark {
  0%, 60% { scale: 0.2; opacity: 0; }
  65% { scale: 1.2; opacity: 1; }
  80%, 100% { scale: 1.7; opacity: 0; }
}
/* The candles' flames, and the steam off the dishes */
.decor-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: decor-flame 0.9s ease-in-out infinite alternate;
}
@keyframes decor-flame {
  from { scale: 1 1; rotate: -4deg; }
  to { scale: 0.9 1.12; rotate: 4deg; }
}
.decor-steam {
  opacity: 0.35;
  animation: decor-steam 3.2s ease-out infinite;
}
@keyframes decor-steam {
  0% { translate: 0 0; opacity: 0; }
  25% { opacity: 0.5; }
  100% { translate: 2px -9px; opacity: 0; }
}

/* ---- Lunar New Year (`lunar`) ------------------------------------------- */

/* A string of red lanterns under the top bar, glowing in turn */
.decor-lanterns {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 30px;
  background-repeat: repeat-x;
  background-size: 128px 30px;
  filter: drop-shadow(0 0 3px oklch(68% 0.2 30 / 0.55));
}
.decor-lanterns--a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='30'%3E%3Cpath d='M0 3 Q32 11 64 3 Q96 11 128 3' fill='none' stroke='%23c99410' stroke-width='1'/%3E%3Cpath d='M32 6.6 V8.6' stroke='%23c99410' stroke-width='.8'/%3E%3Cellipse cx='32' cy='15.1' rx='6' ry='6.2' fill='%23d62f2f' stroke='%237a1018' stroke-width='.5'/%3E%3Cellipse cx='32' cy='15.1' rx='2.6' ry='6.2' fill='none' stroke='%23f6c744' stroke-width='.6'/%3E%3Crect x='28.4' y='8.2' width='7.2' height='1.8' fill='%23f6c744'/%3E%3Crect x='28.4' y='20.2' width='7.2' height='1.8' fill='%23f6c744'/%3E%3Cpath d='M32 22.0 V27.6' stroke='%23f6c744' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: decor-twinkle 3.2s ease-in-out infinite alternate;
}
.decor-lanterns--b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='30'%3E%3Cpath d='M96 6.6 V8.6' stroke='%23c99410' stroke-width='.8'/%3E%3Cellipse cx='96' cy='15.1' rx='6' ry='6.2' fill='%23e0322f' stroke='%237a1018' stroke-width='.5'/%3E%3Cellipse cx='96' cy='15.1' rx='2.6' ry='6.2' fill='none' stroke='%23f6c744' stroke-width='.6'/%3E%3Crect x='92.4' y='8.2' width='7.2' height='1.8' fill='%23f6c744'/%3E%3Crect x='92.4' y='20.2' width='7.2' height='1.8' fill='%23f6c744'/%3E%3Cpath d='M96 22.0 V27.6' stroke='%23f6c744' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: decor-twinkle 3.2s ease-in-out -1.6s infinite alternate;
}
/* The street's firecrackers: each pops in turn, a flash and a puff of smoke
   (all at rest, unlit, under reduced motion) */
.decor-cracker {
  animation: decor-cracker 7s linear var(--d) infinite;
}
@keyframes decor-cracker {
  0%, 20% { opacity: 1; }
  21%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
.decor-pop {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: decor-pop 7s ease-out var(--d) infinite;
}
@keyframes decor-pop {
  0%, 20% { scale: 0.2; opacity: 0; }
  21% { scale: 0.6; opacity: 1; }
  27% { scale: 1.5; opacity: 0.9; }
  34%, 100% { scale: 1.9; opacity: 0; }
}
.decor-smoke {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: decor-smoke 7s ease-out var(--d) infinite;
}
@keyframes decor-smoke {
  0%, 21% { translate: 0 0; scale: 0.4; opacity: 0; }
  25% { opacity: 0.5; }
  60%, 100% { translate: 3px -16px; scale: 1.7; opacity: 0; }
}
/* The lion dance: the whole costume bobbing, the head nodding from the neck,
   the tail wagging, the legs stepping */
.decor-lion {
  animation: decor-lion-hop 0.8s ease-in-out infinite alternate;
}
@keyframes decor-lion-hop {
  from { translate: 0 0; }
  to { translate: 0 -2.4px; }
}
.decor-lion__head {
  transform-box: view-box;
  transform-origin: 204px 118px;
  animation: decor-lion-nod 1.6s ease-in-out infinite alternate;
}
@keyframes decor-lion-nod {
  from { rotate: -6deg; }
  to { rotate: 8deg; }
}
.decor-lion__tail {
  transform-box: view-box;
  transform-origin: 126px 114px;
  animation: decor-lion-wag 0.5s ease-in-out infinite alternate;
}
@keyframes decor-lion-wag {
  from { rotate: -10deg; }
  to { rotate: 12deg; }
}
.decor-lion__leg {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: decor-lion-step 0.8s ease-in-out infinite alternate;
}
@keyframes decor-lion-step {
  from { rotate: -12deg; }
  to { rotate: 12deg; }
}
/* The big-head Buddha: swaying, laughing, his fan teasing the lion */
.decor-buddha {
  animation: decor-lion-hop 1.1s ease-in-out infinite alternate;
}
.decor-buddha__head {
  transform-box: view-box;
  transform-origin: 285px 122px;
  animation: decor-buddha-sway 1.7s ease-in-out infinite alternate;
}
@keyframes decor-buddha-sway {
  from { rotate: -5deg; }
  to { rotate: 5deg; }
}
.decor-buddha__fan {
  transform-box: view-box;
  transform-origin: 266px 116px;
  animation: decor-buddha-fan 0.9s ease-in-out infinite alternate;
}
@keyframes decor-buddha-fan {
  from { rotate: -12deg; }
  to { rotate: 14deg; }
}

/* ---- 4th of July (`independence`) --------------------------------------- */

/* Red, white and blue pennants strung under the top bar */
.decor-pennants {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='22'%3E%3Cpath d='M0 2 Q24 12 48 2 T96 2' fill='none' stroke='%239aa3b8' stroke-width='.9'/%3E%3Cpath d='M6 3.4000000000000004 L18 3.4000000000000004 L12 17.4Z' fill='%23e5383b' stroke='%238e1b25' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M30 3.4000000000000004 L42 3.4000000000000004 L36 17.4Z' fill='%23ffffff' stroke='%239fb4d0' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M54 3.4000000000000004 L66 3.4000000000000004 L60 17.4Z' fill='%233a7bd5' stroke='%231f3a8a' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M78 3.4000000000000004 L90 3.4000000000000004 L84 17.4Z' fill='%23e5383b' stroke='%238e1b25' stroke-width='.6' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x;
  background-size: 96px 22px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.18));
}
/* The settings scene (one 34s loop): the fort at night, then the White House.
   Still (reduced motion), it's the White House by day */
.decor-ind__fort {
  opacity: 0;
  animation: decor-ind-fort 34s linear infinite;
}
.decor-ind__house {
  animation: decor-ind-house 34s linear infinite;
}
@keyframes decor-ind-fort {
  0% { opacity: 0; }
  3%, 52% { opacity: 1; }
  58%, 100% { opacity: 0; }
}
@keyframes decor-ind-house {
  0% { opacity: 1; }
  3%, 52% { opacity: 0; }
  58%, 100% { opacity: 1; }
}
/* The bombs bursting while the fort's under fire, then stopped */
.decor-ind__bombs {
  animation: decor-ind-bombs 34s linear infinite;
}
@keyframes decor-ind-bombs {
  0%, 20% { opacity: 1; }
  26%, 100% { opacity: 0; }
}
/* The smoke: thick, then settling, then gone */
.decor-ind__dust {
  animation: decor-ind-dust 34s linear infinite;
}
@keyframes decor-ind-dust {
  0%, 20% { opacity: 1; }
  34% { opacity: 0.4; }
  47%, 100% { opacity: 0; }
}
.decor-ind__puff {
  animation: decor-ind-drift 9s ease-in-out infinite alternate;
}
@keyframes decor-ind-drift {
  from { translate: -12px 0; }
  to { translate: 14px -3px; }
}
/* The flag, down behind the wall, rising up the pole as the smoke settles, then
   held up (never lowered) through the house to the end of the loop; there it
   fades with the house as the fort comes back (its 0-3%), and only then is it
   put back down behind the wall, unseen */
.decor-ind__raise {
  animation: decor-ind-raise 34s linear infinite;
}
@keyframes decor-ind-raise {
  0% { translate: 0 0; opacity: 1; }
  3% { translate: 0 0; opacity: 0; }
  3.1%, 17% { translate: 0 84px; opacity: 0; }
  18% { translate: 0 84px; opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  34%, 100% { translate: 0 0; opacity: 1; }
}
/* Each slice of the flag rising and falling in turn: the flag flapping */
.decor-ind__ripple {
  animation: decor-ind-ripple 0.8s ease-in-out infinite alternate;
}
@keyframes decor-ind-ripple {
  from { translate: 0 calc(var(--amp) * -1); }
  to { translate: 0 var(--amp); }
}
/* The jets, in formation, crossing the sky once the house is up (at rest,
   they're over the lawn) */
.decor-ind__jets {
  animation: decor-ind-jets 34s linear infinite;
}
@keyframes decor-ind-jets {
  0%, 58% { translate: -330px 0; }
  92%, 100% { translate: 340px 0; }
}
.decor-ind__trail {
  transform-box: fill-box;
  transform-origin: right center;
  animation: decor-ind-trail 0.7s ease-in-out infinite alternate;
}
@keyframes decor-ind-trail {
  from { scale: 1 0.88; }
  to { scale: 1 1.1; }
}

/* ---- Reduced motion: everything still, nothing flying or falling --------- */
/* ---- The profile menu (`ProfileMenuDecor`) ------------------------------ */

/* Over the pop-up's border (out past its 8px padding and 1px border) */
.decor-frame {
  position: absolute;
  inset: -9px;
}
/* Its bulbs, twinkling in two groups out of step, glowing */
.decor-bulbs--a,
.decor-bulbs--b {
  filter: drop-shadow(0 0 2px oklch(82% 0.15 80 / 0.7));
  animation: decor-twinkle 3.2s ease-in-out infinite alternate;
}
.decor-bulbs--b {
  animation-delay: -1.6s;
}

/* The Halloween bunting's flags (and its bat), swaying from the string */
.decor-sway {
  transform-origin: 0 0;
  transform-box: view-box;
  animation: decor-sway 3.4s ease-in-out infinite alternate;
}
@keyframes decor-sway {
  from { rotate: -7deg; }
  to { rotate: 7deg; }
}

/* ---- The settings panel's scene (`SettingsScene`) ------------------------- */

/* At the foot of the settings, as tall as the art, its top (just its edge:
   on a wide panel the art's cropped to its lower half, where the hills and the
   sledding kid are) and sides fading into the panel so it doesn't sit there as a box (the settings are narrower
   than the panel on a wide screen) */
.decor-scene {
  position: relative;
  /* (taller on a wide panel, where the art's cropped to its width: so it
     still shows the hills' tops, the kid's run) */
  aspect-ratio: 400 / 130;
  min-height: 180px;
  max-height: 260px;
  margin-top: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 16%), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
/* The graveyard's little ghost, floating among the graves */
.decor-ghost {
  animation: decor-ghost 4.5s ease-in-out infinite alternate;
}
@keyframes decor-ghost {
  from { transform: translateY(0); opacity: 0.85; }
  to { transform: translateY(-8px); opacity: 0.55; }
}
/* The graveyard's easter egg: a crosshair over it, and the zombie's head
   (only) takes the shot */
.theme-decor.decor-scene[data-decor='halloween'] {
  pointer-events: auto;
  cursor: crosshair;
}
.theme-decor .decor-zombie__head,
.theme-decor .decor-zombie__head * {
  pointer-events: auto;
}
/* Its head, shot: a flash, and the bits flying out and falling */
.decor-burst__flash {
  transform-box: fill-box;
  transform-origin: center;
  animation: decor-burst-flash 0.35s ease-out forwards;
}
@keyframes decor-burst-flash {
  from { scale: 0.3; opacity: 0.9; }
  to { scale: 1.8; opacity: 0; }
}
.decor-burst__bit {
  animation: decor-burst-bit 1s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes decor-burst-bit {
  0% { translate: 0 0; opacity: 1; }
  55% { translate: calc(var(--dx) * 1px) calc(var(--dy) * 1px); opacity: 1; }
  100% { translate: calc(var(--dx) * 1.25px) calc(var(--dy) * 1px + 22px); opacity: 0; }
}
/* (and grown back, popping in) */
.decor-zombie__head {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: decor-head-grow 0.4s ease-out;
}
@keyframes decor-head-grow {
  from { scale: 0; }
}

/* The hillside's easter egg: the sledding kid takes a click */
.theme-decor .decor-sledder__hit,
.theme-decor .decor-sledder__hit * {
  pointer-events: auto;
  cursor: var(--decor-cursor-pointer, pointer);
}
/* Upset: the kid flipping forward off the sled, face down into the snow (the
   body's drawn feet at its origin), legs kicking; the sled sliding on,
   tipping; a puff of snow, and the drift their head's in */
.decor-upset__kid {
  animation: decor-upset-kid 0.75s cubic-bezier(0.3, 0.1, 0.6, 1) forwards;
}
@keyframes decor-upset-kid {
  0% { transform: translate(0, -2px) rotate(0deg); }
  35% { transform: translate(-10px, -16px) rotate(-100deg); }
  70% { transform: translate(-20px, -14px) rotate(-160deg); }
  100% { transform: translate(-24px, -11px) rotate(-172deg); }
}
.decor-upset__legs {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: decor-upset-kick 0.22s ease-in-out 0.8s 10 alternate;
}
@keyframes decor-upset-kick {
  from { rotate: -14deg; }
  to { rotate: 14deg; }
}
.decor-upset__sled {
  animation: decor-upset-sled 1.1s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes decor-upset-sled {
  to { transform: translate(-40px, 0.5px) rotate(18deg); }
}
.decor-upset__drift {
  opacity: 0;
  animation: decor-upset-drift 0.1s linear 0.68s forwards;
}
@keyframes decor-upset-drift {
  to { opacity: 1; }
}
.decor-upset__puff circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: decor-upset-puff 0.8s ease-out 0.68s forwards;
}
@keyframes decor-upset-puff {
  from { opacity: 0.95; scale: 0.3; }
  to { opacity: 0; scale: 1.8; translate: 0 -3px; }
}

/* Shot: it stops where it is (its walk, turn, steps and lurch held), falls
   back from its feet, flat, with a bounce; its head grown back, it gets up,
   and walks on from there. (At rest at each end, so it's down, still, under
   reduced motion too) */
/* (over the walk's own `animation`, set below) */
.decor-zombie.decor-zombie--stopped,
.decor-zombie--stopped .decor-zombie__turn,
.decor-zombie--stopped .decor-zombie__leg,
.decor-zombie--stopped .decor-zombie__lurch {
  animation-play-state: paused;
}
.decor-zombie__fall {
  rotate: -86deg;
  animation: decor-zombie-fall 0.75s cubic-bezier(0.55, 0, 0.9, 0.6) 0.12s backwards;
}
@keyframes decor-zombie-fall {
  0% { rotate: 0deg; }
  72% { rotate: -92deg; }
  86% { rotate: -82deg; }
  100% { rotate: -86deg; }
}
.decor-zombie__rise {
  animation: decor-zombie-rise 1.2s cubic-bezier(0.3, 0, 0.3, 1);
}
@keyframes decor-zombie-rise {
  0% { rotate: -86deg; }
  45% { rotate: -40deg; }
  80% { rotate: 6deg; }
  100% { rotate: 0deg; }
}

/* The graveyard's zombie: walking the length of the graveyard and back
   (from its spot between the graves: off the left to off the right), turning
   at each end, legs dragging in turn, lurching */
.decor-zombie {
  animation: decor-zombie-walk 70s linear infinite;
}
@keyframes decor-zombie-walk {
  0% { translate: -150px 0; }
  50% { translate: 310px 0; }
  100% { translate: -150px 0; }
}
.decor-zombie__turn {
  transform-box: fill-box;
  transform-origin: center;
  animation: decor-zombie-turn 70s step-end infinite;
}
@keyframes decor-zombie-turn {
  0% { scale: 1 1; }
  50% { scale: -1 1; }
}
.decor-zombie__leg {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: decor-zombie-step 1.4s ease-in-out infinite alternate;
}
.decor-zombie__leg--b {
  animation-delay: -1.4s;
}
@keyframes decor-zombie-step {
  from { rotate: -16deg; }
  to { rotate: 14deg; }
}
.decor-zombie__lurch {
  animation: decor-zombie-lurch 0.7s ease-in-out infinite alternate;
}
@keyframes decor-zombie-lurch {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 0 1.2px; rotate: 2deg; }
}

/* ---- The top bar's parade (`TopBarParade`) --------------------------------- */

/* Each crosses the bar once, left to right, from just off it to just past it */
.decor-parade__go {
  translate: -220px 0;
  animation: decor-parade-go var(--dur) linear var(--delay) both;
}
@keyframes decor-parade-go {
  to { translate: calc(100vw + 40px) 0; }
}
/* The sleigh rising and dipping as it flies */
.decor-parade__bob {
  animation: decor-parade-bob 2.4s ease-in-out infinite alternate;
}
@keyframes decor-parade-bob {
  from { translate: 0 -2px; }
  to { translate: 0 6px; }
}

/* ---- The cursor and the effects (`./Prefs.tsx`) ---------------------------- */

/* The holiday's cursor (the one picked, `./cursors.ts`) where there's a
   mouse, its tip the point; sparkling over what's clickable. Text fields keep
   their caret. Set on the page (`data-cursor`, and its own two variables) by
   `Prefs` */
@media (pointer: fine) {
  html[data-cursor] body {
    cursor: var(--decor-cursor);
  }
  html[data-cursor]
    :is(a[href], button:not(:disabled), [role='button'], [role='radio'], [role='switch'], [role='tab'], [role='menuitem'], label, select, summary, .btn, .cursor-pointer) {
    cursor: var(--decor-cursor-pointer);
  }
}
/* The effects turned off: no snow, confetti, petals, leaves or hearts falling, no bat
   flitting by */
html[data-effects='off'] .decor-snow,
html[data-effects='off'] .decor-bat {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .decor-burst {
    display: none;
  }
  .theme-decor,
  .theme-decor * {
    animation: none !important;
  }
  .decor-bat,
  .decor-snow {
    display: none;
  }
}

.top-nav {
  transition: all 1s ease;
}

#topMenu > * {
  /* // justify-content: center; */
  align-content: center;
  align-items: center;
  /* // transition: all 1s ease;
  // animation: grow 1s linear 1 forwards;
  // height: var(--ogHeight); */

}

#topMenu > *:not(:last-child) {
  display: none;
}

#subMenu > *:not(:last-child) {
  display: none;
}

/* // @keyframes grow {
//   0% {
//     height: var(--ogHeight);
//   }
//   100% {
//     height: var(--height);
//   }
// } */