/* /websites/ shared motion layer, with /websites/js/smooth.js (2026-11-02).
   Everything here waits for html.js-on, which smooth.js sets only without reduced motion,
   so a page without JavaScript, or with reduced motion, shows everything at once. */

/* Lenis (its own recommended rules) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* waiting below the fold for its reveal, or for its picture to decode */
.js-on .wsr-wait, .js-on .wsr-img { opacity: 0; }
.js-on .wsr-ph { background-color: rgba(128, 128, 128, .14); }

/* hover and state changes ease instead of snapping; zero specificity, so any transition a site sets wins */
:where(.js-on) :where(a, button, summary, label, input, select, textarea, [role="button"], [role="tab"]) {
  transition: color .24s cubic-bezier(.22, 1, .36, 1), background-color .24s cubic-bezier(.22, 1, .36, 1),
    border-color .24s cubic-bezier(.22, 1, .36, 1), box-shadow .24s cubic-bezier(.22, 1, .36, 1),
    text-decoration-color .24s cubic-bezier(.22, 1, .36, 1), outline-color .24s cubic-bezier(.22, 1, .36, 1);
}
:where(.js-on) :where(a, button, summary, [role="button"]) > :where(svg) {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}