/* ==========================================================================
   OrbitOS Motion (H209B)
   One motion layer for the whole OS, loaded last. Everything that moves is
   wrapped in prefers-reduced-motion: no-preference and prefixed with
   :root:not(.no-animations) body:not(.no-animations), so the "Disable
   Animations" setting still switches it all off even where these rules
   need !important to beat inline styles.
   ========================================================================== */

:root {
    --os-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --os-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --os-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Shared keyframes used by inline styles all over the apps. Redefining them here
   (the last @keyframes with a name wins) upgrades every app at once. */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(8px) scale(0.985); }
}

@keyframes textFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes osRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes osAppOpen {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes osPageIn {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
}

@keyframes osPageBack {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: none; }
}

@keyframes osAppClose {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: scale(0.97); }
}

@keyframes osPop {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: none; }
}

@keyframes osDropIn {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: none; }
}

@keyframes osToastIn {
    from { opacity: 0; transform: translate(-50%, -16px) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes helpFire {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); background-color: color-mix(in srgb, var(--hue, #3b82f6) 45%, transparent); }
    100% { transform: scale(1); }
}

@keyframes osBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@keyframes osLockPromptIn {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: no-preference) {

    /* ---------- Full-screen apps, modals and pickers ---------- */

    /* Apps open with one short fade and zoom, and nothing else moving on top.
       Only opacity and transform change, so it runs on the GPU and stays smooth
       even while the app is still drawing its first screen. */
    :root:not(.no-animations) body:not(.no-animations) .fullscreen-app:not([style*="fadeOut"]):not(#reset-modal) {
        animation-name: osAppOpen !important;
        animation-duration: 0.22s !important;
        animation-timing-function: var(--os-ease) !important;
        animation-fill-mode: both !important;
        animation-delay: 0s !important;
    }

    :root:not(.no-animations) body:not(.no-animations) .fullscreen-app[style*="fadeOut"] {
        animation-name: osAppClose !important;
        animation-duration: 0.2s !important;
        animation-timing-function: var(--os-ease-in) !important;
        animation-fill-mode: forwards !important;
        pointer-events: none !important;
    }

    /* The music player is shown and hidden instead of rebuilt, so it gets classes. */
    :root:not(.no-animations) body:not(.no-animations) #audius-player-modal.os-closing {
        animation-name: osAppClose !important;
        animation-duration: 0.2s !important;
        animation-timing-function: var(--os-ease-in) !important;
        pointer-events: none !important;
    }

    /* In-app page changes (Store details and back). */
    :root:not(.no-animations) body:not(.no-animations) .os-page-forward {
        animation: osPageIn 0.26s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) .os-page-back {
        animation: osPageBack 0.26s var(--os-ease) both;
    }

    /* Expanding sections (release notes, news stories). */
    :root:not(.no-animations) body:not(.no-animations) :is(.sw-history-content, .news-content) {
        animation: osRise 0.28s var(--os-ease) both !important;
    }

    :root:not(.no-animations) body:not(.no-animations) .sw-history-chevron {
        transition: transform 0.3s var(--os-spring) !important;
    }

    /* ---------- Terminal ---------- */

    /* Buttons press in when tapped. Only buttons: cards and panels stay still. */
    :root:not(.no-animations) body:not(.no-animations) :is(.ok-btn, .ok-round-btn, .ok-sheet-btn, .store-btn, .qp-toggle, .qp-power, .launcher-app, .games-btn, .settings-v3 .modern-btn, .acct-color) {
        transition: transform 0.14s var(--os-ease), background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    }

    :root:not(.no-animations) body:not(.no-animations) :is(.ok-btn, .ok-round-btn, .ok-sheet-btn, .store-btn, .qp-toggle, .qp-power, .games-btn, .settings-v3 .modern-btn, .acct-color):active:not(:disabled) {
        transform: scale(0.95);
    }

    :root:not(.no-animations) body:not(.no-animations) .launcher-app:active .launcher-app-icon,
    :root:not(.no-animations) body:not(.no-animations) .qp-shortcut:active span {
        transform: scale(0.9);
    }

    :root:not(.no-animations) body:not(.no-animations) :is(.launcher-app-icon, .qp-shortcut span) {
        transition: transform 0.14s var(--os-ease);
    }

    /* Details that open under a row (Storage, release notes). */
    :root:not(.no-animations) body:not(.no-animations) #storage-fullscreen .storage-item-detail {
        animation: osRise 0.24s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) #storage-fullscreen .storage-chev {
        transition: transform 0.25s var(--os-ease);
    }

    /* Home screen chips (Help, Store, Settings...) and command output. */
    :root:not(.no-animations) body:not(.no-animations) .output .home-chip {
        transition: transform 0.16s var(--os-ease), opacity 0.16s ease;
    }

    :root:not(.no-animations) body:not(.no-animations) .output .home-chip:active {
        transform: scale(0.92);
        opacity: 0.8;
    }

    /* Lines inside an answer (like Help) rise in one after another. */
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(-n+14) {
        animation: textFadeIn 0.32s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(2) { animation-delay: 0.03s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(3) { animation-delay: 0.06s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(4) { animation-delay: 0.09s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(5) { animation-delay: 0.12s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(6) { animation-delay: 0.15s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(7) { animation-delay: 0.18s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(8) { animation-delay: 0.21s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(9) { animation-delay: 0.24s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(10) { animation-delay: 0.27s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(11) { animation-delay: 0.3s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(12) { animation-delay: 0.33s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(13) { animation-delay: 0.36s; }
    :root:not(.no-animations) body:not(.no-animations) .output > div:not(.home-hello) > :nth-child(14) { animation-delay: 0.39s; }

    /* Help (H212B): the card's groups rise in turn, open and close smoothly,
       and rows cascade in each time a group opens. */
    :root:not(.no-animations) body:not(.no-animations) .output .help-mark {
        animation: osPop 0.42s var(--os-spring) both;
    }

    :root:not(.no-animations) body:not(.no-animations) .output .help-group {
        animation: osRise 0.36s var(--os-ease) both;
        animation-delay: calc(0.06s + var(--i, 0) * 0.04s);
        transition: border-color 0.25s ease;
    }

    :root:not(.no-animations) body:not(.no-animations) .output .help-foot {
        animation: textFadeIn 0.32s var(--os-ease) 0.3s both;
    }

    :root:not(.no-animations) body:not(.no-animations) .output .help-group-body {
        transition: grid-template-rows 0.32s var(--os-ease);
    }

    :root:not(.no-animations) body:not(.no-animations) .output .help-group-inner {
        transition: padding 0.32s var(--os-ease);
    }

    :root:not(.no-animations) body:not(.no-animations) .output .help-chev {
        transition: transform 0.3s var(--os-spring);
    }

    :root:not(.no-animations) body:not(.no-animations) .output .help-group.is-open :is(.help-row, .help-chip) {
        animation: osRise 0.28s var(--os-ease) both;
        animation-delay: calc(var(--r, 0) * 0.018s);
    }

    :root:not(.no-animations) body:not(.no-animations) .output :is(.help-row, .help-chip, .help-group-head, .help-pill) {
        transition: transform 0.16s var(--os-ease), background-color 0.16s ease;
    }

    :root:not(.no-animations) body:not(.no-animations) .output :is(.help-row, .help-group-head):active {
        transform: scale(0.98);
    }

    :root:not(.no-animations) body:not(.no-animations) .output :is(.help-chip, .help-pill):active {
        transform: scale(0.92);
    }

    :root:not(.no-animations) body:not(.no-animations) .output .help-row.is-fired .help-go,
    :root:not(.no-animations) body:not(.no-animations) .output .help-chip.is-fired {
        animation: helpFire 0.42s var(--os-spring);
    }

    :root:not(.no-animations) body:not(.no-animations) .output .help-empty > svg {
        animation: osPop 0.4s var(--os-spring) both;
    }

    :root:not(.no-animations) body.new-design:not(.no-animations) .output > * {
        animation: textFadeIn 0.26s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) .terminal {
        animation-duration: 0.35s !important;
        animation-delay: 0s !important;
        animation-timing-function: var(--os-ease) !important;
    }

    :root:not(.no-animations) body.new-design:not(.no-animations) #command-input-area {
        animation: osRise 0.45s 0.08s var(--os-ease) both;
    }

    /* ---------- Status bar ---------- */

    :root:not(.no-animations) body:not(.no-animations) #status-bar[style*="flex"] {
        animation: osDropIn 0.38s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) :is(.status-launcher-pill, .status-battery-pill, .status-now-playing-pill) {
        transition: transform 0.25s var(--os-spring), background-color 0.2s ease, opacity 0.2s ease !important;
    }

    :root:not(.no-animations) body:not(.no-animations) #status-now-playing[style*="flex"] {
        animation: osPop 0.3s var(--os-spring) both;
    }

    /* ---------- Boot and lock screen ---------- */

    :root:not(.no-animations) body:not(.no-animations) #boot-screen .boot-title {
        animation: osPop 0.5s var(--os-spring) both;
    }

    :root:not(.no-animations) body:not(.no-animations) #boot-screen :is(.boot-loader, .boot-footer) {
        animation: osRise 0.5s 0.12s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) #lock-screen[style*="flex"] #lock-time {
        animation: osRise 0.5s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) #lock-screen[style*="flex"] :is(#lock-date, .lock-status-bar) {
        animation: osRise 0.5s 0.06s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) #lock-screen[style*="flex"] #password-container {
        animation: osRise 0.5s 0.14s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) #lock-screen[style*="flex"] #lock-welcome {
        animation: osLockPromptIn 0.5s 0.14s var(--os-ease) both, osBreathe 2.8s 1s ease-in-out infinite;
    }

    /* ---------- Controls ---------- */

    :root:not(.no-animations) body:not(.no-animations) .switch-thumb {
        transition: transform 0.32s var(--os-spring), background-color 0.2s ease !important;
    }

    :root:not(.no-animations) body:not(.no-animations) .switch-track {
        transition: background-color 0.25s ease !important;
    }

    :root:not(.no-animations) body:not(.no-animations) :is(.cmd-card, .dropdown-item, .cmd-suggestion, .news-item, .theme-card) {
        transition: transform 0.22s var(--os-ease), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.22s ease;
    }



    /* These views build their rows after the app opens, so the initial app
       cascade above has already finished by the time their content arrives. */
    :root:not(.no-animations) body:not(.no-animations) :is(
        #audius-player-modal .om-hero,
        #audius-player-modal .om-row,
        #weather-fullscreen .wx-hero,
        #weather-fullscreen .wx-stats,
        #notes-fullscreen .notesui-card,
        #store-fullscreen .store-row,
        #store-fullscreen .store-featured,
        #store-fullscreen .store-hero,
        #calendar-fullscreen .calendar-day-cell,
        #calendar-fullscreen .calendar-event-item,
        #rss-fullscreen .rss-article-card,
        #rss-fullscreen .rss-feed-row,
        #wiki-fullscreen .wiki-fav-row,
        #news-fullscreen .news-open,
        #calc-fullscreen .calc-history-item,
        #benchmark-fullscreen .benchmark-history-card
    ) {
        animation: osRise 0.3s var(--os-ease) backwards;
    }

    /* Secondary views are rebuilt in place rather than opening a new window. */
    :root:not(.no-animations) body:not(.no-animations) :is(
        #notes-fullscreen .notes-editor-meta,
        #notes-fullscreen #notesui-title-input,
        #notes-fullscreen #notesui-content-input,
        #wiki-fullscreen .wiki-article-rendered-body,
        #news-fullscreen .news-article,
        #audius-player-modal .om-empty
    ) { animation: osRise 0.28s var(--os-ease) backwards; }

    :root:not(.no-animations) body:not(.no-animations) #audius-player-modal.om-has-track:not(.om-np-open) .om-player {
        animation: osRise 0.3s var(--os-ease) backwards;
    }

    :root:not(.no-animations) body:not(.no-animations) :is(
        .fullscreen-app .audius-dropdown-menu[style*="block"],
        .fullscreen-app .audius-dropdown-menu[style*="flex"],
        #audius-player-modal .om-menu[style*="flex"]
    ) {
        transform-origin: top right;
        animation: osPop 0.2s var(--os-spring) backwards;
    }

    :root:not(.no-animations) body:not(.no-animations) :is(
        .settings-row, .ok-app .ok-row, #store-fullscreen .store-row,
        #audius-player-modal .om-row, #notes-fullscreen .notesui-card,
        .ok-sheet-btn, .ok-round-btn, .ok-btn, .ok-chip,
        .settings-select, .notes-icon-btn,
        #audius-player-modal :is(.om-tab, .om-icon-btn, .om-pill-btn),
        #store-fullscreen :is(.store-chip, .store-btn, .store-round-btn)
    ) {
        transition: transform 0.2s var(--os-ease), background-color 0.2s ease, box-shadow 0.2s ease;
    }



    /* Pulse security patch page: the shield pops in, then the fixes rise one by one. */
    :root:not(.no-animations) body:not(.no-animations) #pulse-fullscreen .pulse-patch-hero .ok-hero-icon {
        animation: osPop 0.42s var(--os-spring) 0.1s both;
    }

    :root:not(.no-animations) body:not(.no-animations) #pulse-fullscreen .pulse-patch-row {
        animation: osRise 0.32s var(--os-ease) both;
    }

    :root:not(.no-animations) body:not(.no-animations) #pulse-fullscreen .pulse-patch-row:nth-child(2) { animation-delay: 0.04s; }
    :root:not(.no-animations) body:not(.no-animations) #pulse-fullscreen .pulse-patch-row:nth-child(3) { animation-delay: 0.08s; }
    :root:not(.no-animations) body:not(.no-animations) #pulse-fullscreen .pulse-patch-row:nth-child(4) { animation-delay: 0.12s; }
    :root:not(.no-animations) body:not(.no-animations) #pulse-fullscreen .pulse-patch-row:nth-child(5) { animation-delay: 0.16s; }
    :root:not(.no-animations) body:not(.no-animations) #pulse-fullscreen .pulse-patch-row:nth-child(6) { animation-delay: 0.2s; }
    :root:not(.no-animations) body:not(.no-animations) #pulse-fullscreen .pulse-patch-row:nth-child(n+7) { animation-delay: 0.24s; }

    /* Toast notifications keep their horizontal centering while animating. */
    :root:not(.no-animations) body:not(.no-animations) #orbitos-toast-notification {
        animation: osToastIn 0.4s var(--os-spring) both !important;
    }
}

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

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    :root:not(.no-animations) body:not(.no-animations) :is(.cmd-card, .news-item, .theme-card):hover {
        transform: translateY(-2px);
    }
}