@layer components {
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem) 0;
    text-align: center;
    overflow: clip;
  }

  /* The app icon's bars as a level meter, mirrored about the middle, behind the title.
     Bars are added by site.js; each bounces on its own beat. */
  .hero__meter {
    position: absolute;
    inset: 4rem 0 auto;
    height: 26rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.1vw, 14px);
    opacity: 0.32;
    mask-image: radial-gradient(closest-side, var(--black) 40%, transparent);
    pointer-events: none;
  }

  .hero__meter span {
    width: clamp(6px, 0.9vw, 12px);
    height: calc(var(--h) * 100%);
    border-radius: 99px;
    background: var(--color-primary);
    box-shadow: 0 0 18px color-mix(in oklch, var(--color-primary) 70%, transparent);
    transform-origin: center;
    animation: bounce var(--speed) ease-in-out var(--delay) infinite alternate;
  }

  @keyframes bounce {
    from {
      transform: scaleY(0.12);
    }

    to {
      transform: scaleY(1);
    }
  }

  .hero__icon {
    position: relative;
    width: clamp(108px, 14vw, 148px);
    filter: drop-shadow(0 18px 40px color-mix(in oklch, var(--color-primary) 35%, transparent));
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    50% {
      transform: translateY(-8px);
    }
  }

  .hero__title {
    position: relative;
    margin-top: 1.75rem;
    font-size: clamp(2.6rem, 7.5vw, 5.4rem);
    font-weight: 750;
  }

  .hero__accent {
    background: linear-gradient(100deg, var(--color-primary), var(--color-accent));
    background-clip: text;
    color: transparent;
  }

  .hero__lead {
    position: relative;
    max-width: 38rem;
    margin-top: 1.25rem;
    color: var(--color-ink-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  }

  .hero__actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
  }

  .hero__fine {
    position: relative;
    margin-top: 1rem;
    color: var(--color-ink-muted);
    font-size: 0.85rem;
  }

  /* The screenshot leans back and straightens as it scrolls in (--tilt from site.js). */
  .hero__shot {
    --tilt: 1;
    position: relative;
    width: min(100%, var(--width));
    margin-top: clamp(3rem, 7vw, 5rem);
    perspective: 1600px;

    /* The screenshot is the window with its own corners and shadow, on transparency: a glow
       that follows its shape rather than a box around it. */
    img {
      filter: drop-shadow(0 30px 70px color-mix(in oklch, var(--color-primary) 22%, transparent));
      transform: rotateX(calc(var(--tilt) * 18deg)) scale(calc(1 - var(--tilt) * 0.06));
      transform-origin: center top;
      cursor: zoom-in;
      transition: transform 0.1s linear;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .hero__meter span,
    .hero__icon {
      animation: none;
    }

    .hero__shot img {
      transform: none;
    }
  }
}