/* Shared motion: small distances, no bounce; honor system reduced-motion. */
:root{--motion-fast:180ms;--motion-panel:240ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
button,a,select,input,textarea{transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}
.video-options summary .icon:last-child{transition:transform var(--motion-panel) var(--motion-ease)}
.video-options[open] summary .icon:last-child{transform:rotate(180deg)}
.video-options[open]:not([data-restored]) .video-options-panel{animation:panel-arrive var(--motion-panel) var(--motion-ease) both;transform-origin:bottom left}
dialog[open]{animation:dialog-arrive var(--motion-panel) var(--motion-ease) both}
dialog[open]::backdrop{animation:backdrop-arrive var(--motion-panel) ease both}
.progress i{transition:width 350ms var(--motion-ease)}
.recent-cover img{transition:transform 400ms var(--motion-ease)}
@keyframes panel-arrive{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}