/* ================================================================================================================================ */
/* Weihnachten 2, Highlights D1–D5 (Spec 3.D, themeAnim/christmas/highlights.js): großer Überflug, Weihnachtsmann im Kamin, Katze im   */
/* Baum, Rudolph am Fenster, Plätzchen-Raub. Nur transform und opacity (und Übergänge darauf). Dauer wie XMAS_HIGHLIGHT_DUR.          */
/* ================================================================================================================================ */

.xma-hl :is(.xma-hl-x, .xma-hl-y, .xma-hl-hop, .xma-hl-flip, .xma-hl-fx, .xma-hl-fy, .xma-hl-soot, .xma-soot__puff, .xma-hl-boots, .xma-hl-gx,
  .xma-hl-gy, .xma-hl-cook, .xma-hl-bauble, .xma-hl-head, .xma-hl-face, .xma-hl-heart, .xma-deer__leg, .xma-deer__head, .xma-deer__tail,
  .xma-deer__bell, .xma-nose__glow, .xma-santa__leg, .xma-santa__arm, .xma-wanda__leg, .xma-wanda__arm, .xma-wim__leg, .xma-cat__head) {
  transform-box: view-box;
  transform-origin: 0 0;
}
.xma-dtail { transform-box: view-box; transform-origin: 0 0; }

/* ---- Darsteller: x/y per Übergang (Variablen --ms, --ease, --fade), Sprung und Plumps als Animation ---- */
.xma-hl-x { transition: transform var(--ms, 0ms) linear, opacity var(--fade, 300ms) linear; }
.xma-hl-y { transition: transform var(--ms, 0ms) var(--ease, ease-in-out); }
.xma-hl-hop.is-hop { animation: xma-hl-hop var(--ms, 600ms) ease-in-out both; }
@keyframes xma-hl-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--h, -80px)); }
}
.xma-hl-hop.is-plop { animation: xma-hl-plop 900ms ease-out both; }
@keyframes xma-hl-plop {
  0% { transform: translateY(-260px) scale(0.92, 1.1); }
  42% { transform: translateY(0) scale(1.2, 0.8); }
  60% { transform: translateY(-28px) scale(0.96, 1.05); }
  80% { transform: translateY(0) scale(1.07, 0.94); }
  100% { transform: translateY(0) scale(1, 1); }
}
.xma-hl-x.is-walk :is(.xma-wanda__leg--l, .xma-wim__leg--l, .xma-santa__leg--l, .xma-deer__leg--fl, .xma-deer__leg--hr) { animation: xma-step 0.3s ease-in-out infinite alternate; }
.xma-hl-x.is-walk :is(.xma-wanda__leg--r, .xma-wim__leg--r, .xma-santa__leg--r, .xma-deer__leg--fr, .xma-deer__leg--hl) { animation: xma-step 0.3s ease-in-out -0.15s infinite alternate; }
.xma-hl-x.is-walk .xma-cat__leg--f { animation: xma-gallop 0.22s ease-in-out infinite alternate; }
.xma-hl-x.is-walk .xma-cat__leg--h { animation: xma-gallop 0.22s ease-in-out -0.11s infinite alternate; }
.xma-hl-x.is-climb :is(.xma-wanda__arm--l, .xma-wanda__leg--r) { animation: xma-step 0.5s ease-in-out infinite alternate; }
.xma-hl-x.is-climb :is(.xma-wanda__arm--r, .xma-wanda__leg--l) { animation: xma-step 0.5s ease-in-out -0.25s infinite alternate; }
.xma-hl-x.is-climb .xma-cat__head { animation: xma-nod 0.4s ease-in-out infinite alternate; }

/* ---- Platz der Grundstimmung freigeben, solange ein Highlight den Darsteller spielt ---- */
.xma-wim-slot, .xma-wanda-walk, .xma-cat { transition: opacity 350ms linear; }
.pq-themeanim.is-hl-wim .xma-wim-slot, .pq-themeanim.is-hl-wanda .xma-wanda-walk, .pq-themeanim.is-hl-cat .xma-cat { opacity: 0; }
.xma-fire { transition: opacity 500ms ease-in-out; }
.pq-themeanim.is-hl-out .xma-fire { opacity: 0; }
.xma-cookie { transition: opacity 600ms linear; }
.xma-cookie.is-stolen { opacity: 0; }

/* ---- D1 Der große Überflug: Zug im oberen Bildstreifen (vh/vw), Glöckchen, Sternenstaub, Paket am Fallschirm ---- */
.xma-hl-sky {
  position: absolute;
  inset: 0;
}
.xma-hl-sky .xma-fin__fly { animation: xma-hl-pass 7000ms linear both; }
.xma-hl-sky--rtl .xma-fin__fly { animation-name: xma-hl-pass-rtl; }
.xma-hl-sky--rtl .xma-fin__dir { transform: scaleX(-1); }
@keyframes xma-hl-pass {
  from { transform: translateX(-100%); }
  to { transform: translateX(100vw); }
}
@keyframes xma-hl-pass-rtl {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}
.xma-hl-sky .xma-fin__bob { animation: xma-fin-bob 2600ms ease-in-out infinite alternate; }
.xma-hl-sky .xma-deer__bell { animation: xma-bellsway 0.35s ease-in-out infinite alternate; }
.xma-hl-sky .xma-fall { animation: xma-parcel-fall 3000ms cubic-bezier(0.3, 0.6, 0.5, 1) var(--delay) both; }
.xma-hl-sky .xma-fall .xma-parcel { animation: xma-parcel-sway 1.2s ease-in-out calc(var(--i, 0) * -0.3s) infinite alternate; transform-origin: 50% 20%; }
.xma-hl-dust {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  opacity: 0;
  animation: xma-hl-dust 2800ms ease-out var(--delay) both;
}
.xma-hl-dust svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes xma-hl-dust {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  12% { opacity: 1; transform: scale(1) rotate(30deg); }
  70% { opacity: 0.9; transform: translateY(1.2vh) scale(0.9) rotate(80deg); }
  100% { opacity: 0; transform: translateY(2vh) scale(0.5) rotate(120deg); }
}
/* loop: eine Rolle um die Längsachse (ein Kreis des langen Gespanns ragte aus dem Himmelsstreifen). */
.xma-hl-sky--loop .xma-fin__svg { animation: xma-hl-roll 7000ms linear both; }
@keyframes xma-hl-roll {
  0%, 32% { transform: rotateX(0deg); animation-timing-function: ease-in-out; }
  62%, 100% { transform: rotateX(360deg); }
}
/* blink: Rudolphs Nase flackert wie eine kaputte Glühbirne (Wechsel höchstens alle 0,5 s), der Weihnachtsmann klopft. */
.xma-hl-sky--blink .xma-nose { animation: xma-hl-nosebad 5000ms step-end infinite; }
.xma-hl-sky--blink .xma-nose__glow { animation: xma-hl-glowbad 5000ms step-end infinite; }
@keyframes xma-hl-nosebad {
  0% { opacity: 1; }
  12% { opacity: 0.15; }
  22% { opacity: 1; }
  36% { opacity: 0.15; }
  46% { opacity: 1; }
  58% { opacity: 0.15; }
  70% { opacity: 1; }
  82% { opacity: 0.15; }
  94% { opacity: 1; }
}
@keyframes xma-hl-glowbad {
  0% { opacity: 0.4; }
  12% { opacity: 0; }
  22% { opacity: 0.4; }
  36% { opacity: 0; }
  46% { opacity: 0.4; }
  58% { opacity: 0; }
  70% { opacity: 0.4; }
  82% { opacity: 0; }
  94% { opacity: 0.4; }
}
.xma-hl-sky--blink .xma-santa__arm--r { animation: xma-hl-knock 0.5s ease-in-out infinite alternate; }
@keyframes xma-hl-knock {
  from { transform: rotate(0deg); }
  to { transform: rotate(-16deg); }
}
/* detour: die vordere Hälfte zieht nach unten, der Schlitten schwenkt aus und wird zurückgeholt. */
.xma-hl-sky--detour .xma-dtail { animation: xma-hl-tail 7000ms ease-in-out both; }
@keyframes xma-hl-tail {
  0%, 24% { transform: rotate(0deg); }
  36%, 52% { transform: rotate(13deg); }
  68%, 100% { transform: rotate(0deg); }
}
.xma-hl-sky--detour .xma-fin__svg { animation: xma-hl-swerve 7000ms ease-in-out both; }
@keyframes xma-hl-swerve {
  0%, 30% { transform: translateY(0) rotate(0deg); }
  46%, 54% { transform: translateY(16%) rotate(4deg); }
  74%, 100% { transform: translateY(0) rotate(0deg); }
}

/* ---- D2 Weihnachtsmann im Kamin: Rußwolke, Stiefel im Schlot, Plumps, Ruß abklopfen, Geschenk, Plätzchen ---- */
.xma-hl-soot { opacity: 0; }
.xma-hl-soot.is-on { animation: xma-hl-sootfade 2800ms ease-in-out both; }
.xma-hl-soot.is-on .xma-soot__puff { animation: xma-hl-puff 2800ms ease-out calc(var(--i, 0) * 70ms) both; }
@keyframes xma-hl-sootfade {
  0% { opacity: 0; }
  14%, 60% { opacity: var(--peak, 1); }
  100% { opacity: 0; }
}
@keyframes xma-hl-puff {
  0% { transform: scale(0.25) translateY(20px); }
  35% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.35) translateY(-34px); }
}
.xma-hl-boots { opacity: 0; }
.xma-hl-boots.is-on { animation: xma-hl-bootsin 700ms ease-out both; }
@keyframes xma-hl-bootsin {
  from { opacity: 0; transform: translateY(-120px); }
  to { opacity: 1; transform: translateY(0); }
}
.xma-hl-boots.is-on .xma-santa__leg--l { animation: xma-hl-kick 0.34s ease-in-out infinite alternate; }
.xma-hl-boots.is-on .xma-santa__leg--r { animation: xma-hl-kick 0.34s ease-in-out -0.17s infinite alternate; }
@keyframes xma-hl-kick {
  from { transform: rotate(-14deg); }
  to { transform: rotate(14deg); }
}
.xma-hl-x.is-pat .xma-santa__arm--l { animation: xma-hl-patl 0.45s ease-in-out infinite alternate; }
.xma-hl-x.is-pat .xma-santa__arm--r { animation: xma-hl-patr 0.45s ease-in-out -0.22s infinite alternate; }
@keyframes xma-hl-patl {
  from { transform: rotate(0deg); }
  to { transform: rotate(-34deg); }
}
@keyframes xma-hl-patr {
  from { transform: rotate(0deg); }
  to { transform: rotate(34deg); }
}
.xma-hl-x .xma-santa--wave .xma-santa__arm--r { animation: xma-hl-wavearm 0.5s ease-in-out infinite alternate; }
@keyframes xma-hl-wavearm {
  from { transform: rotate(-6deg); }
  to { transform: rotate(14deg); }
}
.xma-hl-gx { opacity: 0; }
.xma-hl-gx.is-on { animation: xma-hl-gx 1700ms linear both; }
.xma-hl-gy.is-on { animation: xma-hl-gy 1700ms linear both; }
@keyframes xma-hl-gx {
  0% { opacity: 1; transform: translateX(0); }
  96% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--dx)); }
}
@keyframes xma-hl-gy {
  0% { transform: translateY(0) rotate(0deg); animation-timing-function: ease-out; }
  45% { transform: translateY(-190px) rotate(120deg); animation-timing-function: ease-in; }
  100% { transform: translateY(var(--dy)) rotate(250deg); }
}
.xma-hl-cook { opacity: 0; }
.xma-hl-cook.is-on { animation: xma-hl-cook 800ms ease-out both; }
@keyframes xma-hl-cook {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: 1; transform: translate(-94px, -44px) scale(1); }
  100% { opacity: 0; transform: translate(-96px, -38px) scale(0.4); }
}

/* ---- D3 Katze im Baum: Kugeln schaukeln (klingen aus), eine fällt und rollt, Leiter, Katze auf Wandas Arm ---- */
.xma-hl-baubles { opacity: 0; transition: opacity 350ms linear; }
.xma-hl-baubles.is-on { opacity: 1; }
.xma-hl-baubles.is-on .xma-hl-bauble { animation: xma-hl-sway 3600ms ease-out calc(var(--i, 0) * 55ms) both; }
.xma-hl-fx.is-loose .xma-hl-bauble { animation: none; }
@keyframes xma-hl-sway {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(10deg); }
  22% { transform: rotate(-8deg); }
  38% { transform: rotate(5.5deg); }
  54% { transform: rotate(-3.5deg); }
  72% { transform: rotate(1.6deg); }
  100% { transform: rotate(0deg); }
}
.xma-hl-fx.is-roll .xma-hl-bauble { transform-origin: 0 26px; animation: xma-hl-spin 2600ms cubic-bezier(0.1, 0.6, 0.4, 1) both; }
@keyframes xma-hl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-1900deg); }
}
.xma-hl-ladder { opacity: 0; transition: opacity 300ms linear; }
.xma-hl-ladder.is-on { opacity: 1; }
.xma-hl-held { opacity: 0; }
.xma-hl-flip.is-held .xma-hl-held { opacity: 1; }

/* ---- D4 Rudolph am Fenster: Kopf steigt auf, Nase an der Scheibe, rötlicher Schein, Beschlag mit Herz ---- */
.xma-hl-glow { opacity: 0; transition: opacity 800ms ease-in-out; }
.xma-hl-glow.is-on { opacity: 1; animation: xma-hl-pulse 1.6s ease-in-out infinite alternate; }
@keyframes xma-hl-pulse {
  from { opacity: 0.72; }
  to { opacity: 1; }
}
.xma-hl-head { transform: translateY(300px); }
.xma-hl-head.is-rise { animation: xma-hl-rise 1400ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.xma-hl-head.is-leave { animation: xma-hl-leave 700ms ease-in both; }
@keyframes xma-hl-rise {
  from { transform: translateY(300px); }
  to { transform: translateY(0); }
}
@keyframes xma-hl-leave {
  from { transform: translateY(0); }
  to { transform: translateY(300px); }
}
.xma-hl-face { transition: transform 600ms ease-in-out; }
.xma-hl-face.is-press { transform: scale(1.07); }
.xma-hl-face .xma-nose__glow { animation: xma-glow 0.9s ease-in-out infinite alternate; }
.xma-hl-fog { opacity: 0; transition: opacity 1500ms ease-in; }
.xma-hl-fog.is-on { opacity: 1; }
.xma-hl-fog.is-clear { opacity: 0; transition: opacity 1600ms ease-out; }
.xma-hl-heart { opacity: 0; }
.xma-hl-heart.is-on { animation: xma-hl-draw 500ms ease-out both; }
@keyframes xma-hl-draw {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}