@keyframes colorstorm {
    0%, 100% {
        filter: hue-rotate(0deg) saturate(10);
    }

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

@keyframes backgroundgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

@keyframes colorswitch {
    0%, 100% {
        color: var(--colorswitch-color1);
    }

    50% {
        color: var(--colorswitch-color2);
    }
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes flicker {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    20% {
        opacity: 0.99
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.99;
    }

    60% {
        opacity: 0;
    }

    70% {
        opacity: 0.9;
    }

    80% {
        opacity: 0.99;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0.9;
    }
}

@keyframes scanline {
    0% {
        transform: translateY(100%);
    }
}

@keyframes grain {
    0%, 100% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-5%, -10%)
    }

    20% {
        transform: translate(-15%, 5%)
    }

    30% {
        transform: translate(7%, -25%)
    }

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

    50% {
        transform: translate(-15%, 10%)
    }

    60% {
        transform: translate(15%, 0%)
    }

    70% {
        transform: translate(0%, 15%)
    }

    80% {
        transform: translate(3%, 35%)
    }

    90% {
        transform: translate(-10%, 10%)
    }
}

@keyframes gradientflow {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes marquee {
    100% {
        transform: translateX(-100%);
    }
}

@keyframes reveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* Kickstart: Der Monitor schaltet sich ein - erst ein Strich, dann das ganze Bild */
@keyframes crtboot {
    0% {
        opacity: 0;
        transform: scale(1.3, 0.002);
        filter: brightness(6);
    }

    35% {
        opacity: 1;
        transform: scale(1.3, 0.002);
        filter: brightness(6);
    }

    60% {
        transform: scale(1, 1);
        filter: brightness(3);
    }

    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* Kickstart: Die Diskette schwebt vor dem Laufwerk und rutscht dann hinein */
@keyframes diskinsert {
    0%, 10% {
        opacity: 0;
        transform: translate(0, -60px) rotate(180deg) scale(0.9);
    }

    25% {
        opacity: 1;
        transform: translate(0, -10px) rotate(180deg) scale(1);
    }

    40% {
        transform: translate(0, -22px) rotate(180deg) scale(1);
    }

    55% {
        transform: translate(0, -10px) rotate(180deg) scale(1);
    }

    85%, 100% {
        opacity: 0;
        transform: translate(0, 90px) rotate(180deg) scale(0.82);
    }
}

/* Kickstart: Copper-Balken, wie sie der Amiga über den Bildschirm geschoben hat */
@keyframes copperflow {
    0%, 100% {
        transform: translateY(-15%);
    }

    50% {
        transform: translateY(15%);
    }
}

@keyframes caret {
    50% {
        opacity: 0;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}