/*
 * ARIDES SKY BACKGROUND
 * Only the area between header and footer.
 */

html,
body {
  background: #ffffff;
}

/* Header always clean */
.site-header {
  position: relative;
  z-index: 20;
  background: #ffffff !important;
  background-image: none !important;
}

/* Main site background */
main {
  position: relative;
  isolation: isolate;

  background-color: #eef8fd !important;
  background-image:
    linear-gradient(
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.06)
    ),
    url("/assets/backgrounds/arides-sky-background.png") !important;

  background-repeat:
    repeat-y,
    repeat-y !important;

  background-position:
    center top,
    center top !important;

  background-size:
    100% auto,
    100% auto !important;
}

/*
 * Remove only the large section backgrounds.
 * Cards, calculator, map, FAQ rows etc. keep their own surfaces.
 */
main > section {
  position: relative;
  z-index: 1;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Footer remains completely clean */
.site-footer {
  position: relative;
  z-index: 20;
  background: #ffffff !important;
  background-image: none !important;
}


/* Slightly soften the sky on tablets */
@media (max-width: 1100px) {
  main {
    background-image:
      linear-gradient(
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.12)
      ),
      url("/assets/backgrounds/arides-sky-background.png") !important;
  }
}


/* Mobile: keep it subtle */
@media (max-width: 700px) {
  main {
    background-image:
      linear-gradient(
        rgba(255,255,255,0.20),
        rgba(255,255,255,0.20)
      ),
      url("/assets/backgrounds/arides-sky-background.png") !important;

    background-size:
      150% auto,
      150% auto !important;

    background-position:
      center top,
      center top !important;
  }
}


/* ARIDES HERO IMAGE OVERLAY FIX */
.hero-center::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   HERO IMAGE COLOR BLEND
   Softer merge of the Boxer scene into the sky background.
   ========================================================= */

main > .hero {
  background:
    linear-gradient(
      180deg,
      #d9eefb 0%,
      #eaf6fd 38%,
      #f3f9fc 72%,
      #f8fbfd 100%
    ) !important;
}

/* outer hero wrapper should not look like a framed card */
.hero-center {
  position: relative;
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* scene area */
.hero-van-scene {
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;

  /* softer dissolve into surrounding sky */
  -webkit-mask-image: radial-gradient(
    125% 115% at 50% 50%,
    rgba(0,0,0,1) 74%,
    rgba(0,0,0,0.98) 80%,
    rgba(0,0,0,0.92) 86%,
    rgba(0,0,0,0.72) 92%,
    rgba(0,0,0,0.36) 97%,
    rgba(0,0,0,0) 100%
  );
  mask-image: radial-gradient(
    125% 115% at 50% 50%,
    rgba(0,0,0,1) 74%,
    rgba(0,0,0,0.98) 80%,
    rgba(0,0,0,0.92) 86%,
    rgba(0,0,0,0.72) 92%,
    rgba(0,0,0,0.36) 97%,
    rgba(0,0,0,0) 100%
  );
}

/* very light color veil above the image to harmonize tones */
.hero-van-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(218, 238, 251, 0.22) 0%,
      rgba(234, 246, 253, 0.10) 24%,
      rgba(255, 255, 255, 0.00) 48%,
      rgba(244, 249, 252, 0.08) 78%,
      rgba(248, 252, 253, 0.16) 100%
    );
}

/* actual image */
.hero-van-main-image {
  position: relative;
  z-index: 1;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* mobile: keep blend gentler */
@media (max-width: 900px) {
  .hero-van-scene {
    -webkit-mask-image: radial-gradient(
      118% 110% at 50% 50%,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0.92) 88%,
      rgba(0,0,0,0.58) 95%,
      rgba(0,0,0,0) 100%
    );
    mask-image: radial-gradient(
      118% 110% at 50% 50%,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0.92) 88%,
      rgba(0,0,0,0.58) 95%,
      rgba(0,0,0,0) 100%
    );
  }

  .hero-van-scene::before {
    background:
      linear-gradient(
        180deg,
        rgba(218, 238, 251, 0.16) 0%,
        rgba(234, 246, 253, 0.08) 28%,
        rgba(255, 255, 255, 0.00) 55%,
        rgba(248, 252, 253, 0.12) 100%
      );
  }
}


/* ARIDES header logo color */
.site-header .brand-logo {
  color: #12b867 !important;
}