/* Brief UI motion; playback surfaces and remote focus remain immediate. */
:root{--motion-fast:160ms;--motion-card:230ms;--motion-ease:cubic-bezier(.2,.75,.25,1)}
@keyframes soip-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes soip-card-open{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes soip-menu-open{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes soip-fade{from{opacity:0}to{opacity:1}}

/* Each opening plays once, including reopening an existing card. */
dialog[open]:not(#player-dialog){animation:soip-card-open var(--motion-card) var(--motion-ease)}
dialog[open]:not(#player-dialog)::backdrop{animation:soip-fade 180ms ease-out}
.device-profile-menu:not([hidden]),.player-subtitle-panel:not([hidden]){transform-origin:top right;animation:soip-menu-open 200ms var(--motion-ease)}
.player-toolbar:not([hidden]){animation:soip-fade var(--motion-fast) ease-out}

.profile-launcher:not([hidden]) .launcher-brand{animation:soip-reveal 360ms var(--motion-ease)}
.profile-launcher:not([hidden]) .launcher-content>h1,.profile-launcher:not([hidden]) .playlist-profiles{animation:soip-reveal 300ms var(--motion-ease)}
#home-page:not([hidden]),#library-page:not([hidden]){animation:soip-fade 220ms ease-out}
.category-tile,.channel-tile{animation:soip-reveal 220ms var(--motion-ease)}

/* Animate the avatar artwork independently from its entrance container. */
.playlist-profile-art{transition:transform 180ms var(--motion-ease)}
.playlist-profile:hover .playlist-profile-art,.playlist-profile:focus-visible .playlist-profile-art{transform:scale(1.045)}
.playlist-profile:active .playlist-profile-art{transform:scale(1.015)}
.poster-card,.continue-card,.channel-card,.category-tile,.channel-tile{transition:transform 180ms var(--motion-ease),border-color var(--motion-fast) ease}
.poster-card:hover,.poster-card:focus-visible,.continue-card:hover,.continue-card:focus-visible,.channel-card:hover,.channel-card:focus-visible{transform:translateY(-4px)}
.category-tile:hover,.category-tile:focus-visible,.channel-tile:hover,.channel-tile:focus-visible{transform:translateY(-3px)}
.dock-item{transition:transform var(--motion-fast) var(--motion-ease),color var(--motion-fast) ease}
.dock-item:hover,.dock-item:focus-visible{transform:translateY(-2px)}
.dock-item:active{transform:translateY(0) scale(.96)}
.dock-icon{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease}
.header-search,.profile-avatar,.player-icon-button,.close-dialog,.primary,.secondary{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease}

/* Both the in-app setting and the system accessibility preference are respected. */
html[data-reduce-motion=true] *::before,html[data-reduce-motion=true] *::after,html[data-reduce-motion=true] dialog::backdrop{animation:none!important;transition:none!important}
html[data-reduce-motion=true] .playlist-profile-art,
html[data-reduce-motion=true] .poster-card,html[data-reduce-motion=true] .continue-card,
html[data-reduce-motion=true] .channel-card,html[data-reduce-motion=true] .category-tile,
html[data-reduce-motion=true] .channel-tile,html[data-reduce-motion=true] .dock-item{transform:none!important}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .playlist-profile-art,.poster-card,.continue-card,.channel-card,.category-tile,.channel-tile,.dock-item{transform:none!important}
}

/* A small lift communicates entering the dock without changing its spacing. */
@keyframes soip-dock-in{
 0%{transform:translateX(-50%) scale(1)}
 65%{transform:translateX(-50%) scale(1.29)}
 100%{transform:translateX(-50%) scale(1.266)}
}
.app-dock{transform-origin:center bottom;transition:transform 180ms var(--motion-ease)}
.app-dock.is-engaged{transform:translateX(-50%) scale(1.266);animation:soip-dock-in 280ms var(--motion-ease)}
.app-dock .dock-item:focus-visible{outline:2px solid #fff;outline-offset:2px}
html[data-reduce-motion=true] .app-dock.is-engaged{animation:none;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){.app-dock.is-engaged{animation:none;transform:translateX(-50%)}}