/* /radio/css/radio-themes.css */

/* evita scroll fondo cuando modal visible */
.modal-open {
    overflow: hidden;
}

/* shimmer texto canción */
.shimmer-text {
    background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .65), rgba(255, 255, 255, .1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
}

/* Halloween / Navidad helpers */
.halloween .halo-orange {
    box-shadow: 0 0 0 1px rgba(249, 115, 22, .35), 0 0 22px rgba(249, 115, 22, .25);
}

.halloween .halo-purple {
    box-shadow: 0 0 0 1px rgba(124, 58, 237, .35), 0 0 22px rgba(124, 58, 237, .25);
}

.christmas .halo-green {
    box-shadow: 0 0 0 1px rgba(74, 222, 128, .45), 0 0 22px rgba(74, 222, 128, .3);
}

/* gradient banners */
.halloween .candy-gradient {
    background-image: linear-gradient(90deg, rgba(249, 115, 22, .18), rgba(124, 58, 237, .18), rgba(132, 204, 22, .18));
}

.christmas .candy-gradient {
    background-image: linear-gradient(90deg, rgba(248, 250, 252, .18), rgba(34, 197, 94, .22), rgba(239, 68, 68, .22));
}

/* bats */
.bat {
    position: fixed;
    width: 34px;
    height: 16px;
    z-index: 35;
    pointer-events: none;
    opacity: .9;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)) drop-shadow(0 0 10px rgba(124, 58, 237, .25));
}

.bat[data-variant="orange"] {
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)) drop-shadow(0 0 12px rgba(249, 115, 22, .35));
}

@keyframes bat-fly {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    25% {
        transform: translateX(18px) translateY(-8px) rotate(2deg);
    }

    50% {
        transform: translateX(36px) translateY(0) rotate(0deg);
    }

    75% {
        transform: translateX(18px) translateY(8px) rotate(-2deg);
    }

    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bat {
        animation: none !important;
    }
}

/* webs corners */
.web-corner {
    position: fixed;
    width: 200px;
    height: 200px;
    z-index: 25;
    pointer-events: none;
    opacity: .55;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1.2'><path d='M0,0 L200,0 M0,0 L0,200 M0,0 C40,0 80,40 120,80 M0,0 C0,40 40,80 80,120'/><path d='M0,0 C70,0 140,70 200,140'/><path d='M0,0 C0,70 70,140 140,200'/><circle cx='0' cy='0' r='24'/><circle cx='0' cy='0' r='48'/><circle cx='0' cy='0' r='72'/><circle cx='0' cy='0' r='96'/></g></svg>");
    background-size: 100% 100%;
}

.web-top-left {
    top: 0;
    left: 0;
    transform: none;
}

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

.web-bottom-left {
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
}

.web-bottom-right {
    bottom: 0;
    right: 0;
    transform: scale(-1);
}

/* candies */
.candy {
    position: fixed;
    top: -40px;
    z-index: 50;
    pointer-events: none;
    font-size: 20px;
    will-change: transform, opacity;
    animation: candy-fall linear forwards;
}

@keyframes candy-fall {
    0% {
        transform: translateY(-40px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}