/* Motion — restrained by design. Every transition explains a change of state or place.
   Tokens: --dur-fast for state changes, --dur for movement, one ease-out curve. */
:root{--dur-fast:180ms;--dur:220ms;--dur-slow:300ms;--ease:cubic-bezier(.2,.7,.2,1)}

/* 1. Page-to-page crossfade (browsers without view transitions get a hard cut). */
@view-transition{navigation:auto}
::view-transition-old(root){animation:var(--dur) var(--ease) both vt-fade-out}
::view-transition-new(root){animation:var(--dur) var(--ease) both vt-fade-in}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
/* The masthead stays put while the page changes underneath it. */
.masthead{view-transition-name:masthead}
::view-transition-old(masthead),::view-transition-new(masthead){animation:none;mix-blend-mode:normal}
/* Shared cover art moves from the list to its page. */
::view-transition-group(*){animation-duration:var(--dur-slow);animation-timing-function:var(--ease)}

/* 2. State changes with weight. */
a{transition:color var(--dur-fast) var(--ease)}
.btn{transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.play{transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.play:active{transform:scale(.94)}
.masthead__nav a{position:relative}
.masthead__nav a::after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease)}
.masthead__nav a:hover::after,.masthead__nav a[aria-current]::after{transform:scaleX(1)}
.masthead__nav a[aria-current]{border-bottom:0}
.site-nav--collapsible .masthead__nav a::after{display:none}
/* Hamburger: three lines become an X. */
.menu-toggle .bar{transform-origin:12px 12px;transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease)}
.menu-toggle[aria-expanded="true"] .bar-1{transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bar-2{opacity:0;transform:scaleX(.2)}
.menu-toggle[aria-expanded="true"] .bar-3{transform:translateY(-5px) rotate(-45deg)}
/* Menu panel settles in. */
.site-nav--collapsible.is-open .masthead__nav{animation:menu-in var(--dur) var(--ease) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}}
/* Player bar rises the first time something plays. */
.player{transform:translateY(100%);transition:transform var(--dur-slow) var(--ease)}
.player.is-visible{transform:none}
.player__btn{transition:transform var(--dur-fast) var(--ease)}
.player__btn:active{transform:scale(.94)}

/* 4. Slideshow dissolve. */
.lightbox__stage img{transition:opacity var(--dur-slow) var(--ease)}
.lightbox__stage img.is-loading{opacity:0}

/* Focus is never animated. */
:focus-visible{transition:none}

/* Reduced motion: fades become near-instant, nothing slides or scales. */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.01ms!important}
  .player{transform:none}
  .play:active,.player__btn:active{transform:none}
  .menu-toggle .bar{transition:none}
}