/* ==========================================================
   SHOPPING BY NIGHT — Seasonal Decorations (Halloween / Navidad)
   Capa decorativa ANIMADA, no interactiva.
   z-index 5  -> por encima del contenido, por debajo del header
                 (header=1000), menús (1400/2000), modales (5000) y CMP (10000).
   pointer-events:none -> nunca bloquea clics.
   Tamaños/velocidad/opacidad ajustables por variables CSS.
   ========================================================== */

.seasonal-layer {
    --k: 1;                 /* escala global (se reduce en móvil) */
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}
.seasonal-layer [data-hw] {
    position: absolute;
    width: calc(var(--s, 60px) * var(--k));
    opacity: var(--o, .85);
    will-change: transform;
}
.seasonal-layer img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(6, 27, 85, .18));
}

/* ---- Vuelo horizontal (murciélagos, bruja) ---- */
@keyframes hw-fly {
    from { transform: translate3d(-24vw, 0, 0) scaleX(var(--sx, 1)); }
    to   { transform: translate3d(124vw, 0, 0) scaleX(var(--sx, 1)); }
}
@keyframes hw-wob {
    0%, 100% { transform: translateY(-7px) rotate(-4deg); }
    50%      { transform: translateY(7px)  rotate(4deg); }
}
.hw-fly {
    left: 0;
    top: var(--y, 12%);
    animation: hw-fly var(--dur, 20s) linear infinite;
    animation-delay: var(--delay, 0s);
}
.hw-fly img { animation: hw-wob var(--wobdur, 3.5s) ease-in-out infinite; }

/* ---- Flotar (fantasmas) ---- */
@keyframes hw-float {
    0%, 100% { transform: translateY(0)      rotate(-3deg); }
    50%      { transform: translateY(-26px)  rotate(3deg); }
}
.hw-float {
    left: var(--x, 10%);
    top: var(--y, 40%);
    animation: hw-float var(--dur, 9s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* ---- Caída desde arriba hasta salir por abajo (calabazas) ---- */
@keyframes hw-fall {
    0%   { transform: translate3d(0, -14vh, 0) rotate(-6deg); }
    100% { transform: translate3d(0, 114vh, 0) rotate(6deg); }
}
.hw-fall {
    left: var(--x, 20%);
    top: 0;
    animation: hw-fall var(--dur, 11s) linear infinite;
    animation-delay: var(--delay, 0s);
}

/* ---- Arañas colgando de un hilo (bajan y suben) ---- */
@keyframes hw-dangle {
    0%, 100% { transform: translateY(-14vh) rotate(-3deg); }
    50%      { transform: translateY(34vh)  rotate(3deg); }
}
.hw-hang {
    left: var(--x, 25%);
    top: 0;
    animation: hw-dangle var(--dur, 13s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
.hw-hang::before {            /* el hilo que la sostiene, siempre desde el borde superior */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 2px;
    height: 100vh;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        rgba(6, 27, 85, 0) 0%, rgba(6, 27, 85, .45) 65%, rgba(6, 27, 85, .5) 100%);
}
.hw-hang img { filter: none; }

/* ---- Araña del medio: baja hasta el FONDO de la pantalla y vuelve ---- */
@keyframes hw-drop {
    0%   { transform: translateY(-14vh) rotate(-3deg); }
    58%  { transform: translateY(calc(100vh - 100%)) rotate(3deg); }   /* fondo */
    80%  { transform: translateY(calc(100vh - 100%)) rotate(-2deg); }
    100% { transform: translateY(-14vh) rotate(-3deg); }
}
.hw-hang--long { animation: hw-drop var(--dur, 18s) ease-in-out infinite; }

/* ---- Balanceo suave (calabazas) ---- */
@keyframes hw-bob {
    0%, 100% { transform: translateY(0)     rotate(-2deg); }
    50%      { transform: translateY(-16px) rotate(2deg); }
}
.hw-bob {
    left: var(--x, 10%);
    top: var(--y, 60%);
    animation: hw-bob var(--dur, 8s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* ---- Telarañas en esquinas ---- */
@keyframes hw-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
.hw-corner { position: absolute; width: calc(var(--s, 130px) * var(--k)); animation: hw-pulse 7s ease-in-out infinite; }
.hw-corner img { filter: none; }
.hw-corner--tl { top: -8px; left: -8px; }
.hw-corner--tr { top: -8px; right: -8px; transform: scaleX(-1); }

/* ---- Accesibilidad: respeta "reducir movimiento" ---- */
@media (prefers-reduced-motion: reduce) {
    .seasonal-layer { display: none !important; }
}

/* ---- Sin márgenes laterales (móvil/tablet estrecho) cualquier araña colgante
        pasaría por encima de las tarjetas (1 sola columna) -> se ocultan ---- */
@media (max-width: 768px) {
    .seasonal-layer .hw-hang { display: none; }
}

/* ---- Móvil: elementos más pequeños ---- */
@media (max-width: 640px) {
    .seasonal-layer { --k: .62; }
}