/* Christmas decoration — EP Classroom. Photo background + CSS/SVG, no feTurbulence. */
:root { --xm-garland-h: 30px; }

body.christmas-decor-active { padding-top: var(--xm-garland-h); }
body.christmas-decor-active .app-layout { height: calc(100vh - var(--xm-garland-h)); }
body.christmas-decor-active .page-wrapper { position: relative; z-index: 1; }

/* Fondo base: noche con resplandor cálido abajo */
#christmas-decor-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 50% 105%, rgba(251, 191, 36, .12), transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 0%, rgba(34, 197, 94, .10), transparent 70%),
    #0d1117;
}
/* Foto: del tamaño de .page-wrapper (igual que Spring), bordes esfumados con máscara */
#christmas-decor-img {
  position: fixed; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(13, 17, 23, .40), rgba(13, 17, 23, .40)),
    url('../images/christmas/christmas-bg.webp') center / cover no-repeat;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

#christmas-decor-root { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
#christmas-decor-root * { pointer-events: none; }
/* Nieve y trineo: arriba de los paneles, debajo de los modales (9001+) */
/* z-index 0: por encima de la foto de fondo pero DETRÁS de la hoja de notas (.page-wrapper, z 1), así no tapa el texto */
#christmas-decor-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#christmas-decor-fx * { pointer-events: none; }

.xm-lights { position: absolute; top: 0; left: 0; width: 100%; height: 46px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.xm-bulb { animation: xm-twinkle 1.8s ease-in-out infinite alternate; }
@keyframes xm-twinkle { from { opacity: 1; } to { opacity: .35; } }
.xm-ground { position: absolute; bottom: 0; left: 0; width: 100%; height: 74px; }

/* Copos de nieve */
.xm-flake { position: absolute; top: -20px; animation: xm-fall linear infinite; opacity: 0; }
.xm-flake i {
  display: block; border-radius: 50%; background: #f8fafc;
  box-shadow: 0 0 6px rgba(255, 255, 255, .7);
  animation: xm-sway ease-in-out infinite alternate;
}
@keyframes xm-fall {
  0%   { transform: translateY(-30px); opacity: 0; }
  8%   { opacity: .9; }
  92%  { opacity: .9; }
  100% { transform: translateY(108vh); opacity: 0; }
}
@keyframes xm-sway { from { transform: translateX(-18px); } to { transform: translateX(18px); } }

/* Trineo */
.xm-critter { position: absolute; left: 0; will-change: transform; }
.xm-critter.ltr { animation: xm-cross-ltr linear forwards; }
.xm-critter.rtl { animation: xm-cross-rtl linear forwards; }
@keyframes xm-cross-ltr { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 140px)); } }
@keyframes xm-cross-rtl { from { transform: translateX(calc(100vw + 140px)); } to { transform: translateX(-140px); } }
.xm-critter .bob { animation: xm-bob ease-in-out infinite alternate; }
.xm-critter img { max-width: none; height: auto; }
@keyframes xm-bob { from { transform: translateY(-14px); } to { transform: translateY(14px); } }

@media (max-width: 700px) {
  :root { --xm-garland-h: 22px; }
  .xm-lights { height: 34px; }
  .xm-ground { height: 54px; }
}

/* Regalos y bastones que giran, campanas que suenan, renos que galopan, pingüinos que aletean */
.xm-spin { display: inline-block; animation: xm-spin 3.5s linear infinite; }
.xm-spin.slow { animation-duration: 6s; }
@keyframes xm-spin { to { transform: rotate(360deg); } }
.xm-ring { display: inline-block; transform-origin: 50% 0; animation: xm-ring .5s ease-in-out infinite alternate; }
@keyframes xm-ring { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.xm-leg { transform-box: fill-box; transform-origin: 50% 0; animation: xm-gallop .35s ease-in-out infinite alternate; }
.xm-leg.b { animation-delay: -.175s; }
@keyframes xm-gallop { from { rotate: -25deg; } to { rotate: 25deg; } }
.xm-flap { animation: xm-flapw .3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes xm-flapw { from { rotate: -12deg; } to { rotate: 12deg; } }
.xm-critter.star .bob { animation: none; }
.xm-critter.gift .bob, .xm-critter.bell .bob, .xm-critter.star .bob { filter: drop-shadow(0 0 8px rgba(253, 224, 71, .4)); }
.xm-critter.snowman .bob, .xm-critter.penguin .bob { filter: drop-shadow(0 0 6px rgba(226, 232, 240, .25)); }

@media (prefers-reduced-motion: reduce) {
  .xm-flake, .xm-flake i, .xm-critter, .xm-critter .bob, .xm-bulb,
  .xm-spin, .xm-ring, .xm-leg, .xm-flap { animation: none !important; }
  .xm-flake { opacity: 0; }
}