/* Site-wide motion: content eases in as it scrolls into view, menus and dropdowns open smoothly, and
   links and buttons change colour gently. Everything here is off when the visitor's device asks for
   reduced motion or they press "Pause motion" (html.motion-paused); the content is then simply shown. */

:root{--m-ease:cubic-bezier(.2,.7,.2,1)}

/* Gentle colour changes on anything clickable. :where() keeps this at zero specificity, so any
   transition a component already sets wins. */
:where(a,button,summary,input,textarea,select){transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease}

@media (prefers-reduced-motion:no-preference){
  /* Scroll reveal: js/motion.js only marks content that starts below the fold, so nothing on screen
     at load is ever hidden. translate (not transform) leaves each element's own transforms alone. */
  html:not(.motion-paused) .m-reveal{opacity:0;translate:0 18px}
  html:not(.motion-paused) .m-reveal.m-in{opacity:1;translate:0 0;transition:opacity .6s ease,translate .75s var(--m-ease)}

  /* Open/close icons turn smoothly. */
  html:not(.motion-paused) summary :is(i,b,.icon){transition:transform .35s var(--m-ease)}

  /* Desktop navigation dropdowns and the mobile menu ease in when they open. */
  html:not(.motion-paused) .nav-dropdown[open]>.nav-dropdown-menu{animation:m-drop-in .22s var(--m-ease)}
  html:not(.motion-paused) .mobile-menu.is-open{animation:m-drop-in .28s var(--m-ease)}
}

@keyframes m-drop-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

@media print{.m-reveal{opacity:1!important;translate:none!important}}