@keyframes bounce {
    0%      { transform: scaleY(1); }
    50%     { transform: scaleY(0.95); }
    100%    { transform: scaleY(1); }
}

@keyframes jump {
    0%      { transform: translateY(0%) scaleY(1); }
    5%      { transform: translateY(0%) scaleY(1); }
    10%      { transform: translateY(0%) scaleY(0.8); }
    50%     { transform: translateY(-70%) scaleY(1); }
    90%     { transform: translateY(0%) scaleY(0.8); }
    95%    { transform: translateY(0%) scaleY(1); }
    100%    { transform: translateY(0%) scaleY(1); }
}

@keyframes spin {
    0%      { transform: scaleX(1) }
    50%     { transform: scaleX(-1) }
    100%    { transform: scaleX(1) }
}

@keyframes move-backdrop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-75%);}
}

@keyframes raise-curtain {
    0%      { transform: translateY(0%); }
    100%      { transform: translateY(-100%); }
}

@keyframes open-programme {
    0%      { transform: translateY(0%) scale(1.0, 1.0)}
    100%      { transform: translateY(-110%) scale(1.3, 1.3)}
}


@keyframes close-programme {
    0%      { transform: translateY(-110%) scale(1.3, 1.3)}
    100%      { transform: translateY(0%) scale(1.0, 1.0)}
}

@keyframes move-scene-1 {
    0%          { transform: translateX(0%) }
    33.33%      { transform: translateX(-100%);
                  opacity: 1 }
    33.34%      { transform: translateX(-100%);
                  opacity: 0 }
    33.35%      { transform: translateX(100%) }
    66.66%      { transform: translateX(100%);
                  opacity: 1 }
    100%        { transform: translateX(0%) }
}

@keyframes move-scene-2 {
    0%          { transform: translateX(0%) }
    66.66%      { transform: translateX(-200%);
                  opacity: 1 }
    66.67%      { opacity: 0 }
    66.68%      { transform: translateX(0%) }
    100%        { opacity: 1 }
}

@keyframes move-scene-3 {
    0%          { transform: translateX(-100%) }
    66.66%      { transform: translateX(-300%);
                  opacity: 1 }
    66.67%      { opacity: 0 }
    66.68%      { transform: translateX(-100%) }
    100%        { opacity: 1 }
}

/* Misnomers, but I'm too lazy to change them after changing course. */
.out-of-view-1 { animation: move-scene-1 30s linear forwards infinite; }
.out-of-view-2 { animation: move-scene-2 30s linear none infinite; }
.out-of-view-3 { animation: move-scene-3 30s linear 10s forwards infinite; }

@keyframes timer {
    0%      { opacity: 0 }
    100%      { opacity: 1 }
}

.timer { animation: timer 10s linear 10s forwards infinite }


.character { animation: bounce 1s infinite; }

.move-backdrop {animation: move-backdrop 30s linear none infinite;}

.raise-curtain { animation: raise-curtain 3s ease-in forwards; }

.open-programme { animation: open-programme 0.3s ease-in forwards; opacity: 100% !important; }

.close-programme { animation: close-programme 0.2s ease-in forwards; }