/* Sitestove page transition: the pilot light.
   The page you leave dims and lifts away (0.32s, ease-in); the next one opens out of the logo in its header
   (0.8s, ease-out), starting 0.1s before the exit ends, and the dot flares as it lands. Koalition DNA exit rules.
   Inside /designs, a card opening its design keeps the Market's own move (the screenshot grows into the page). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  html:not(.ss-vt-morph)::view-transition{background:#111}
  html:not(.ss-vt-morph)::view-transition-old(root){animation:ss-vt-out .32s cubic-bezier(.895,.03,.685,.22) both}
  html:not(.ss-vt-morph)::view-transition-new(root){animation:ss-vt-in .8s .22s cubic-bezier(.165,.84,.44,1) both,ss-vt-soft .48s .22s cubic-bezier(.165,.84,.44,1) both}
  .pilot.ss-flare{animation:ss-flare 1.1s cubic-bezier(.165,.84,.44,1) 1!important}
}
/* a subtle blur rides along: the page you leave goes soft as it lifts, the next one comes into focus over the
   first 60% of its reveal. Only on the snapshots, so nothing on the page itself is ever filtered */
@keyframes ss-vt-out{to{opacity:.3;transform:translateY(-32px);filter:blur(8px)}}
@keyframes ss-vt-soft{from{filter:blur(6px)}to{filter:blur(0)}}
@keyframes ss-vt-in{
  from{clip-path:circle(0px at var(--vt-x,40px) var(--vt-y,48px))}
  to{clip-path:circle(var(--vt-r,160vmax) at var(--vt-x,40px) var(--vt-y,48px))}
}
@keyframes ss-flare{0%,100%{transform:scale(1)}22%{transform:scale(2.6)}}