/* Site motion. Short, functional transitions: things arrive and leave rather
   than blinking in and out. Everything here is disabled for reduced motion. */

@keyframes motion-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes motion-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes motion-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes motion-pop-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(6px) scale(0.985); }
}

@keyframes motion-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes motion-slide-in {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: none; }
}

/* ---- modals: backdrop fades, panel pops ---- */

/* The backdrop runs as long as the panel: b.motion.js ends the transition on
   the backdrop's own animationend, which would otherwise cut the panel short. */
.settings.is-entering,
.games.is-entering {
    animation: motion-fade-in 240ms ease-out both;
}

.settings.is-leaving,
.games.is-leaving {
    animation: motion-fade-out 160ms ease-in both;
}

.settings.is-entering .settings-panel,
.games.is-entering .games-panel {
    animation: motion-pop-in 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.settings.is-leaving .settings-panel,
.games.is-leaving .games-panel {
    animation: motion-pop-out 160ms ease-in both;
}

/* ---- browser overlay ---- */

.browser.is-entering {
    animation: motion-pop-in 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.browser.is-leaving {
    animation: motion-pop-out 170ms ease-in both;
}

/* ---- homepage: the column rises in, one piece after another ---- */

.homecontent > h1,
.homecontent > .search-shell,
.homecontent > .home-shortcuts {
    animation: motion-rise 420ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.homecontent > .search-shell {
    animation-delay: 60ms;
}

.homecontent > .home-shortcuts {
    animation-delay: 120ms;
}

.home-shortcut {
    transition: background-color 150ms ease, transform 150ms ease;
}

.home-shortcut:hover {
    transform: translateY(-2px);
}

.home-shortcut:active {
    transform: translateY(0) scale(0.97);
}

/* ---- browser tabs: only a tab's first render animates, since the list is
   rebuilt on every url change ---- */

.browser-tab.is-new {
    animation: motion-slide-in 180ms ease-out both;
}

/* ---- games grid: cards fade up in a short stagger ---- */

/* `backwards`, not `both`: a filled-forwards transform would override the
   hover lift below for as long as the card exists. */
.games-card {
    animation: motion-rise 300ms cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
    animation-delay: calc(var(--card-index, 0) * 14ms);
    transition: border-color 140ms ease, transform 160ms ease;
}

.games-card:hover {
    transform: translateY(-3px);
}

.games-card-art img {
    animation: motion-fade-in 260ms ease-out both;
}

/* ---- settings sections cross-fade when switching ---- */

.settings-section.is-active {
    animation: motion-rise 220ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

/* The animations switch in settings. */
.no-motion *,
.no-motion *::before,
.no-motion *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
}

.no-motion .home-shortcut:hover,
.no-motion .games-card:hover {
    transform: none;
}

/* ---- dropdown menu ---- */

.dropdown-menu.is-entering {
    animation: motion-pop-in 170ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.dropdown-menu.is-leaving {
    animation: motion-fade-out 120ms ease-in both;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }

    .home-shortcut:hover,
    .games-card:hover {
        transform: none;
    }
}