/* =========================
   TEMA ESTACIONAL: NAVIDAD
   Se carga solo en la ventana de fechas (ver core.context_processors.seasonal_theme).
   Todo es decorativo: sin cambios de layout ni de interacción.
========================= */

/* --- Escena al pie del header (core/_christmas_scene.html) --- */
.header__container > .xm-scene {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 38px;
    display: block;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

/* Piezas (core/_christmas_zones.html): dentro de .header__inner, detrás de su
   contenido, con el pie alineado a la nieve */
.header__inner > .xm-zones {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 38px;
    display: block;
    pointer-events: none;
    overflow: visible;
    z-index: -1;
}

/* Posición de las zonas según lo que ocupa el header (mismas medidas que el
   tema de Halloween). Los desplazamientos van en un <g> (Safari ignora
   transform sobre un <svg> anidado). */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .xm-forest-shift {
        transform: translateX(235px);
    }
    .xm-reindeer-walk {
        --xm-walk: 80px;
    }
}

@media (min-width: 1200px) {
    .xm-forest-shift {
        transform: translateX(130px);
    }
}

/* La casita termina antes de los iconos de la derecha */
.xm-cabin-shift {
    transform: translateX(-230px);
}

/* El contenido del header queda por encima de la escena y la nieve */
.header__inner {
    position: relative;
    z-index: 2;
}

/* --- Nieve que cae sobre todo el header, detrás del contenido ---
   Dos capas de copos (gradientes radiales en mosaico) a distinta velocidad y
   tamaño para que no se note la repetición. */
.xm-snowfall {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.75;
    background-image:
        radial-gradient(1.6px 1.6px at 18px 12px, #fff 50%, transparent 52%),
        radial-gradient(1.3px 1.3px at 66px 48px, #fff 50%, transparent 52%),
        radial-gradient(1.8px 1.8px at 112px 26px, #fff 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 150px 70px, #fff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 40px 80px, #fff 50%, transparent 52%),
        radial-gradient(1.4px 1.4px at 92px 4px, #fff 50%, transparent 52%);
    background-size: 173px 90px;
    animation: xm-fall 11s linear infinite;
}

.xm-snowfall--far {
    opacity: 0.4;
    background-image:
        radial-gradient(1px 1px at 30px 20px, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 120px 60px, #fff 50%, transparent 52%),
        radial-gradient(1.1px 1.1px at 200px 36px, #fff 50%, transparent 52%),
        radial-gradient(0.9px 0.9px at 76px 84px, #fff 50%, transparent 52%);
    background-size: 241px 90px;
    animation-duration: 17s;
}

@keyframes xm-fall {
    from { background-position: 0 0; }
    to   { background-position: 30px 90px; }
}

/* --- Árbol: ampolletas que titilan a destiempo y estrella que brilla --- */
.xm-bulb {
    animation: xm-twinkle 2.4s ease-in-out infinite;
}

.xm-bulb:nth-child(3n + 1) { animation-delay: -0.8s; }
.xm-bulb:nth-child(3n + 2) { animation-delay: -1.6s; animation-duration: 2.9s; }
.xm-bulb:nth-child(4n)     { animation-duration: 1.9s; }

@keyframes xm-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.xm-star {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: xm-shine 3s ease-in-out infinite;
}

@keyframes xm-shine {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.85; }
}

/* --- Casita: ventana con luz cálida que respira y humo de la chimenea --- */
.xm-window {
    animation: xm-hearth 4s ease-in-out infinite;
}

@keyframes xm-hearth {
    0%, 100% { opacity: 1; }
    40%      { opacity: 0.82; }
    60%      { opacity: 0.95; }
}

.xm-puff {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: xm-smoke 3.6s ease-out infinite;
}

.xm-puff:nth-of-type(2) { animation-delay: -1.2s; animation-duration: 4.2s; }
.xm-puff:nth-of-type(3) { animation-delay: -2.4s; animation-duration: 3.2s; }

@keyframes xm-smoke {
    0%   { transform: translateY(4px) scale(0.5); opacity: 0; }
    20%  { opacity: 0.45; }
    100% { transform: translateY(-14px) translateX(4px) scale(1.5); opacity: 0; }
}

/* --- Reno que va y vuelve por el bosque --- */
.xm-reindeer-walk {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: xm-walk 40s linear infinite;
}

.xm-reindeer-body {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: xm-trot 0.8s ease-in-out infinite;
}

.xm-leg {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: xm-step 0.8s ease-in-out infinite;
}

.xm-leg--b {
    animation-delay: -0.4s;
}

.xm-nose {
    animation: xm-twinkle 2s ease-in-out infinite;
}

@keyframes xm-walk {
    0%   { transform: translateX(0) scaleX(1); }
    46%  { transform: translateX(var(--xm-walk, 170px)) scaleX(1); }
    50%  { transform: translateX(var(--xm-walk, 170px)) scaleX(-1); }
    96%  { transform: translateX(0) scaleX(-1); }
    100% { transform: translateX(0) scaleX(1); }
}

@keyframes xm-trot {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1px); }
}

@keyframes xm-step {
    0%, 100% { transform: rotate(-18deg); }
    50%      { transform: rotate(18deg); }
}

/* --- Trineo del Viejito Pascuero: de vez en cuando cruza el header en arco
   y se va. _christmas_scene.html le pone .is-flying a intervalos al azar (y
   .xm-santa--rtl para que algunas veces venga desde la derecha); la duración
   llega en --xm-santa-dur según el ancho. Va por la franja de arriba, libre
   de la navegación, detrás del contenido. --- */
.xm-sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.xm-santa {
    position: absolute;
    top: 2px;
    left: -90px;
    width: 70px;
    height: 29px;
    visibility: hidden;
    --xm-tilt: 1;
}

.xm-santa--rtl {
    --xm-tilt: -1;
}

.xm-santa.is-flying {
    visibility: visible;
    animation: xm-santa-cross var(--xm-santa-dur, 9s) linear forwards;
}

.xm-santa--rtl.is-flying {
    animation-name: xm-santa-cross-rtl;
}

.xm-santa.is-flying .xm-santa__arc {
    animation: xm-santa-arc var(--xm-santa-dur, 9s) ease-in-out forwards;
}

.xm-santa__bob {
    animation: xm-bob 1.6s ease-in-out infinite;
}

.xm-santa__sleigh {
    display: block;
}

.xm-santa--rtl .xm-santa__sleigh {
    transform: scaleX(-1);
}

.xm-trail {
    animation: xm-twinkle 0.9s ease-in-out infinite;
}

@keyframes xm-santa-cross {
    from { left: -90px; }
    to   { left: calc(100% + 20px); }
}

@keyframes xm-santa-cross-rtl {
    from { left: calc(100% + 20px); }
    to   { left: -90px; }
}

/* Entra bajo, sube hasta la mitad del cruce y baja al salir */
@keyframes xm-santa-arc {
    0%   { transform: translateY(16px) rotate(calc(-7deg * var(--xm-tilt))); }
    50%  { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(16px) rotate(calc(7deg * var(--xm-tilt))); }
}

@keyframes xm-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2.5px); }
}

/* --- Bola de Navidad colgando de un hilo (login) --- */
.xm-ornament {
    position: absolute;
    width: var(--xm-ball-size, 18px);
    height: var(--xm-thread, 52px);
    pointer-events: none;
    transform-origin: 50% 0;
    animation: xm-sway 4.5s ease-in-out infinite;
    background:
        no-repeat center bottom / var(--xm-ball-size, 18px) calc(var(--xm-ball-size, 18px) * 1.2)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'><defs><radialGradient id='b' cx='35%25' cy='38%25' r='75%25'><stop offset='0' stop-color='%23ff6b5e'/><stop offset='0.55' stop-color='%23d22a22'/><stop offset='1' stop-color='%237a1110'/></radialGradient><linearGradient id='c' x1='0' x2='1'><stop offset='0' stop-color='%23f7dc84'/><stop offset='0.5' stop-color='%23c9962d'/><stop offset='1' stop-color='%23f0cf6a'/></linearGradient></defs><path d='M17 4 C17 0.5 23 0.5 23 4' fill='none' stroke='%23c9962d' stroke-width='1.6'/><rect x='14' y='4' width='12' height='6' rx='1.2' fill='url(%23c)'/><circle cx='20' cy='28' r='18' fill='url(%23b)'/><path d='M3.4 24 C12 27.4 28 27.4 36.6 24 M2.6 31.6 C12 35 28 35 37.4 31.6' fill='none' stroke='%23f2cf63' stroke-width='1.6' opacity='0.9'/><g fill='%23f2cf63'><circle cx='10' cy='29.6' r='1.4'/><circle cx='20' cy='30.4' r='1.4'/><circle cx='30' cy='29.6' r='1.4'/></g><ellipse cx='13' cy='19' rx='4.4' ry='2.6' transform='rotate(-35 13 19)' fill='%23fff' opacity='0.55'/></svg>"),
        no-repeat center top / 1px calc(100% - var(--xm-ball-size, 18px) + 2px)
        linear-gradient(var(--xm-thread-color, rgba(242, 207, 99, 0.8)), var(--xm-thread-color, rgba(242, 207, 99, 0.8)));
}

/* Variante dorada */
.xm-ornament--gold {
    background:
        no-repeat center bottom / var(--xm-ball-size, 18px) calc(var(--xm-ball-size, 18px) * 1.2)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'><defs><radialGradient id='b' cx='35%25' cy='38%25' r='75%25'><stop offset='0' stop-color='%23fff0b8'/><stop offset='0.55' stop-color='%23d9a62e'/><stop offset='1' stop-color='%23855d12'/></radialGradient><linearGradient id='c' x1='0' x2='1'><stop offset='0' stop-color='%23e8edf2'/><stop offset='0.5' stop-color='%23949ea8'/><stop offset='1' stop-color='%23d5dbe1'/></linearGradient></defs><path d='M17 4 C17 0.5 23 0.5 23 4' fill='none' stroke='%23949ea8' stroke-width='1.6'/><rect x='14' y='4' width='12' height='6' rx='1.2' fill='url(%23c)'/><circle cx='20' cy='28' r='18' fill='url(%23b)'/><path d='M8 22 L12 26 L16 22 L20 26 L24 22 L28 26 L32 22' fill='none' stroke='%23fff6d8' stroke-width='1.6' opacity='0.85'/><ellipse cx='13' cy='19' rx='4.4' ry='2.6' transform='rotate(-35 13 19)' fill='%23fff' opacity='0.6'/></svg>"),
        no-repeat center top / 1px calc(100% - var(--xm-ball-size, 18px) + 2px)
        linear-gradient(var(--xm-thread-color, rgba(242, 207, 99, 0.8)), var(--xm-thread-color, rgba(242, 207, 99, 0.8)));
}

/* Logo con gorro del Viejito Pascuero: mismo lienzo y encuadre que logo.png.
   header.css se carga después: la regla necesita más especificidad. */
.header__brand-link .header__brand-logo {
    background-image: url("../images/header/christmas_logo.0b83ca453b81.png");
}

@keyframes xm-sway {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}

/* --- Login: bolas colgando del borde superior del panel --- */
.login-sidebar {
    position: relative;
    z-index: 1;
}

.login-sidebar .xm-ornament {
    --xm-ball-size: 30px;
    --xm-thread: 150px;
    left: 46px;
    top: 0;
    z-index: 1;
}

.login-sidebar .xm-ornament--gold {
    --xm-ball-size: 22px;
    --xm-thread: 96px;
    left: 92px;
    animation-duration: 5.2s;
    animation-delay: -1.5s;
}

/* Móvil: solo reno y un arbolito; el resto es de escritorio.
   La casita necesita ancho: bajo 900px se oculta para no chocar con el bosque. */
.xm-mobile-only {
    display: none;
}

@media (max-width: 900px) {
    .xm-wide-only {
        display: none;
    }
}

@media (max-width: 768px) {
    .xm-desktop-only {
        display: none;
    }
    .xm-mobile-only {
        display: inline;
    }
    .xm-reindeer-walk {
        --xm-walk: 70px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xm-snowfall,
    .xm-bulb,
    .xm-star,
    .xm-window,
    .xm-puff,
    .xm-reindeer-body,
    .xm-leg,
    .xm-nose,
    .xm-trail,
    .xm-santa__bob,
    .xm-ornament {
        animation: none;
    }
    .xm-reindeer-walk {
        animation: none;
        transform: translateX(90px);
    }
    /* Sin movimiento el trineo no aparece (el script tampoco lo lanza) */
    .xm-sky {
        display: none;
    }
}