/* ═══════════════════════════════════════════════════════════════════════════
   CHRISTMAS THEME — loaded only when SEASONAL_THEME = 'christmas' (app.py)
   Everything visual is scoped to .xm-home, which base.html puts on the
   homepage only — course, lesson and account pages stay exactly as they are.
   Snowfall, snow that piles up on the cards and little Sofia's walk are
   driven by static/js/christmas.js.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --xm-night-1: #0E1530;
  --xm-night-2: #1C2148;
  --xm-night-3: #382450;
  --xm-night-4: #5C2D52;
  --xm-cream:   #FBF3EE;
  --xm-berry:   #B8324B;
  --xm-pine:    #2C6352;
  --xm-ice:     #8FB4D8;
}

/* ── Promo bar touch (shown site-wide, like "Happy Nailoween") ──────────── */
.promo-xmas {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: .9rem;
  color: var(--xm-berry);
  letter-spacing: .02em;
}
.promo-flake { width: 15px; height: 15px; flex-shrink: 0; color: var(--xm-ice); }

/* ── Winter-night hero ──────────────────────────────────────────────────── */
.xm-home .hero {
  background:
    radial-gradient(85% 42% at 50% 100%, rgba(242,170,192,.30) 0%, transparent 70%),
    radial-gradient(45% 55% at 76% 44%, rgba(196,115,138,.20) 0%, transparent 70%),
    radial-gradient(38% 45% at 10% 28%, rgba(120,150,230,.13) 0%, transparent 70%),
    linear-gradient(180deg, var(--xm-night-1) 0%, var(--xm-night-2) 36%, var(--xm-night-3) 70%, var(--xm-night-4) 100%);
}
.xm-home .hero-bg { opacity: .3; }
.xm-home .shape   { opacity: .06; }
.xm-home .hero-wave { display: none; }
.xm-home .hero-inner { padding-bottom: 10.5rem; }

.xm-home .hero-title    { color: var(--xm-cream); }
.xm-home .hero-title em {
  position: relative;
  display: inline-block;          /* keeps the Santa hat with the first letter */
  background: linear-gradient(100deg, #FFE1E8 0%, #F4A7BC 32%, #EBCB91 58%, #F4A7BC 80%, #FFE1E8 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding-right: .08em;
  animation: xmShimmer 9s ease-in-out infinite;
}
@keyframes xmShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.xm-home .hero-subtitle { color: rgba(251,243,238,.76); }
.xm-home .hero-badge-rose {
  color: #F8D3DD;
  background: rgba(255,255,255,.07);
  border-color: rgba(246,203,215,.24);
}
.xm-home .hero-trust { color: rgba(251,243,238,.68); }
.xm-home .trust-dot  { background: rgba(251,243,238,.3); }
.xm-home .hero .btn-outline {
  color: #F8D8E0;
  border-color: rgba(229,143,168,.75);
  background: transparent;
}
.xm-home .hero .btn-outline:hover { background: rgba(229,143,168,.14); color: #fff; }
.xm-home .hero-img-ring { border-color: rgba(246,220,190,.38); }
.xm-home .float-card    { box-shadow: 0 14px 34px rgba(6,6,24,.45); border-color: transparent; }
.xm-home .hero-visual   { position: relative; }
.xm-home .hero-card-float { z-index: 1; }

/* decorations layer */
.xm-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── Sky: aurora + stars ────────────────────────────────────────────────── */
.xm-aurora {
  position: absolute;
  inset: -12% -15% 42% -15%;
  background:
    radial-gradient(38% 26% at 26% 46%, rgba(120,226,196,.13), transparent 70%),
    radial-gradient(34% 24% at 58% 30%, rgba(244,160,200,.15), transparent 70%),
    radial-gradient(30% 22% at 86% 48%, rgba(166,150,255,.12), transparent 70%);
  animation: xmAurora 22s ease-in-out infinite alternate;
}
@keyframes xmAurora {
  from { transform: translateX(-4%) skewX(-6deg) scaleY(1); }
  to   { transform: translateX(5%)  skewX(5deg)  scaleY(1.15); }
}
.xm-stars {
  position: absolute;
  inset: 0 0 38% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 5% 12%,  #fff 50%, transparent 51%),
    radial-gradient(1px 1px     at 13% 34%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 8%,  #fff 50%, transparent 51%),
    radial-gradient(1px 1px     at 33% 25%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px     at 42% 5%,  #FFEBD0 50%, transparent 51%),
    radial-gradient(1px 1px     at 54% 31%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px     at 71% 28%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 6%,  #fff 50%, transparent 51%),
    radial-gradient(1px 1px     at 88% 22%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px     at 95% 10%, #FFEBD0 50%, transparent 51%);
  opacity: .7;
  animation: xmTwinkle 5s ease-in-out infinite;
}
.xm-stars-2 {
  background-image:
    radial-gradient(1px 1px     at 9% 22%,  #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 18% 48%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px     at 37% 13%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 49% 41%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px     at 58% 19%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 74% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px     at 84% 15%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 36%, #fff 50%, transparent 51%);
  animation-delay: -2.4s;
  animation-duration: 6.2s;
}
@keyframes xmTwinkle { 0%,100% { opacity: .8; } 50% { opacity: .25; } }

/* ── Santa's sleigh, now and then ───────────────────────────────────────── */
.xm-sleigh {
  position: absolute;
  top: 4%;
  left: 0;
  width: 112px;
  color: rgba(255,238,212,.9);
  filter: drop-shadow(0 0 6px rgba(255,214,150,.55));
  opacity: 0;
  animation: xmSleigh 34s linear 4s infinite;
}
.xm-sleigh svg { display: block; width: 100%; height: auto; }
.xm-sleigh-trail {
  position: absolute;
  right: 92%;
  top: 46%;
  width: 150px;
  height: 10px;
  background:
    radial-gradient(1.6px 1.6px at 12% 30%, #FFE7B8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 30% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 52% 40%, #FFE7B8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 70% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 88% 35%, #FFE7B8 50%, transparent 51%),
    linear-gradient(90deg, transparent, rgba(255,226,170,.42)) center / 100% 1.5px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
          mask-image: linear-gradient(90deg, transparent, #000);
}
@keyframes xmSleigh {
  0%   { opacity: 0; transform: translate(-200px, 150px) rotate(-12deg); }
  3%   { opacity: .95; }
  16%  { transform: translate(40vw, 70px) rotate(-9deg); }
  30%  { opacity: .95; }
  34%  { opacity: 0; transform: translate(calc(100vw + 40px), -10px) rotate(-8deg); }
  100% { opacity: 0; transform: translate(calc(100vw + 40px), -10px) rotate(-8deg); }
}

/* ── Fairy-light garland (svg built by christmas.js) ────────────────────── */
.xm-garland {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 190px;
  z-index: 1;
}
.xm-garland svg { position: absolute; left: 0; top: 0; overflow: visible; }
.xm-wire  { fill: none; stroke: #2A3B37; stroke-width: 1.6; }
.xm-wire-snow { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 13 5 19 1 9 3 23; }
.xm-bulb-cap  { fill: #53605C; }
.xm-bulb      { transform-box: fill-box; transform-origin: 50% 0; animation: xmBulb 3.2s ease-in-out infinite; }
.xm-bulb-glow { animation: xmGlow 3.2s ease-in-out infinite; }
@keyframes xmBulb { 0%,100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes xmGlow { 0%,100% { opacity: .9; } 50% { opacity: .35; } }

/* ── SALE tags hanging from the wire on wooden pegs ─────────────────────── */
.xm-home .sale-tapes-top { filter: drop-shadow(0 12px 18px rgba(0,0,0,.35)); z-index: 2; }
.xm-tag {
  --r: 0deg;
  --bob: 2.5deg;
  position: relative;
  display: inline-block;
  transform-origin: 50% 0;
  transform: rotate(var(--r));
  animation:
    xmSwingIn 2.2s cubic-bezier(.3,.7,.4,1) var(--d) both,
    xmTagSway var(--sway) ease-in-out calc(var(--d) + 2.2s) infinite alternate;
}
.xm-tag.t1 { --r: -5deg; --d: .3s;  --sway: 2.8s; }
.xm-tag.t2 { --r:  4deg; --d: .5s;  --sway: 3.2s; --bob: -3deg; }
.xm-tag.t3 { --r: -3deg; --d: .7s;  --sway: 2.9s; }
.xm-tag .sale-tape { animation: none; transform: none; }
.xm-home .sale-tape.t1 { background: #FFFDFB; }
.xm-home .sale-tape.t2 { background: var(--xm-berry); color: #FFF3EE; }
.xm-home .sale-tape.t3 { background: #F0E0C4; }
.xm-peg {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 9px;
  height: 22px;
  margin-left: -4.5px;
  border-radius: 2px 2px 3px 3px;
  background: linear-gradient(90deg, #C79E70 0 46%, #A87F55 46% 54%, #D6B184 54%);
  box-shadow: 0 2px 3px rgba(0,0,0,.25);
  z-index: 4;
}
.xm-peg::after {             /* metal spring */
  content: '';
  position: absolute;
  left: -1.5px; right: -1.5px;
  top: 8px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(#E9E6EF, #9C98A6);
}
@keyframes xmSwingIn {
  0%   { opacity: 0; transform: translateY(-30px) rotate(calc(var(--r) * -6)); }
  18%  { opacity: 1; transform: translateY(0) rotate(calc(var(--r) * 4)); }
  42%  { transform: rotate(calc(var(--r) * -2)); }
  64%  { transform: rotate(calc(var(--r) * 1.8)); }
  84%  { transform: rotate(calc(var(--r) * .7)); }
  100% { opacity: 1; transform: rotate(var(--r)); }
}
@keyframes xmTagSway {
  from { transform: rotate(var(--r)); }
  to   { transform: rotate(calc(var(--r) + var(--bob))); }
}

/* ── Santa hats ─────────────────────────────────────────────────────────── */
.xm-hat { display: block; width: 100%; height: auto; overflow: visible; }
.xm-title-hat {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
}
.xm-title-hat .xm-hat {
  position: absolute;
  left: -.2em;
  top: -.08em;
  width: .74em;
  transform: rotate(-17deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.3));
}
.xm-photo-hat {
  position: absolute;
  top: -48px;
  right: -46px;
  width: 104px;
  transform: rotate(22deg);
  z-index: 4;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.xm-home .about-visual { position: relative; }
.xm-about-hat {
  position: absolute;
  top: -40px;
  left: -30px;
  width: 116px;
  transform: rotate(-21deg);
  z-index: 4;
  filter: drop-shadow(0 6px 12px rgba(60,30,40,.25));
  pointer-events: none;
}

/* ── Wreath behind the photo ────────────────────────────────────────────── */
.xm-wreath {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
}
.xm-wreath svg { display: block; width: 100%; height: 100%; }
.xm-wl circle { fill: #FFE6B0; animation: xmWreathLight 2.6s ease-in-out infinite; }
.xm-wl g:nth-child(3n+1) circle { fill: #FFD0DC; animation-delay: -.9s; }
.xm-wl g:nth-child(3n+2) circle { animation-delay: -1.7s; }
.xm-wl g:nth-child(4n) circle   { fill: #FFFFFF; animation-duration: 3.4s; }
@keyframes xmWreathLight { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ── Ground scene: hills, trees, snowman, Sofia ─────────────────────────── */
.xm-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 3;
}
.xm-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 150px; }
.xm-trees { position: absolute; display: block; height: auto; z-index: 1; }
.xm-trees-r { right: .5%; bottom: 52px; width: 150px; }
.xm-trees-l { left: .5%; bottom: 54px; width: 84px; }
.xm-drift { position: absolute; left: 0; bottom: 0; width: 100%; height: 90px; z-index: 5; }

.xm-snowman {
  position: absolute;
  left: 66%;
  bottom: 48px;
  width: 94px;
  z-index: 3;
}
.xm-snowman-svg { transform-origin: 50% 100%; }
.xm-snowman.is-dancing .xm-sm-arm-r { animation: xmWave .42s ease-in-out infinite alternate; }

/* ── Sofia's little house ───────────────────────────────────────────────── */
.xm-house {
  position: absolute;
  right: 9%;
  bottom: 76px;
  width: 168px;
  z-index: 1;
}
.xm-house svg { display: block; width: 100%; height: auto; overflow: visible; }
.xm-door { transform-box: fill-box; transform-origin: 0 50%; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.xm-house.is-open .xm-door { transform: scaleX(.14); }
.xm-win { animation: xmWin 3.4s ease-in-out infinite; }
@keyframes xmWin { 0%,100% { fill: #FFD27A; } 45% { fill: #FFC65A; } 60% { fill: #FFDB8E; } }
.xm-house.is-home .xm-win { animation-duration: 1.6s; }
.xm-house-glow { animation: xmHouseGlow 3.4s ease-in-out infinite; }
@keyframes xmHouseGlow { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.xm-house-lights circle { animation: xmWreathLight 2.4s ease-in-out infinite; }
.xm-house-lights circle:nth-child(3n+1) { animation-delay: -.8s; }
.xm-house-lights circle:nth-child(3n+2) { animation-delay: -1.6s; }
/* smoke curling out of the chimney */
.xm-smoke { position: absolute; left: 71.8%; top: 13%; width: 0; height: 0; }
.xm-smoke i {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,232,246,.62) 0%, rgba(214,206,232,.34) 45%, rgba(214,206,232,0) 70%);
  filter: blur(1.6px);
  opacity: 0;
  animation: xmSmoke 6.3s linear infinite;
}
.xm-smoke i:nth-child(2) { animation-delay: -.9s; }
.xm-smoke i:nth-child(3) { animation-delay: -1.8s; }
.xm-smoke i:nth-child(4) { animation-delay: -2.7s; }
.xm-smoke i:nth-child(5) { animation-delay: -3.6s; }
.xm-smoke i:nth-child(6) { animation-delay: -4.5s; }
.xm-smoke i:nth-child(7) { animation-delay: -5.4s; }
@keyframes xmSmoke {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.5); }
  8%   { opacity: .9; }
  30%  { transform: translate(-5px, -30px) scale(1.25); }
  60%  { opacity: .55; transform: translate(8px, -62px) scale(2); }
  100% { opacity: 0;  transform: translate(28px, -104px) scale(3); }
}
.xm-snowman-svg { display: block; width: 100%; height: auto; overflow: visible; }
.xm-sm-arm-r { transform-box: view-box; transform-origin: 88px 84px; }
.xm-sm-happy { opacity: 0; }
.xm-snowman.is-happy .xm-sm-happy { opacity: 1; }
.xm-snowman.is-happy .xm-sm-eyes  { opacity: 0; }
.xm-sm-cheek { opacity: .55; transition: opacity .4s; }
.xm-snowman.is-happy .xm-sm-cheek { opacity: .95; }
.xm-snowman.is-waving .xm-sm-arm-r { animation: xmWave .5s ease-in-out infinite alternate; }
@keyframes xmWave { from { transform: rotate(6deg); } to { transform: rotate(-22deg); } }
.xm-sm-scarf { transform-box: view-box; transform-origin: 76px 62px; animation: xmScarf 3s ease-in-out infinite alternate; }
@keyframes xmScarf { from { transform: rotate(-3deg); } to { transform: rotate(5deg); } }

.xm-sofia {
  position: absolute;
  left: 0;
  bottom: 52px;
  width: 62px;
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  z-index: 7;
}
.xs-svg { display: block; width: 100%; height: auto; overflow: visible; }
.xs-happy, .xs-grin { opacity: 0; }
.xm-sofia.is-happy .xs-happy,
.xm-sofia.is-happy .xs-grin  { opacity: 1; }
.xm-sofia.is-happy .xs-eyes,
.xm-sofia.is-happy .xs-smile { opacity: 0; }

/* music notes & sparkles */
.xm-fx { position: absolute; inset: 0; z-index: 9; }
.xm-note {
  position: absolute;
  font-size: 16px;
  line-height: 1;
  color: #FFE3A8;
  text-shadow: 0 0 8px rgba(255,214,160,.85);
  opacity: 0;
  animation: xmNote var(--dur, 2.1s) ease-out forwards;
}
@keyframes xmNote {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5) rotate(-10deg); }
  15%  { opacity: 1; transform: translate(calc(var(--dx, 0px) * .2), calc(var(--rise, 62px) * -.16)) scale(1.1) rotate(8deg); }
  60%  { opacity: .9; transform: translate(calc(var(--dx, 0px) * .75), calc(var(--rise, 62px) * -.68)) scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), calc(var(--rise, 62px) * -1)) scale(.85) rotate(6deg); }
}

.xm-flyhat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  z-index: 8;
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(0 3px 4px rgba(40,20,40,.25));
}
.xm-heart {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 9;
  font-size: 18px;
  line-height: 1;
  color: #F08AA6;
  text-shadow: 0 0 10px rgba(255,160,190,.8);
  opacity: 0;
}
.xm-heart.is-on { animation: xmHeart 1.8s ease-out forwards; }
@keyframes xmHeart {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  20%  { opacity: 1; transform: translateY(-10px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-46px) scale(.9); }
}

.xm-prints { position: absolute; left: 0; right: 0; bottom: 56px; height: 6px; z-index: 6; }
/* a gift waiting in the snow (placed by christmas.js) */
.xm-gift {
  position: absolute;
  left: 0;
  bottom: 50px;
  width: 30px;
  z-index: 6;
  transition: opacity .6s ease;
}
.xm-gift svg { display: block; width: 100%; height: auto; overflow: visible; }
.xm-print {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 2.6px;
  margin-left: -3px;
  border-radius: 50%;
  background: rgba(140,124,176,.34);
  box-shadow: 0 1px 0 rgba(255,255,255,.9);
  animation: xmPrint 8s ease-in forwards;
}
@keyframes xmPrint { 0% { opacity: 1; } 40% { opacity: .8; } 100% { opacity: 0; } }

.xm-glint {
  position: absolute;
  z-index: 6;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255,255,255,.9);
  opacity: 0;
  animation: xmGlint 4s ease-in-out infinite;
}
.xm-glint.g0 { left: 8%;  bottom: 40px; animation-delay: .2s; }
.xm-glint.g1 { left: 19%; bottom: 26px; animation-delay: 1.9s; }
.xm-glint.g2 { left: 31%; bottom: 44px; animation-delay: 3.1s; }
.xm-glint.g3 { left: 43%; bottom: 20px; animation-delay: .9s; }
.xm-glint.g4 { left: 52%; bottom: 38px; animation-delay: 2.6s; }
.xm-glint.g5 { left: 63%; bottom: 24px; animation-delay: 1.4s; }
.xm-glint.g6 { left: 77%; bottom: 36px; animation-delay: 3.6s; }
.xm-glint.g7 { left: 86%; bottom: 18px; animation-delay: .5s; }
.xm-glint.g8 { left: 94%; bottom: 42px; animation-delay: 2.2s; }
@keyframes xmGlint { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 82% { opacity: 1; transform: scale(1); } }

/* ── Snow caps on cards (drawn by christmas.js) ─────────────────────────── */
.xm-cap {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 3;
}
.xm-home .step-card,
.xm-home .why-card,
.xm-home .a-stat,
.xm-home .cta-banner,
.xm-home .footer { position: relative; }
/* course & blog cards clip their content; let the snow sit on top instead
   and round the image corners themselves */
.xm-home .course-card,
.xm-home .home-post { overflow: visible; }
.xm-home .course-thumb,
.xm-home .home-post-thumb { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.xm-home .course-card::before { display: none; }

/* icicles hanging under the navbar */
.xm-home .navbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  margin-top: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='18' viewBox='0 0 170 18'%3E%3Cdefs%3E%3ClinearGradient id='i' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0h170v3.6c-9 2.4-17 .2-26 1.8-10 1.8-19-.6-29 1-9 1.4-18-1-27 .6-10 1.8-19-.4-28 1-9 1.4-17-.8-26 .4C25 9.6 16 7 8 7.6 5 7.8 2 6.8 0 5.6z' fill='%23fff'/%3E%3Cg fill='url(%23i)'%3E%3Cpath d='M10 6l2.4 9 2.4-8.6zM31 5.6l1.8 6 1.8-6.4zM50 6l2.6 11.4L55 6.6zM73 6.4l1.6 5 1.6-5.4zM92 6l2.4 9.6 2.2-9.2zM112 6.2l1.4 4.4 1.4-4.6zM129 5.6l2.4 10.6 2.4-10.4zM150 5.4l1.8 6.6 1.8-6.4z'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 170px 18px;
  filter: drop-shadow(0 2px 2px rgba(110,90,140,.22));
  pointer-events: none;
}

/* ── Falling snow canvas ────────────────────────────────────────────────── */
.xm-snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;           /* under the navbar (100), promo bar and toasts */
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .xm-snowman { left: auto; right: 34%; }
  .xm-house { right: 13%; }
  .xm-trees-r { width: 130px; }
}
@media (max-width: 768px) {
  .xm-home .hero { padding-bottom: 0; }
  .xm-home .hero-inner { padding-bottom: 9rem; }
  .xm-scene { height: 160px; }
  .xm-hills { height: 120px; }
  .xm-drift { height: 76px; }
  .xm-trees-r { display: none; }
  .xm-trees-l { width: 56px; left: 0; bottom: 46px; }
  .xm-snowman { width: 70px; right: 36%; bottom: 40px; }
  .xm-house { width: 104px; right: 2%; bottom: 60px; }
  .xm-smoke i { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .xm-sofia { width: 46px; bottom: 44px; }
  .xm-gift { width: 24px; }
  .xm-flyhat { width: 36px; }
  .xm-prints { bottom: 48px; }
  .xm-tag { --bob: 2deg; }
  .xm-peg { top: -9px; width: 7px; height: 18px; margin-left: -3.5px; }
  .xm-about-hat { width: 92px; top: -32px; left: -16px; }
  .xm-sleigh { width: 92px; top: 96px; animation-name: xmSleighM; }
  .xm-garland { height: 150px; }
}

@keyframes xmSleighM {          /* phones: a flat pass between the tags and the text */
  0%   { opacity: 0; transform: translate(-160px, 14px) rotate(-5deg); }
  3%   { opacity: .9; }
  30%  { opacity: .9; }
  34%  { opacity: 0; transform: translate(calc(100vw + 30px), -16px) rotate(-6deg); }
  100% { opacity: 0; transform: translate(calc(100vw + 30px), -16px) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .xm-aurora, .xm-stars, .xm-sleigh, .xm-bulb, .xm-bulb-glow, .xm-wl circle,
  .xm-sm-scarf, .xm-glint, .xm-tag, .xm-home .hero-title em,
  .xm-win, .xm-house-glow, .xm-house-lights circle, .xm-smoke i { animation: none !important; }
  .xm-smoke i:first-child { opacity: .6; transform: translate(4px, -20px) scale(1.2); }
  .xm-sleigh, .xm-glint { display: none; }
  .xm-tag { opacity: 1; transform: rotate(var(--r)); }
}