/* enhance.css — replaces Squarespace runtime behaviour that was removed.
   Loaded after site.css / static.css / site-overrides.css. */

/* ---------------------------------------------------------------------------
   1. Kill the Squarespace "hideContent" load flash.
   site.css hides header / footer / section > .content-wrapper with
   `animation: hideContent 2s` until the (now-deleted) runtime sets
   [data-animation-state=booted] on <html>. We set that attribute
   statically in the HTML; this is a belt-and-suspenders guard.
--------------------------------------------------------------------------- */
[data-animation-state="booted"] header,
[data-animation-state="booted"] footer,
[data-animation-state="booted"] section > .content-wrapper,
html header,
html footer,
html section > .content-wrapper {
  animation: none !important;
}

/* ---------------------------------------------------------------------------
   2. Scroll-reveal — our replacement for Squarespace's global
   "fade" animation (was: type fade, ~0.9s ease, slight stagger).
   Progressive enhancement: the hidden state is only applied once
   site.js adds .sqr-armed to <html>, so with no JS everything is visible.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* hidden state is applied instantly (no transition) so it can't be seen
     "fading out"; the transition lives only on .sqr-in, i.e. the way back in */
  html.sqr-armed .sqr-reveal:not(.sqr-in) {
    opacity: 0;
    transform: translateY(14px);
  }
  html.sqr-armed .sqr-reveal.sqr-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.9s ease, transform 0.9s ease;
    transition-delay: var(--sqr-delay, 0s);
  }
}

/* ---------------------------------------------------------------------------
   3. Mobile menu — Squarespace's CSS already styles the overlay and the
   burger→X transform; it only needs the state classes toggled, which
   site.js now does (.header--menu-open on <html>/<body>, .burger--active
   on the buttons). Just lock background scroll while it's open.
--------------------------------------------------------------------------- */
html.header--menu-open,
html.header--menu-open body {
  overflow: hidden;
}
/* (the theme's own `.burger { background:transparent; border:none }` already
   normalises the button — we deliberately do NOT touch its box model here,
   so header height stays byte-identical to the original.) */

/* ---------------------------------------------------------------------------
   4. Text annotations (circle / underline "text highlight").
   site.js builds the hand-drawn SVG from the TextAttributes-props config
   and inserts it as the span's first child.
--------------------------------------------------------------------------- */
.sqsrte-text-highlight { position: relative; }
.sqsrte-text-highlight > svg.sqr-anno {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

/* ---------------------------------------------------------------------------
   5. Nothing pops in.
   motion.js (in <head>) adds .sqr-js before anything is drawn; site.js adds
   .sqr-ready once the scroll reveal is set up (motion.js forces it after 4s
   as a safety net). Until then the page body stays hidden, then fades in —
   so content can't flash up and vanish before its own fade starts.
   Images stay hidden until they've loaded; motion.js then fades them in.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.sqr-js:not(.sqr-ready) #page,
  html.sqr-js:not(.sqr-ready) #footer-sections {
    opacity: 0;
  }
  html.sqr-js.sqr-ready #page,
  html.sqr-js.sqr-ready #footer-sections {
    transition: opacity 0.5s ease;
  }
  html.sqr-js img:not(.sqr-img-ok) {
    opacity: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   6. Page-to-page crossfade (browsers with cross-document View Transitions:
   Chrome/Edge 126+, Safari 18.2+; others just navigate normally).
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.3s; }
}

/* ---------------------------------------------------------------------------
   7. Reduced motion: also make the pages' own older fade-ins (team photos,
   research cards, …) instant for visitors who ask for less motion.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}