/* ============================================================
   ABG — Scroll-driven build-stage background (index.html only)
   ============================================================ */

#abg-scroll-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  background-color: #eaf0f8;
  background-image: url("../images/build-stages/01-lot.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
}

#abg-scroll-bg .abg-stage {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.05);
  /* Per audit #17: slower per-stage opacity transition so each
     construction phase reads as a distinct beat, not a quick blur. */
  transition: opacity 900ms cubic-bezier(.4, 0, .2, 1),
              transform 1400ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

/* The first stage is visible by default so first paint isn't blank */
#abg-scroll-bg .abg-stage[data-index="0"] {
  opacity: 1;
  transform: scale(1);
}

/* Soft scrim layer so foreground glass + text always have enough contrast.
   Two-stop gradient: lighter near top (hero), slightly stronger near bottom. */
#abg-scroll-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(15, 30, 61, 0.35) 0%,
      rgba(15, 30, 61, 0.08) 18%,
      rgba(244, 247, 251, 0.18) 45%,
      rgba(15, 30, 61, 0.22) 90%,
      rgba(15, 30, 61, 0.32) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Subtle vignette to direct attention to centered glass content */
#abg-scroll-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(15, 30, 61, 0.18) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Ensure foreground content sits above the bg + scrim.
   Exclude #main-nav so it keeps its original position: fixed behavior. */
body:has(#abg-scroll-bg) > *:not(#abg-scroll-bg):not(#main-nav) {
  position: relative;
  z-index: 1;
}

/* Reduced motion: show only the finished stage, no crossfade, no scale */
@media (prefers-reduced-motion: reduce) {
  #abg-scroll-bg .abg-stage {
    transition: none !important;
    transform: none !important;
  }
  #abg-scroll-bg .abg-stage:not([data-index="4"]) { opacity: 0 !important; }
  #abg-scroll-bg .abg-stage[data-index="4"]       { opacity: 1 !important; }
}