/* ANDERS 5000 · original logo silhouettes, recoloured without image filters. */
@supports ((mask-image: url("/files/anders-projects/logos/company_logo/anders.gif")) or (-webkit-mask-image: url("/files/anders-projects/logos/company_logo/anders.gif"))) {
  .anders-en-header__logo,
  header .m-header__logo > a,
  footer a:has(> img[src*="anders_logo_black_upsidedown.svg"]) {
    position: relative;
    --anders-logo-ink: #252525;
  }

  .anders-en-header__logo,
  header .m-header__logo > a {
    --anders-logo-shape: url("/files/anders-projects/logos/company_logo/anders.gif");
    --anders-logo-size: 100% auto;
  }

  footer a:has(> img[src*="anders_logo_black_upsidedown.svg"]) {
    --anders-logo-shape: url("/files/anders-projects/logos/company_logo/anders_logo_black_upsidedown.svg");
    --anders-logo-size: 100% 100%;
  }

  :is(.anders-en-header__logo, header .m-header__logo > a, footer a:has(> img[src*="anders_logo_black_upsidedown.svg"])) > img {
    opacity: 0;
  }

  :is(.anders-en-header__logo, header .m-header__logo > a, footer a:has(> img[src*="anders_logo_black_upsidedown.svg"]))::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--anders-logo-ink);
    -webkit-mask-image: var(--anders-logo-shape);
    mask-image: var(--anders-logo-shape);
    -webkit-mask-size: var(--anders-logo-size);
    mask-size: var(--anders-logo-size);
    -webkit-mask-position: left top;
    mask-position: left top;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    transition: background-color 300ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    :is(.anders-en-header__logo, header .m-header__logo > a, footer a:has(> img[src*="anders_logo_black_upsidedown.svg"])):hover {
      --anders-logo-ink: #002fa7;
    }
  }

  :is(.anders-en-header__logo, header .m-header__logo > a, footer a:has(> img[src*="anders_logo_black_upsidedown.svg"])):focus-visible {
    --anders-logo-ink: #002fa7;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.anders-en-header__logo, header .m-header__logo > a, footer a:has(> img[src*="anders_logo_black_upsidedown.svg"]))::after {
      transition: none;
    }
  }
}