/* Who it's for (site/_trades), after hayler's services list. Everywhere: the label, then the
   names, solid. On a wide screen with motion allowed and scroll-driven animations: the section
   pins, the list rises one name per step of the scroll, and the name at the middle is solid
   while the others stay faint. */
@layer components {
  .trades {
    margin-block-start: calc(var(--block-space) * 3);

    & .trades__label { /* beats .site-page h2's size (site.css loads later) */
      margin: 0 0 var(--block-space);
      font-size: var(--text-medium);
      font-weight: 500;
      letter-spacing: -0.01em;
    }
  }

  .trades__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;

    & > li { max-inline-size: none; }
  }

  @media (min-width: 52rem) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .trades {
        block-size: calc(100vh + var(--count) * 18vh); /* a short step of scroll per name */
        view-timeline: --trades block;
      }

      .trades__pin {
        position: sticky;
        inset-block-start: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
        align-items: center;
        block-size: 100vh;
      }

      .trades .trades__label { margin: 0; }

      /* The window is the screen's height; the list starts with its first name on the middle line
         and rises until its last is there. Faint above and below, by a fade, like the reference. */
      .trades__window {
        block-size: 100vh;
        overflow: clip;
        mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
      }

      .trades__list {
        padding-block-start: calc(50vh - 0.6em);
        animation: trades-rise linear both;
        animation-timeline: --trades;
        animation-range: contain;

        & > li {
          color: color-mix(in srgb, var(--color-text) 18%, transparent);
          animation: trades-lit linear both;
          animation-timeline: --trades; /* each li carries its own animation-range, inline */
        }
      }
    }
  }

  /* From the first name on the middle line to the last: count - 1 lines of 1.2em. */
  @keyframes trades-rise { to { translate: 0 calc((var(--count) - 1) * -1.2em); } }

  @keyframes trades-lit {
    0%, 100% { color: color-mix(in srgb, var(--color-text) 18%, transparent); }
    40%, 60% { color: var(--color-text); } /* one name solid at a time, on the middle line */
  }
}