/*
 * Halloween: decoración de temporada. Lo carga templates/element/seasonal/halloween.php sólo
 * mientras el tema está prendido (config/seasonal.php), así que sin el elemento este archivo no
 * hace nada. Todo es decorativo y con pointer-events:none, salvo la franja (un link).
 *
 * Reglas: nada empuja el contenido (todo es fixed o vive dentro de la franja), no hay scroll
 * horizontal, y con prefers-reduced-motion se quitan las animaciones.
 */
.ez-hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Franja de arriba ─────────────────────────────────────────────────────── */
.ez-hw-strip {
    position: relative;
    z-index: 60;
    display: block;
    overflow: hidden;
    padding: 8px 46px;
    background: linear-gradient(90deg, #1b0b26 0%, #3d1606 50%, #1b0b26 100%);
    border-bottom: 1px solid rgba(255, 122, 26, .55);
    box-shadow: 0 0 22px rgba(255, 122, 26, .22);
    color: #ffd9b0;
    font: 650 13px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
    text-decoration: none;
    animation: ez-hw-strip-glow 4.5s ease-in-out infinite;
}
.ez-hw-strip:hover, .ez-hw-strip:focus-visible { color: #fff; }
.ez-hw-strip:focus-visible { outline: 2px solid #ff7a1a; outline-offset: -3px; }
.ez-hw-strip__text { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
.ez-hw-strip__text b { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-hw-strip__text em { flex: none; padding: 2px 9px; border-radius: 999px; background: #ff7a1a; color: #1c0a00; font-style: normal; font-weight: 850; font-size: 12px; }
.ez-hw-strip__short { display: none; }
.ez-hw-strip__web { position: absolute; top: 0; width: 38px; height: 38px; color: rgba(255, 217, 176, .42); pointer-events: none; }
.ez-hw-strip__web--l { left: 0; }
.ez-hw-strip__web--r { right: 0; transform: scaleX(-1); }

/* ── Murciélagos: cruzan por arriba, cada uno con su tiempo ───────────────── */
.ez-hw { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; }
.ez-hw__fly {
    position: absolute;
    top: var(--t, 6vh);
    left: 0;
    width: calc(34px * var(--s, 1));
    height: calc(22px * var(--s, 1));
    animation: ez-hw-fly var(--d, 26s) linear infinite;
    animation-delay: var(--w, 0s);
    will-change: transform;
}
.ez-hw__bat { display: block; width: 100%; height: 100%; fill: #2b1138; opacity: .82; transform-origin: 50% 40%; animation: ez-hw-flap .34s ease-in-out infinite alternate; }

/* ── Neblina abajo ────────────────────────────────────────────────────────── */
.ez-hw__mist {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 110px;
    background:
        radial-gradient(60% 100% at 18% 100%, rgba(255, 122, 26, .16), transparent 70%),
        radial-gradient(55% 100% at 82% 100%, rgba(120, 50, 170, .15), transparent 70%);
    animation: ez-hw-mist 16s ease-in-out infinite alternate;
}

/* ── Acentos en las tarjetas (donde el navegador entiende :has) ───────────── */
body:has(.ez-hw) .sdf-card--featured {
    box-shadow: 0 0 0 1px rgba(255, 122, 26, .55), 0 14px 38px rgba(255, 122, 26, .18);
}
body:has(.ez-hw) .sdf-featured-badge {
    background: linear-gradient(135deg, #ff7a1a, #d11a2a);
    color: #fff;
    box-shadow: 0 0 14px rgba(255, 122, 26, .45);
}
body:has(.ez-hw) .sdf-card:hover { border-color: rgba(255, 122, 26, .55); }

@keyframes ez-hw-fly {
    0%   { transform: translate3d(-90px, 0, 0); }
    20%  { transform: translate3d(22vw, 26px, 0); }
    40%  { transform: translate3d(46vw, -4px, 0); }
    60%  { transform: translate3d(68vw, 30px, 0); }
    80%  { transform: translate3d(90vw, 6px, 0); }
    100% { transform: translate3d(calc(100vw + 90px), 22px, 0); }
}
@keyframes ez-hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.5); } }
@keyframes ez-hw-mist { from { transform: translateX(-2%); opacity: .8; } to { transform: translateX(2%); opacity: 1; } }
@keyframes ez-hw-strip-glow {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 122, 26, .16); }
    50%      { box-shadow: 0 0 30px rgba(255, 122, 26, .38); }
}

@media (max-width: 560px) {
    .ez-hw-strip { padding: 7px 34px; font-size: 12px; }
    .ez-hw-strip__long { display: none; }
    .ez-hw-strip__short { display: inline; }
    .ez-hw-strip__text em { display: none; } /* la franja entera es el link: en el celular el texto necesita el lugar */
    .ez-hw-strip__web { width: 28px; height: 28px; }
    .ez-hw__fly:nth-of-type(n+4) { display: none; } /* en el celular, menos murciélagos */
    .ez-hw__mist { height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
    .ez-hw__fly, .ez-hw__mist, .ez-hw-strip, .ez-hw__bat { animation: none; }
    .ez-hw__fly { display: none; } /* los murciélagos son puro movimiento: sin movimiento no aportan */
}
@media print { .ez-hw, .ez-hw-strip, .ez-hw-defs { display: none; } }