.bc-spotlight[data-flickering]{
opacity: 0;
}
.bc-spotlight{
position: relative;
display: block; 
height: 100vh; 
--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; 
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; 
}
.bpros-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; 
background-attachment: fixed;
mix-blend-mode: difference;
}
[data-light] .bc-spotlight__spotlight{
background-image: var(--stripes), var(--rainbow);
filter: blur(5px) invert(100%); 
}
[data-dark] .bc-spotlight__spotlight{
background-image: var(--stripesDark), var(--rainbow);
filter: blur(5px) opacity(50%) saturate(150%); 
}
[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%; 
}
}