@layer components {
  .hero {
    position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; color: var(--color-on-sky);
    background: var(--hero-sun), var(--hero-sky);
  }
  .hero__stage { position: absolute; inset: 0; }
  .hero__canvas { width: 100%; height: 100%; opacity: 0; transition: opacity var(--duration-3) var(--ease-out); cursor: grab; touch-action: pan-y; }
  .hero__canvas[data-state="ready"] { opacity: 1; }
  .hero__canvas:active { cursor: grabbing; }
  .hero__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--hero-scrim); }
  .hero__content {
    position: relative; z-index: 1; display: grid; gap: var(--space-5);
    padding-block: calc(var(--header-height) + var(--space-8)) var(--space-9); pointer-events: none;
  }
  .hero__content a { pointer-events: auto; }
  .hero__eyebrow, .hero__lede { text-shadow: var(--hero-text-shadow); }
  .hero__eyebrow { font-size: var(--font-size-small); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-on-sky-muted); }
  .hero__title { text-shadow: var(--hero-title-shadow); }
  .hero__lede { max-width: var(--hero-lede-width); font-size: var(--step-1); line-height: var(--line-lede); color: var(--color-on-sky-muted); }
  .hero__actions { margin-block-start: var(--space-3); }
  .hero__hint {
    position: absolute; inset-inline-end: var(--space-gutter); inset-block-end: var(--space-6); z-index: 1;
    font-size: var(--font-size-small); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-on-sky-muted); pointer-events: none;
  }
  .hero__hint[hidden] { display: none; }
  @media (max-width: 40em) { .hero__hint { display: none; } }
}