/* Dock controls and theme reveal (W4). Spec §4.3. */
.site-header .motion-toggle,.site-header .theme-toggle{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#ffffff06;box-shadow:inset 0 1px 0 #ffffff24,0 0 0 1px #ffffff0d}
.site-header .motion-label,.site-header .theme-label{display:none}
.motion-icon,.theme-icon{position:relative;display:block;width:19px;height:19px}
.motion-icon svg,.theme-icon svg{position:absolute;inset:0;width:100%;height:100%}
.icon-sun,.icon-pause{opacity:1;scale:1;rotate:0deg;filter:none}
.icon-moon,.icon-play{opacity:0;scale:.6;rotate:-40deg;filter:blur(2px)}
[data-theme=light] .icon-sun,[data-motion=off] .icon-pause{opacity:0;scale:.6;rotate:40deg;filter:blur(2px)}
[data-theme=light] .icon-moon,[data-motion=off] .icon-play{opacity:1;scale:1;rotate:0deg;filter:none}
.motion-toggle:disabled{cursor:default}
.site-header .motion-toggle:active,.site-header .theme-toggle:active{scale:.94}
[data-theme=light] .site-header .motion-toggle,[data-theme=light] .site-header .theme-toggle{background:#ffffff55;box-shadow:inset 0 1px 0 #fff,0 0 0 1px #222b420a}
@media (hover:hover) and (pointer:fine){.site-header .motion-toggle:hover,.site-header .theme-toggle:hover{background:#ffffff16}
  [data-theme=light] .site-header .motion-toggle:hover,[data-theme=light] .site-header .theme-toggle:hover{background:#ffffffaa}}
@media (prefers-reduced-motion:no-preference){
  :root[data-motion=on] .site-header .motion-toggle,:root[data-motion=on] .site-header .theme-toggle{transition:background-color var(--dur-state) var(--ease-standard),scale var(--dur-release) var(--ease-spring)}
  :root[data-motion=on] .site-header .motion-toggle:active,:root[data-motion=on] .site-header .theme-toggle:active{transition:background-color var(--dur-state) var(--ease-standard),scale var(--dur-press) var(--ease-out)}
  :root[data-motion=on] .motion-icon svg,:root[data-motion=on] .theme-icon svg{transition:opacity 200ms var(--ease-out),scale var(--dur-icon) var(--ease-out),rotate var(--dur-icon) var(--ease-out),filter 200ms var(--ease-out)}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
/* Let the live page take clicks during the reveal where the engine honours it (controls.js routes them in Chromium). */
::view-transition{pointer-events:none}
/* While the circle is the transition, the page inside it is already final: no colour crossfades underneath (the button's own icon still turns). */
:root.is-theme-swapping *:not(.theme-icon>svg),:root.is-theme-swapping *::before,:root.is-theme-swapping *::after{transition:none!important}
@media (forced-colors:active){.site-header .motion-toggle,.site-header .theme-toggle{border:1px solid CanvasText}}

/* Vector controls stay monochrome on mobile, independent of emoji fonts. */
.ui-icon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle;pointer-events:none}
.film-controls .ui-icon{width:24px;height:24px}
.info-close,.reel-preview-close{display:grid;place-items:center;padding:0}