@property --driftX {
        syntax: '<number>';
        initial-value: 0;
        inherits: false;
}

@keyframes xDrift {
        0% {--driftX: -.15};
        100% {--driftX: .15};
}

@property --driftY {
        syntax: '<number>';
        initial-value: 0;
        inherits: false;
}

@keyframes yDrift {
        0% {--driftY: -.15};
        100% {--driftY: .15};
}

/* Move two colored textshadows via opposing x/y offsets */
.chromatic {
        animation:
                3s xDrift infinite alternate,
                7s yDrift infinite alternate;
        text-shadow:
                calc(var(--driftX) * 1rem) calc(0px - var(--driftY) * 1rem) 1px var(--driftC1),
                calc(0px - var(--driftX) * 1rem) calc(var(--driftY) * 1rem) 1px var(--driftC2);
}

/* Use move-right, followed by alternating swing with easing functions */
@keyframes move-right {
        0% { transform: translateX(0%);}
        100% { transform: translateX(1%);}
}

@keyframes swing {
        0% { transform: translateX(1%);}
        100% { transform: translateX(-1%);}
}

.swing {
        animation:
                5s ease-in-out move-right,
                10s ease-in-out 5s swing infinite alternate;
}

@keyframes swing-tilt {
        0% {transform: rotate(0deg);}
        25% {transform: rotate(1deg);}
        50% {transform: rotate(0deg);}
        75% {transform: rotate(-1deg);}
        100% {transform: rotate(0deg);}
}

/* Synchronised with .swing */
.swing-tilt {
        animation: ease-in-out 20s swing-tilt infinite;
}

@keyframes flip {
        0% {transform: rotate(0deg);}
        25% {transform: rotate(90deg);}
        50% {transform: rotate(180deg);}
        75% {transform: rotate(270deg);}
        100% {transform: rotate(360deg);}
}

@keyframes squishy {
        0% {transform: scale(1, 1)}
        33% {transform: scale(0.99, 1.01)}
        66% {transform: scale(1.01, 0.99)}
        100% {transform: scale(1, 1)}
}

@keyframes megaSquishy {
        0% {transform: scale(1, 1)}
        33% {transform: scale(0.9, 1.1)}
        66% {transform: scale(1.1, 0.9)}
        100% {transform: scale(1, 1)}
}

@keyframes blink {
        50% {
                opacity: 50%;
        }
}