@property --blink-opacity {
syntax: "<number>";
inherits: false;
initial-value: 1;
}

@keyframes blink-animation {
    0%,
    100% {
        opacity: var(--blink-opacity, 1);
    }
    50% {
        opacity: 0;
    }
}



@keyframes smoothBg {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 350% 50%, 350% 50%;
    }
}

.sun-light {
    width: 1000px;
    height: 300px;
    position: absolute;
    left: 0;

    filter: blur(16px);
    opacity: 0.15;
    z-index: -2;
}

.lighting {
    rotate: -70deg;
    width: 100%;
    height: 1000px;
    min-height: 100vh;
    position: relative;
    top: 0;
    left: -300px;
    display: flex;
    place-content: center;
    place-items: center;
    --stripes: repeating-linear-gradient(
        100deg,
        var(--stripe-color) 0%,
        var(--stripe-color) 7%,
        transparent 10%,
        transparent 12%,
        var(--stripe-color) 16%
    );

    --rainbow: repeating-linear-gradient(
        100deg,
        #d8d8d8 10%,
        #919090 15%,
        #d6caca 20%,
        #bababa 25%,
        #7e7c7c 30%
    );
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;

    filter: blur(10px) invert(100%);

    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--stripes), var(--rainbow);
        background-size: 200%, 100%;
        animation: smoothBg 60s linear infinite;
        background-attachment: fixed;
        mix-blend-mode: difference;
    }
}