/* Countdown motion (data-motion on the layer, .tick on the numeral, the
   sticker or the ready line) and the way a numeral leaves (data-exit,
   .out added by countdown.js at 60% of the tick). Durations follow the
   tick: entrance 45%, exit 40%, so a slow count breathes and a fast one
   snaps. Every keyframe below is decorative; see countdown.css. */

#layer-countdown .tick { animation-duration: calc(var(--tick-ms, 1000ms) * .45); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
#layer-countdown .tick.out { animation-duration: calc(var(--tick-ms, 1000ms) * .4); animation-fill-mode: forwards; animation-timing-function: ease-in; }

/* Entrances. The default, pop, is the 0.1 look. */
#layer-countdown[data-motion="pop"] .tick { animation-name: count-pop; }
@keyframes count-pop { 0% { transform: scale(1.6); opacity: 0; } 45% { transform: scale(1); opacity: 1; } 100% { transform: scale(.94); opacity: 1; } }
#layer-countdown[data-motion="grow"] .tick { animation-name: count-grow; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@keyframes count-grow { 0% { transform: scale(.2); opacity: 0; } 55% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
#layer-countdown[data-motion="bounce"] .tick { animation-name: count-bounce; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes count-bounce { 0% { transform: translateY(-40vh) scale(.6); opacity: 0; } 45% { transform: translateY(0) scale(1.1); opacity: 1; } 70% { transform: translateY(-6vh) scale(1); } 100% { transform: translateY(0) scale(1); } }
#layer-countdown[data-motion="drop"] .tick { animation-name: count-drop; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes count-drop { 0% { transform: translateY(-60vh) scale(1.3); opacity: 0; } 60% { transform: translateY(2vh) scale(.92); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
#layer-countdown[data-motion="flip"] .tick { animation-name: count-flip; transform-origin: 50% 50%; }
@keyframes count-flip { 0% { transform: perspective(60vh) rotateX(-95deg) scale(.9); opacity: 0; } 60% { transform: perspective(60vh) rotateX(12deg) scale(1.02); opacity: 1; } 100% { transform: perspective(60vh) rotateX(0) scale(1); } }
#layer-countdown[data-motion="spin"] .tick { animation-name: count-spin; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@keyframes count-spin { 0% { transform: rotate(-200deg) scale(.1); opacity: 0; } 100% { transform: rotate(0) scale(1); opacity: 1; } }
#layer-countdown[data-motion="blur"] .tick { animation-name: count-blur; animation-timing-function: ease-out; }
@keyframes count-blur { 0% { transform: scale(1.5); opacity: 0; filter: blur(.3em); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } }
#layer-countdown[data-motion="slam"] .tick { animation-name: count-slam; animation-timing-function: cubic-bezier(.6, 0, .9, .3); }
@keyframes count-slam { 0% { transform: scale(3); opacity: 0; } 60% { transform: scale(1); opacity: 1; } 70% { transform: scale(1.06) translateY(1vh); } 85% { transform: scale(.98) translateY(-.5vh); } 100% { transform: scale(1) translateY(0); } }
#layer-countdown[data-motion="elastic"] .tick { animation-name: count-elastic; animation-timing-function: linear; }
@keyframes count-elastic { 0% { transform: scale(0); opacity: 0; } 30% { transform: scale(1.3); opacity: 1; } 50% { transform: scale(.85); } 70% { transform: scale(1.08); } 85% { transform: scale(.96); } 100% { transform: scale(1); } }
#layer-countdown[data-motion="slide"] .tick { animation-name: count-slide; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@keyframes count-slide { 0% { transform: translateX(60vw) skewX(-12deg); opacity: 0; } 100% { transform: translateX(0) skewX(0); opacity: 1; } }
#layer-countdown[data-motion="none"] .tick { animation: none; }

/* Exits, layered on the entrance's end state. */
#layer-countdown[data-exit="fade"] .tick.out { animation-name: count-out-fade; }
@keyframes count-out-fade { to { opacity: 0; } }
#layer-countdown[data-exit="shrink"] .tick.out { animation-name: count-out-shrink; }
@keyframes count-out-shrink { to { transform: scale(.3); opacity: 0; } }
#layer-countdown[data-exit="blur"] .tick.out { animation-name: count-out-blur; }
@keyframes count-out-blur { to { transform: scale(1.3); opacity: 0; filter: blur(.25em); } }
#layer-countdown[data-exit="rise"] .tick.out { animation-name: count-out-rise; }
@keyframes count-out-rise { to { transform: translateY(-30vh); opacity: 0; } }
#layer-countdown[data-exit="drop"] .tick.out { animation-name: count-out-drop; animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
@keyframes count-out-drop { to { transform: translateY(60vh) rotate(12deg); opacity: 0; } }
#layer-countdown[data-exit="spin"] .tick.out { animation-name: count-out-spin; }
@keyframes count-out-spin { to { transform: rotate(180deg) scale(0); opacity: 0; } }
#layer-countdown[data-exit="none"] .tick.out { animation: none; }

/* The last numeral holds and then everything leaves with the flash; the
   ring and the bar just sit. The Still switch removes the lot. */
#stage[data-still] #layer-countdown .tick, #stage[data-still] #layer-countdown .tick.out, #stage[data-still] #countdown-ring .sweep.go,
#stage[data-still] #countdown-bar-fill.run, #stage[data-still] #layer-countdown[data-fx="neon"] #countdown-num { animation: none !important; }