.intro { position: relative; }
.intro-paw {
  position: absolute;
  height: auto;
  pointer-events: none;
}
.intro-paw {
  top: clamp(.45rem, 1vw, 1rem);
  right: 7%;
  width: clamp(1.65rem, 4.4vw, 4.25rem);
}
.films-group-short .films-group-heading {
  position: relative;
  isolation: isolate;
}
.films-group-short .films-group-heading::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 17%;
  bottom: 0;
  width: 14%;
  height: 135%;
  background: url("assets/leao-completo-amarelo.svg") center bottom / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 610px) {
  .films-group-short .films-group-heading::after { right: 22%; height: 110%; }
}

@media (prefers-reduced-motion: no-preference) {
  .intro, .films-heading, .films-group-short .films-group-heading {
    --scene-travel: calc(1 - var(--scene-progress, 1));
  }

  /* The intro starts on the same ink color as the last frame of the opening. */
  .intro {
    isolation: isolate;
    overflow: clip;
    --text-travel: clamp(1.5rem, 4vw, 4rem);
  }
  .intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--red);
    clip-path: polygon(94% 0, 100% 0, 100% 100%, 80% 100%, 91% 64%, 87% 38%);
    transform: translate(10%, 10%) translateX(calc(22% * var(--scene-travel))) scale(1.12);
    transform-origin: right bottom;
    opacity: .45;
    pointer-events: none;
  }
  .intro::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .24rem;
    background: var(--yellow);
    transform: scaleX(var(--scene-progress, 1));
    transform-origin: left;
    pointer-events: none;
  }
  .intro-label {
    transform: translateY(calc(-1rem * var(--scene-travel)));
  }
  .intro-paw {
    transform: translateX(calc(1.25rem * var(--scene-travel)))
      rotate(calc(16deg * var(--scene-travel))) scale(calc(1 - .2 * var(--scene-travel)));
    opacity: var(--scene-progress, 1);
  }
  .intro-content h2 {
    transform: translateY(calc(var(--text-travel) * var(--scene-travel))) scale(calc(1 - .075 * var(--scene-travel)));
    transform-origin: left bottom;
  }
  .intro-content p {
    transform: translateY(calc(1.3 * var(--text-travel) * var(--scene-travel)));
  }
  .intro-date {
    transform: translateY(calc(.8 * var(--text-travel) * var(--scene-travel)));
  }

  /* The existing red shape and the title move in separate planes. */
  .films-heading::before {
    transform: translateX(calc(20% * var(--scene-travel))) scaleX(calc(1 + .6 * var(--scene-travel)));
    transform-origin: right;
  }
  .films-heading h2 {
    transform: perspective(50rem) translateY(calc(3rem * var(--scene-travel)))
      rotateX(calc(12deg * var(--scene-travel))) scale(calc(1 - .11 * var(--scene-travel)));
    transform-origin: left bottom;
  }
  .films-caption {
    transform: translateY(calc(1.8rem * var(--scene-travel)));
  }

  /* Cards in each row share the scroll position, with a delay per column. */
  .films-grid > li {
    --poster-progress: clamp(0, calc((var(--scene-progress, 1) - var(--poster-offset, 0)) * 1.45), 1);
    --poster-travel: calc(1 - var(--poster-progress));
    --poster-distance: clamp(1.2rem, 3.5vw, 3.2rem);
  }
  .films-grid > li > .film-card {
    transform: translateY(calc(var(--poster-distance) * var(--poster-travel)))
      scale(calc(1 - .08 * var(--poster-travel)));
    transform-origin: center bottom;
  }
  .films-grid > li:has(:focus-visible) {
    --poster-travel: 0;
  }
  @media (width > 880px) {
    .films-grid > li:nth-child(4n + 2) { --poster-offset: .09; }
    .films-grid > li:nth-child(4n + 3) { --poster-offset: .18; }
    .films-grid > li:nth-child(4n) { --poster-offset: .27; }
  }
  @media (610px < width <= 880px) {
    .films-grid > li:nth-child(3n + 2) { --poster-offset: .1; }
    .films-grid > li:nth-child(3n) { --poster-offset: .2; }
  }

  /* The official lion passes through the graphic at the change of category. */
  .films-group-short .films-group-heading::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -.85rem 14% 0 37%;
    background: var(--red);
    clip-path: polygon(0 100%, 22% 48%, 19% 0, 100% 0, 76% 51%, 81% 100%);
    transform: translateX(calc(-1.6rem * var(--scene-travel))) scaleX(var(--scene-progress, 1));
    transform-origin: left;
    opacity: .65;
    pointer-events: none;
  }
  .films-group-short .films-group-heading::after {
    transform: translateX(calc(1.9rem * var(--scene-travel))) scale(calc(.6 + .4 * var(--scene-progress, 1)));
    transform-origin: bottom;
    opacity: var(--scene-progress, 1);
  }
  .films-group-short .films-reel {
    transform: rotate(calc(-14deg * var(--scene-travel))) scale(calc(1 - .16 * var(--scene-travel)));
  }

  @media (max-width: 610px) {
    .intro { --text-travel: 1.2rem; }
    .intro::before { opacity: .24; }
    .films-heading h2 {
      transform: translateY(calc(1.3rem * var(--scene-travel))) scale(calc(1 - .065 * var(--scene-travel)));
    }
    .films-caption { transform: translateY(calc(.8rem * var(--scene-travel))); }
    .films-grid > li:nth-child(even) { --poster-offset: .12; }
    .films-grid > li > .film-card {
      transform: translateY(calc(1.15rem * var(--poster-travel))) scale(calc(1 - .045 * var(--poster-travel)));
    }
    .films-group-short .films-group-heading::before { left: 52%; }
  }
}