/* The artwork is the only control; its label is available to assistive technology. */
.hero { cursor: pointer; touch-action: manipulation; }
.hero:focus-visible { outline: 2px solid var(--color-text); outline-offset: -8px; }
.hero-content { padding: 2rem 1rem; text-align: center; pointer-events: none; }
.hero-wordmark {
  --reveal: 1;
  width: clamp(200px, 45vw, 520px);
  aspect-ratio: 982 / 294;
  clip-path: inset(0 calc((1 - var(--reveal)) * 50%));
}
.hero-wordmark img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter .5s ease;
}
.hero-wordmark.is-near img { filter: drop-shadow(2px 0 0 var(--brand-bone)) drop-shadow(-2px 0 0 var(--brand-smoke)); }
.hero-wordmark.is-secret img { animation: secret-refraction 4s ease both; }
@keyframes secret-refraction {
  0%, 100% { filter: none; }
  30% { filter: drop-shadow(7px 0 0 var(--brand-smoke)) drop-shadow(-7px 0 0 var(--brand-bone)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark { clip-path: none; transform: none; }
  .hero-wordmark img { transition: none; }
  .hero-wordmark.is-secret img { animation: none; opacity: .7; }
}