:root { --boing-size: 1vh; --animated-rotation: -3deg; } @keyframes wip_fade_in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade_in { from { opacity: 0; } to { opacity: 1; } } @keyframes wip_fade_in_secondary { from { opacity: 0; } to { opacity: .5; } } @keyframes wip_grow { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(.6); } } @keyframes slide_from_top { from { opacity: 0; transform: translateY(calc(var(--mp) * -2)); } to { opacity: 1; transform: translateY(calc(var(--mp) * 0)); } } @keyframes slide_from_bottom { from { transform: translateY(calc(var(--mp) * 10)); } to { transform: translateY(calc(var(--mp) * 0)); } } @keyframes slide_from_left { from { opacity: 0; transform: translateX(calc(var(--mp) * 3)); } to { opacity: 1; transform: translateX(calc(var(--mp) * 1)); } } @keyframes slide_from_right { from { opacity: 0; transform: translateX(calc(var(--mp) * 1)); } to { opacity: 1; transform: translateX(calc(var(--mp) * 3)); } } @keyframes heart { from { -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(130%); backdrop-filter: blur(16px) saturate(160%) brightness(130%); } 50% { -webkit-backdrop-filter: blur(8px) saturate(160%) brightness(130%) grayscale(25%); backdrop-filter: blur(8px) saturate(160%) brightness(130%) grayscale(25%); } to { -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(130%); backdrop-filter: blur(16px) saturate(160%) brightness(130%); } } @keyframes beat { from { filter: blur(5px) saturate(160%) brightness(130%); transform: scale(.95); } 50% { filter: blur(0px) saturate(160%) brightness(130%) grayscale(25%); transform: scale(1); } to { filter: blur(5px) saturate(160%) brightness(130%); transform: scale(.95); } } @keyframes from_the_abyss { 0% { opacity: 0; filter: blur(10px) brightness(0%); transform: scale(.75) rotateY(5deg) rotateX(5deg) rotateZ(5deg); mix-blend-mode: screen !important; } 90% { opacity: 1; mix-blend-mode: screen !important; } 100% { filter: none; opacity: 1; mix-blend-mode: normal !important; transform: none; } } @keyframes float_on_the_sea { 0% { opacity: .5; transform: scale(.975) rotateY(5deg) rotateX(5deg); mix-blend-mode: color-burn !important; } 50% { opacity: 1; transform: scale(1) rotateY(0deg) rotateX(0deg); } 100% { opacity: .5; transform: scale(.975) rotateY(-5deg) rotateX(-5deg); mix-blend-mode: color-burn !important; } } @keyframes boing { from { transform: translateY(0vh); } 50% { opacity: 1; transform: translateY(calc(var(--boing-size) * -1)) rotate(calc(var(--animated-rotation) * 1)) scale(1.1); } to { opacity: 0; transform: translateY(25vh); } } @keyframes bounce { from { opacity: .5; transform: translateY(0%); } to { opacity: 1; transform: translateY(25%); } } @keyframes pulse { from { opacity: .25; } to { opacity: 1; } } @keyframes bounce_local { 0% { transform: scaleX(1) scaleY(1); } 100% { filter:brightness(125%); transform: scaleX(1.2) scaleY(.8); } } @keyframes smash_and_jump { 0% { transform: scaleX(1) scaleY(1); } 33% { transform: scaleX(1.75) scaleY(.75); } 100% { transform: scaleX(1.25) scaleY(1.5) skew(-3deg,-10deg) translateY(-50%); } } @keyframes pop_from_bottom { from { transform: translateY(100%); } 95% { transform: translateY(-10%); ; } to { transform: translateY(0%); } } @keyframes centered_fade_in { from { opacity: 0; transform: translate(-50%, 500%); } to { opacity: 1; transform: translate(-50%, 0%); } } @keyframes swipe_pulse { 0% { opacity: 0; transform: rotateZ(-90deg); } 10% { opacity: .5; } 90% { opacity: .5; } 100% { opacity: 0; transform: rotateZ(-90deg) translateX(2vmin) scaleX(0) scaleY(.25); } } @keyframes wave { 100% { transform: rotate(30deg) translateY(-2vh); border-radius: 33%; } }