#oiia {
    position: absolute;
    bottom: -10em;
    left: calc(50% - 5em);
    height: 10em;
    width: 10em;
}

@media (prefers-reduced-motion: no-preference) {
    .party {
        img:not(#oiia) {
            animation: random-effects 1s infinite linear,
                jitter 0.2s infinite linear,
                rotary-jitter 1s infinite linear,
                amplified-jitter 6s infinite linear,
                zoom 0.4s infinite linear;
        }

        header {
            animation: hueshift-bg 1s infinite linear;
        }

        a,
        input {
            display: inline-block;
            animation: jitter 0.2s infinite linear, hueshift-fg 1s infinite linear;
        }

        &.crazy {
            main {
                animation: random-effects 1s infinite linear,
                    jitter 0.2s infinite linear,
                    rotary-jitter 1s infinite linear,
                    amplified-jitter 6s infinite linear,
                    zoom 0.4s infinite linear;
            }
        }
    }

    #oiia {
        animation: moveOiia 15s infinite linear;

        &.crazy:not(.grow) {
            animation: moveOiia 15s infinite linear, random-effects 1s infinite linear,
                stark-rotary-jitter 1s infinite linear,
                stark-zoom 0.4s infinite linear;
        }
        &.grow:not(.disappear) {
            animation: growOiia 10s linear forwards;
            top: calc(50dvh - 5em);
        }
        &.disappear {
            animation: disappearOiia 5s linear forwards;
            top: calc(50dvh - 5em);
        }
    }

    #byebye {
        box-sizing: border-box;
        width: 100dvw;
        margin: 0;
        padding: 2em;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .party {
        img {
            filter: hue-rotate(50deg);
        }

        #oiia {
            bottom: -10em;
            left: calc(50% - 5em);
        }
    }
}

/* WAY 2 many keyframe defs */

@keyframes disappearOiia {
    0% {
        scale: 15;
        rotate: 0deg;
    }
    80% {
        scale: 6;
        rotate: 0deg;
    }
    100% {
        scale: 0;
        rotate: -720deg;
    }
}

@keyframes growOiia {
    0% {
        scale: 1.5;
    }
    50% {
        scale: 3;
    }
    100% {
        scale: 15;
    }
}

@keyframes moveOiia {
    0% {
        translate: 0 0;
    }

    8% {
        translate: 30dvw -100dvh;
    }

    16% {
        translate: calc(5em - 50dvw) -60dvh;
    }

    22% {
        translate: -10dvw -10em;
    }

    31% {
        translate: calc(50dvw - 5em) -100dvh;
    }

    40% {
        translate: -20dvw -10em;
    }

    46% {
        translate: calc(5em - 50dvw) -50dvh;
    }

    52% {
        translate: -30dvw -100dvh;
    }

    60% {
        translate: 0dvw -10em;
    }

    67% {
        translate: 15dvw -100dvh;
    }

    75% {
        translate: 30dvw -10em;
    }

    80% {
        translate: calc(50dvw - 5em) -50dvh;
    }

    90% {
        translate: -35dvw -100dvh;
    }

    92% {
        translate: calc(5em - 50dvw) -85dvh;
    }
}

@keyframes hueshift-fg {

    100%,
    0% {
        color: red;
    }

    25% {
        color: yellow;
    }

    50% {
        color: green;
    }

    75% {
        color: blue;
    }
}

@keyframes hueshift-bg {

    100%,
    0% {
        background-color: red;
    }

    25% {
        background-color: yellow;
    }

    50% {
        background-color: green;
    }

    75% {
        background-color: blue;
    }
}

@keyframes random-effects {
    0% {
        filter: invert() hue-rotate(0deg);
    }

    10% {
        filter: sepia() hue-rotate(36deg);
    }

    20% {
        filter: saturate(10) hue-rotate(72deg);
    }

    30% {
        filter: grayscale() hue-rotate(108deg);
    }

    40% {
        filter: opacity(0.5) hue-rotate(144deg);
    }

    50% {
        filter: brightness(10) hue-rotate(180deg);
    }

    60% {
        filter: opacity(0.2) hue-rotate(216deg);
    }

    70% {
        filter: grayscale() hue-rotate(252deg);
    }

    80% {
        filter: brightness(0.5) hue-rotate(288deg);
    }

    90% {
        filter: saturate(2) hue-rotate(324deg);
    }

    100% {
        filter: sepia() hue-rotate(360deg);
    }
}

@keyframes jitter {

    0%,
    100% {
        translate: 2px -1px;
    }

    25% {
        translate: -2px 2px;
    }

    50% {
        translate: 1px -2px;
    }

    75% {
        translate: -1px 3px;
    }
}

@keyframes amplified-jitter {

    0%,
    100% {
        transform: translate(5px, -3px);
    }

    25% {
        transform: translate(-5px, 5px);
    }

    50% {
        transform: translate(3px, -5px);
    }

    75% {
        transform: translate(-3px, 7px);
    }
}

@keyframes rotary-jitter {

    0%,
    100% {
        rotate: -1deg;
    }

    10% {
        rotate: 1deg;
    }

    30% {
        rotate: -2deg;
    }

    40% {
        rotate: 2deg;
    }

    50% {
        rotate: 0deg;
    }

    60% {
        rotate: 1.5deg;
    }

    80% {
        rotate: -0.5deg;
    }
}

@keyframes zoom {

    0%,
    100% {
        scale: 1;
    }

    45%,
    55% {
        scale: 1.1;
    }

    50% {
        scale: 0.8;
    }
}

@keyframes stark-zoom {

    0%,
    100% {
        scale: 1;
    }

    45%,
    55% {
        scale: 1.5;
    }

    50% {
        scale: 0.8;
    }
}

@keyframes stark-rotary-jitter {

    0%,
    100% {
        rotate: -3deg;
    }

    10% {
        rotate: 3deg;
    }

    30% {
        rotate: -5deg;
    }

    40% {
        rotate: 3deg;
    }

    50% {
        rotate: 0deg;
    }

    60% {
        rotate: 4deg;
    }

    80% {
        rotate: -1.5deg;
    }
}