/* Steam hero — layered photo + rising body steam + slow push-in. No dependencies. */

.steam-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 1333;
  overflow: hidden;
  background: #2a2118;
  isolation: isolate;
}

/* Slow Ken Burns push towards the head. The pan stays inside the slack the scale creates
   (origin 38%/35% at scale 1.1 leaves >= 3.5% per side; the pan is at most 2%), so no edge is ever revealed. */
.sh-stage {
  position: absolute;
  inset: 0;
  transform-origin: 38% 35%;
  animation: sh-push 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes sh-push {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(1.8%, 0.9%, 0); }
}

/* Every layer overscans 3% per side so scroll parallax never reveals an edge. */
.sh-layer {
  position: absolute;
  inset: -3%;
  pointer-events: none;
  will-change: transform;
}

.sh-layer > img,
.sh-layer > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sh-layer > img {
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .sh-stage { animation: none; will-change: auto; }
  .sh-layer { will-change: auto; }
}