@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

/* Sustos de Halloween: botón flotante, selector de compañero y susto a pantalla completa */

/* ---------- Botón calabaza (encima del FAB de mensajes) ---------- */
.hw-fab {
    position: fixed;
    right: 28px;
    bottom: 20px;
    z-index: 9999;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    padding: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    background: radial-gradient(circle at 35% 30%, #ffa53a 0%, #f26a0d 55%, #b34500 100%);
    box-shadow: 0 4px 18px rgba(242, 106, 13, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: hwFabBob 3s ease-in-out infinite;
}

/* El FAB de mensajes mide 60px y está a 20px del borde: la calabaza va justo encima */
body:has(#portal-chat-widget-root) .hw-fab {
    bottom: 92px;
}

.hw-fab:hover {
    transform: scale(1.1) rotate(-8deg);
    box-shadow: 0 6px 26px rgba(242, 106, 13, 0.75);
}

.hw-fab:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@keyframes hwFabBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ---------- Selector de compañero ---------- */
.hw-overlay {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(12, 6, 24, 0.7);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.hw-overlay[hidden] {
    display: none !important;
}

.hw-modal {
    width: 100%;
    max-width: 420px;
    max-height: min(560px, 90vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    animation: hwModalIn 0.22s ease;
}

@keyframes hwModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.hw-modal-header {
    position: relative;
    padding: 16px 44px 14px 18px;
    color: #fff;
    background: linear-gradient(135deg, #2a1150 0%, #6a1b9a 55%, #f26a0d 130%);
}

.hw-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.hw-modal-sub {
    margin: 4px 0 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.hw-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.hw-modal-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

.hw-search {
    margin: 12px 14px 6px;
    padding: 9px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
}

.hw-search:focus {
    outline: none;
    border-color: #f26a0d;
    box-shadow: 0 0 0 3px rgba(242, 106, 13, 0.18);
}

.hw-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 10px;
}

.hw-empty {
    padding: 28px 12px;
    text-align: center;
    color: #6c757d;
    font-size: 14px;
}

.hw-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 8px;
}

.hw-item:hover {
    background: #fff4ea;
}

.hw-item img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f3f8;
}

.hw-item-info {
    flex: 1;
    min-width: 0;
}

.hw-item-name {
    overflow: hidden;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hw-item-centro {
    overflow: hidden;
    color: #6c757d;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hw-item-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: #f26a0d;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.hw-item-btn:hover:not(:disabled) {
    background: #c85606;
}

.hw-item-btn:disabled {
    background: #ced4da;
    cursor: not-allowed;
}

/* ---------- Susto a pantalla completa ---------- */
.hw-scare {
    --hw-accent: #ff6a1f;
    --hw-glow: rgba(255, 106, 31, 0.55);
    --hw-fog: rgba(255, 106, 31, 0.22);
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #000;
    background-image: radial-gradient(ellipse at 50% 45%, var(--hw-fog) 0%, #07030d 62%, #000 100%);
    animation: hwScareBg 0.14s ease-out both;
}

.hw-scare.hw-t-ghost  { --hw-accent: #7ff0e0; --hw-glow: rgba(127, 240, 224, 0.5); --hw-fog: rgba(60, 200, 190, 0.25); }
.hw-scare.hw-t-spider { --hw-accent: #b6ff3b; --hw-glow: rgba(182, 255, 59, 0.45); --hw-fog: rgba(120, 60, 200, 0.28); }
.hw-scare.hw-t-skull  { --hw-accent: #ff2a2a; --hw-glow: rgba(255, 42, 42, 0.55); --hw-fog: rgba(190, 0, 0, 0.3); }

/* Viñeta roja que se apaga tras el golpe */
.hw-scare::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle, transparent 30%, rgba(190, 0, 0, 0.8) 100%);
    animation: hwScareFlash 1.1s ease-out both;
}

/* Niebla que deriva por detrás */
.hw-fog {
    position: absolute;
    left: -25%;
    width: 150%;
    height: 45%;
    pointer-events: none;
    filter: blur(28px);
    opacity: 0.55;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.22), transparent 65%);
    animation: hwFogDrift 9s ease-in-out infinite alternate;
}
.hw-fog-1 { bottom: -8%; }
.hw-fog-2 { top: -10%; opacity: 0.35; animation-duration: 12s; animation-direction: alternate-reverse; }

/* Telarañas en las esquinas superiores */
.hw-web {
    position: absolute;
    top: 0;
    width: min(34vw, 240px);
    aspect-ratio: 1;
    pointer-events: none;
    opacity: 0.5;
    stroke: #d9d9e8;
}
.hw-web-l { left: 0; }
.hw-web-r { right: 0; transform: scaleX(-1); }

/* Murciélagos cruzando la pantalla */
.hw-bat {
    position: absolute;
    left: 0;
    width: 68px;
    height: 34px;
    pointer-events: none;
    fill: #0b0510;
    filter: drop-shadow(0 0 6px var(--hw-glow));
    animation: hwBatFly var(--hw-bat-dur, 3.2s) var(--hw-bat-delay, 0.3s) linear both;
}
.hw-bat svg { width: 100%; height: 100%; display: block; animation: hwBatFlap 0.28s ease-in-out infinite; }

/* Ilustración principal */
.hw-art {
    position: relative;
    z-index: 1;
    width: min(66vw, 52vh, 400px);
    aspect-ratio: 1;
    filter: drop-shadow(0 0 34px var(--hw-glow));
}
.hw-art svg { width: 100%; height: 100%; overflow: visible; display: block; }

.hw-t-pumpkin .hw-art,
.hw-t-clown .hw-art,
.hw-t-skull .hw-art {
    animation: hwScareJump 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both, hwScareShake 0.5s 0.45s linear 3, hwBreath 2.4s 1.95s ease-in-out infinite;
}

.hw-t-ghost .hw-art {
    animation: hwGhostRise 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both, hwGhostFloat 3s 0.55s ease-in-out infinite;
}

/* La araña cuelga de un hilo larguísimo */
.hw-t-spider .hw-art {
    animation: hwSpiderDrop 0.42s cubic-bezier(0.3, 1.5, 0.5, 1) both, hwSpiderSway 2.6s 0.42s ease-in-out infinite;
}
.hw-t-spider .hw-art::before {
    content: '';
    position: absolute;
    left: calc(50% - 1px);
    bottom: 71%;
    width: 2px;
    height: 100vh;
    background: linear-gradient(to top, #cfcfe6, rgba(207, 207, 230, 0.15));
}

.hw-flick { animation: hwFlicker 1.3s ease-in-out infinite; }
.hw-eye-glow { animation: hwEyePulse 1.1s ease-in-out infinite; }

/* Textos */
.hw-scare-title {
    position: relative;
    margin-top: 4px;
    font-family: 'Creepster', Impact, 'Arial Black', sans-serif;
    font-size: clamp(2.6rem, 11vw, 5.6rem);
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--hw-accent);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 22px var(--hw-glow), 0 0 60px var(--hw-glow);
    animation: hwScareText 0.4s calc(0.25s + var(--hw-d, 0s)) ease-out both;
}

.hw-scare-from {
    position: relative;
    max-width: 90vw;
    padding: 7px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    font-size: clamp(1rem, 3.4vw, 1.4rem);
    opacity: 0;
    animation: hwScareText 0.4s calc(0.6s + var(--hw-d, 0s)) ease-out both;
}
.hw-scare-from strong {
    color: var(--hw-accent);
    font-weight: 700;
}

.hw-scare-hint {
    position: relative;
    margin-top: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    animation: hwScareHint 0.4s calc(3s + var(--hw-d, 0s)) ease-out both;
}

.hw-scare.hw-leaving { animation: hwScareOut 0.3s ease-in both; }

@keyframes hwScareBg { from { background-color: #fff; } to { background-color: #000; } }
@keyframes hwScareFlash { from { opacity: 1; } to { opacity: 0.22; } }
@keyframes hwScareJump { from { transform: scale(0.08); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes hwScareShake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    20% { transform: translate(-12px, 6px) rotate(-3deg); }
    40% { transform: translate(10px, -8px) rotate(3deg); }
    60% { transform: translate(-9px, -5px) rotate(-2deg); }
    80% { transform: translate(8px, 9px) rotate(2deg); }
}
@keyframes hwBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes hwGhostRise { from { transform: translateY(90vh) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hwGhostFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-16px) rotate(2deg); }
}
@keyframes hwSpiderDrop { from { transform: translateY(-105vh); } to { transform: translateY(0); } }
@keyframes hwSpiderSway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes hwFlicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.82; } 55% { opacity: 0.94; } }
@keyframes hwEyePulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes hwFogDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes hwBatFly {
    from { transform: translate(-80px, 0) scale(var(--hw-bat-s, 1)); }
    50% { transform: translate(50vw, var(--hw-bat-y, -30px)) scale(var(--hw-bat-s, 1)); }
    to { transform: translate(calc(100vw + 80px), 0) scale(var(--hw-bat-s, 1)); }
}
@keyframes hwBatFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }
@keyframes hwScareText { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hwScareHint { from { opacity: 0; } to { opacity: 0.55; } }
@keyframes hwScareOut { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Extras ---------- */

/* Anillo que late alrededor de la calabaza flotante */
.hw-fab::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(242, 106, 13, 0.7);
    pointer-events: none;
    animation: hwRing 2.4s ease-out infinite;
}

/* Telaraña en la cabecera del selector */
.hw-modal-web {
    position: absolute;
    top: 0;
    left: 0;
    width: 76px;
    opacity: 0.3;
    pointer-events: none;
}
.hw-modal-web svg { display: block; stroke: #fff; }

/* Felicitación */
.hw-scare-greet {
    position: relative;
    margin-top: 10px;
    color: #ffe2b0;
    font-size: clamp(1.05rem, 3.6vw, 1.6rem);
    font-weight: 600;
    text-shadow: 0 0 14px var(--hw-glow);
    opacity: 0;
    animation: hwScareText 0.6s calc(2.1s + var(--hw-d, 0s)) ease-out both;
}
.hw-scare-greet span {
    display: inline-block;
    animation: hwWobble 1.6s calc(2.7s + var(--hw-d, 0s)) ease-in-out infinite;
}

/* Ascuas que suben */
.hw-ember {
    position: absolute;
    bottom: -12px;
    border-radius: 50%;
    background: var(--hw-accent);
    box-shadow: 0 0 8px var(--hw-glow);
    opacity: 0;
    pointer-events: none;
    animation: hwRise var(--hw-ember-dur, 5s) var(--hw-ember-delay, 0s) linear infinite;
}

/* Rayo: un único destello suave cada varios segundos */
.hw-lightning {
    position: absolute;
    inset: 0;
    background: rgba(190, 210, 255, 0.9);
    opacity: 0;
    pointer-events: none;
    animation: hwLightning 4.2s 0.9s ease-out infinite;
}

/* Sangre que gotea desde el borde superior */
.hw-drips {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24vh;
    pointer-events: none;
    transform-origin: top;
    animation: hwDrip 2.6s 0.5s cubic-bezier(0.3, 0.7, 0.3, 1) both;
}
.hw-drips svg { width: 100%; height: 100%; display: block; }

/* Grieta que se abre desde el centro */
.hw-crack {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hw-crack svg { width: 100%; height: 100%; display: block; }
.hw-crack path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.75;
    animation: hwCrack 0.5s 0.45s ease-out forwards;
}

/* Bruja en escoba cruzando la luna */
.hw-t-witch { --hw-accent: #d79bff; --hw-glow: rgba(255, 232, 150, 0.5); --hw-fog: rgba(140, 60, 220, 0.32); }
.hw-witch {
    position: absolute;
    left: 0;
    top: 30%;
    z-index: 2;
    width: clamp(110px, 20vw, 190px);
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(215, 155, 255, 0.6));
    animation: hwWitchFly 3.8s 0.5s ease-in-out infinite both;
}
.hw-witch svg { width: 100%; display: block; }
.hw-t-witch .hw-art {
    width: min(58vw, 46vh, 360px);
    animation: hwMoonIn 0.9s ease-out both, hwBreath 4s 0.9s ease-in-out infinite;
}

/* Ojos en la oscuridad */
.hw-scare.hw-t-eyes {
    --hw-accent: #ffc21a;
    --hw-glow: rgba(255, 194, 26, 0.5);
    --hw-fog: rgba(120, 60, 0, 0.18);
    background-image: radial-gradient(ellipse at 50% 45%, rgba(70, 34, 0, 0.35) 0%, #030102 60%, #000 100%);
    animation: none;
}
.hw-t-eyes.hw-scare::after { animation: hwScareFlashLate 1.2s 0.7s ease-out both; }
.hw-t-eyes .hw-art {
    width: min(70vw, 520px);
    aspect-ratio: 2 / 1;
    animation: hwEyesIn 0.35s 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both, hwScareShake 0.5s 1.05s linear 3, hwBreath 2.4s 2.55s ease-in-out infinite;
}
.hw-t-eyes .hw-scare-title { animation-delay: 1.1s; }
.hw-t-eyes .hw-scare-from { animation-delay: 1.4s; }
.hw-t-eyes .hw-scare-greet { animation-delay: 3s; }
.hw-t-eyes .hw-scare-greet span { animation-delay: 3.6s; }
.hw-t-eyes .hw-scare-hint { animation-delay: 3.8s; }
.hw-t-eyes .hw-drips { animation-delay: 1s; }

.hw-blink {
    transform-box: fill-box;
    transform-origin: center;
    animation: hwBlink 3.2s 2s ease-in-out infinite;
}
.hw-mini-eyes {
    position: absolute;
    pointer-events: none;
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(255, 194, 26, 0.7));
    animation: hwMiniIn 0.6s var(--hw-eyes-delay, 0.2s) ease-out both;
}
.hw-mini-eyes svg { width: 100%; display: block; }
.hw-mini-eyes .hw-blink { animation-delay: var(--hw-eyes-delay, 0.2s); animation-duration: 2.6s; }

@keyframes hwRing { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes hwWobble { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.2); } }
@keyframes hwRise {
    0% { transform: translate(0, 0); opacity: 0; }
    15% { opacity: 0.85; }
    100% { transform: translate(var(--hw-ember-x, 0), -105vh); opacity: 0; }
}
@keyframes hwLightning { 0% { opacity: 0; } 2% { opacity: 0.28; } 12% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hwDrip { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hwCrack { to { stroke-dashoffset: 0; } }
@keyframes hwWitchFly {
    0% { transform: translate(-30vw, 26vh) rotate(-6deg); }
    50% { transform: translate(46vw, -10vh) rotate(4deg); }
    100% { transform: translate(115vw, 22vh) rotate(-4deg); }
}
@keyframes hwMoonIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes hwEyesIn { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes hwBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }
@keyframes hwMiniIn { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes hwScareFlashLate { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0.22; } }


/* ---------- Escenas nuevas: payaso, zombi, desfile, apagón, gato y vampiro ---------- */
.hw-t-clown   { --hw-accent: #ff3b6b; --hw-glow: rgba(255, 59, 107, 0.5); --hw-fog: rgba(150, 20, 80, 0.3); }
.hw-t-zombie  { --hw-accent: #9be05a; --hw-glow: rgba(155, 224, 90, 0.45); --hw-fog: rgba(60, 110, 30, 0.3); }
.hw-t-parade  { --hw-accent: #ffb3e0; --hw-glow: rgba(200, 220, 255, 0.5); --hw-fog: rgba(120, 120, 220, 0.3); }
.hw-t-cat     { --hw-accent: #ffd23a; --hw-glow: rgba(255, 210, 58, 0.45); --hw-fog: rgba(120, 60, 150, 0.25); }
.hw-t-vampire { --hw-accent: #ff2a4a; --hw-glow: rgba(255, 42, 74, 0.5); --hw-fog: rgba(120, 0, 30, 0.32); }
.hw-t-blackout { --hw-accent: #ff4a4a; --hw-glow: rgba(255, 74, 74, 0.4); }

.hw-scare-title { max-width: 92vw; }

/* Payaso: globos que suben */
.hw-balloon {
    position: absolute;
    bottom: -130px;
    pointer-events: none;
    animation: hwBalloon var(--hw-b-dur, 6s) var(--hw-b-delay, 0s) ease-in infinite;
}
.hw-balloon svg { width: 100%; display: block; }

/* Zombi: mano que sale de abajo y tierra que cae */
.hw-t-zombie .hw-art {
    width: min(56vw, 52vh, 340px);
    aspect-ratio: 200 / 230;
    animation: hwZombieRise 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) both, hwScareShake 0.5s 0.7s linear 2, hwBreath 2.6s 1.7s ease-in-out infinite;
}
.hw-dirt {
    position: absolute;
    top: -12px;
    border-radius: 40%;
    background: #4a3220;
    opacity: 0;
    pointer-events: none;
    animation: hwFall var(--hw-dirt-dur, 2s) var(--hw-dirt-delay, 0s) linear infinite;
}

/* Desfile de fantasmas */
.hw-t-parade .hw-art {
    width: min(82vw, 560px);
    aspect-ratio: 360 / 150;
    animation: hwGhostRise 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.hw-bob {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: hwGhostFloat 2.4s ease-in-out infinite;
}
.hw-pghost {
    position: absolute;
    left: 0;
    opacity: 0.85;
    pointer-events: none;
    filter: drop-shadow(0 0 10px var(--hw-glow));
}
.hw-pghost svg { width: 100%; display: block; }
.hw-pghost-r { animation: hwPgR var(--hw-pg-dur, 4s) var(--hw-pg-delay, 0s) linear both; }
.hw-pghost-l { animation: hwPgL var(--hw-pg-dur, 4s) var(--hw-pg-delay, 0s) linear both; }

/* Apagón: la luz parpadea despacio y aparece una silueta */
.hw-scare.hw-t-blackout {
    background-image: radial-gradient(ellipse at 50% 40%, #3b4054 0%, #14161f 68%, #06070b 100%);
    animation: none;
}
.hw-t-blackout.hw-scare::after { animation: hwScareFlashLate 1.2s 3.2s ease-out both; }
.hw-dark {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
    animation: hwBlackout 3s ease-in-out both;
}
.hw-t-blackout .hw-art {
    width: min(36vw, 34vh, 240px);
    aspect-ratio: 2 / 3;
    animation: hwSilIn 1.1s 3.2s ease-in both, hwScareShake 0.5s 4.3s linear 2, hwBreath 3s 5.3s ease-in-out infinite;
}

/* Gato negro que salta desde un lado */
.hw-t-cat .hw-art {
    width: min(66vw, 52vh, 400px);
    animation: hwCatJump 0.75s cubic-bezier(0.3, 1.2, 0.5, 1) both, hwScareShake 0.4s 0.75s linear 2, hwBreath 2.4s 1.55s ease-in-out infinite;
}

/* Vampiro: enjambre de murciélagos que se convierte en él */
.hw-scare.hw-t-vampire {
    background-image: radial-gradient(ellipse at 50% 45%, rgba(90, 0, 20, 0.35) 0%, #04010a 62%, #000 100%);
    animation: none;
}
.hw-t-vampire.hw-scare::after { animation: hwScareFlashLate 1.2s 1.4s ease-out both; }
.hw-t-vampire .hw-art {
    width: min(62vw, 50vh, 380px);
    aspect-ratio: 200 / 220;
    animation: hwEyesIn 0.35s 1.4s cubic-bezier(0.2, 1.6, 0.4, 1) both, hwScareShake 0.5s 1.75s linear 3, hwBreath 2.4s 3.25s ease-in-out infinite;
}
.hw-t-vampire .hw-drips { animation-delay: 1.4s; }
.hw-swarm-bat {
    position: absolute;
    left: calc(50% - 28px);
    top: 38%;
    width: 56px;
    height: 28px;
    fill: #0b0510;
    pointer-events: none;
    filter: drop-shadow(0 0 6px var(--hw-glow));
    animation: hwSwarm 1.35s var(--hw-sd, 0s) cubic-bezier(0.4, 0, 0.6, 1) both;
}
.hw-swarm-bat svg { width: 100%; height: 100%; display: block; animation: hwBatFlap 0.22s ease-in-out infinite; }

@keyframes hwBalloon {
    0% { transform: translate(0, 0) rotate(-4deg); opacity: 0; }
    8% { opacity: 1; }
    50% { transform: translate(var(--hw-b-x, 0), -60vh) rotate(4deg); }
    100% { transform: translate(0, -125vh) rotate(-4deg); opacity: 1; }
}
@keyframes hwZombieRise { from { transform: translateY(95vh) rotate(-8deg); } to { transform: none; } }
@keyframes hwFall {
    0% { transform: translateY(0) rotate(0); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translateY(108vh) rotate(240deg); opacity: 0.9; }
}
@keyframes hwPgR { from { transform: translateX(-90px); } to { transform: translateX(calc(100vw + 90px)); } }
@keyframes hwPgL { from { transform: translateX(calc(100vw + 90px)) scaleX(-1); } to { transform: translateX(-90px) scaleX(-1); } }
@keyframes hwBlackout {
    0% { opacity: 0; }
    12% { opacity: 0.85; }
    28% { opacity: 0.15; }
    46% { opacity: 0.9; }
    62% { opacity: 0.3; }
    80% { opacity: 0.95; }
    100% { opacity: 0.78; }
}
@keyframes hwSilIn { from { transform: scale(0.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes hwCatJump {
    0% { transform: translate(-70vw, 26vh) rotate(-35deg) scale(0.5); }
    60% { transform: translate(6vw, -10vh) rotate(6deg) scale(1.15); }
    100% { transform: none; }
}
@keyframes hwSwarm {
    0% { transform: translate(var(--hw-sx), var(--hw-sy)) scale(1.5); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(0, 0) scale(0.25); opacity: 0; }
}

/* Sin destellos, sacudidas ni movimiento para quien lo tiene desactivado en el sistema */
@media (prefers-reduced-motion: reduce) {
    .hw-fab,
    .hw-scare,
    .hw-scare .hw-art,
    .hw-fog,
    .hw-bat svg,
    .hw-flick,
    .hw-eye-glow,
    .hw-fab::after,
    .hw-ember,
    .hw-lightning,
    .hw-drips,
    .hw-blink,
    .hw-mini-eyes,
    .hw-scare-greet span {
        animation: none;
    }

    .hw-crack path { animation: none; stroke-dashoffset: 0; }
    .hw-witch,
    .hw-balloon,
    .hw-dirt,
    .hw-pghost,
    .hw-swarm-bat,
    .hw-dark { display: none; }

    .hw-bob { animation: none; }

    .hw-scare::after,
    .hw-bat {
        display: none;
    }
}