/* Keyframes and entrance choreography. Everything here is switched off for
   people who ask the system for reduced motion. */

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(14px) scale(.995); filter: blur(2px); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes palette-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.92); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes countdown { to { transform: scaleX(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes drift { to { transform: translate3d(-4%, 3%, 0) rotate(6deg) scale(1.08); } }
@keyframes twinkle { to { opacity: calc(var(--stars) * .55); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 230, 160, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(94, 230, 160, 0); } }
@keyframes shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@keyframes gradient-pan { to { background-position: 100% 50%; } }

/* Each route change remounts .page, which plays this entrance. */
.page { animation: page-in var(--t-slow) var(--ease-out) both; }

/* The top-level blocks of a view then arrive one after another. */
.page > .stack > *,
.page > .stack > .stats > *,
.page > .stack > .grid-2 > * { animation: fade-up .5s var(--ease-out) both; }
.page > .stack > *:nth-child(1) { animation-delay: .02s; }
.page > .stack > *:nth-child(2) { animation-delay: .07s; }
.page > .stack > *:nth-child(3) { animation-delay: .12s; }
.page > .stack > *:nth-child(4) { animation-delay: .17s; }
.page > .stack > *:nth-child(5) { animation-delay: .22s; }
.page > .stack > *:nth-child(n+6) { animation-delay: .26s; }
.page > .stack > .stats > *:nth-child(2), .page > .stack > .grid-2 > *:nth-child(2) { animation-delay: .1s; }
.page > .stack > .stats > *:nth-child(3), .page > .stack > .grid-2 > *:nth-child(3) { animation-delay: .15s; }
.page > .stack > .stats > *:nth-child(4), .page > .stack > .grid-2 > *:nth-child(4) { animation-delay: .2s; }
.page > .stack > .stats > *:nth-child(n+5), .page > .stack > .grid-2 > *:nth-child(n+5) { animation-delay: .24s; }

/* Grids of cards inside a view (players, giveaways, quick links) cascade too. */
.player-grid > *, .giveaway-grid > *, .quick-links > *, .task-list > *, .post-list > *, .column-body > * {
    animation: fade-up .45s var(--ease-out) both;
}
.player-grid > *:nth-child(2), .giveaway-grid > *:nth-child(2), .quick-links > *:nth-child(2), .task-list > *:nth-child(2), .post-list > *:nth-child(2), .column-body > *:nth-child(2) { animation-delay: .04s; }
.player-grid > *:nth-child(3), .giveaway-grid > *:nth-child(3), .quick-links > *:nth-child(3), .task-list > *:nth-child(3), .post-list > *:nth-child(3), .column-body > *:nth-child(3) { animation-delay: .08s; }
.player-grid > *:nth-child(4), .giveaway-grid > *:nth-child(4), .quick-links > *:nth-child(4), .task-list > *:nth-child(4), .post-list > *:nth-child(4), .column-body > *:nth-child(4) { animation-delay: .12s; }
.player-grid > *:nth-child(n+5), .giveaway-grid > *:nth-child(n+5), .quick-links > *:nth-child(n+5), .task-list > *:nth-child(n+5), .post-list > *:nth-child(n+5), .column-body > *:nth-child(n+5) { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}