.image-stream-hero {
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: min(100svh, 960px);
  padding: calc(var(--header) + 72px) var(--gutter) 104px;
  overflow: hidden;
  background: #070707;
  color: #fff;
  --stream-axis: 54%;
  --stream-card-height: 25cqw;
}

.image-stream-hero .hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(15px, 2vw, 28px);
  text-align: center;
}

.image-stream-hero .eyebrow { color: var(--mustard); }
.image-stream-hero .display {
  font-size: clamp(42px, 8vw, 120px);
  text-shadow: 0 4px 28px #000b;
}
.image-stream-hero .display span { display: block; color: var(--mustard); }
.image-stream-hero .hero-intro { display: grid; justify-items: center; gap: 22px; }
.image-stream-hero .body-copy { max-width: 35ch; color: #fff; text-shadow: 0 2px 12px #000; }
.image-stream-hero .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.image-stream-scene, .image-stream-track, .image-stream-shade { position: absolute; inset: 0; pointer-events: none; }
.image-stream-scene { z-index: 0; perspective: 30cqw; perspective-origin: 50% var(--stream-axis); }
.image-stream-track { transform-style: preserve-3d; }
.image-stream-track--left { --stream-side: -1; }
.image-stream-track--right { --stream-side: 1; }

.image-stream-card {
  position: absolute;
  left: 50%;
  top: var(--stream-axis);
  width: 18cqw;
  height: var(--stream-card-height);
  margin-left: -9cqw;
  margin-top: calc(var(--stream-card-height) / -2);
  border: 1px solid rgb(243 202 32 / .32);
  border-radius: .4cqw;
  overflow: hidden;
  background: #282319;
  backface-visibility: hidden;
  animation: upper-graph-stream 18s linear var(--stream-delay) infinite;
}

.image-stream-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) brightness(.82); }
.image-stream-shade {
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgb(0 0 0 / .83) 1%, rgb(0 0 0 / .42) 36%, transparent 71%),
    linear-gradient(to bottom, #070707 4%, transparent 29% 70%, #070707 100%);
}

.image-stream-toggle:not([hidden]) {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: 20px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #bca13e;
  background: #0b0b0b;
  color: var(--mustard);
  font: 700 12px Metropolis, sans-serif;
  cursor: pointer;
}
.image-stream-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.image-stream-hero:not([data-stream-ready]) .image-stream-card,
.image-stream-hero[data-stream-paused] .image-stream-card,
.image-stream-hero[data-stream-offscreen] .image-stream-card { animation-play-state: paused; }

@media (max-width: 620px) {
  .image-stream-hero {
    --stream-card-height: 35cqw;
    --stream-axis: 52%;
    min-height: max(620px, 92svh);
    padding-block: calc(var(--header) + 47px) 83px;
  }
  .image-stream-hero .display { font-size: clamp(38px, 10vw, 62px); }
  .image-stream-shade {
    background:
      radial-gradient(ellipse at center, rgb(0 0 0 / .79), transparent 75%),
      linear-gradient(to bottom, #070707 8%, transparent 32% 68%, #070707 96%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-stream-hero .image-stream-card { animation-play-state: paused; }
  .image-stream-toggle:not([hidden]) { display: none; }
}

/* Sample the perspective path in even steps of apparent card size. */
@keyframes upper-graph-stream {
  0.00% { transform: translate3d(calc(var(--stream-side) * -11.00cqw), 0, -258.46cqw) rotateY(calc(var(--stream-side) * -6.00deg)); }
  4.17% { transform: translate3d(calc(var(--stream-side) * -3.79cqw), 0, -225.92cqw) rotateY(calc(var(--stream-side) * -6.92deg)); }
  8.33% { transform: translate3d(calc(var(--stream-side) * 2.73cqw), 0, -197.04cqw) rotateY(calc(var(--stream-side) * -7.83deg)); }
  12.50% { transform: translate3d(calc(var(--stream-side) * 8.60cqw), 0, -171.43cqw) rotateY(calc(var(--stream-side) * -8.75deg)); }
  16.67% { transform: translate3d(calc(var(--stream-side) * 13.87cqw), 0, -148.70cqw) rotateY(calc(var(--stream-side) * -9.67deg)); }
  20.83% { transform: translate3d(calc(var(--stream-side) * 18.56cqw), 0, -128.54cqw) rotateY(calc(var(--stream-side) * -10.58deg)); }
  25.00% { transform: translate3d(calc(var(--stream-side) * 22.72cqw), 0, -110.65cqw) rotateY(calc(var(--stream-side) * -11.50deg)); }
  29.17% { transform: translate3d(calc(var(--stream-side) * 26.37cqw), 0, -94.78cqw) rotateY(calc(var(--stream-side) * -12.42deg)); }
  33.33% { transform: translate3d(calc(var(--stream-side) * 29.57cqw), 0, -80.70cqw) rotateY(calc(var(--stream-side) * -13.33deg)); }
  37.50% { transform: translate3d(calc(var(--stream-side) * 32.34cqw), 0, -68.21cqw) rotateY(calc(var(--stream-side) * -14.25deg)); }
  41.67% { transform: translate3d(calc(var(--stream-side) * 34.71cqw), 0, -57.13cqw) rotateY(calc(var(--stream-side) * -15.17deg)); }
  45.83% { transform: translate3d(calc(var(--stream-side) * 36.73cqw), 0, -47.30cqw) rotateY(calc(var(--stream-side) * -16.08deg)); }
  50.00% { transform: translate3d(calc(var(--stream-side) * 38.42cqw), 0, -38.58cqw) rotateY(calc(var(--stream-side) * -17.00deg)); }
  54.17% { transform: translate3d(calc(var(--stream-side) * 39.81cqw), 0, -30.84cqw) rotateY(calc(var(--stream-side) * -17.92deg)); }
  58.33% { transform: translate3d(calc(var(--stream-side) * 40.94cqw), 0, -23.98cqw) rotateY(calc(var(--stream-side) * -18.83deg)); }
  62.50% { transform: translate3d(calc(var(--stream-side) * 41.84cqw), 0, -17.89cqw) rotateY(calc(var(--stream-side) * -19.75deg)); }
  66.67% { transform: translate3d(calc(var(--stream-side) * 42.53cqw), 0, -12.48cqw) rotateY(calc(var(--stream-side) * -20.67deg)); }
  70.83% { transform: translate3d(calc(var(--stream-side) * 43.06cqw), 0, -7.69cqw) rotateY(calc(var(--stream-side) * -21.58deg)); }
  75.00% { transform: translate3d(calc(var(--stream-side) * 43.43cqw), 0, -3.44cqw) rotateY(calc(var(--stream-side) * -22.50deg)); }
  79.17% { transform: translate3d(calc(var(--stream-side) * 43.69cqw), 0, 0.33cqw) rotateY(calc(var(--stream-side) * -23.42deg)); }
  83.33% { transform: translate3d(calc(var(--stream-side) * 43.85cqw), 0, 3.68cqw) rotateY(calc(var(--stream-side) * -24.33deg)); }
  87.50% { transform: translate3d(calc(var(--stream-side) * 43.94cqw), 0, 6.65cqw) rotateY(calc(var(--stream-side) * -25.25deg)); }
  91.67% { transform: translate3d(calc(var(--stream-side) * 43.98cqw), 0, 9.28cqw) rotateY(calc(var(--stream-side) * -26.17deg)); }
  95.83% { transform: translate3d(calc(var(--stream-side) * 44.00cqw), 0, 11.62cqw) rotateY(calc(var(--stream-side) * -27.08deg)); }
  100.00% { transform: translate3d(calc(var(--stream-side) * 44.00cqw), 0, 13.70cqw) rotateY(calc(var(--stream-side) * -28.00deg)); }
}