/* Storm hero — static landscape cutout under an endlessly drifting sky. No dependencies. */

.storm-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 1334;
  overflow: hidden;
  background: #8f939a;
  isolation: isolate;
}

/* Slow push-in on the whole scene; scale >= 1 with no pan, so no edge is ever revealed. */
.st-stage {
  position: absolute;
  inset: 0;
  transform-origin: 45% 70%;
  animation: st-push 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes st-push {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* Sky window: the tile is cropped to the lowest point where sky shows through the foreground
   (1127 of 1334 px). Only the inner strip moves; JS sizes it in whole pixels and wraps it after
   exactly one tile, so the loop is seamless. */
.st-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% * 1127 / 1334);
  overflow: hidden;
}

.st-sky__strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  background-image: url("storm-hero-sky.webp");
  background-repeat: repeat-x;
  background-size: 79% 100%;
  will-change: transform;
}

.st-stage > img,
.st-stage > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Cloud shadows only fall on the foreground; strength is set here. */
.st-shadow {
  opacity: 0.32;
}

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