/* the lz-hero styles */
@layer components {
  @scope (lz-hero) {
    :scope {
      --grid-column: gutter-left / gutter-right;
      --padding-vertical: var(--size-10);

      position: relative;
      display: grid;
      grid-template-areas: inherit;
      grid-template-columns:
        1fr
        calc(min(1024px, 100%) - 2 * var(--size-3))
        1fr;
      padding-block-start: calc(
        var(--padding-vertical) + var(--body-row-gap, 0px) +
          var(--site-header-height, 0px)
      );
      padding-block-end: var(--padding-vertical);
      margin-block-start: calc(
        -1 *
          (
            var(--site-header-height, 92px) + var(--body-row-gap, 0px) +
              var(--padding-vertical)
          )
      );
      margin-block-end: var(--body-row-gap, 0);
      overflow: hidden;

      /* Dark in both modes: dark mode's surface-1 and text-1 (normalize sets
         those per mode on html, so the dark values are named here) */
      color: var(--gray-1);
      color-scheme: dark;
      background-color: var(--gray-9);
      isolation: isolate;
      view-transition-name: --lz-hero;
    }

    /* A mesh gradient from the brand's blues and purples: soft radial glows
       over the page's surface, on a layer larger than the hero so it can drift
       without showing an edge. Each color is mixed with transparent so the
       headline keeps its contrast in light and dark. Only the layer's transform
       animates: it is painted once and the compositor moves it, so the motion
       costs next to nothing. */
    :scope::before {
      position: absolute;
      inset: -10%;
      z-index: -1;
      content: "";
      background-image:
        radial-gradient(
          at 20% 20%,
          color-mix(in oklch, var(--primary-1) 55%, transparent) 0,
          transparent 45%
        ),
        radial-gradient(
          at 80% 20%,
          color-mix(in oklch, var(--accent-1) 50%, transparent) 0,
          transparent 45%
        ),
        radial-gradient(
          at 80% 80%,
          color-mix(in oklch, var(--primary-5) 45%, transparent) 0,
          transparent 50%
        ),
        radial-gradient(
          at 20% 80%,
          color-mix(in oklch, var(--accent-4) 40%, transparent) 0,
          transparent 50%
        );
    }

    :scope h1 {
      grid-column: content;
      margin: 0 auto;
      text-align: center;
    }
  }

  /* A slow drift, back and forth; none at all for reduced motion */
  @media (prefers-reduced-motion: no-preference) {
    @scope (lz-hero) {
      :scope::before {
        animation: lz-hero-drift 30s ease-in-out infinite alternate;
      }
    }
  }

  @keyframes lz-hero-drift {
    from {
      translate: 0 0;
    }

    to {
      translate: -6% 4%;
    }
  }
}