/* Moving signal follows the frame; media/content are never overlaid. */
@property --poko-border-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes poko-border-signal { to { --poko-border-angle:360deg; } }
@keyframes poko-surface-arrive { from { opacity:.85; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@keyframes poko-label-arrive { from { opacity:.75; } to { opacity:1; } }
@media(prefers-reduced-motion:no-preference) {
 html[data-border-motion="on"] :is(.panel,.schedule-dialog) {
  border-image-source:conic-gradient(from var(--poko-border-angle),var(--border) 0deg 290deg,var(--accent) 315deg,var(--bright) 330deg,var(--border) 350deg 360deg);
  border-image-slice:1;
  animation:poko-border-signal 14s linear infinite;
 }
 html[data-border-motion="on"] .topbar { animation-duration:18s; }
 html[data-border-motion="on"] .sidebar { animation-duration:22s; animation-delay:-7s; }
 html[data-border-motion="on"] .watch-stack>.panel:nth-child(2n) { animation-delay:-4s; }
 html[data-border-motion="on"] .right-rail>.panel { animation-delay:-9s; }
 html[data-page-hidden="true"] :is(.panel,.schedule-dialog) { animation-play-state:paused; }
 html[data-ui-motion="on"] :is(.button,.quiet,.topnav a,.sidebar nav a,.title-result,.calendar-day a,summary,input,textarea,select) {
  transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,box-shadow 140ms ease;
 }
 html[data-ui-motion="on"] :is(.button,.title-result):hover:not(:disabled) { background-color:var(--selected); box-shadow:inset 0 0 0 1px var(--divider); }
 html[data-ui-motion="on"] .header-menu[open]>div { animation:poko-surface-arrive 180ms ease-out both; transform-origin:top right; }
 html[data-ui-motion="on"] .view:not([hidden])>.page-heading { animation:poko-label-arrive 200ms ease-out both; }
 html[data-ui-motion="on"] .schedule-dialog[open]>.schedule-dialog-heading { animation:poko-label-arrive 180ms ease-out both; }
 html[data-ui-motion="on"] .schedule-dialog::backdrop { transition:background-color 180ms ease; }
}
/* Fullscreen video retains a static frame. */
.player:fullscreen { border-image:none!important; animation:none!important; }
.appearance-menu #motion-note { display:block; max-width:240px; padding:8px; font:11px/1.6 var(--terminal); }
@media(prefers-reduced-motion:reduce) {
 :is(.panel,.schedule-dialog) { border-image:none!important; animation:none!important; }
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}