/* Interpolate the palette itself so inherited text, gradients and surfaces
   change together without replacing the page's existing motion transitions. */
@property --night{syntax:"<color>";inherits:true;initial-value:#0C1117}
@property --dusk{syntax:"<color>";inherits:true;initial-value:#141B24}
@property --lumen{syntax:"<color>";inherits:true;initial-value:#FFF4D6}
@property --stone{syntax:"<color>";inherits:true;initial-value:#959BA4}
@property --glow{syntax:"<color>";inherits:true;initial-value:#FFC765}
@property --hair{syntax:"<color>";inherits:true;initial-value:rgba(255,244,214,.1)}
@property --well{syntax:"<color>";inherits:true;initial-value:rgba(12,17,23,.55)}
@property --paper{syntax:"<color>";inherits:true;initial-value:#F8F5EE}
@property --lumen-rgb{syntax:"<number>#";inherits:true;initial-value:255,244,214}
@property --glow-rgb{syntax:"<number>#";inherits:true;initial-value:255,199,101}
@property --glass-rgb{syntax:"<number>#";inherits:true;initial-value:16,22,30}
@property --reading-rgb{syntax:"<number>#";inherits:true;initial-value:12,19,26}

@media(prefers-reduced-motion:no-preference){
  :root.theme-ready{
    transition-property:--night,--dusk,--lumen,--stone,--glow,--hair,--well,--paper,--lumen-rgb,--glow-rgb,--glass-rgb;
    transition-duration:.48s;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
  }
  .theme-ready .home-refined{transition:--reading-rgb .48s cubic-bezier(.4,0,.2,1)}
  /* These surfaces have explicit theme colours rather than palette tokens. */
  .theme-ready .key{
    transition:transform 80ms var(--ease),box-shadow 80ms var(--ease),
      background-color .48s cubic-bezier(.4,0,.2,1),color .48s cubic-bezier(.4,0,.2,1);
  }
  .theme-ready .home-refined footer .foot-brand img{transition:filter .48s cubic-bezier(.4,0,.2,1),opacity .48s cubic-bezier(.4,0,.2,1)}
  .theme-ready .home-refined .diagram-packet{transition:stroke .48s cubic-bezier(.4,0,.2,1)}
  .theme-ready .home-refined :is(.diagram-stop-blue,.diagram-stop-pink,.diagram-stop-green){transition:stop-color .48s cubic-bezier(.4,0,.2,1)}
}