/*
 * Christmas decorations. Loaded only while christmasDecorOn() (see
 * system/bootstrap.php); the markup lives in shared/components/christmas-*.php
 * and the snowfall in resources/js/christmas-snow.js. Everything here is
 * decorative and pointer-transparent, so it never blocks a click.
 */

:root {
  --xmas-red: #e0233c;
  --xmas-green: #1fa24a;
  --xmas-gold: #f2c14e;
  --xmas-blue: #3fa9f5;
  --xmas-orange: #ef5c23;
  --xmas-snow: #f4f6f8;
  --xmas-pine: #14532d;
}

/* ---------- Header ---------- */

#site-header .logo {
  position: relative;
}

/* Room under the nav for the lights to hang in, so they don't sit on the
   banner below. The header's own background lives on its children, so this
   strip shows the page background. */
#site-header {
  padding-bottom: 14px;
}

.xmas-hat {
  position: absolute;
  top: -26%;
  left: -20%;
  width: 66%;
  height: auto;
  transform: rotate(-22deg);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* A thin lip of snow along the very top of the page, dripping into the header. */
.xmas-snowcap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background:
    linear-gradient(var(--xmas-snow), var(--xmas-snow)) top / 100% 3px no-repeat,
    radial-gradient(circle at 50% 0, var(--xmas-snow) 5px, transparent 5.5px) 0 0 / 19px 9px repeat-x,
    radial-gradient(circle at 50% 0, var(--xmas-snow) 3px, transparent 3.5px) 9px 0 / 31px 10px repeat-x;
  opacity: 0.85;
  pointer-events: none;
}

/* The string of lights hanging under the nav bar. Each bulb owns one swag of
   wire, so the wire and the bulbs always line up at any width. */
.xmas-lights {
  position: absolute;
  top: calc(100% - 20px);
  left: 0;
  right: 0;
  height: 26px;
  display: flex;
  pointer-events: none;
  z-index: 1;
}

.xmas-bulb {
  position: relative;
  flex: 1;
  height: var(--sag, 12px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 1 Q50 15 100 1' fill='none' stroke='%232b3a2e' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* A second, tighter string just under the snow lip at the top of the page. */
.xmas-lights--top {
  top: 2px;
  height: 22px;
}

.xmas-lights--top .xmas-bulb {
  --sag: 9px;
}

.xmas-lights--top .xmas-bulb::after {
  width: 6px;
  height: 9px;
  margin-left: -3px;
}

/* A string inside a scene, laid out in the flow rather than pinned. */
.xmas-lights--inline {
  position: relative;
  top: auto;
}

/* Socket + glass, hung from the low point of the swag. */
.xmas-bulb::before {
  content: "";
  position: absolute;
  top: calc(var(--sag, 12px) - 5px);
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 1px;
  background: #4b5563;
}

.xmas-bulb::after {
  content: "";
  position: absolute;
  top: calc(var(--sag, 12px) - 1px);
  left: 50%;
  width: 8px;
  height: 12px;
  margin-left: -4px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--c);
  box-shadow: 0 0 8px 2px var(--c);
  animation: xmas-twinkle 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.xmas-bulb--r { --c: var(--xmas-red); }
.xmas-bulb--g { --c: var(--xmas-green); }
.xmas-bulb--y { --c: var(--xmas-gold); }
.xmas-bulb--b { --c: var(--xmas-blue); }
.xmas-bulb--o { --c: var(--xmas-orange); }

@keyframes xmas-twinkle {
  0%, 100% { opacity: 1; box-shadow: 0 0 9px 2px var(--c); }
  50% { opacity: 0.45; box-shadow: 0 0 2px 0 var(--c); }
}

/* Ornaments dangling in the empty margins either side of the 1120px column. */
.xmas-baubles {
  display: none;
}

@media (min-width: 1320px) {
  .xmas-baubles {
    display: block;
    position: absolute;
    top: calc(100% - 20px);
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
  }
}

.xmas-bauble {
  position: absolute;
  top: 0;
  width: 26px;
  transform-origin: 50% 0;
  animation: xmas-sway 5s ease-in-out infinite;
}

.xmas-bauble::before {
  content: "";
  display: block;
  width: 1px;
  height: var(--len);
  margin: 0 auto;
  background: rgba(242, 193, 78, 0.6);
}

.xmas-bauble::after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75) 0 3px, transparent 4px),
    linear-gradient(transparent 44%, rgba(255, 255, 255, 0.35) 44% 56%, transparent 56%),
    var(--c);
  box-shadow: inset -4px -5px 8px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.4);
}

.xmas-bauble--l1 { left: 3%;  --len: 60px;  --c: var(--xmas-red); }
.xmas-bauble--l2 { left: 7%;  --len: 110px; --c: var(--xmas-gold); animation-delay: -1.7s; }
.xmas-bauble--r1 { right: 3%; --len: 90px;  --c: var(--xmas-green); animation-delay: -0.8s; }
.xmas-bauble--r2 { right: 7%; --len: 46px;  --c: var(--xmas-blue); animation-delay: -2.9s; }

@keyframes xmas-sway {
  0%, 100% { transform: rotate(4deg); }
  50% { transform: rotate(-4deg); }
}

/* Snowfall over the whole page. Fixed inside the header's stacking context
   (z-index 50), so it falls over the page but under modals. */
.xmas-snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Footer ---------- */

#footer-section {
  position: relative;
  padding-top: 18px;
}

/* A pine garland hung along the footer's top edge (and on the mantel). */
.xmas-garland {
  position: absolute;
  top: -11px;
  left: 0;
  right: 0;
  height: 22px;
}

.xmas-garland,
.xmas-pine {
  background:
    radial-gradient(ellipse 9px 7px at 50% 50%, #22803f 60%, transparent 62%) 0 0 / 14px 11px repeat-x,
    radial-gradient(ellipse 9px 7px at 50% 50%, #1b6b35 60%, transparent 62%) 7px 6px / 14px 11px repeat-x,
    radial-gradient(ellipse 8px 6px at 50% 50%, var(--xmas-pine) 60%, transparent 62%) 3px 11px / 14px 11px repeat-x;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: 1;
}

.xmas-orn {
  position: absolute;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7) 0 2px, transparent 3px),
    var(--c);
  box-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.35);
}

.xmas-orn--r { --c: var(--xmas-red); }
.xmas-orn--y { --c: var(--xmas-gold); }
.xmas-orn--g { --c: #3ccf6e; }
.xmas-orn--b { --c: var(--xmas-blue); }
.xmas-orn--o { --c: var(--xmas-orange); }

.xmas-greeting {
  padding: 14px 20px 0;
  text-align: center;
  color: var(--xmas-gold);
  font-family: "Marck Script", cursive;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.xmas-greeting span {
  font-family: Arial, sans-serif;
  font-size: 0.9em;
  color: var(--xmas-snow);
  opacity: 0.8;
}

/* ---------- Home page scenes (christmasScene) ---------- */

.xmas-scene {
  position: relative;
  padding: 34px 20px;
  overflow: hidden;
}

.xmas-scene__inner {
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 22px;
}

/* Nutcrackers. `scale` and `translate` are separate properties, so the flip
   and the bob never fight over `transform`. */
.xmas-nut {
  display: block;
  flex: none;
  width: 64px;
  height: auto;
  animation: xmas-bob 2.8s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}

.xmas-nut--flip {
  scale: -1 1;
}

.xmas-nut--back {
  width: 52px;
  margin: 0 -12px;
  opacity: 0.88;
  animation-delay: -1.4s;
}

.xmas-nut__jaw {
  transform-box: fill-box;
  animation: xmas-chomp 4.5s ease-in-out infinite;
}

.xmas-nut--back .xmas-nut__jaw {
  animation-delay: -2.2s;
}

@keyframes xmas-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes xmas-chomp {
  0%, 78%, 92%, 100% { transform: translateY(0); }
  82%, 88% { transform: translateY(3px); }
}

/* The marquee: a sign ringed by two sets of bulbs that flash in turn, so the
   light appears to chase round it. */
.xmas-marquee__guard {
  display: flex;
  align-items: flex-end;
  flex: none;
}

.xmas-sign {
  position: relative;
  flex: 1;
  max-width: 640px;
  padding: 30px 34px 28px;
  border-radius: 20px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% 0%, #7a1020 0%, #3d0710 55%, #1a0408 100%);
  border: 2px solid #b8892c;
  box-shadow:
    0 0 0 4px #3a2a10,
    0 0 40px rgba(242, 193, 78, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.5);
}

.xmas-sign::before,
.xmas-sign::after {
  content: "";
  position: absolute;
  inset: 5px;
  padding: 7px;
  border-radius: 15px;
  background: radial-gradient(circle, #fff1c2 0 2.6px, transparent 3.2px) -5.5px -5.5px / 18px 18px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 3px #f2c14e);
  animation: xmas-chase 0.9s steps(1) infinite;
  pointer-events: none;
}

.xmas-sign::after {
  background-position: 3.5px 3.5px;
  animation-delay: -0.45s;
}

@keyframes xmas-chase {
  0% { opacity: 1; }
  50% { opacity: 0.12; }
}

.xmas-sign__eyebrow {
  color: #f2c14e;
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.xmas-sign__title {
  margin: 4px 0 6px;
  color: #ffe08a;
  font-family: "Marck Script", cursive;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  text-shadow: 0 0 18px rgba(242, 193, 78, 0.55), 0 2px 0 #5a0a14;
}

.xmas-sign__sub {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
}

/* The mantel. */
.xmas-mantel .xmas-scene__inner {
  display: block;
  width: min(900px, 100%);
  padding-top: 48px;
}

.xmas-mantel__shelf {
  position: relative;
  height: 26px;
  border-radius: 4px;
  background: linear-gradient(#7a4f2a, #4a2d14 70%, #2e1b0b);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
}

.xmas-pine {
  position: absolute;
  top: 12px;
  left: -8px;
  right: -8px;
  height: 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.xmas-mantel__lights {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 2;
}

.xmas-candle {
  position: absolute;
  bottom: 100%;
  width: 13px;
  height: 46px;
  border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(-35deg, #f4f1e8 0 6px, #d6202a 6px 10px);
}

.xmas-candle--l { left: 4%; }
.xmas-candle--l2 { left: calc(4% + 20px); height: 32px; }
.xmas-candle--r { right: 4%; }
.xmas-candle--r2 { right: calc(4% + 20px); height: 32px; }

.xmas-candle__flame {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 9px;
  height: 15px;
  margin-left: -4.5px;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: radial-gradient(circle at 50% 70%, #fff6cf 0 25%, #ffc93c 45%, #ff7a1a 80%);
  box-shadow: 0 0 14px 4px rgba(255, 190, 70, 0.45);
  transform-origin: 50% 100%;
  animation: xmas-flicker 0.35s ease-in-out infinite alternate;
}

.xmas-candle--l2 .xmas-candle__flame,
.xmas-candle--r .xmas-candle__flame {
  animation-duration: 0.42s;
}

@keyframes xmas-flicker {
  from { transform: scale(1, 1) rotate(-2deg); }
  to { transform: scale(0.9, 1.1) rotate(2deg); }
}

.xmas-mantel__stockings {
  display: flex;
  justify-content: space-around;
  padding: 0 4%;
  margin-top: 4px;
}

.xmas-mantel__hook {
  display: block;
  transform-origin: 50% 0;
  animation: xmas-sway 4.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.xmas-stocking {
  display: block;
  width: 64px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4));
}

/* The tree scene, on a snow drift. */
.xmas-treescene {
  padding-bottom: 60px;
}

.xmas-treescene .xmas-scene__inner {
  gap: 28px;
}

.xmas-treescene .xmas-scene__inner::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: -10px;
  height: 26px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(ellipse 60px 16px at 20% 100%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 90px 20px at 55% 100%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 70px 14px at 85% 100%, #fff 60%, transparent 62%),
    linear-gradient(transparent 60%, #e8eef5 60%);
  opacity: 0.9;
  z-index: 0;
}

.xmas-treescene__left,
.xmas-treescene__center,
.xmas-treescene__right {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}

.xmas-treescene__left {
  gap: 6px;
}

.xmas-snowman {
  display: block;
  width: 112px;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}

.xmas-tree {
  display: block;
  width: 250px;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(242, 193, 78, 0.22));
}

.xmas-gift {
  display: block;
  flex: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
}

.xmas-gift--l {
  position: relative;
  z-index: 2;
  margin-right: -36px;
}

.xmas-gift--r {
  position: relative;
  z-index: 2;
  margin-left: -40px;
}

.xmas-treescene__right .xmas-gift {
  margin-right: 4px;
}

.xmas-treescene__caption {
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  color: #f2c14e;
  font-family: "Marck Script", cursive;
  font-size: 1.3rem;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.xmas-star {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: xmas-star 2.2s ease-in-out infinite;
}

@keyframes xmas-star {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(0.9); }
}

.xmas-ball--glow {
  animation: xmas-glow 3s ease-in-out infinite;
}

.xmas-ball--glow:nth-of-type(3n) { animation-delay: -1s; }
.xmas-ball--glow:nth-of-type(3n + 1) { animation-delay: -2s; }

@keyframes xmas-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

.xmas-dot {
  animation: xmas-dot 1.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes xmas-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@media (max-width: 860px) {
  .xmas-nut--back,
  .xmas-treescene__right .xmas-gift {
    display: none;
  }

  .xmas-treescene .xmas-scene__inner {
    gap: 12px;
  }

  .xmas-tree {
    width: 210px;
  }

  .xmas-snowman {
    width: 84px;
  }
}

@media (max-width: 600px) {
  .xmas-scene {
    padding: 24px 16px;
  }

  .xmas-treescene {
    padding-bottom: 56px;
  }

  .xmas-marquee .xmas-scene__inner {
    gap: 8px;
  }

  .xmas-nut {
    width: 40px;
  }

  .xmas-sign {
    padding: 22px 16px 20px;
  }

  .xmas-sign__sub {
    font-size: 0.82rem;
  }

  .xmas-stocking {
    width: 44px;
  }

  .xmas-candle--l2,
  .xmas-candle--r2,
  .xmas-treescene__left .xmas-gift,
  .xmas-treescene__right {
    display: none;
  }

  .xmas-tree {
    width: 180px;
  }

  .xmas-snowman {
    width: 72px;
  }
}

/* ---------- Light dividers between home sections (christmasScene('lights')) ---------- */

.xmas-divider {
  position: relative;
  height: 118px;
  padding: 0 20px;
}

.xmas-divider__inner {
  position: relative;
  width: min(1120px, 100%);
  height: 100%;
  margin: 0 auto;
}

/* Three strings at different sags, laid over each other. */
.xmas-divider__s {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
}

.xmas-divider__s--a .xmas-bulb { --sag: 26px; }
.xmas-divider__s--b { top: 2px; }
.xmas-divider__s--b .xmas-bulb { --sag: 14px; }
.xmas-divider__s--c { top: 14px; }
.xmas-divider__s--c .xmas-bulb { --sag: 42px; }

/* C9-size bulbs. */
.xmas-divider .xmas-bulb::after {
  width: 10px;
  height: 15px;
  margin-left: -5px;
}

.xmas-divider__props {
  position: absolute;
  bottom: 4px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.xmas-divider__props--l { left: 0; }
.xmas-divider__props--r { right: 0; }

.xmas-cane {
  display: block;
  width: 30px;
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

.xmas-cane--small {
  width: 22px;
}

.xmas-divider__props--r .xmas-cane {
  scale: -1 1;
}

/* Bells hang from the strings rather than stand. */
.xmas-divider--icicles .xmas-divider__props {
  top: 26px;
  bottom: auto;
  align-items: flex-start;
  gap: 18px;
}

.xmas-bell {
  display: block;
  width: 40px;
  height: auto;
  transform-origin: 50% 0;
  animation: xmas-sway 2.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.45));
}

.xmas-bell--b {
  width: 32px;
  margin-top: 16px;
  animation-delay: -1.2s;
}

.xmas-icicles {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 34'%3E%3Cg fill='%23e8f4ff'%3E%3Cpath d='M2 0 L6 18 L10 0Z M14 0 L17 10 L20 0Z M24 0 L29 32 L34 0Z M38 0 L41 12 L44 0Z M48 0 L52 22 L56 0Z M60 0 L63 9 L66 0Z M70 0 L74 26 L78 0Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 80px 34px repeat-x;
  opacity: 0.75;
  filter: drop-shadow(0 0 3px rgba(200, 230, 255, 0.5));
}

.xmas-ginger {
  display: block;
  width: 44px;
  height: auto;
  transform-origin: 50% 100%;
  animation: xmas-dance 1.1s ease-in-out infinite alternate;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

.xmas-ginger--b {
  width: 36px;
  animation-delay: -0.55s;
}

@keyframes xmas-dance {
  from { transform: rotate(-9deg) translateY(0); }
  to { transform: rotate(9deg) translateY(-4px); }
}

.xmas-wiredeer {
  display: block;
  width: 116px;
  height: auto;
  filter: drop-shadow(0 0 4px rgba(255, 233, 168, 0.85));
}

.xmas-wiredeer--flip {
  scale: -1 1;
}

/* The dotted lights chase along the wire. */
.xmas-wiredeer__lights {
  animation: xmas-wire 1.4s linear infinite;
}

@keyframes xmas-wire {
  to { stroke-dashoffset: -10.2; }
}

/* ---------- Rooftop + Santa's sleigh (christmasScene('santa')) ---------- */

:root {
  --xmas-sleigh-w: 300px;
}

.xmas-roofscene {
  --xmas-sleigh-h: calc(var(--xmas-sleigh-w) * 0.2884);
  --xmas-roof-top: calc(var(--xmas-sleigh-h) + 84px);
  padding: 16px 20px 0;
  overflow: visible;
}

.xmas-roof {
  position: relative;
  width: min(980px, 100%);
  margin: 0 auto;
  padding-top: var(--xmas-roof-top);
}

.xmas-roof__roof {
  height: 96px;
  background-color: #5a1f1f;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 30px);
  clip-path: polygon(3% 100%, 15% 0, 85% 0, 97% 100%);
}

.xmas-roof__snow {
  position: absolute;
  top: calc(var(--xmas-roof-top) - 8px);
  left: 14%;
  right: 14%;
  height: 16px;
  border-radius: 10px 10px 6px 6px;
  background: var(--xmas-snow);
  box-shadow: 0 2px 0 #c9d6e3;
}

.xmas-roof__snow::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 2%;
  right: 2%;
  height: 10px;
  background: radial-gradient(circle at 50% 0, var(--xmas-snow) 5px, transparent 5.5px) 0 -2px / 26px 12px repeat-x;
}

.xmas-roof__parked {
  position: absolute;
  top: calc(var(--xmas-roof-top) - 4px - var(--xmas-sleigh-h) * 0.92);
  left: 22%;
  width: var(--xmas-sleigh-w);
}

.xmas-roof__parked .xmas-sleigh__art {
  display: block;
  width: 100%;
  height: auto;
}

.xmas-roof__bubble {
  position: absolute;
  top: calc(var(--xmas-roof-top) - var(--xmas-sleigh-h) - 58px);
  left: calc(22% + var(--xmas-sleigh-w) * 0.04);
  z-index: 2;
  padding: 8px 16px;
  border-radius: 18px;
  background: #fff;
  color: #9b1026;
  font-family: "Marck Script", cursive;
  font-size: 1.3rem;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transform-origin: 20% 100%;
  opacity: 0;
  transform: scale(0.6) translateY(10px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.xmas-roof__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 54px;
  border: 9px solid transparent;
  border-top-color: #fff;
  border-left-width: 4px;
}

.xmas-roofscene.is-landed .xmas-roof__bubble,
html:not(.xmas-santa-js) .xmas-roof__bubble {
  opacity: 1;
  transform: none;
}

.xmas-roof__chimney {
  position: absolute;
  top: calc(var(--xmas-roof-top) - 66px);
  right: 22%;
  width: 52px;
  height: 76px;
  z-index: 1;
  background-color: #8a2b1f;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 2px, transparent 2px 18px);
}

.xmas-roof__chimney::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -6px;
  right: -6px;
  height: 12px;
  border-radius: 8px 8px 3px 3px;
  background: var(--xmas-snow);
}

.xmas-roof__smoke {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: rgba(200, 205, 215, 0.5);
  opacity: 0;
  animation: xmas-smoke 3.6s ease-out infinite;
}

.xmas-roof__smoke:nth-child(2) { animation-delay: -1.2s; }
.xmas-roof__smoke:nth-child(3) { animation-delay: -2.4s; }

@keyframes xmas-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(26px, -70px) scale(2.2); }
}

.xmas-roof__wreath,
.xmas-door__wreath {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  border: 6px solid #1c8a3c;
  box-shadow: inset 0 0 0 1px #14532d, 0 0 0 1px #14532d;
  background:
    radial-gradient(circle at 50% 0, #d6202a 0 3px, transparent 3.5px);
}

.xmas-roof__wreath {
  top: 24px;
}

.xmas-roof__wreath::after,
.xmas-door__wreath::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 12px;
  height: 8px;
  margin-left: -6px;
  background: #d6202a;
  clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 50% 55%, 0 100%);
}

.xmas-lights.xmas-roof__gutter {
  position: absolute;
  top: calc(var(--xmas-roof-top) + 90px);
  left: 3%;
  right: 3%;
}

.xmas-roof__wall {
  height: 124px;
  margin: 0 9%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 2px, transparent 2px 14px),
    linear-gradient(#2b211b, #1d1612);
}

.xmas-window {
  width: 70px;
  height: 54px;
  margin-bottom: 36px;
  border: 4px solid #3b2414;
  background:
    linear-gradient(#5a3a1c, #5a3a1c) center / 4px 100% no-repeat,
    linear-gradient(#5a3a1c, #5a3a1c) center / 100% 4px no-repeat,
    radial-gradient(circle at 50% 60%, #fff1b8, #ffc65a 70%);
  box-shadow: 0 0 26px rgba(255, 200, 90, 0.45);
}

.xmas-door {
  position: relative;
  width: 50px;
  height: 86px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(#8f1428, #6a0e1d);
  box-shadow: inset 0 0 0 3px #4a0a14;
}

.xmas-door__wreath {
  top: 16px;
}

/* The flying sleigh. Only shown during a fly-by. While the script is running
   the parked copy on the roof stays hidden until it lands; without the script
   (or with reduced motion) it is simply there. */
.xmas-flight {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
}

html.xmas-santa-js .xmas-flight {
  display: block;
}

.xmas-flight .xmas-sleigh {
  visibility: hidden;
}

.xmas-flight.is-flying .xmas-sleigh {
  visibility: visible;
}

html.xmas-santa-js .xmas-roof__parked {
  visibility: hidden;
}

html.xmas-santa-js .xmas-roof__parked.is-arriving,
html.xmas-santa-js .xmas-roof__parked.is-parked {
  visibility: visible;
}

.xmas-roof__parked {
  z-index: 1;
  will-change: transform;
}

.xmas-sleigh {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--xmas-sleigh-w);
  will-change: transform;
}

.xmas-sleigh__flip {
  position: relative;
  transform-origin: 50% 50%;
}

.xmas-sleigh .xmas-sleigh__art,
.xmas-roof__parked.is-arriving .xmas-sleigh__art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  animation: xmas-fly-bob 1.1s ease-in-out infinite alternate;
}

@keyframes xmas-fly-bob {
  from { transform: translateY(-3px) rotate(-1.5deg); }
  to { transform: translateY(3px) rotate(1deg); }
}

/* Magic dust off the back of the sleigh. */
.xmas-spark {
  position: absolute;
  left: 4%;
  top: 72%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe08a;
  box-shadow: 0 0 6px 2px rgba(255, 214, 102, 0.8);
  animation: xmas-spark 1.2s linear infinite;
}

.xmas-spark:nth-child(2) { top: 64%; animation-delay: -0.25s; }
.xmas-spark:nth-child(3) { top: 80%; animation-delay: -0.5s; }
.xmas-spark:nth-child(4) { top: 58%; animation-delay: -0.75s; }
.xmas-spark:nth-child(5) { top: 76%; animation-delay: -1s; }

@keyframes xmas-spark {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(-70px, 14px) scale(0.3); }
}

.xmas-deer {
  animation: xmas-deer-bob 0.5s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

@keyframes xmas-deer-bob {
  from { transform: translateY(-2px); }
  to { transform: translateY(2px); }
}

.xmas-deer__leg {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: xmas-gallop 0.5s ease-in-out infinite alternate;
}

.xmas-deer__leg--2,
.xmas-deer__leg--3 {
  animation-direction: alternate-reverse;
}

@keyframes xmas-gallop {
  from { transform: rotate(32deg); }
  to { transform: rotate(-32deg); }
}

.xmas-rudolph__glow {
  animation: xmas-glow-nose 0.9s ease-in-out infinite alternate;
}

@keyframes xmas-glow-nose {
  from { opacity: 0.15; }
  to { opacity: 0.6; }
}

/* Santa only waves once he is down. */
.xmas-santa__wave {
  display: none;
  transform-box: fill-box;
  transform-origin: 100% 100%;
  animation: xmas-wave 0.6s ease-in-out infinite alternate;
}

.xmas-roof__parked:not(.is-arriving) .xmas-santa__wave {
  display: inline;
}

@keyframes xmas-wave {
  from { transform: rotate(-14deg); }
  to { transform: rotate(10deg); }
}

/* Parked: the team stands still and the dust settles. */
.xmas-roof__parked:not(.is-arriving) .xmas-deer,
.xmas-roof__parked:not(.is-arriving) .xmas-deer__leg {
  animation: none;
}

.xmas-roof__parked:not(.is-arriving) .xmas-spark {
  display: none;
}

@media (max-width: 600px) {
  :root {
    --xmas-sleigh-w: 190px;
  }

  .xmas-divider {
    height: 100px;
    padding: 0 12px;
  }

  .xmas-cane { width: 22px; }
  .xmas-cane--small { width: 16px; }
  .xmas-bell { width: 30px; }
  .xmas-bell--b { width: 24px; }
  .xmas-ginger { width: 34px; }
  .xmas-ginger--b { width: 28px; }
  .xmas-wiredeer { width: 80px; }

  .xmas-roof__bubble {
    left: 2%;
    font-size: 1rem;
  }

  .xmas-roof__chimney {
    right: 10%;
    width: 40px;
  }

  .xmas-window {
    width: 48px;
    height: 40px;
  }
}

/* ---------- Snow build-up + icicles on the cards (christmasScene('frost')) ---------- */

/* Covers the whole document and clips, so a clump falling past the right
   edge can never add a sideways scroll on a phone. Height set by the script. */
.xmas-frost {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  z-index: 30;
  pointer-events: none;
}

/* The snow cap: a bumpy white lip sitting on a card's top edge, overhanging
   both ends a little and drooping over the corners. It grows from a dusting
   to full depth over two minutes. */
.xmas-cap {
  position: absolute;
  height: var(--h, 14px);
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(transparent calc(100% - 3px), #cfdceb calc(100% - 3px)),
    radial-gradient(circle at 50% 72%, #fbfdff 9px, transparent 9.5px) 0 0 / 23px 100% repeat-x,
    radial-gradient(circle at 50% 70%, #f4f8fc 12px, transparent 12.5px) 11px 0 / 37px 100% repeat-x,
    radial-gradient(circle at 50% 80%, #eef4fa 6px, transparent 6.5px) 5px 0 / 15px 100% repeat-x,
    linear-gradient(transparent 58%, #f4f8fc 58%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  transform-origin: 50% 100%;
  transform: scaleY(0.12);
  /* A dusting at once, a real layer within two minutes, and still deepening
     twenty minutes in. */
  animation: xmas-build 1200s linear both;
}

/* On a rounded card: no overhang, no droop off a corner that isn't there,
   ends that round down onto the curve. */
.xmas-cap--round {
  border-radius: 999px 999px 3px 3px;
}

.xmas-cap--round::before,
.xmas-cap--round::after {
  display: none;
}

.xmas-cap::before,
.xmas-cap::after {
  content: "";
  position: absolute;
  bottom: -8px;
  width: 13px;
  height: 15px;
  border-radius: 50% 50% 60% 60%;
  background: #f4f8fc;
}

.xmas-cap::before { left: 0; }
.xmas-cap::after { right: 0; }

@keyframes xmas-build {
  0% { transform: scaleY(0.12); animation-timing-function: ease-out; }
  8% { transform: scaleY(0.45); animation-timing-function: ease-out; }
  25% { transform: scaleY(0.7); animation-timing-function: ease-out; }
  100% { transform: scaleY(1); }
}

.xmas-icicles {
  position: absolute;
  height: 0;
}

.xmas-icicle {
  position: absolute;
  top: 0;
  width: var(--w, 6px);
  height: var(--len, 16px);
  margin-left: calc(var(--w, 6px) / -2);
  background: linear-gradient(to bottom, rgba(244, 250, 255, 0.95), rgba(185, 222, 255, 0.75) 70%, rgba(255, 255, 255, 0.95));
  clip-path: polygon(0 0, 100% 0, 56% 100%, 44% 100%);
  filter: drop-shadow(0 0 2px rgba(200, 230, 255, 0.6));
  transform-origin: 50% 0;
  transform: scale(0.45, 0.04);
  animation: xmas-grow 1800s linear both;
}

/* A speck first, thickening as it lengthens. */
@keyframes xmas-grow {
  0% { transform: scale(0.45, 0.04); animation-timing-function: ease-out; }
  5% { transform: scale(0.6, 0.35); animation-timing-function: ease-out; }
  20% { transform: scale(0.8, 0.7); animation-timing-function: ease-out; }
  60% { transform: scale(0.92, 0.9); animation-timing-function: ease-out; }
  100% { transform: scale(1, 1); }
}

/* A broken-off icicle on its way down, and the ones piled up at the bottom
   of the page. */
.xmas-icicle-fall,
.xmas-shard {
  position: absolute;
  background: linear-gradient(to bottom, rgba(244, 250, 255, 0.95), rgba(185, 222, 255, 0.75) 70%, rgba(255, 255, 255, 0.95));
  clip-path: polygon(0 0, 100% 0, 56% 100%, 44% 100%);
  filter: drop-shadow(0 0 2px rgba(200, 230, 255, 0.7));
  transform-origin: 50% 50%;
  pointer-events: none;
}

.xmas-pile {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  pointer-events: none;
}

.xmas-shard {
  width: var(--w, 6px);
  height: var(--len, 30px);
  margin-left: calc(var(--w, 6px) / -2);
}

/* Ice on snow needs to read as ice: bluer, with a darker rim. */
.xmas-pile .xmas-shard {
  background: linear-gradient(to bottom, rgba(214, 238, 255, 0.98), rgba(120, 182, 238, 0.95) 70%, rgba(200, 232, 255, 0.98));
  filter: drop-shadow(0 0 1px rgba(40, 90, 150, 0.9)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

.xmas-clump,
.xmas-puff,
.xmas-drip {
  position: absolute;
  pointer-events: none;
}

.xmas-clump {
  width: 11px;
  height: 9px;
  border-radius: 50%;
  background: #f4f8fc;
  box-shadow: 5px 2px 0 -1px #f4f8fc, -3px 3px 0 -1px #e9f1f9;
}

.xmas-puff {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(244, 248, 252, 0.9);
}

.xmas-drip {
  width: 3px;
  height: 6px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: rgba(205, 232, 255, 0.95);
  box-shadow: 0 0 3px rgba(205, 232, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .xmas-cap,
  .xmas-icicle {
    animation: none;
    transform: none;
  }
}

/* ---------- Snow drift along the bottom of every page (christmas/footer.php) ---------- */

/* Room under the footer's content for the drift to pile into. */
#footer-section {
  padding-bottom: 66px;
}

.xmas-drift {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 140px 80px at 8% 100%, #fbfdff 60%, transparent 62%),
    radial-gradient(ellipse 200px 100px at 27% 100%, #f4f8fc 60%, transparent 62%),
    radial-gradient(ellipse 160px 86px at 46% 100%, #fbfdff 60%, transparent 62%),
    radial-gradient(ellipse 220px 104px at 66% 100%, #f4f8fc 60%, transparent 62%),
    radial-gradient(ellipse 150px 82px at 86% 100%, #fbfdff 60%, transparent 62%),
    radial-gradient(ellipse 110px 70px at 99% 100%, #f4f8fc 60%, transparent 62%),
    linear-gradient(transparent 55%, #e6eef7 55%);
  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.35));
  transform-origin: 50% 100%;
  transform: scaleY(0.15);
  animation: xmas-build 1200s linear both;
}

/* A glint across the drift now and then. */
.xmas-drift::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.2px, transparent 1.8px) 0 0 / 37px 23px;
  -webkit-mask: linear-gradient(transparent 55%, #000 75%);
  mask: linear-gradient(transparent 55%, #000 75%);
  opacity: 0.5;
  animation: xmas-dot 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .xmas-drift,
  .xmas-drift::after {
    animation: none;
    transform: none;
  }
}

/* ---------- The Humbug + the elves (christmasScene('mischief')) ---------- */

.xmas-mischief {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  z-index: 32;
  pointer-events: none;
}

.xmas-char {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.xmas-char--humbug { width: 66px; }
.xmas-char--elf { width: 42px; }

.xmas-char__hop {
  position: relative;
}

.xmas-char__flip {
  transform-origin: 50% 50%;
}

.xmas-char__flip svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.45));
}

.xmas-say {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  background: #fff;
  color: #5b3f8c;
  font: 700 0.8rem/1.3 Arial, sans-serif;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.xmas-char--elf .xmas-say {
  color: #14532d;
}

.xmas-say.is-on {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Legs: tiptoe when sneaking, a scramble when running, a march for elves. */
.xmas-hb-leg,
.xmas-elf__leg,
.xmas-hb-arm,
.xmas-elf__arm {
  transform-box: fill-box;
}

.xmas-hb-leg,
.xmas-elf__leg {
  transform-origin: 50% 0;
}

.is-sneaking .xmas-hb-leg,
.is-running .xmas-hb-leg,
.is-walking .xmas-elf__leg {
  animation: xmas-step 0.5s ease-in-out infinite alternate;
}

.is-running .xmas-hb-leg { animation-duration: 0.16s; }
.is-walking .xmas-elf__leg { animation-duration: 0.3s; }

.xmas-hb-leg--b,
.xmas-elf__leg--b {
  animation-direction: alternate-reverse !important;
}

@keyframes xmas-step {
  from { transform: rotate(24deg); }
  to { transform: rotate(-24deg); }
}

/* Sneaking: crouched and creeping. */
.is-sneaking .xmas-char__hop {
  animation: xmas-creep 0.5s ease-in-out infinite alternate;
}

@keyframes xmas-creep {
  from { transform: translateY(2px) rotate(-3deg); }
  to { transform: translateY(-2px) rotate(3deg); }
}

/* A look around before doing it. */
.is-peeking .xmas-char__hop {
  animation: xmas-peek 0.5s ease-in-out;
}

@keyframes xmas-peek {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-9deg); }
  70% { transform: rotate(9deg); }
}

.xmas-hb-arm {
  transform-origin: 0% 60%;
}

.is-pushing .xmas-hb-arm,
.is-grabbing .xmas-hb-arm {
  animation: xmas-shove 0.3s ease-out;
}

.is-pushing .xmas-char__hop {
  animation: xmas-lunge 0.4s ease-out;
}

@keyframes xmas-shove {
  0% { transform: rotate(40deg); }
  60% { transform: rotate(-25deg); }
  100% { transform: rotate(0); }
}

@keyframes xmas-lunge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

.is-throwing .xmas-hb-arm {
  animation: xmas-throw 0.4s ease-out;
}

@keyframes xmas-throw {
  0% { transform: rotate(80deg); }
  45% { transform: rotate(110deg); }
  100% { transform: rotate(-60deg); }
}

.xmas-hb-loot {
  display: none;
}

.has-loot .xmas-hb-loot {
  display: inline;
}

.xmas-elf__arm {
  transform-origin: 0% 50%;
}

.is-working .xmas-elf__arm {
  animation: xmas-hammer 0.28s ease-in-out infinite alternate;
}

.is-working .xmas-char__hop {
  animation: xmas-creep 0.28s ease-in-out infinite alternate;
}

@keyframes xmas-hammer {
  from { transform: rotate(-55deg); }
  to { transform: rotate(15deg); }
}

.xmas-snowball {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f4f8fc;
  box-shadow: inset -2px -2px 3px #c9d6e3, 0 0 4px rgba(255, 255, 255, 0.6);
}

.xmas-fix-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: #ffe08a;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px #ffd36b);
}

/* What he knocks over. Elves take the class off again. */
.xmas-nut {
  transform-origin: 50% 96%;
  transition: rotate 0.45s cubic-bezier(0.6, -0.2, 0.8, 1.3);
}

.xmas-nut.is-knocked {
  rotate: -80deg;
  animation: none;
}

.xmas-snowman {
  transform-origin: 45% 96%;
  transition: rotate 0.5s cubic-bezier(0.6, -0.2, 0.8, 1.3);
}

.xmas-snowman.is-knocked {
  rotate: -76deg;
}

.xmas-gift {
  transition: opacity 0.25s ease, scale 0.25s ease;
}

.xmas-gift.is-knocked {
  opacity: 0;
  scale: 0.3;
}

.xmas-sign {
  transition: rotate 0.4s ease;
}

.xmas-sign.is-knocked {
  rotate: -2.5deg;
}

.xmas-sign.is-knocked::before,
.xmas-sign.is-knocked::after {
  animation: none;
  opacity: 0.06;
}

.xmas-sign.is-knocked .xmas-sign__title {
  color: #8a6a3a;
  text-shadow: none;
}

.xmas-mantel__hook {
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.8, 1.3);
}

.xmas-mantel__hook.is-knocked {
  animation: none;
  transform: translateY(58px) rotate(-80deg);
}

.xmas-candle.is-knocked .xmas-candle__flame {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.xmas-star {
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.8, 1.3), fill 0.3s ease;
}

.xmas-star.is-knocked {
  animation: none;
  transform: translate(24px, 52px) rotate(80deg);
  fill: #8a7440;
}

.xmas-divider__s {
  transform-origin: 0 0;
  transition: rotate 0.5s cubic-bezier(0.5, 0, 0.8, 1.3);
}

.xmas-divider__s.is-knocked {
  rotate: 2.2deg;
}

.xmas-divider__s.is-knocked .xmas-bulb::after {
  background: #2b2b2b;
  box-shadow: none;
  animation: none;
}

@media (max-width: 600px) {
  .xmas-char--humbug { width: 52px; }
  .xmas-char--elf { width: 34px; }
}

/* ---------- More mischief: Santa on foot, parachutes, disguises, kicks ---------- */

.xmas-char--santa { width: 60px; }

.xmas-char--santa .xmas-say {
  color: #9b1026;
}

.xmas-santa-leg,
.xmas-santa-arm {
  transform-box: fill-box;
}

.xmas-santa-leg {
  transform-origin: 50% 0;
}

.xmas-santa-arm {
  transform-origin: 0% 50%;
}

.is-running .xmas-santa-leg,
.is-walking .xmas-santa-leg {
  animation: xmas-step 0.2s ease-in-out infinite alternate;
}

.is-walking .xmas-santa-leg { animation-duration: 0.34s; }

.xmas-santa-leg--b {
  animation-direction: alternate-reverse !important;
}

/* A kick: front leg swings up and back. */
@keyframes xmas-kick {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(-85deg); }
  100% { transform: rotate(0deg); }
}

.is-kicking .xmas-santa-leg--f,
.is-kicking .xmas-hb-leg--f {
  animation: xmas-kick 0.32s ease-out !important;
}

.is-throwing .xmas-santa-arm {
  animation: xmas-throw 0.4s ease-out;
}

/* While Santa is off chasing, his greeting waits. */
.xmas-roofscene.santa-out .xmas-roof__bubble {
  opacity: 0;
  transform: scale(0.6) translateY(10px);
}

/* Santa's seat in the parked sleigh empties while he is out. */
.xmas-roof__parked.santa-out .xmas-santa-seat {
  display: none;
}

/* The Humbug's ways in and out. */
.is-scuttling .xmas-hb-leg {
  animation: xmas-step 0.14s ease-in-out infinite alternate;
}

.is-scuttling .xmas-char__hop {
  transform: translateY(5px) scaleY(0.86);
}

.xmas-disguise {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 118%;
  transform: translateX(-50%);
  z-index: 2;
}

.xmas-disguise svg {
  display: block;
  width: 100%;
  height: auto;
}

.is-disguised .xmas-disguise {
  display: block;
}

.is-disguised .xmas-char__hop {
  animation: xmas-creep 0.6s ease-in-out infinite alternate;
}

.is-cartwheel .xmas-char__hop {
  animation: xmas-cartwheel 0.45s linear infinite;
}

@keyframes xmas-cartwheel {
  to { transform: rotate(360deg); }
}

/* Elves: a jog, a bit of magic, a parachute. */
.is-jogging .xmas-elf__leg {
  animation-duration: 0.15s !important;
}

.is-magic .xmas-elf__arm {
  animation: xmas-wand 0.45s ease-in-out infinite alternate;
}

@keyframes xmas-wand {
  from { transform: rotate(-115deg); }
  to { transform: rotate(-70deg); }
}

.xmas-chute {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 84px;
  margin-left: -42px;
  transform-origin: 50% 100%;
  transition: transform 0.5s ease-in;
}

.xmas-chute svg {
  display: block;
  width: 100%;
  height: auto;
}

.has-chute .xmas-chute {
  display: block;
  animation: xmas-chute-sway 1.4s ease-in-out infinite alternate;
}

@keyframes xmas-chute-sway {
  from { rotate: -6deg; }
  to { rotate: 6deg; }
}

/* Landed: the canopy collapses into a bundle behind the elf, and gets
   dragged along when they leave. */
.chute-down .xmas-chute {
  animation: none;
  transform: translate(-46px, 30px) scale(0.42, 0.22) rotate(-8deg);
}

.chute-down.is-walking .xmas-chute {
  animation: xmas-drag 0.3s ease-in-out infinite alternate;
}

@keyframes xmas-drag {
  from { rotate: -3deg; }
  to { rotate: 3deg; }
}

/* The hearth under the mantel: where a knocked stocking lands. */
.xmas-hearth {
  height: 18px;
  margin: 46px 3% 0;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 26px),
    linear-gradient(rgba(0, 0, 0, 0.3) 0 2px, transparent 2px),
    linear-gradient(#8a2b1f, #6b2016);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* More things to knock over. */
.xmas-bell.is-knocked {
  animation: none;
}

.xmas-ginger {
  transition: rotate 0.45s cubic-bezier(0.6, -0.2, 0.8, 1.3);
}

.xmas-ginger.is-knocked {
  animation: none;
  rotate: 84deg;
}

.xmas-cane {
  transform-origin: 40% 100%;
  transition: rotate 0.45s cubic-bezier(0.6, -0.2, 0.8, 1.3);
}

.xmas-cane.is-knocked {
  rotate: -76deg;
}

.xmas-wiredeer {
  transform-origin: 50% 100%;
  transition: rotate 0.45s ease;
}

.xmas-wiredeer.is-knocked {
  rotate: -9deg;
  filter: none;
}

.xmas-wiredeer.is-knocked .xmas-wiredeer__lights {
  stroke: #4b5563;
  animation: none;
}

.xmas-mantel__lights.is-knocked .xmas-bulb::after,
.xmas-roof__gutter.is-knocked .xmas-bulb::after {
  background: #2b2b2b;
  box-shadow: none;
  animation: none;
}

.xmas-tree.is-knocked {
  filter: none;
}

.xmas-tree.is-knocked .xmas-dot {
  opacity: 0.12;
  animation: none;
}

.xmas-tree.is-knocked .xmas-ball--glow {
  opacity: 0.55;
  animation: none;
}

.xmas-window {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.xmas-window.is-knocked {
  background:
    linear-gradient(#5a3a1c, #5a3a1c) center / 4px 100% no-repeat,
    linear-gradient(#5a3a1c, #5a3a1c) center / 100% 4px no-repeat,
    #151a24;
  box-shadow: none;
}

.xmas-roof__chimney.is-knocked .xmas-roof__smoke {
  display: none;
}

/* The snowball stuck in the chimney pot. */
.xmas-roof__chimney.is-knocked::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 24px;
  height: 16px;
  margin-left: -12px;
  border-radius: 50%;
  background: #f4f8fc;
  box-shadow: inset -2px -3px 4px #c9d6e3;
}

@media (max-width: 600px) {
  .xmas-char--santa { width: 48px; }
  .xmas-chute { width: 66px; margin-left: -33px; }
}

/* ---------- Small screens & reduced motion ---------- */

@media (max-width: 700px) {
  .xmas-hat {
    top: -14%;
    left: -14%;
    width: 58%;
  }

  .xmas-bulb:nth-child(even) {
    display: none;
  }

  .xmas-greeting {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xmas-bulb::after,
  .xmas-bauble,
  .xmas-nut,
  .xmas-nut__jaw,
  .xmas-sign::before,
  .xmas-sign::after,
  .xmas-candle__flame,
  .xmas-mantel__hook,
  .xmas-star,
  .xmas-ball--glow,
  .xmas-dot,
  .xmas-bell,
  .xmas-ginger,
  .xmas-wiredeer__lights,
  .xmas-roof__smoke,
  .xmas-deer,
  .xmas-deer__leg,
  .xmas-rudolph__glow,
  .xmas-santa__wave,
  .xmas-sleigh__art {
    animation: none;
  }

  .xmas-snow {
    display: none;
  }
}