.rainbow-container > svg {
    display: block;
    width: 96vw;
    max-width: 100%;
    height: auto;
    max-height: 90vh;
    margin: 0;
}

.rainbow-slice {
    --rainbow-color: #ff0000;
    --rainbow-delay: 0ms;
    mix-blend-mode: screen;
}

.rainbow-slice:nth-of-type(2) {
    --rainbow-color: #ff7f00;
    --rainbow-delay: 120ms;
}

.rainbow-slice:nth-of-type(3) {
    --rainbow-color: #ffff00;
    --rainbow-delay: 240ms;
}

.rainbow-slice:nth-of-type(4) {
    --rainbow-color: #00ff00;
    --rainbow-delay: 360ms;
}

.rainbow-slice:nth-of-type(5) {
    --rainbow-color: #0000ff;
    --rainbow-delay: 480ms;
}

.rainbow-slice:nth-of-type(6) {
    --rainbow-color: #4b0082;
    --rainbow-delay: 600ms;
}

.rainbow-slice:nth-of-type(7) {
    --rainbow-color: #8b00ff;
    --rainbow-delay: 720ms;
}

.rainbow-slice > circle:first-child {
    opacity: 0.42;
    filter: brightness(0.55) saturate(0.75);
}

.rainbow-container.is-visible .rainbow-slice > circle:first-child {
    animation: rainbow-light-up 850ms ease-out var(--rainbow-delay) both;
}

@keyframes rainbow-light-up {
    0%, 18% {
        opacity: 0.42;
        filter: brightness(0.55) saturate(0.75)
            drop-shadow(0 0 0 var(--rainbow-color));
    }

    72% {
        opacity: 1;
        filter: brightness(1.55) saturate(1.6)
            drop-shadow(0 0 10px var(--rainbow-color))
            drop-shadow(0 0 22px var(--rainbow-color));
    }

    100% {
        opacity: 1;
        filter: brightness(1.15) saturate(1.25)
            drop-shadow(0 0 8px var(--rainbow-color));
    }
}

@media (prefers-reduced-motion: reduce) {
    .rainbow-container.is-visible .rainbow-slice > circle:first-child {
        animation: none;
        opacity: 1;
        filter: brightness(1.15) saturate(1.25)
            drop-shadow(0 0 8px var(--rainbow-color));
    }
}