@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);
    }
  }

  /* The newest blog post, while it's news: a pill between the icon and the title. */
  .hero__news {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.35rem 0.9rem 0.35rem 0.4rem;
    border: 1px solid color-mix(in oklch, var(--color-primary) 35%, transparent);
    border-radius: 99px;
    background: color-mix(in oklch, var(--color-surface) 80%, transparent);
    color: var(--color-ink);
    font-size: 0.92rem;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
  }

  .hero__news:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-surface);
  }

  .hero__news-label {
    padding: 0.1rem 0.55rem;
    border-radius: 99px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .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 demo video 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 video is the window on black: rounded like the window's own corners (11 of
       1920 by 1080 px), with the glow around it. */
    video {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 0.57% / 1.02%;
      box-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 video {
      transform: none;
    }
  }
}