#wrapper {
    width: 100vw;
    position: relative;
    overflow: hidden;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 0, 0);
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
}

.redRGB {
    background-image: radial-gradient(in oklch circle at center, rgba(255, 0, 0, 1) 0%, transparent 70%);
}

.greenRGB {
    background-image: radial-gradient(in oklch circle at center, rgba(0, 255, 0, 1) 0%, transparent 70%);
}

.blueRGB {
    background-image: radial-gradient(in oklch circle at center, rgba(0, 0, 255, 1) 0%, transparent 70%);
}

.whiteRGB {
    background-image: radial-gradient(in oklch circle at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 60%);
}

.inner {
    height: 70%;
    aspect-ratio: 1 /1;
}

#outer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90%;
    aspect-ratio: 1 / 1;

}

#corona {
    position: absolute;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    mix-blend-mode: plus-lighter;
    filter: blur(25px);

}

#pinhole {
    background-color: rgba(0, 0, 0, 1);
    width: 3px;
    height: 3px;
    border-radius: 50%;

}

#white {
    height: 250px;
    opacity: 1;
    
    animation: pulse-white 3s linear infinite;
    filter: blur(30px);
}

#red {
    position: absolute;
    left: 0;
    mix-blend-mode: screen;
    transform-origin: calc(50% + 21.43%) 50%;

}

#green {
    right: 0;
    position: absolute;
    mix-blend-mode: screen;
    transform-origin: calc(50% - 21.43%) 50%;
}

#blue {
    position: absolute;
    bottom: 0;
    mix-blend-mode: screen;
    transform-origin: 50% calc(50% - 21.43%)
}

.spin-wrap {
    position: absolute;
    height: 70%;
    aspect-ratio: 1 / 1;
    mix-blend-mode: screen;
    animation: spin 3s linear infinite;
}

#red-spin {
    left: 0;
    transform-origin: calc(50% + 21.43%) 50%;
}

#green-spin {
    right: 0;
    transform-origin: calc(50% - 21.43%) 50%;
}

#blue-spin {
    bottom: 0;
    transform-origin: 50% calc(50% - 21.43%);
}

/* remove position/mix-blend-mode from the inner IDs — they're now plain containers */
#red,
#green,
#blue {
    position: static;
    mix-blend-mode: normal;
}

.pulse-wrap-red {
    animation: pulse-red 1.4s ease-in-out infinite;
    width: 100%;
    height: 100%;
}

.pulse-wrap-green {
    animation: pulse-green 1.4s ease-in-out infinite;
    width: 90%;
    height: 100%;
}

.pulse-wrap-blue {
    animation: pulse-blue 1.4s ease-in-out infinite;
    width: 100%;
    height: 100%;
}

.center {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

#red.pulse-wrap-red {
    animation-delay: 0.4s;
}

#green.pulse-wrap-green {
    animation-delay: 0s;
}

#blue.pulse-wrap-blue {
    animation-delay: 0.8s;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.8);
    }
}

@keyframes pulse-red {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.8);
    }
}

@keyframes pulse-green {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.8);
    }
}

@keyframes pulse-blue {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.8);
    }
}

@keyframes pulse-white {

    0%,
    100% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }
}

.hero-image-wrapper {
    position: absolute;
    padding: 0 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-image-wrapper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}