.scene {
  --scene-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(300px, 34vw, 520px);
  overflow: hidden;
}

.scene-art {
  position: absolute;
  inset: 0 0 0 42%;
  background-position: 50% 45%;
  background-size: cover;
  background-repeat: no-repeat;
  animation: scene-settle 1.6s var(--scene-ease) both;
}

.scene-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--hn-fade-1) 0%, var(--hn-fade-0) 32%),
              linear-gradient(180deg, var(--hn-fade-0) 68%, var(--hn-fade-1) 100%);
}

@keyframes scene-settle {
  from { transform: scale(1.05); opacity: 0.35; }
}

.scene-copy {
  position: relative;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(2rem, 3.5vw, 3rem);
}

.scene-copy h1 {
  max-width: 30rem;
  margin: 0.5rem 0 0;
  text-wrap: balance;
}

.scene + main {
  padding-top: 2rem;
}

.scene[data-scene="cut"] .scene-art {
  background-image: url("/scene-cut-light.webp");
  background-image: image-set(url("/scene-cut-light.avif") type("image/avif"), url("/scene-cut-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="cut"] .scene-art {
  background-image: url("/scene-cut-dark.webp");
  background-image: image-set(url("/scene-cut-dark.avif") type("image/avif"), url("/scene-cut-dark.webp") type("image/webp"));
}

.scene[data-scene="rack"] .scene-art {
  background-position: 56% 48%;
  background-image: url("/scene-rack-light.webp");
  background-image: image-set(url("/scene-rack-light.avif") type("image/avif"), url("/scene-rack-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="rack"] .scene-art {
  background-image: url("/scene-rack-dark.webp");
  background-image: image-set(url("/scene-rack-dark.avif") type("image/avif"), url("/scene-rack-dark.webp") type("image/webp"));
}

.scene[data-scene="house"] .scene-art {
  background-position: 54% 45%;
  background-image: url("/scene-house-light.webp");
  background-image: image-set(url("/scene-house-light.avif") type("image/avif"), url("/scene-house-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="house"] .scene-art {
  background-image: url("/scene-house-dark.webp");
  background-image: image-set(url("/scene-house-dark.avif") type("image/avif"), url("/scene-house-dark.webp") type("image/webp"));
}

.scene[data-scene="ride"] .scene-art {
  background-position: 58% 44%;
  background-image: url("/scene-ride-light.webp");
  background-image: image-set(url("/scene-ride-light.avif") type("image/avif"), url("/scene-ride-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="ride"] .scene-art {
  background-image: url("/scene-ride-dark.webp");
  background-image: image-set(url("/scene-ride-dark.avif") type("image/avif"), url("/scene-ride-dark.webp") type("image/webp"));
}

.scene[data-scene="bill"] .scene-art {
  background-position: 52% 46%;
  background-image: url("/scene-bill-light.webp");
  background-image: image-set(url("/scene-bill-light.avif") type("image/avif"), url("/scene-bill-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="bill"] .scene-art {
  background-image: url("/scene-bill-dark.webp");
  background-image: image-set(url("/scene-bill-dark.avif") type("image/avif"), url("/scene-bill-dark.webp") type("image/webp"));
}

.scene[data-scene="message"] .scene-art {
  background-position: 58% 47%;
  background-image: url("/scene-message-light.webp");
  background-image: image-set(url("/scene-message-light.avif") type("image/avif"), url("/scene-message-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="message"] .scene-art {
  background-image: url("/scene-message-dark.webp");
  background-image: image-set(url("/scene-message-dark.avif") type("image/avif"), url("/scene-message-dark.webp") type("image/webp"));
}

.scene[data-scene="map"] .scene-art {
  background-position: 50% 50%;
  background-image: url("/scene-map-light.webp");
  background-image: image-set(url("/scene-map-light.avif") type("image/avif"), url("/scene-map-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="map"] .scene-art {
  background-image: url("/scene-map-dark.webp");
  background-image: image-set(url("/scene-map-dark.avif") type("image/avif"), url("/scene-map-dark.webp") type("image/webp"));
}

.scene[data-scene="optics"] .scene-art {
  background-position: 60% 50%;
  background-image: url("/scene-optics-light.webp");
  background-image: image-set(url("/scene-optics-light.avif") type("image/avif"), url("/scene-optics-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="optics"] .scene-art {
  background-image: url("/scene-optics-dark.webp");
  background-image: image-set(url("/scene-optics-dark.avif") type("image/avif"), url("/scene-optics-dark.webp") type("image/webp"));
}

.scene[data-scene="report"] .scene-art {
  background-position: 56% 46%;
  background-image: url("/scene-report-light.webp");
  background-image: image-set(url("/scene-report-light.avif") type("image/avif"), url("/scene-report-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="report"] .scene-art {
  background-image: url("/scene-report-dark.webp");
  background-image: image-set(url("/scene-report-dark.avif") type("image/avif"), url("/scene-report-dark.webp") type("image/webp"));
}

.scene[data-scene="camera"] .scene-art {
  background-position: 54% 46%;
  background-image: url("/scene-camera-light.webp");
  background-image: image-set(url("/scene-camera-light.avif") type("image/avif"), url("/scene-camera-light.webp") type("image/webp"));
}
html.dark .scene[data-scene="camera"] .scene-art {
  background-image: url("/scene-camera-dark.webp");
  background-image: image-set(url("/scene-camera-dark.avif") type("image/avif"), url("/scene-camera-dark.webp") type("image/webp"));
}

@media (max-width: 900px) {
  .scene { min-height: clamp(260px, 50vw, 400px); }
  .scene-art { inset: 0; opacity: 0.55; background-position: 50% 42%; }
  .scene-art::after { background: linear-gradient(180deg, var(--hn-fade-0) 44%, var(--hn-fade-1) 100%); }
  .scene-copy h1 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-art { animation: none; }
}