/* Desktop: a five-beat scroll sequence — four cards, then one shared exit. */
@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .theory {
    --theory-progress: 0;
    min-height: 510vh;
    padding: 0;
    isolation: isolate;
    background:
      radial-gradient(circle at 54% 18%, rgba(255,255,255,.13), transparent 32%),
      linear-gradient(148deg, #173522 0%, #0e261b 50%, #0b1a15 100%);
  }

  .theory::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(7,19,13,.36), transparent 55%), linear-gradient(0deg, rgba(3,12,8,.27), transparent 48%);
  }

  .theory-bg {
    position: sticky;
    top: 0;
    left: 0;
    display: block;
    z-index: 0;
    width: 100%;
    height: 100vh;
    margin-bottom: -100vh;
    object-fit: cover;
    object-position: center bottom;
    opacity: .94;
  }

  .theory h2 {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    width: min(47vw, 710px);
    height: 100vh;
    margin: -100vh 0 0;
    padding-left: max(7vw, 48px);
    font-size: clamp(46px, 4.5vw, 72px);
    line-height: 1.25;
    text-shadow: 0 4px 24px rgba(0,0,0,.24);
    pointer-events: none;
  }

  .theory-grid {
    position: sticky;
    top: 0;
    z-index: 3;
    display: block;
    width: min(38vw, 520px);
    height: 100vh;
    max-width: none;
    margin: -100vh max(7vw, 52px) 0 auto;
  }

  .theory-grid article,
  .theory-grid article:nth-child(n) {
    --card-progress: 0;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    min-height: min(47vh, 445px);
    margin: 0;
    padding: clamp(28px, 3vw, 44px);
    transform: translateY(calc(-50% + (1 - var(--card-progress)) * 150px)) scale(calc(.92 + var(--card-progress) * .08));
    opacity: var(--card-progress);
    filter: blur(calc((1 - var(--card-progress)) * 5px));
    transition: opacity .08s linear, transform .08s linear, filter .08s linear;
    will-change: opacity, transform, filter;
    box-shadow: 0 24px 55px rgba(0,0,0,.24), inset 1px 1px 0 rgba(255,255,255,.62), inset -8px -8px 0 rgba(0,0,0,.05);
  }

  .theory-grid article:nth-child(1) { z-index: 1; }
  .theory-grid article:nth-child(2) { z-index: 2; }
  .theory-grid article:nth-child(3) { z-index: 3; }
  .theory-grid article:nth-child(4) { z-index: 4; }
  .theory-grid p { margin-top: clamp(44px, 6vh, 76px); }

  /* The final fifth of the section sends the whole pinned composition away. */
  .theory h2,
  .theory-grid,
  .theory-bg {
    transform: translateY(calc(max(0px, (var(--theory-progress) - .82) * -420px)));
    opacity: calc(1 - max(0, (var(--theory-progress) - .82) * 5.55));
    transition: opacity .06s linear, transform .06s linear;
  }
}