:root {
  --motion-out: cubic-bezier(.4, 0, .7, 1);
  --motion-in: cubic-bezier(.16, 1, .3, 1);
  --motion-blur: 6px;
  --motion-departure: 420ms;
  --motion-arrival: 560ms;
}
html[data-motion-direction="home"] { --motion-departure: 340ms; --motion-arrival: 440ms; }
.book-video { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 160ms ease-in-out; }
html[data-book-active] .book-video { opacity: 1; }
.site-header, .home-navigation, .playback-toggle { transition: opacity 180ms ease; }
html[data-motion-active] .site-header,
html[data-motion-active] .home-navigation { opacity: .78; }
html[data-motion-active] .playback-toggle { opacity: 0; pointer-events: none; }
html[data-motion-active] [data-works-link] span::after { transform: scaleX(1); transform-origin: left; }
html[data-motion-active] [data-works-link] { cursor: progress; }
/* Independent top-level surfaces preserve the fixed header's containing block. */
html[data-motion] body > :is(header, main, section, .top-bar, .playback-toggle) {
  will-change: filter, opacity;
  pointer-events: none;
}
html[data-motion="leaving"] body > :is(header, main, section, .top-bar, .playback-toggle) {
  animation: page-defocus var(--motion-departure) var(--motion-out) both;
}
html[data-motion="arriving"] body > :is(header, main, section, .top-bar, .playback-toggle) {
  filter: blur(var(--motion-blur)) contrast(.97) brightness(1.016);
  opacity: .82;
}
html[data-motion="revealing"] body > :is(header, main, section, .top-bar, .playback-toggle) {
  animation: page-focus var(--motion-arrival) var(--motion-in) both;
}
html[data-motion]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #fff;
  pointer-events: auto;
  opacity: 1;
}
html[data-motion="leaving"]::after { animation: veil-in var(--motion-departure) var(--motion-out) both; }
html[data-motion="revealing"]::after { animation: veil-out var(--motion-arrival) linear both; }
@keyframes page-defocus {
  from { filter: blur(0) contrast(1) brightness(1); }
  to { filter: blur(var(--motion-blur)) contrast(.97) brightness(1.016); }
}
@keyframes page-focus {
  0%, 18% { filter: blur(var(--motion-blur)) contrast(.97) brightness(1.016); opacity: .82; }
  100% { filter: blur(0) contrast(1) brightness(1); opacity: 1; }
}
@keyframes veil-in { 0%, 16% { opacity: 0; } 100% { opacity: 1; } }
@keyframes veil-out { 0% { opacity: 1; } 24% { opacity: .48; } 70% { opacity: .06; } 100% { opacity: 0; } }
.motion-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#works-content:focus { outline: none; }
@media (max-width: 600px) { :root { --motion-blur: 4px; } }
@media (prefers-reduced-motion: reduce) {
  html[data-motion]::after { display: none; }
  html[data-motion] body > :is(header, main, section, .top-bar, .playback-toggle) { animation: none; filter: none; opacity: 1; pointer-events: auto; }
  .book-video { display: none; }
}