/* ==========================================================================
   Machine Method: animated hero mark (see hero.js)
   Loaded after styles.css. The SVG's ratio is 676.129 / 447.006 (about 1.5:1).
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* With JavaScript the SVG replaces the JPG. The JPG comes back (.is-fallback)
   if the SVG can't load, and is always shown when JavaScript is off. */
.js .hero__logo:not(.is-fallback) {
  max-width: 1100px;
}

.js .hero__logo:not(.is-fallback) img {
  display: none;
}

/* Reserve the SVG's box until it arrives so the page doesn't jump. */
.js .hero__logo:not(.is-fallback):not(.is-ready)::before,
.hero__mark {
  display: block;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 676.129 / 447.006;
  max-height: calc(100vh - 10rem);
  max-height: calc(100svh - 10rem);
  margin: 0 auto;
}

.js .hero__logo:not(.is-fallback):not(.is-ready)::before {
  content: "";
}

/* Wider screens: fit the mark, the hero's padding and the first divider's
   slingshot (with its full pull) in the first screen, so short laptop
   viewports don't push the slingshot below the fold. The mark is sized by
   width alone, capped by the height left over, so it keeps its exact ratio.
   Phones keep the rules above. */
@media (min-width: 600px) {
  .hero {
    --hero-header: 3.375rem;   /* the sticky header's height */
    --hero-sling: 5rem;        /* slingshot pull (dividers.js slingMaxY) plus the hint ring and a margin */
    --hero-pad: clamp(3.5rem, min(8vw, 11vh), 7rem);
    --hero-reserve: calc(var(--hero-header) + var(--hero-pad) + var(--hero-sling));
    padding-bottom: var(--hero-pad);
  }

  @supports (height: 100svh) {
    .hero {
      --hero-pad: clamp(3.5rem, min(8vw, 11svh), 7rem);
    }
  }

  .js .hero__logo:not(.is-fallback):not(.is-ready)::before,
  .hero__mark {
    width: max(18rem, min(100%, 1100px, (100vh - var(--hero-reserve)) * 676.129 / 447.006));
    width: max(18rem, min(100%, 1100px, (100svh - var(--hero-reserve)) * 676.129 / 447.006));
    max-height: none;
  }
}

/* Phones: hero.js crops the viewBox to the square ring, so match its ratio.
   Keep this breakpoint in step with CONFIG.viewBox.narrowQuery. */
@media (max-width: 599.98px) {
  .js .hero__logo:not(.is-fallback):not(.is-ready)::before,
  .hero__mark {
    aspect-ratio: 447 / 447.006;
  }
}

.hero__mark {
  height: auto;
  overflow: visible;
  touch-action: pan-y;   /* horizontal drags and taps move the nodes; vertical swipes still scroll */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Proximity glow: hero.js eases the fill on each node and the SVG filter on
   its wrapper every frame (CONFIG.glow.fade). No CSS transition: the wrapper's
   filter also carries the surge afterglow, which must not be smoothed. */

/* Centre the teal glow on the mark rather than the old 4:1 banner. */
.js .hero::before {
  top: 40%;
}

/* Land the tagline with the wordmark at the end of the intro. */
.js .hero__tagline {
  animation-delay: 2.8s;
}
.js .hero__logo.is-fallback + .hero__tagline {
  animation-delay: 0.5s;
}