/*
Spotlight (nestable)
*/
.bc-spotlight[data-flickering]{
    opacity: 0;
}
.bc-spotlight{
    position: relative;
    display: block; /*block settings*/
    height: 100vh; /**/
    width: 100%; /**/

    --stripes: repeating-linear-gradient(
        100deg,
        #fff 0%,
        #fff 7%,
        transparent 10%,
        transparent 12%,
        #fff 16%
    );
    --stripesDark: repeating-linear-gradient(
        100deg,
        #000 0%,
        #000 7%,
        transparent 10%,
        transparent 12%,
        #000 16%
    );
    --rainbow: repeating-linear-gradient(
        100deg,
        #fa60e5 10%,
        #e879f9 15%,
        #60a5fa 20%,
        #5eead4 25%,
        #60a5fa 30%
    );

    --speed: 60s;
    --easing: linear;
}
.bc-spotlight__wrapper{
    position: absolute;
    inset: 0px;
    overflow: hidden;
    pointer-events: none;
}
.bc-spotlight__spotlight {
    position: absolute;
    inset: -10px;
    opacity: 0.5; /**/

    height: 100%; /**/

    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;

    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
    pointer-events: none;
    will-change: transform, opacity; /* Optimización */
}
.bricks-draggable-root .bc-spotlight[data-builderedit="1"] .bc-spotlight__spotlight::after{
    animation: none !important;
}
.bc-spotlight__spotlight::after {
    content: "";
    position: absolute;
    inset: 0;

    background-size: 200%, 100%;
    animation: spotlight var(--speed) var(--easing) infinite; /*duration y easing*/
    background-attachment: fixed;
    mix-blend-mode: difference;
}
[data-light] .bc-spotlight__spotlight{
    background-image: var(--stripes), var(--rainbow);
    filter: blur(5px) invert(100%); /* Reducido el blur */
}
[data-dark] .bc-spotlight__spotlight{
    background-image: var(--stripesDark), var(--rainbow);
    filter: blur(5px) opacity(50%) saturate(150%); /* Reducido el blur y saturación */
}
[data-light] .bc-spotlight__spotlight::after{
    background-image: var(--stripes), var(--rainbow);
}
[data-dark] .bc-spotlight__spotlight::after{
    background-image: var(--stripesDark), var(--rainbow);
}
@keyframes spotlight {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 250% 50%, 250% 50%; /* Reducida la distancia de movimiento */
    }
}