/* Wolkenlicht im Hero: driftende Fraktalschleier, nahtlose Dauerschleife. */
.hero-clouds {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.05) 0, rgba(0,0,0,.25) 24%, rgba(0,0,0,.8) 50%, rgba(0,0,0,1) 80%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.05) 0, rgba(0,0,0,.25) 24%, rgba(0,0,0,.8) 50%, rgba(0,0,0,1) 80%);
}
.hero-clouds i {
  position: absolute;
  left: 0;
  width: 200%;
  display: block;
  animation-name: cc-sky-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.hero-clouds i::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  animation-name: cc-sky-swell;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform, opacity;
}

/* grosse, sehr langsame Lichtstimmung */
.hero-clouds .sky-a { top: -18%; height: 136%; animation-duration: 260s; animation-delay: -70s; }
.hero-clouds .sky-a::before { background-image: url('images/cloud-noise-c.webp'); opacity: .9; animation-duration: 41s; }

/* mittlere Wolkenbaenke, gegenlaeufig */
.hero-clouds .sky-b { top: -22%; height: 118%; animation-duration: 178s; animation-delay: -96s; animation-direction: reverse; }
.hero-clouds .sky-b::before { background-image: url('images/cloud-noise-a.webp'); opacity: .8; animation-duration: 29s; animation-delay: -9s; }

/* feine, schnellere Schleier */
.hero-clouds .sky-c { top: -12%; height: 92%; animation-duration: 118s; animation-delay: -37s; }
.hero-clouds .sky-c::before { background-image: url('images/cloud-noise-b.webp'); opacity: .62; animation-duration: 23s; animation-delay: -14s; }

@keyframes cc-sky-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes cc-sky-swell {
  from { transform: translate3d(0, -1.1%, 0) scale(1); opacity: .55; }
  to   { transform: translate3d(0, 1.4%, 0) scale(1.06); opacity: 1; }
}

@media (max-width: 900px) {
  .hero-clouds .sky-c { display: none; }
  .hero-clouds { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-clouds { display: none; }
}