/* Christmas gift hub (/christmas). Evergreen night, warm gold, berry red; pictures always shown in full. */
.xm { --xm-night: #0d2a1a; --xm-green: #17432a; --xm-gold: #e9c46a; --xm-red: #b3262d; --xm-cream: #fff8ea; --xm-ink: #23301f;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; margin: 1.2rem 0 2.5rem; padding: clamp(18px, 3vw, 38px); border-radius: 28px; overflow: hidden; color: var(--xm-cream); isolation: isolate;
  background: radial-gradient(ellipse 60% 45% at 18% 0%, rgba(233, 196, 106, .22), transparent 70%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(179, 38, 45, .28), transparent 70%), linear-gradient(165deg, var(--xm-green), var(--xm-night) 62%, #071a10); }
.xm [hidden] { display: none !important; }

/* snow */
.xm__snow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.xm__snow i { position: absolute; top: -12px; width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%; background: #fff; animation: xm-snow var(--t, 14s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes xm-snow { to { transform: translate(var(--x, 20px), 1400px); } }

/* heading */
.xm__main { min-width: 0; }
.xm__head { max-width: 46rem; margin-bottom: 8px; }
.xm__eyebrow { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--xm-gold); }
.xm__head h1 { margin: 0 0 10px; font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.1; color: #fff; text-wrap: balance; }
.xm__lead { margin: 0; font-size: 1.08rem; line-height: 1.55; color: #e7efe2; }
.xm__hint { margin: 18px 0 0; font-size: .92rem; color: var(--xm-gold); }

/* flying in: a thing starts far away in a random direction, then glides to its place and keeps bobbing */
.xm-cat, .xm-item { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 300px)) rotate(var(--fr, 20deg)) scale(.5); }
.xm-cat.is-in, .xm-item.is-in { opacity: 1; transform: none; transition: transform .95s cubic-bezier(.18, .9, .22, 1.08) var(--fd, 0ms), opacity .5s ease var(--fd, 0ms); }
@keyframes xm-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -9px; rotate: var(--tilt, 1.5deg); } }
@keyframes xm-swing { 0%, 100% { rotate: -3.5deg; } 50% { rotate: 3.5deg; } }

/* stage 1: categories as hanging ornaments */
.xm__stage { min-height: 430px; }
.xm__cats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 30px; margin: 0; padding: 26px 0 10px; }
.xm-cat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 158px; padding: 34px 0 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transform-origin: 50% 0; }
.xm-cat.is-in { animation: xm-swing var(--bob, 6s) ease-in-out var(--bobd, 0s) infinite; }
.xm-cat__string { position: absolute; left: 50%; top: 0; width: 2px; height: 30px; margin-left: -1px; background: linear-gradient(var(--xm-gold), rgba(233, 196, 106, .4)); }
.xm-cat__string::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 20px; height: 12px; margin-left: -10px; border-radius: 4px 4px 2px 2px; background: linear-gradient(#f4d98c, #c9a046); }
.xm-cat__ball { display: grid; place-items: center; width: 150px; height: 150px; padding: 18px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #fff, #fff 46%, #f3ead6 100%); box-shadow: 0 0 0 4px var(--xm-gold), 0 0 0 9px rgba(233, 196, 106, .22), 0 22px 34px -16px #000; transition: transform .3s ease, box-shadow .3s ease; }
.xm-cat__ball img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.xm-cat b { margin-top: 12px; font-size: 1.12rem; color: #fff; }
.xm-cat small { font-size: .84rem; color: #cfe0c9; }
.xm-cat:hover .xm-cat__ball, .xm-cat:focus-visible .xm-cat__ball { transform: scale(1.07); box-shadow: 0 0 0 4px #fff, 0 0 0 10px rgba(233, 196, 106, .5), 0 0 60px rgba(233, 196, 106, .55), 0 22px 34px -16px #000; }
.xm-cat:focus-visible, .xm-item:focus-visible, .xm-back:focus-visible, .xm-motion:focus-visible { outline: 3px solid var(--xm-gold); outline-offset: 4px; border-radius: 14px; }

/* stage 2: products floating on the canvas */
.xm__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 18px 0 6px; }
.xm__bar h2 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: #fff; outline: none; }
.xm-back { padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background .2s; }
.xm-back:hover { background: rgba(255, 255, 255, .2); }
.xm__canvas { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; margin: 0; padding: 18px 4px 10px; }
.xm-item { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; padding: 10px 10px 12px; border: 0; border-radius: 18px; background: var(--xm-cream); color: var(--xm-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 18px 30px -18px #000, 0 0 0 1.5px rgba(233, 196, 106, .7); }
.xm-item.is-in { animation: xm-bob var(--bob, 6s) ease-in-out var(--bobd, 0s) infinite; }
.xm-item__pic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: #fff; overflow: hidden; }
.xm-item__pic img { display: block; width: 100%; height: 100%; object-fit: contain; transition: scale .3s ease; }
.xm-item b { margin-top: 6px; font-size: .93rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xm-item small { font-size: .9rem; font-weight: 700; color: #8e5300; }
.xm-item:hover, .xm-item:focus-visible { box-shadow: 0 24px 40px -18px #000, 0 0 0 3px var(--xm-gold), 0 0 40px rgba(233, 196, 106, .45); }
.xm-item:hover .xm-item__pic img { scale: 1.06; }

.xm__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 22px 0 0; font-size: .9rem; }
.xm__foot a { color: var(--xm-gold); }
.xm-motion { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: none; color: #e7efe2; font: inherit; font-size: .86rem; cursor: pointer; }

/* the Christmas basket */
.xm-basket { align-self: start; position: sticky; top: 0; border-radius: 22px; background: var(--xm-cream); color: var(--xm-ink); box-shadow: 0 24px 50px -24px #000, 0 0 0 2px var(--xm-gold); overflow: hidden; }
.xm-basket.is-bump { animation: xm-bump .5s ease; }
@keyframes xm-bump { 40% { transform: scale(1.04); box-shadow: 0 24px 50px -24px #000, 0 0 0 4px var(--xm-gold), 0 0 60px rgba(233, 196, 106, .7); } }
.xm-basket__toggle { display: none; }
.xm-basket__body { padding: 18px 18px 16px; }
.xm-basket__body h2 { margin: 0 0 10px; font-size: 1.15rem; color: var(--xm-red); }
.xm-basket__empty { margin: 0 0 8px; font-size: .93rem; line-height: 1.5; color: #5a6353; }
.xm-basket__list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; }
.xm-basket__list li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed #dccfb2; }
.xm-basket__list img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fff; }
.xm-basket__txt { min-width: 0; display: flex; flex-direction: column; }
.xm-basket__txt b { font-size: .9rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xm-basket__txt small { font-size: .8rem; color: #5a6353; }
.xm-basket__rm { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #dccfb2; background: #fff; color: var(--xm-red); font-size: 18px; line-height: 1; cursor: pointer; }
.xm-basket__rm:hover { background: var(--xm-red); color: #fff; }
.xm-basket__total { display: flex; justify-content: space-between; margin: 12px 0; font-size: 1.02rem; }
.xm-basket__go { display: block; padding: 12px 16px; border-radius: 999px; background: var(--xm-red); color: #fff; font-weight: 700; text-align: center; text-decoration: none; transition: background .2s, transform .2s; }
.xm-basket__go:hover { background: #8f1d23; transform: translateY(-2px); color: #fff; }
.xm-basket__note { margin: 10px 0 0; font-size: .78rem; color: #6b7364; }

/* the picker */
.xm-pick[hidden] { display: none !important; }
.xm-pick { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; }
.xm-pick__backdrop { position: absolute; inset: 0; background: rgba(5, 18, 11, .72); opacity: 0; transition: opacity .2s; }
.xm-pick__card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border-radius: 24px; background: var(--xm-cream, #fff8ea); color: #23301f; box-shadow: 0 0 0 3px #e9c46a, 0 40px 80px -30px #000; opacity: 0; transform: translateY(20px) scale(.96); transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .2, 1.1); }
.xm-pick.is-open .xm-pick__backdrop { opacity: 1; }
.xm-pick.is-open .xm-pick__card { opacity: 1; transform: none; }
.xm-pick__x { position: absolute; right: 10px; top: 8px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 1; }
.xm-pick__img { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: #fff; overflow: hidden; }
.xm-pick__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.xm-pick__txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-right: 26px; }
.xm-pick__txt h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.xm-pick__price { margin: 0; font-size: 1.25rem; font-weight: 700; color: #8e5300; }
.xm-pick__opt, .xm-pick__qty { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; font-weight: 700; }
.xm-pick__opt select, .xm-pick__qty input { padding: 10px 12px; border: 1.5px solid #cdbf9f; border-radius: 10px; background: #fff; font: inherit; font-weight: 400; }
.xm-pick__qty input { width: 6rem; }
.xm-pick__add { margin-top: 4px; padding: 13px 18px; border: 0; border-radius: 999px; background: #b3262d; color: #fff; font: inherit; font-weight: 700; font-size: 1.02rem; cursor: pointer; transition: background .2s, transform .2s; }
.xm-pick__add:hover { background: #8f1d23; transform: translateY(-2px); }
.xm-pick__add:disabled { opacity: .6; cursor: wait; transform: none; }
.xm-pick__msg { min-height: 1.3em; margin: 0; font-size: .92rem; font-weight: 700; }
.xm-pick__msg.is-good { color: #1d6b3a; }
.xm-pick__msg.is-bad { color: #a12622; }
.xm-pick__more { font-size: .9rem; color: #3b4e00; }
.xm-ghost { position: fixed; z-index: 970; object-fit: contain; border-radius: 12px; background: #fff; pointer-events: none; box-shadow: 0 10px 30px -10px #000; }

/* tablets and phones: the basket becomes a button at the bottom left that opens a sheet */
@media (max-width: 980px) {
  .xm { grid-template-columns: 1fr; padding-bottom: 84px; border-radius: 20px; }
  .xm-basket { position: fixed; left: 12px; bottom: 12px; top: auto; z-index: 940; width: min(340px, calc(100vw - 100px)); border-radius: 20px; }
  .xm-basket__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: 0; background: var(--xm-red); color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
  .xm-basket__toggle span { flex: 1; }
  .xm-basket__count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--xm-gold); color: #23301f; }
  .xm-basket__body { display: none; max-height: 62vh; overflow: auto; }
  .xm-basket.is-open .xm-basket__body { display: block; }
  .xm-basket__body h2 { display: none; }
  .xm-basket__list { max-height: none; }
}
@media (max-width: 600px) {
  .xm__cats { gap: 20px 12px; }
  .xm-cat { width: 132px; }
  .xm-cat__ball { width: 122px; height: 122px; padding: 14px; }
  .xm__canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .xm-pick__card { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .xm-pick__img { height: 30vh; aspect-ratio: auto; }
  .xm-pick__txt { padding-right: 0; }
}

/* calm version: motion paused by the visitor, or "reduce motion" switched on in the device */
.xm.is-still .xm-cat, .xm.is-still .xm-item, .xm.is-still .xm__snow i { animation: none !important; }
.xm.is-still .xm-cat.is-in, .xm.is-still .xm-item.is-in { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .xm-cat, .xm-item, .xm__snow i, .xm-basket.is-bump { animation: none !important; }
  .xm-cat.is-in, .xm-item.is-in, .xm-pick__card, .xm-pick__backdrop { transition: none; }
}
.xm-pick [hidden] { display: none !important; }

/* full screen: the hub covers the whole window (the shop's header and footer stay behind it) and scrolls inside itself */
html.xm-full, html.xm-full body { overflow: hidden; }
.xm { position: fixed; inset: 0; z-index: 900; margin: 0; border-radius: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; align-content: start;
  grid-template-columns: minmax(0, 1fr) 340px; padding: clamp(16px, 2.6vw, 40px) max(clamp(16px, 3vw, 48px), calc((100vw - 1560px) / 2)); }
.xm__snow { position: fixed; }
.xm__top { margin: 0 0 14px; }
.xm__exit { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .2s; }
.xm__exit:hover, .xm__exit:focus-visible { background: rgba(255, 255, 255, .22); color: #fff; }
.xm__stage { min-height: 52vh; }
@media (max-width: 980px) { .xm { grid-template-columns: 1fr; border-radius: 0; padding-bottom: 96px; } }
html.xm-full #cookieBanner, html.xm-full .cookie-banner { z-index: 1000; }   /* the cookie question stays on top of the full-screen hub */

/* ---------- depth: a 3D scene ---------- */
/* far background: soft lights that drift and shift against the pointer */
.xm__depth { position: fixed; inset: -6%; z-index: -2; pointer-events: none; transform: translate(calc(var(--px, 0) * -26px), calc(var(--py, 0) * -18px)); transition: transform .5s ease-out; }
.xm__depth i { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .5; animation: xm-drift 18s ease-in-out infinite alternate; }
.xm__depth i:nth-child(1) { left: 6%; top: 12%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(233, 196, 106, .55), transparent 70%); }
.xm__depth i:nth-child(2) { right: 10%; top: 6%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); animation-duration: 23s; }
.xm__depth i:nth-child(3) { left: 38%; bottom: 4%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(179, 38, 45, .5), transparent 70%); animation-duration: 27s; }
.xm__depth i:nth-child(4) { right: 26%; top: 44%; width: 150px; height: 150px; background: radial-gradient(circle, rgba(233, 196, 106, .45), transparent 70%); animation-duration: 15s; }
.xm__depth i:nth-child(5) { left: 16%; bottom: 22%; width: 120px; height: 120px; background: radial-gradient(circle, rgba(120, 200, 150, .45), transparent 70%); animation-duration: 20s; }
@keyframes xm-drift { to { transform: translate(40px, -30px) scale(1.15); } }
/* dark edges pull the eye into the middle */
.xm::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(2, 10, 6, .62) 100%); }
/* snow at two distances: the near flakes are big, soft and fast */
.xm__snow { transform: translate(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 10px)); transition: transform .4s ease-out; }
.xm__snow i.is-near { filter: blur(3px); }

/* the stage is a 3D space that leans towards the pointer */
.xm__stage { perspective: 1100px; perspective-origin: 50% 35%; }
.xm__cats, .xm__canvas { transform-style: preserve-3d; transform: rotateX(calc(var(--py, 0) * -7deg)) rotateY(calc(var(--px, 0) * 9deg)); transition: transform .35s ease-out; }
/* things arrive from deep inside the scene and settle at their own distance */
.xm-cat, .xm-item { transform: translate3d(var(--fx, 0), var(--fy, 300px), -1500px) rotateY(70deg) rotate(var(--fr, 20deg)); }
.xm-cat.is-in, .xm-item.is-in { transform: translateZ(var(--z, 0)); transition: transform 1.15s cubic-bezier(.16, .9, .2, 1.06) var(--fd, 0ms), opacity .45s ease var(--fd, 0ms), box-shadow .3s ease; }
/* ornaments look like glass balls */
.xm-cat__ball { position: relative; background: radial-gradient(circle at 30% 24%, #fff 0 40%, #f6eedd 70%, #e3d5b5 100%); box-shadow: 0 0 0 4px var(--xm-gold), 0 0 0 9px rgba(233, 196, 106, .22), inset -12px -16px 26px rgba(120, 90, 30, .28), inset 8px 10px 18px rgba(255, 255, 255, .9), 0 34px 40px -18px rgba(0, 0, 0, .85); }
.xm-cat__ball::after { content: ''; position: absolute; left: 16%; top: 10%; width: 34%; height: 20%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .95), transparent 70%); rotate: -28deg; pointer-events: none; }
.xm-cat:hover, .xm-cat:focus-visible { --z: 90px; }
/* cards float with a real shadow under them and come forward when pointed at */
.xm-item { box-shadow: 0 34px 38px -22px rgba(0, 0, 0, .9), 0 0 0 1.5px rgba(233, 196, 106, .7); }
.xm-item:hover, .xm-item:focus-visible { --z: 110px; box-shadow: 0 60px 60px -30px #000, 0 0 0 3px var(--xm-gold), 0 0 50px rgba(233, 196, 106, .5); }
.xm-basket { box-shadow: 0 40px 70px -30px #000, 0 0 0 2px var(--xm-gold), 0 0 80px rgba(233, 196, 106, .18); }
.xm-pick__card { transform: perspective(900px) translateY(30px) rotateX(18deg) scale(.9); }
.xm-pick.is-open .xm-pick__card { transform: none; }

.xm.is-still .xm__depth i { animation: none; }
.xm.is-still .xm__cats, .xm.is-still .xm__canvas, .xm.is-still .xm__depth, .xm.is-still .xm__snow { transform: none; }
@media (prefers-reduced-motion: reduce) { .xm__depth i { animation: none; } .xm__cats, .xm__canvas, .xm__depth, .xm__snow { transform: none; transition: none; } }
/* the picture sits fully inside the white middle of the glass ball */
.xm-cat__ball { padding: 30px; background: radial-gradient(circle at 50% 50%, #fff 0 66%, #f4ecda 84%, #e3d5b5 100%); }
@media (max-width: 600px) { .xm-cat__ball { padding: 24px; } }

/* clickable everywhere: the leaning stage sits a little in front, and leans less, so no part of it ever goes behind the page */
.xm__cats, .xm__canvas { transform: translateZ(60px) rotateX(calc(var(--py, 0) * -4deg)) rotateY(calc(var(--px, 0) * 6deg)); }
.xm.is-still .xm__cats, .xm.is-still .xm__canvas { transform: none; }
@media (prefers-reduced-motion: reduce) { .xm__cats, .xm__canvas { transform: none; } }

/* welcome screen */
.xm-intro { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff8ea;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(233, 196, 106, .28), transparent 70%), linear-gradient(165deg, #17432a, #0d2a1a 62%, #071a10); transition: opacity .55s ease, transform .6s cubic-bezier(.3, 0, .2, 1); }
.xm-intro.is-gone { opacity: 0; transform: scale(1.5); pointer-events: none; }
.xm-intro__in { max-width: 36rem; }
.xm-intro h2 { margin: 0 0 12px; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; color: #fff; text-wrap: balance; }
.xm-intro p { margin: 0 0 22px; font-size: 1.15rem; color: #e7efe2; }
.xm-intro__go { padding: 18px 38px; border: 0; border-radius: 999px; background: #b3262d; color: #fff; font: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer; box-shadow: 0 0 0 3px #e9c46a, 0 0 60px rgba(233, 196, 106, .5), 0 24px 40px -18px #000; animation: xm-pulse 2.4s ease-in-out infinite; transition: transform .2s, background .2s; }
.xm-intro__go:hover, .xm-intro__go:focus-visible { background: #d0323a; transform: scale(1.06); }
@keyframes xm-pulse { 50% { box-shadow: 0 0 0 3px #e9c46a, 0 0 100px rgba(233, 196, 106, .85), 0 24px 40px -18px #000; } }
.xm-intro .xm-intro__small { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; font-size: .9rem; color: #cfe0c9; }
.xm-intro__small button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.xm-intro__small a { color: inherit; }
.xm__top { display: flex; flex-wrap: wrap; gap: 10px; }
.xm__fs { font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .xm-intro { transition: none; } .xm-intro__go { animation: none; } }

/* Click fix (2026-10-13): once a thing has landed it lies flat on the stage. Resting at a 3D distance looked
   nice but made browsers miss clicks on many of them. Depth now comes from size and shadow instead; the
   flight in from far away and the leaning stage stay. */
.xm__cats, .xm__canvas { transform-style: flat; transform: rotateX(calc(var(--py, 0) * -4deg)) rotateY(calc(var(--px, 0) * 6deg)); }
.xm-cat.is-in, .xm-item.is-in { transform: none; scale: var(--sc, 1); transition: transform 1.15s cubic-bezier(.16, .9, .2, 1.06) var(--fd, 0ms), opacity .45s ease var(--fd, 0ms), scale .25s ease, box-shadow .3s ease; }
.xm-cat.is-in:hover, .xm-cat.is-in:focus-visible { scale: 1.1; }
.xm-item.is-in:hover, .xm-item.is-in:focus-visible { scale: 1.08; }
.xm.is-still .xm__cats, .xm.is-still .xm__canvas { transform: none; }
@media (prefers-reduced-motion: reduce) { .xm__cats, .xm__canvas { transform: none; } }
.xm-intro { z-index: 945; }   /* above the basket button too */