@layer components {
  /* How it works, told on the deep stage. On a phone each step is followed by its screen. On a
     wide screen the steps scroll by on the left while one window holds still on the right and
     changes to the step in the middle of the screen. */
  .site-loop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-11);
    padding: var(--space-13) var(--gutter-fluid);
    background:
      radial-gradient(ellipse at 50% 60%, var(--color-stage-glow) var(--length-zero), transparent var(--site-glow-reach)),
      var(--color-stage);
    color: var(--color-stage-ink);
  }

  .site-loop__title {
    max-inline-size: var(--measure-site);
    font: var(--type-site-headline);
    letter-spacing: var(--tracking-display);
    text-align: center;
    text-wrap: balance;
  }

  .site-loop__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    inline-size: var(--size-fill);
    max-inline-size: var(--max-content);
  }

  .site-loop__words {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-inline-size: var(--measure-tight);
  }

  .site-loop__words:not(:first-child) {
    margin-block-start: var(--space-11);
  }

  .site-loop__numeral {
    font: var(--type-site-numeral);
    color: var(--color-stage-muted);
  }

  .site-loop__name {
    font: var(--type-title-1);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  .site-loop__text {
    font: var(--type-site-lead);
    color: var(--color-stage-muted);
    text-wrap: pretty;
  }

  .site-loop__action {
    display: flex;
    justify-content: center;
  }

  @media (width >= 1000px) {
    .site-loop {
      gap: var(--space-12);
      padding-block: calc(2 * var(--space-13)) var(--space-13);
    }

    .site-loop__title {
      font: var(--type-site-headline-lg);
    }

    .site-loop__numeral {
      font: var(--type-site-numeral-lg);
    }

    .site-loop__text {
      font: var(--type-site-lead-lg);
    }

    .site-loop__steps {
      align-items: center;
    }
  }

  /* Where the browser can follow the scroll, the window holds still and changes with the step. */
  @supports (animation-timeline: view()) {
    @media (width >= 1000px) and (prefers-reduced-motion: no-preference) {
      .site-loop__steps {
        display: grid;
        grid-template-columns: minmax(var(--space-0), 1fr) var(--site-window-inline-size);
        column-gap: var(--space-13);
        align-items: stretch;
        timeline-scope: --site-loop-1, --site-loop-2, --site-loop-3, --site-loop-4;
      }

      .site-loop__words {
        grid-column: 1;
        justify-content: center;
        min-block-size: var(--site-loop-step-block-size);
      }

      .site-loop__words:not(:first-child) {
        margin-block-start: var(--space-0);
      }

      .site-loop__figure {
        position: sticky;
        inset-block-start: calc(50svh - var(--site-window-block-size) / 2);
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: start;
        inline-size: var(--size-fill);
        animation: site-loop-frame linear both;
        animation-range: cover 0% cover 100%;
      }

      .site-loop__words {
        animation: site-loop-words linear both;
        animation-timeline: view();
        animation-range: cover 10% cover 90%;
      }

      .site-loop__words--1 { view-timeline-name: --site-loop-1; }
      .site-loop__words--2 { view-timeline-name: --site-loop-2; }
      .site-loop__words--3 { view-timeline-name: --site-loop-3; }
      .site-loop__words--4 { view-timeline-name: --site-loop-4; }
      .site-loop__figure--1 { animation-timeline: --site-loop-1; }
      .site-loop__figure--2 { animation-timeline: --site-loop-2; }
      .site-loop__figure--3 { animation-timeline: --site-loop-3; }
      .site-loop__figure--4 { animation-timeline: --site-loop-4; }
    }
  }

  @keyframes site-loop-frame {
    0% {
      opacity: var(--opacity-none);
      translate: var(--space-0) var(--site-reveal-offset);
    }

    30%, 70% {
      opacity: var(--opacity-full);
      translate: var(--space-0) var(--space-0);
    }

    100% {
      opacity: var(--opacity-none);
      translate: var(--space-0) calc(-1 * var(--site-reveal-offset));
    }
  }

  @keyframes site-loop-words {
    0%, 100% {
      opacity: var(--site-question-rest);
    }

    35%, 65% {
      opacity: var(--opacity-full);
    }
  }
}