@font-face {
  font-family: "Source Serif Pro";
  src: url("./assets/fonts/SourceSerifPro-Semibold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* This component needs only its canvas, accessible title, button, and portrait. */
#name-hero {
  --hero-particle-font: "Source Serif Pro", Georgia, serif;
  --hero-height: 420px;
  --hero-portrait-opacity: 0;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--hero-height);
  min-height: 320px;
  overflow: hidden;
  background: #050505;
  color: #eee;
}
#name-hero #hero-space { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#name-hero .hero-interaction {
  position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: inherit; cursor: grab; -webkit-tap-highlight-color: transparent; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
#name-hero[data-dragging="true"] .hero-interaction { cursor: grabbing; }
#name-hero .hero-interaction:focus { outline: none; }
#name-hero .hero-interaction:focus-visible { outline: 1px solid #777; outline-offset: -8px; }
#name-hero .hero-name-fallback, #name-hero .hero-fallback {
  position: absolute; top: 48%; left: 50%; width: 86%; margin: 0;
  transform: translate(-50%, -50%); text-align: center;
  font: 600 clamp(42px, 11vw, 160px)/1 "Source Serif Pro", Georgia, serif;
  font-synthesis: none; letter-spacing: 0; white-space: nowrap; pointer-events: none;
}
#name-hero[data-hero-ready="true"] .hero-name-fallback,
#name-hero[data-hero-ready="true"] .hero-fallback {
  width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#name-hero #hero-portrait {
  position: absolute; left: 77%; top: 12%; width: 20%; height: 76%; display: block;
  object-fit: contain; object-position: center; opacity: var(--hero-portrait-opacity);
  transform: none; border: 0; border-radius: 0; filter: none; box-shadow: none; pointer-events: none;
}
#name-hero:not(.hero-has-portrait) #hero-portrait { display: none; }
@media (max-width: 699px) {
  #name-hero { --hero-height: 520px; }
  #name-hero .hero-name-fallback, #name-hero .hero-fallback {
    top: 44%; left: 50%; width: 92%; font-size: clamp(42px, 17.5vw, 68px);
  }
  #name-hero #hero-portrait { left: 59%; top: 37%; width: 38%; height: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  #name-hero *, #name-hero *::before, #name-hero *::after { transition: none !important; }
}