/* Hero sky motion: only the clouds drift right-to-left.
   The truck photo stays still underneath; a cut-out saguaro sits on top of the moving clouds. */
.desert .hero-visual { z-index:0; }
.hero-stage {
  position:absolute; left:0; right:0; bottom:0;
  aspect-ratio:1591/989; pointer-events:none; z-index:1;
}
.hero-clouds {
  position:absolute; left:0; top:0; width:100%; height:56.62%; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000000 21%,#000000 84%,transparent 97%),linear-gradient(to right,transparent 30%,#000000 46%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0%,#000000 21%,#000000 84%,transparent 97%),linear-gradient(to right,transparent 30%,#000000 46%);
  mask-composite:intersect;
}
.hero-clouds::before {
  content:''; position:absolute; top:0; left:0; height:100%; width:300%;
  background:url('hero-clouds.jpg') left top / auto 100% repeat-x;
  animation:desert-cloud-drift 45s linear infinite; will-change:transform;
}
/* one tile = 811/1591 of the stage width = 16.991% of this 300%-wide strip */
@keyframes desert-cloud-drift { from { transform:translateX(0); } to { transform:translateX(-16.991%); } }
.hero-saguaro {
  position:absolute; left:93.024%; top:43.478%; width:6.977%; height:auto; display:block;
}
.desert.sky-motion-paused .hero-clouds::before { animation-play-state:paused; }
.sky-motion-toggle {
  position:absolute; z-index:3; top:16px; right:5%;
  border:1px solid #7a828c; border-radius:4px; background:#050506cc; color:#dde1e5;
  padding:7px 10px; font:500 10px/1.4 Inter,Arial,sans-serif; cursor:pointer;
}
.sky-motion-toggle:hover { border-color:#5cc0ff; color:#f5f6f7; }
@media(max-width:650px) { .hero-stage,.sky-motion-toggle { display:none; } }
@media(prefers-reduced-motion:reduce) { .hero-stage,.sky-motion-toggle { display:none; } }
.desert .hero-copy { position:relative; z-index:2; opacity:1; }