/* Homepage hero: "Siris Hill" separates, travels into the header and hands over,
   letter by letter, to the logo. Used on index.html only, with js/hero-logo.js.
   Without JavaScript, or with reduced motion, the static hero and logo show as before. */

/* While the script prepares, keep the heading hidden so it never flashes in a fallback font.
   The heading stays in place (opacity only) so screen readers and search still read it. */
html.hl-js .home-01 .hero-name { opacity: 0; }

/* Once running, the header logo is drawn by nine letter masks over the original image. */
html.hl-on .home-01 .site-header .brand { position: relative; }
html.hl-on .home-01 .site-header .brand > img { visibility: hidden; }
.hl-glyphs { position: absolute; inset: 0; pointer-events: none; }
.hl-glyph { position: absolute; overflow: hidden; }
.hl-glyph-in { position: absolute; inset: 0; will-change: transform; transform: translate3d(0, 110%, 0); }
.hl-glyph-in img { position: absolute; max-width: none; display: block; }

/* The moving letters */
.hl-stage { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; contain: strict; }
.hl-ch {
  position: absolute; left: 0; top: 0; margin: 0;
  color: var(--home-ink); white-space: pre; transform-origin: 0 0; will-change: transform;
}
.hl-ch b { display: block; font-weight: inherit; will-change: transform; }
html[data-theme="light"] .hl-ch { color: #000; }
html[data-theme="dark"] .hl-ch { color: #fff; }
body:has(.menu-sheet.open) .hl-stage { visibility: hidden; }