/* Cómo funciona (site/_steps), after azurio's branding-studio panels. Everywhere: full-screen
   panels that pin in turn, each step sliding up over the last (sticky siblings, no script). Where
   scroll-driven animations exist and motion is allowed: the film grows from a frame in the middle
   to the whole screen as its panel arrives, and its words land once it fills it. White on the film
   under an ink veil, fixed in either mode, as on the hero. */
@layer components {
  .steps-wrap {
    position: relative;
    timeline-scope: --step-0, --step-1, --step-2, --step-3;
    margin: var(--block-space) var(--bleed) 0;
  }

  .steps__markers {
    position: absolute;
    inset: 0;
    display: grid;
    grid-auto-rows: 100vh;
    pointer-events: none;
  }

  .steps {
    --steps-ink: oklch(22.1% 0.031 292.3);

    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* .steps > beats .site-page li (site.css loads later), whose 40rem measure would halve the panel. */
  .steps > .steps__panel {
    position: sticky;
    inset-block-start: 0;
    display: grid;
    block-size: 100vh;
    max-inline-size: none;
    overflow: clip;
    color: #fff;
    background: none; /* around the growing frame, the previous step's film still shows: no white gap */

    & > * { grid-area: 1 / 1; }
  }

  .steps__media {
    position: relative;
    background: var(--steps-ink);

    & .site-image {
      inline-size: 100%;
      block-size: 100%;
      aspect-ratio: auto !important; /* the panel's shape, not the file's: the inline 16:9 is for the fallback */
      object-fit: cover;
      border-radius: 0;
    }

    &::after { /* the veil the white words need */
      content: "";
      position: absolute;
      inset: 0;
      background: color-mix(in srgb, var(--steps-ink) 40%, transparent);
    }
  }

  .steps__text {
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--inline-space-double);
    padding-inline: max(var(--inline-space-double), 6vw);
  }

  .steps__points {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-x-small);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.14em;
    text-transform: uppercase;

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

  /* .steps beats .site-page h3 (site.css loads later), which would set it at text-medium. */
  .steps .steps__title {
    max-inline-size: 13ch;
    margin: 0;
    font-size: clamp(2.5rem, 1rem + 5.5vw, 7rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-align: center;
    text-wrap: balance;
  }

  .steps__count {
    justify-self: end;
    margin: 0;
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.14em;
  }

  /* On a phone the three stack: the title first, the points under it, the number at the foot. */
  @media (max-width: 40rem) {
    .steps__text {
      grid-template-columns: 1fr;
      align-content: center;
      justify-items: center;
      text-align: center;
      gap: var(--block-space-double);
    }

    .steps__title { order: -1; }
    .steps__count { justify-self: center; }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      /* Each grows as its marker (its place, unpinned) comes up the screen, so the film fills it
         as the panel arrives over the one before. */
      .steps__media {
        animation: steps-grow linear both;
        animation-timeline: var(--step);
        animation-range: entry 0% entry 100%;
      }

      .steps__text {
        animation: steps-land linear both;
        animation-timeline: var(--step);
        animation-range: entry 80% entry 100%;
      }
    }
  }

  @keyframes steps-grow {
    from { clip-path: inset(18% 24% round var(--radius-large)); }
    to { clip-path: inset(0 round 0); }
  }

  @keyframes steps-land {
    from { opacity: 0; translate: 0 1.5rem; }
    to { opacity: 1; translate: 0 0; }
  }
}