/*
 * Decoración navideña (includes/navidad_widget.php + assets/navidad.js).
 * Todo con prefijo xmas-. Nada de esto recibe clics (pointer-events: none).
 * Capas: luces dentro del header (z-40), trineo en z-55 (sobre header/sidebar, bajo los modales),
 * gorro dentro de #gerald-widget (z-70).
 */

/* ---------- Gorro de Papá Noel sobre Gerald ---------- */
.xmas-gorro {
  position: absolute;
  top: -16px;
  left: 4px;
  width: 46px;
  height: 42px;
  z-index: 2;
  pointer-events: none;
  transform: rotate(-20deg);
  transform-origin: 20% 90%;
  transition: transform .15s ease-out;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
}
.xmas-gorro svg { display: block; width: 100%; height: 100%; }
/* Sigue el hover del lanzador (que escala 1.05 en Tailwind). */
#gerald-widget:has(#gerald-launcher:hover) .xmas-gorro { transform: rotate(-20deg) scale(1.05); }
#gerald-widget:has(#gerald-launcher:active) .xmas-gorro { transform: rotate(-20deg) scale(.95); }
/* En móvil el panel es pantalla completa: el gorro no debe flotar encima. */
@media (max-width: 767px) {
  #gerald-widget:has(#gerald-panel.flex) .xmas-gorro { display: none; }
}

/* ---------- Luces bajo el header ---------- */
.xmas-luces {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
  pointer-events: none;
  z-index: 1;
}
.xmas-luces-cable {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 22px;
}
.xmas-luces-cable path { fill: none; stroke: #1b5e20; stroke-width: 1.6; stroke-linecap: round; }
.xmas-foco {
  position: absolute;
  top: 6px;
  width: 8px;
  height: 12px;
  margin-left: -4px;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background: var(--xmas-c, #e53935);
  box-shadow: 0 0 8px 2px var(--xmas-c, #e53935);
  animation: xmas-brillo 1.6s ease-in-out infinite alternate;
}
/* Casquillo del foco. */
.xmas-foco::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 1px;
  width: 6px;
  height: 4px;
  border-radius: 1px;
  background: #37474f;
}
/* Reflejo del cristal. */
.xmas-foco::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  width: 2px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}
.xmas-foco-r { --xmas-c: #e53935; }
.xmas-foco-v { --xmas-c: #2e7d32; }
.xmas-foco-d { --xmas-c: #f9a825; }
.xmas-foco-a { --xmas-c: #1e88e5; }
@keyframes xmas-brillo {
  from { opacity: .4; }
  to   { opacity: 1; }
}

/* ---------- Trineo volador ---------- */
.xmas-trineo {
  position: fixed;
  left: 0;
  top: 20%;
  z-index: 55;
  display: none;
  pointer-events: none;
  will-change: transform;
}
.xmas-trineo.xmas-vuela {
  display: block;
  animation: xmas-cruce 10s linear forwards;
}
.xmas-trineo-aire {
  animation: xmas-ola 1.8s ease-in-out infinite alternate;
}
.xmas-trineo svg { display: block; width: 260px; height: auto; overflow: visible; }
@media (max-width: 767px) {
  .xmas-trineo svg { width: 170px; }
}
@keyframes xmas-cruce {
  from { transform: translate3d(-300px, 0, 0); }
  to   { transform: translate3d(calc(100vw + 300px), -8vh, 0); }
}
@keyframes xmas-ola {
  from { transform: translate3d(0, -7px, 0) rotate(-1.5deg); }
  to   { transform: translate3d(0, 7px, 0) rotate(1.5deg); }
}
/* Galope de los renos: patas alternas. */
.xmas-pata {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: xmas-galope .32s ease-in-out infinite alternate;
}
.xmas-pata-b { animation-direction: alternate-reverse; }
@keyframes xmas-galope {
  from { transform: rotate(-26deg); }
  to   { transform: rotate(26deg); }
}
/* Destellos de la estela y brillo de la nariz de Rudolph. */
.xmas-chispa {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: xmas-chispa 0.9s ease-in-out infinite alternate;
}
@keyframes xmas-chispa {
  from { transform: scale(.4); opacity: .3; }
  to   { transform: scale(1.1); opacity: 1; }
}
.xmas-nariz-brillo { animation: xmas-nariz 0.8s ease-in-out infinite alternate; }
@keyframes xmas-nariz {
  from { opacity: .15; }
  to   { opacity: .55; }
}

/* ---------- Movimiento reducido: sin trineo, luces fijas, el gorro se queda ---------- */
@media (prefers-reduced-motion: reduce) {
  .xmas-trineo { display: none !important; animation: none !important; }
  .xmas-foco { animation: none; opacity: 1; }
  .xmas-gorro { transition: none; }
}