/* ===========================================================================
   Canvas backdrop for the hero's animated gradient waves.
   See gradient-waves.js for the shader and why it's a hand port.
   =========================================================================== */

.aimore-gradient-waves {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Inserted as the hero's first child, so a plain z-index:0 keeps it under
     every later sibling (the headline block, the store buttons, the phone
     mockups) without needing to re-stack any of them - positioned siblings
     at z-index:auto paint in DOM order, and all of those come after it. */
  z-index: 0;
  pointer-events: none;
  /* Only the last sliver is masked. The bottom of the canvas is where the
     waves are actually AT full strength (near camera = opaque), so a fade
     reaching any further up cancels out most of the effect - an earlier
     version faded the bottom 45% and left almost nothing visible. The top
     needs no mask at all: the shader's own distance-based alpha already
     takes it to fully transparent by the horizon. */
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
}

/* The light theme's hero is near-white, and this effect is built out of
   dark blues glowing against a dark ground - over white it reads as muddy
   haze rather than depth, so it's dark-theme only (which is also the
   site's default). */
html:not([data-theme="dark"]) .aimore-gradient-waves {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .aimore-gradient-waves {
    display: none;
  }
}