/* Independent foreground planes: preserve the artwork's existing transforms
   and move each piece toward the viewer with the individual translate property. */
@supports (translate: 0 0 1px) {
  :is(.flow-poster,.learning-poster,.enterprise-poster,.beta-poster,.creator-wordmark).depth-panel {
    --layer-scale: 1;
    --depth-range: 4deg;
    --depth-sway: 6deg;
    --depth-lift: 9px;
  }
  .flow-poster.depth-panel .flow-station { --layer-z: 30px; --layer-rise: 30px; --layer-y: 3px }
  .flow-poster.depth-panel .final-station { --layer-z: 48px; --layer-rise: 36px; --layer-y: 5px }
  .flow-poster.depth-panel .flow-branches { --layer-z: 12px; --layer-rise: 18px; --layer-y: 2px }
  .learning-poster.depth-panel > p,
  .creator-wordmark.depth-panel > p,
  .beta-poster.depth-panel > .poster-word { --layer-z: 38px; --layer-rise: 35px; --layer-y: 4px }
  .enterprise-poster.depth-panel > .team-orbit { --layer-z: 18px; --layer-rise: 22px; --layer-y: 3px }
  .enterprise-poster.depth-panel > h2 { --layer-z: 34px; --layer-rise: 26px; --layer-y: 3px }
  .beta-poster.depth-panel > .poster-lines,
  .learning-poster.depth-panel > .learning-track { --layer-z: 15px; --layer-rise: 20px; --layer-y: 2px }

  :is(.flow-poster,.learning-poster,.enterprise-poster,.beta-poster,.creator-wordmark).depth-panel
  :is(.flow-station,.flow-branches,.poster-word,.poster-lines,.learning-track,.team-orbit),
  :is(.learning-poster,.creator-wordmark).depth-panel > p,
  .enterprise-poster.depth-panel > h2 {
    translate: 0 0 calc(var(--layer-z, 0px) * var(--layer-scale));
  }
  .creator-wordmark.depth-panel > .creator-prompt-box { translate: 0 0 calc(45px * var(--layer-scale)) }
  .requirements-chip.depth-panel .requirements-chip-face { translate: 0 0 24px }
  .requirements-chip.depth-panel .requirements-chip-memory { translate: 0 0 18px }
  .hero-art.hero-depth { --person-depth: 125px; --chair-depth: 58px; --screen-depth: 82px; --label-depth: 135px }
  .closing-team-art.depth-panel { --character-depth-scale: 2.7 }

  @media (prefers-reduced-motion: no-preference) {
    html.motion-enabled :is(.flow-poster,.learning-poster,.enterprise-poster,.beta-poster,.creator-wordmark).depth-panel
    :is(.flow-station,.flow-branches,.poster-word,.poster-lines,.learning-track,.team-orbit),
    html.motion-enabled :is(.learning-poster,.creator-wordmark).depth-panel > p,
    html.motion-enabled .enterprise-poster.depth-panel > h2 {
      animation: layer-lift 8s ease-in-out infinite;
    }
    html.motion-enabled .flow-poster.depth-panel .flow-branches,
    html.motion-enabled .beta-poster.depth-panel > .poster-lines,
    html.motion-enabled .learning-poster.depth-panel > .learning-track { animation-delay: -2.5s; animation-duration: 9s }
    html.motion-enabled .flow-poster.depth-panel .final-station,
    html.motion-enabled .enterprise-poster.depth-panel > h2 { animation-delay: -4s; animation-duration: 10s }
    @keyframes layer-lift {
      0%,100% { translate: 0 0 calc(var(--layer-z, 0px) * var(--layer-scale)) }
      50% { translate: 0 calc(-1 * var(--layer-y, 0px) * var(--layer-scale)) calc((var(--layer-z, 0px) + var(--layer-rise, 0px)) * var(--layer-scale)) }
    }
  }
  @media (max-width: 760px) {
    :is(.flow-poster,.learning-poster,.enterprise-poster,.beta-poster,.creator-wordmark).depth-panel {
      --layer-scale: .55;
      --depth-range: 2deg;
      --depth-sway: 2.5deg;
      --depth-lift: 4px;
    }
    .requirements-chip.depth-panel .requirements-chip-face { translate: 0 0 12px }
    .requirements-chip.depth-panel .requirements-chip-memory { translate: 0 0 9px }
    .hero-art.hero-depth { --person-depth: 42px; --chair-depth: 22px; --screen-depth: 28px; --label-depth: 66px }
    .closing-team-art.depth-panel { --character-depth-scale: .6 }
  }
  @media (prefers-reduced-motion: reduce) {
    :is(.flow-poster,.learning-poster,.enterprise-poster,.beta-poster,.creator-wordmark).depth-panel * { translate: none }
    .requirements-chip.depth-panel .requirements-chip-face,
    .requirements-chip.depth-panel .requirements-chip-memory { translate: none }
  }
}