/* Blizzard hero — layered photo + snow + fog. No dependencies. */

.blizzard-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 950;
  overflow: hidden;
  background: #b9c9db;
  isolation: isolate;
  --gust: 0;
}

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

.bh-layer > img,
.bh-layer > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* Background slowly pushes in and out behind the subject, who stays put. */
.bh-bg {
  transform-origin: 53% 55%;
  animation: bh-zoom 40s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes bh-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.22); }
}

/* Fog: a static window (.bh-fog) over a moving strip of a seamless tile. Vertical fades
   are baked into the textures (tools/layerize.py --fog); the only CSS mask left is the
   horizontal one on the sides layer, which can't be baked into a horizontally moving tile.
   JS sizes the strip in whole pixels and wraps it after exactly one tile, so the loop is seamless. */
.bh-fog {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bh-fog__strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  will-change: transform;
}

.bh-fog--far {
  opacity: calc(0.6 + var(--gust) * 0.4);
}

.bh-fog--far .bh-fog__strip {
  background-image: url("blizzard-hero-fog-far.webp");
}

/* keeps the face clear; fog hugs the ground */
.bh-fog--ground {
  opacity: calc(0.55 + var(--gust) * 0.45);
}

.bh-fog--ground .bh-fog__strip {
  background-image: url("blizzard-hero-fog-ground.webp");
}

.bh-fog--sides {
  opacity: calc(0.35 + var(--gust) * 0.65);
  -webkit-mask-image: linear-gradient(to right, #000, transparent 30%, transparent 70%, #000);
  mask-image: linear-gradient(to right, #000, transparent 30%, transparent 70%, #000);
}

.bh-fog--sides .bh-fog__strip {
  background-image: url("blizzard-hero-fog-sides.webp");
}

/* Whiteout veil that washes over the scene only during the hardest gusts. */
.bh-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 45%, rgba(236, 242, 248, 0.95), rgba(236, 242, 248, 0.55) 70%);
  opacity: clamp(0, (var(--gust) - 0.6) * 0.7, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .bh-bg { animation: none; }
  .bh-layer,
  .bh-bg,
  .bh-fog__strip { will-change: auto; }
}