/* the site header styles. Scoped to the header, and kept out of the
   navigation's own content (lz-overflow-nav has its own stylesheet). */
@layer components {
  @scope (lz-site-header) to (lz-overflow-nav > *) {
    :scope {
      --grid-column: gutter-left / gutter-right;

      position: relative;
      z-index: 10;
      display: grid;
      grid-template-areas: inherit;
      grid-template-columns:
        1fr
        calc(min(1024px, 100%) - 2 * var(--size-3))
        1fr;
      background-color: color-mix(in oklch, var(--accent), transparent 90%);
      view-transition-name: --lz-site-header;
    }

    header {
      display: grid;
      grid-template-columns: max-content 1fr;
      grid-column: content;
      column-gap: 2rem;
      align-items: center;
      padding: 1rem;
    }

    .site-brand {
      display: block;
      line-height: 1;

      svg {
        inline-size: 167px;
        block-size: 60px;

        @media (prefers-color-scheme: dark) {
          [data-group="consulting"],
          [data-group="name"] {
            fill: white;
          }
        }
      }
    }

    lz-overflow-nav {
      font-family: var(--font-system-ui);
      font-weight: var(--font-weight-7);
    }
  }

  @scope (body:has(lz-hero) lz-site-header) to (lz-overflow-nav) {
    :scope {
      color-scheme: dark;
      background-color: transparent;

      .site-brand {
        svg {
          [data-group] {
            fill: white;
          }
        }
      }
    }
  }

  /* On the homepage the logo draws itself: the mark is painted in, as if by
     a brush, then the name and "consulting" fade in. The mark is masked by a
     wide pen that runs along its outline (#logo-mark-reveal in logo.svg); its
     path has pathLength="1", so a dash of 1 is the whole run. Its timings are
     multiples of --transition-duration, so they keep step with the rest of
     the site. Reduced motion gets the logo as it is. */
  @media (prefers-reduced-motion: no-preference) {
    @scope (.page-home lz-site-header) to (lz-overflow-nav) {
      .site-brand [data-group="mark"] {
        mask: url("#logo-mark-reveal");
      }

      /* The dash starts just short of the path (a gap of 1.1, an offset of
         1.05): touching its start, the pen's round cap would show at once */
      .site-brand .logo-mark-pen {
        stroke-dasharray: 1 1.1;
        stroke-dashoffset: 1.05;
        animation: lz-brand-draw calc(var(--transition-duration) * 8)
          var(--ease-in-out-2) forwards;
      }

      .site-brand :is([data-group="name"], [data-group="consulting"]) {
        opacity: 0;
        animation: lz-brand-fade calc(var(--transition-duration) * 3)
          var(--ease-out-2) calc(var(--transition-duration) * 8) forwards;
      }
    }
  }

  /* Half the outline is enough: the pen is as wide as the mark, so its run
     down one edge paints it all (measured: fully covered from 0.53) */
  @keyframes lz-brand-draw {
    to {
      stroke-dashoffset: 0.5;
    }
  }

  @keyframes lz-brand-fade {
    to {
      opacity: 1;
    }
  }
}