@keyframes god-rays-jumbo {
    from {
        background-position: 0% 0%, 0% 0%;
    }
    to {
        background-position: 400% 400%, 400% 400%;
    }
}

.has-god-rays {
    position: relative;
    overflow: hidden;
}


.god-rays-container {
    position: absolute;
    inset: -10px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.god-rays-jumbo {
    --ray-angle: 100deg;
    --god-rays-speed: 60s;
    --blur-amount: 10px;
    
    --stripes: repeating-linear-gradient(
        var(--ray-angle),
        #fff 0%,
        #fff 7%,
        transparent 10%,
        transparent 12%,
        #fff 16%
    );
    --stripesDark: repeating-linear-gradient(
        var(--ray-angle),
        #000 0%,
        #000 7%,
        transparent 10%,
        transparent 12%,
        #000 16%
    );
    --rainbow: repeating-linear-gradient(
        var(--ray-angle),
        #60a5fa 10%,
        #e879f9 15%,
        #60a5fa 20%,
        #5eead4 25%,
        #60a5fa 30%
    );
    
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.has-god-rays[data-god-rays-theme="light"] .god-rays-jumbo {
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 0% 0%, 0% 0%;
    filter: invert(100%);
}

.has-god-rays[data-god-rays-theme="light"] .god-rays-jumbo::after {
    background-image: var(--stripes), var(--rainbow);
}

.has-god-rays[data-god-rays-theme="dark"] .god-rays-jumbo {
    background-image: var(--stripesDark), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 0% 0%, 0% 0%;
    filter: blur(var(--blur-amount)) saturate(200%);
}

.has-god-rays[data-god-rays-theme="dark"] .god-rays-jumbo::after {
    background-image: var(--stripesDark), var(--rainbow);
}

.god-rays-jumbo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: 200%, 100%;
    background-attachment: fixed;
    mix-blend-mode: difference;
    animation: god-rays-jumbo var(--god-rays-speed) linear infinite;
}

.has-god-rays[data-god-rays-position="top-right"] .god-rays-jumbo {
    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
}

.has-god-rays[data-god-rays-position="top-left"] .god-rays-jumbo {
    mask-image: radial-gradient(ellipse at 0% 0%, black 40%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 0% 0%, black 40%, transparent 70%);
}

.has-god-rays[data-god-rays-position="bottom-right"] .god-rays-jumbo {
    mask-image: radial-gradient(ellipse at 100% 100%, black 40%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 100% 100%, black 40%, transparent 70%);
}

.has-god-rays[data-god-rays-position="bottom-left"] .god-rays-jumbo {
    mask-image: radial-gradient(ellipse at 0% 100%, black 40%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 0% 100%, black 40%, transparent 70%);
}

.has-god-rays[data-god-rays-position="center"] .god-rays-jumbo {
    mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 70%);
}

.has-god-rays > .elementor-container {
    position: relative;
    z-index: 1;
}