/* The image drifts behind the normal document flow; the text stays still. */
.earth-parallax .hero::before {
  z-index: -3;
  background-size: var(--earth-image-size, cover);
  background-position: var(--earth-image-position, center bottom);
  transform: translate3d(0, var(--earth-shift, 0px), 0);
  will-change: transform;
}
.earth-parallax .hero::after { z-index: -2; }
@media (max-width: 760px) {
  .earth-parallax .hero::before { background-position: var(--earth-image-position, 56% bottom); }
}
@media (min-width: 761px) and (max-height: 720px) {
  .earth-parallax .hero { padding-top: clamp(18px, 4vh, 32px); }
  .earth-parallax .hero h1 { font-size: clamp(49px, 10vh, 72px); margin-top: 17px; margin-bottom: 16px; }
  .earth-parallax .hero-actions { margin-top: 20px; }
  .earth-parallax .hero-note { margin-top: 14px; }
}
.earth-parallax .horizon-sunlight {
  display: block;
  position: absolute;
  left: var(--earth-image-left, 0px);
  top: var(--earth-image-top, 0px);
  width: var(--earth-image-width, 100%);
  height: var(--earth-image-height, 100%);
  z-index: -1;
  pointer-events: none;
  opacity: var(--sunrise-opacity, 0);
  transform: translate3d(0, var(--earth-shift, 0px), 0);
  will-change: transform;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .earth-parallax .hero::before { transform: none; will-change: auto; }
  .earth-parallax .horizon-sunlight { display: none; will-change: auto; }
}