/* ==========================================================================
   Earth hero — animated background for the home page hero
   Add `earth-hero` to the CSS Class of each hero Container (home header
   layout: the desktop and the tablet/mobile hero). js/earth-hero-init.js
   inserts the background layers.

   The image and its masks assume the 2560 x 1707 source. Avada's own
   background on the Container stays as the static fallback.
   ========================================================================== */

.earth-hero {
  --earth-image: url("/files/2025/08/Earth-from-Sapce-Dark-Image-Blue-Tone-1-scaled-1-1.jpg");
  --earth-travel-x: 1.25%;
  --earth-travel-y: 0.55%;
  --earth-zoom-start: 1.04;
  --earth-zoom-end: 1.12;
  --earth-drift-duration: 12s; /* Pan, each direction; full cycle is 24s. */
  --earth-zoom-duration: 18s;  /* Zoom, each direction; full cycle is 36s. */
  --earth-glow-strength: 0.9;
  --earth-light-strength: 0.65;

  position: relative;
  isolation: isolate;
}

/* Must be a DIRECT child of the hero container, outside its content rows.
   Negative stacking places it above the container's background but below
   normal hero content, inside the hero's isolated stacking context. */
.earth-hero > .earth-hero-viewport {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  container-type: size;
  display: none;
}

/* Keep Avada's original static background as a fallback. */
@supports (width: 1cqw) and (container-type: size) {
  .earth-hero > .earth-hero-viewport {
    display: block;
  }
}

/* A cover-sized canvas preserving the original 2560:1707 ratio, positioned
   centre top to match the Container's Avada background position. The image
   and its masks are cropped together, so the glow stays on the rim. */
.earth-hero .earth-hero-canvas {
  position: absolute;
  left: 50%;
  top: 0;
  width: max(100cqw, 149.97071cqh);
  height: max(100cqh, 66.6796875cqw);
  transform: translateX(-50%);
}

.earth-hero .earth-hero-scene,
.earth-hero .earth-hero-scene::before,
.earth-hero .earth-hero-scene::after {
  position: absolute;
  inset: 0;
  background-image: var(--earth-image);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Move all three copies of the image together. Pan and zoom are separate
   animations (translate / scale properties) so each has its own speed. */
.earth-hero .earth-hero-scene {
  isolation: isolate;
  transform-origin: 50% 50%;
  animation:
    earth-hero-drift var(--earth-drift-duration) ease-in-out -3s infinite alternate,
    earth-hero-zoom var(--earth-zoom-duration) ease-in-out -3s infinite alternate;
}

/* Copy 2: isolate and brighten the existing blue atmospheric rim. */
.earth-hero .earth-hero-scene::before {
  content: "";
  mix-blend-mode: screen;
  filter: blur(3px) brightness(1.9);
  -webkit-mask-image: radial-gradient(
    ellipse 27.5% 41.9% at 50% 50.1%,
    transparent 93%, #000 99%, #000 101%, transparent 105%
  );
  mask-image: radial-gradient(
    ellipse 27.5% 41.9% at 50% 50.1%,
    transparent 93%, #000 99%, #000 101%, transparent 105%
  );
  animation: earth-hero-glow 8s ease-in-out -1.5s infinite;
}

/* Copy 3: a soft band reveals brighter detail across the continents. */
.earth-hero .earth-hero-scene::after {
  content: "";
  mix-blend-mode: screen;
  filter: brightness(1.8);
  -webkit-mask-image: linear-gradient(
    110deg, transparent 28%, #000 48%, #000 52%, transparent 72%
  );
  mask-image: linear-gradient(
    110deg, transparent 28%, #000 48%, #000 52%, transparent 72%
  );
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: earth-hero-light 12s linear -3s infinite;
}

@keyframes earth-hero-drift {
  from { translate: calc(-1 * var(--earth-travel-x)) var(--earth-travel-y); }
  to { translate: var(--earth-travel-x) calc(-1 * var(--earth-travel-y)); }
}

@keyframes earth-hero-zoom {
  from { scale: var(--earth-zoom-start); }
  to { scale: var(--earth-zoom-end); }
}

@keyframes earth-hero-glow {
  0%, 100% { opacity: 0.12; }
  50% { opacity: var(--earth-glow-strength); }
}

@keyframes earth-hero-light {
  0% {
    -webkit-mask-position: 100% 50%;
    mask-position: 100% 50%;
    opacity: 0;
  }
  20%, 80% { opacity: var(--earth-light-strength); }
  100% {
    -webkit-mask-position: 0% 50%;
    mask-position: 0% 50%;
    opacity: 0;
  }
}

/* Display the original still image for reduced-motion visitors. */
@media (prefers-reduced-motion: reduce) {
  .earth-hero .earth-hero-scene {
    animation: none;
    translate: none;
    scale: none;
  }

  .earth-hero .earth-hero-scene::before,
  .earth-hero .earth-hero-scene::after {
    animation: none;
    display: none;
  }
}

/* Without mask support, retain the drift and omit the light overlays. */
@supports not ((mask-image: linear-gradient(#000, #000)) or
  (-webkit-mask-image: linear-gradient(#000, #000))) {
  .earth-hero .earth-hero-scene::before,
  .earth-hero .earth-hero-scene::after { display: none; }
}