/*
 * Decoración temporal de Halloween para Agencia ATLAS.
 * Se activa o desactiva con HALLOWEEN_MODE en config.php.
 */

.halloween-effects {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
}

.halloween-effects::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 3% 16%, rgba(249, 115, 22, 0.13), transparent 23%),
        radial-gradient(circle at 97% 12%, rgba(139, 92, 246, 0.14), transparent 25%);
    box-shadow:
        inset 0 0 58px rgba(249, 115, 22, 0.07),
        inset 0 0 105px rgba(109, 40, 217, 0.06);
    mix-blend-mode: screen;
    animation: halloween-ambient-pulse 6s ease-in-out infinite alternate;
}

.halloween-web {
    position: absolute;
    top: 0;
    width: clamp(105px, 12vw, 180px);
    aspect-ratio: 1;
    opacity: 0.24;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180' fill='none' stroke='%23d8dce7' stroke-opacity='.9' stroke-width='1.35'%3E%3Cpath d='M0 0H180M0 0V180M0 0L180 180M0 0L180 72M0 0L72 180'/%3E%3Cpath d='M25 0A25 25 0 0 1 0 25M55 0A55 55 0 0 1 0 55M95 0A95 95 0 0 1 0 95M140 0A140 140 0 0 1 0 140'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.18));
}

.halloween-web-left { left: 0; }

.halloween-web-right {
    right: 0;
    transform: scaleX(-1);
}

.halloween-lightning {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 78% 3%, rgba(216, 180, 254, 0.34), transparent 34%),
        linear-gradient(112deg, transparent 43%, rgba(196, 181, 253, 0.17) 49%, transparent 55%);
    mix-blend-mode: screen;
}

.halloween-lightning::before {
    content: '';
    position: absolute;
    top: -2vh;
    right: clamp(10%, 17vw, 23%);
    width: clamp(42px, 5vw, 74px);
    height: min(66vh, 590px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(196, 181, 253, 0.56) 58%, rgba(124, 58, 237, 0.12));
    clip-path: polygon(58% 0, 100% 0, 67% 38%, 91% 38%, 24% 100%, 43% 53%, 13% 53%);
    filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.92))
        drop-shadow(0 0 22px rgba(167, 139, 250, 0.90));
}

.halloween-lightning::after {
    content: '';
    position: absolute;
    top: -4vh;
    left: clamp(16%, 24vw, 31%);
    width: clamp(25px, 3vw, 45px);
    height: min(42vh, 390px);
    opacity: 0.62;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(139, 92, 246, 0.18));
    clip-path: polygon(57% 0, 100% 0, 65% 40%, 91% 40%, 22% 100%, 42% 55%, 10% 55%);
    filter: drop-shadow(0 0 14px rgba(196, 181, 253, 0.72));
}

.halloween-lightning.is-flashing {
    animation: halloween-lightning-flash 900ms ease-out;
}

.halloween-bat-layer {
    position: absolute;
    inset: 0;
}

.halloween-bat {
    --bat-size: 1;
    --bat-start-y: 16vh;
    --bat-end-y: 23vh;
    --bat-start-x: -12vw;
    --bat-q1-x: 22vw;
    --bat-mid-x: 50vw;
    --bat-q3-x: 78vw;
    --bat-end-x: 112vw;
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 26px;
    background: transparent;
    opacity: 0;
    filter:
        drop-shadow(0 0 2px rgba(249, 115, 22, 0.62))
        drop-shadow(0 3px 4px rgba(139, 92, 246, 0.52));
    transform: translate3d(var(--bat-start-x), var(--bat-start-y), 0) scale(var(--bat-size));
    animation: halloween-bat-flight var(--bat-duration, 18s) linear forwards;
}

.halloween-bat::before,
.halloween-bat::after {
    content: '';
    position: absolute;
    inset: 0;
}

.halloween-bat::before {
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M32 15C28 9 24 8 20 10C14 3 7 2 1 4C5 8 6 13 4 18C10 16 15 18 20 24C24 20 28 19 32 22C36 19 40 20 44 24C49 18 54 16 60 18C58 13 59 8 63 4C57 2 50 3 44 10C40 8 36 9 32 15Z' fill='%232b123d' stroke='%23f97316' stroke-width='1.25' stroke-linejoin='round'/%3E%3Ccircle cx='29' cy='16' r='1' fill='%23fbbf24'/%3E%3Ccircle cx='35' cy='16' r='1' fill='%23fbbf24'/%3E%3C/svg%3E");
    transform-origin: center;
    animation: halloween-bat-flap 520ms ease-in-out infinite alternate;
}

.halloween-bat::after {
    display: none;
}

@keyframes halloween-bat-flight {
    0% {
        opacity: 0;
        transform: translate3d(var(--bat-start-x), var(--bat-start-y), 0) scale(var(--bat-size)) rotate(var(--bat-rotate-start, -3deg));
    }
    7%, 93% { opacity: 0.78; }
    25% {
        transform: translate3d(var(--bat-q1-x), var(--bat-q1-y), 0) scale(var(--bat-size)) rotate(var(--bat-rotate-q1, 4deg));
    }
    50% {
        transform: translate3d(var(--bat-mid-x), var(--bat-mid-y), 0) scale(var(--bat-size)) rotate(var(--bat-rotate-mid, -2deg));
    }
    75% {
        transform: translate3d(var(--bat-q3-x), var(--bat-q3-y), 0) scale(var(--bat-size)) rotate(var(--bat-rotate-q3, 3deg));
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--bat-end-x), var(--bat-end-y), 0) scale(var(--bat-size)) rotate(var(--bat-rotate-end, -2deg));
    }
}

@keyframes halloween-bat-flap {
    from { transform: scaleY(0.58) rotate(-2deg); }
    to { transform: scaleY(1) rotate(2deg); }
}

@keyframes halloween-lightning-flash {
    0%, 100% { opacity: 0; }
    7% { opacity: 0.52; }
    14% { opacity: 0.04; }
    22% { opacity: 0.68; }
    31% { opacity: 0.07; }
    42% { opacity: 0.40; }
    58% { opacity: 0; }
}

@keyframes halloween-ambient-pulse {
    from { opacity: 0.70; }
    to { opacity: 1; }
}

@media (max-width: 720px) {
    .halloween-web {
        width: 92px;
        opacity: 0.18;
    }

    .halloween-web-right { display: none; }
    .halloween-bat {
        width: 36px;
        height: 21px;
        filter: drop-shadow(0 0 2px rgba(249, 115, 22, 0.46));
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-bat-layer,
    .halloween-lightning,
    .halloween-effects::before {
        display: none !important;
    }
}