/* Emil Kowalski: restrained entrances, fast feedback, interruptible controls. */
:root{--ease-out-ui:cubic-bezier(.23,1,.32,1)}
.button,.pair-pill,.social,.meme-filters button,.meme-arrows button,.menu-toggle{transition:transform 160ms var(--ease-out-ui),background-color 160ms ease,color 160ms ease}
.button:active,.pair-pill:active,.social:active,.meme-filters button:active,.meme-arrows button:active,.menu-toggle:active{transform:scale(.97)}
.button .arrow{transition:transform 180ms var(--ease-out-ui)}
.meme-card>img{transition:transform 240ms var(--ease-out-ui)}
.meme-card>span{transition:transform 180ms var(--ease-out-ui)}
@media(hover:hover) and (pointer:fine){.button:hover .arrow{transform:translateX(3px)}}
@media(hover:none){.button:hover{transform:none}.meme-card:hover>img{transform:none}.meme-card:hover>span{transform:translateY(100%)}}
dialog{opacity:0;transform:translateY(6px) scale(.98);transition:opacity 180ms var(--ease-out-ui),transform 220ms var(--ease-out-ui),overlay 220ms allow-discrete,display 220ms allow-discrete}
dialog[open]{opacity:1;transform:none}
dialog::backdrop{opacity:0;transition:opacity 180ms ease,overlay 220ms allow-discrete,display 220ms allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(6px) scale(.98)}dialog[open]::backdrop{opacity:0}}
html[data-input="keyboard"]{scroll-behavior:auto}
html[data-input="keyboard"] *,html[data-input="keyboard"] *::before,html[data-input="keyboard"] *::after,html[data-input="keyboard"] dialog::backdrop{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}dialog,dialog[open]{transform:none}.button:active,.pair-pill:active,.social:active,.meme-filters button:active,.meme-arrows button:active,.menu-toggle:active{transform:none}}