/* AquaTour sea-depth direction prototype. Last updated: 2026-09-28. Version: 0.7. */

/* The same decorative sea surface spans the three blue sections without intercepting input. */
#areas.home-areas,
#reviews.reviews-section,
#how.included-life {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none;
}

#areas.home-areas::before,
#reviews.reviews-section::before,
#how.included-life::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16% -10%;
  pointer-events: none;
  background-image: url("assets/sea-depth-field.svg?v=20260928-5");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 1;
  transform: perspective(680px) rotateX(12deg) translate3d(0, var(--sea-depth-shift, 0px), 0) scale(1.08);
  transform-origin: 50% 18%;
}

#areas.home-areas > *,
#reviews.reviews-section > *,
#how.included-life > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  /* Unlike hidden, clip cannot become a sideways scroll container when a card is focused. */
  @supports (overflow: clip) {
    #areas.home-areas { overflow: clip; }
  }

  #areas.home-areas::before,
  #reviews.reviews-section::before,
  #how.included-life::before {
    inset: -10% -13%;
    background-size: 235% 100%;
    transform: perspective(520px) rotateX(9deg) translate3d(0, var(--sea-depth-shift, 0px), 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  #areas.home-areas::before,
  #reviews.reviews-section::before,
  #how.included-life::before {
    transform: none;
  }
}