/* Crossfades the header's icon mark between the white variant (used while the
   header is transparent, at the top of the page) and the colorful pink/yellow
   variant (used once the header gets its solid background on scroll). The
   scroll threshold is driven by header-logo-swap.js, which toggles
   .header--scrolled on #header at the same near-zero scroll offset the
   site's existing GSAP header-background transition uses (see
   local runtime's animate.js - it scrubs :root's
   --color-background-header/--color-text-header between "top -1%" and
   "top -2%" of the body, i.e. effectively the very first bit of scroll). */
/* Targets .svg-flex (present on every page as the logo icon's wrapper,
   sometimes with an extra "svg-flex--new" modifier class alongside it)
   rather than a custom wrapper class, so this one rule works across every
   page's header without depending on exactly matching each page's markup
   variant. */
.header__logo-link .svg-flex {
  display: block;
  height: 50px;
  position: relative;
  width: 50px;
}

.header__logo-mark-img {
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  transition: opacity 200ms cubic-bezier(0.33, 1, 0.68, 1);
  width: 100%;
}

.header__logo-mark-img--white {
  opacity: 1;
}

.header__logo-mark-img--color {
  opacity: 0;
}

.header--scrolled .header__logo-mark-img--white {
  opacity: 0;
}

.header--scrolled .header__logo-mark-img--color {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .header__logo-mark-img {
    transition: none;
  }
}