/* ============================================
   Section Background Images
   - Each section gets a .section-bg-images wrapper
   - 5×5 position grid (25 placements):

     top-left       top-left-mid    top-center      top-right-mid    top-right
     upper-left     upper-left-mid  upper-center    upper-right-mid  upper-right
     center-left    center-left-mid center-center   center-right-mid center-right
     lower-left     lower-left-mid  lower-center    lower-right-mid  lower-right
     bottom-left    bottom-left-mid bottom-center   bottom-right-mid bottom-right

   - Size classes: size-small, size-medium, size-large
   - Opacity classes: opacity-light, opacity-normal, opacity-strong
   ============================================ */

/* Base section styles for positioning context */
section,
.main-footer {
  position: relative;
  overflow: hidden;
}

/* Background images wrapper */
.section-bg-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Each background image inside the wrapper */
.section-bg-images .bg-img {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.08;
}

/* ---- Row 1: Top ---- */

.section-bg-images .bg-img.top-left {
  top: 20px;
  left: 20px;
}

.section-bg-images .bg-img.top-center {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.section-bg-images .bg-img.top-right {
  top: 20px;
  right: 20px;
}

/* ---- Row 2: Center ---- */

.section-bg-images .bg-img.center-left {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.section-bg-images .bg-img.center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.section-bg-images .bg-img.center-right {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* ---- Row 3: Bottom ---- */

.section-bg-images .bg-img.bottom-left {
  bottom: 20px;
  left: 20px;
}

.section-bg-images .bg-img.bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.section-bg-images .bg-img.bottom-right {
  bottom: 20px;
  right: 20px;
}

/* ---- Row 1 extras: Top intermediates ---- */

.section-bg-images .bg-img.top-left-mid {
  top: 20px;
  left: 25%;
  transform: translateX(-50%);
}

.section-bg-images .bg-img.top-right-mid {
  top: 20px;
  left: 75%;
  transform: translateX(-50%);
}

/* ---- Row 2: Upper (25% from top) ---- */

.section-bg-images .bg-img.upper-left {
  top: 25%;
  left: 20px;
  transform: translateY(-50%);
}

.section-bg-images .bg-img.upper-left-mid {
  top: 25%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.section-bg-images .bg-img.upper-center {
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.section-bg-images .bg-img.upper-right-mid {
  top: 25%;
  left: 75%;
  transform: translate(-50%, -50%);
}

.section-bg-images .bg-img.upper-right {
  top: 25%;
  right: 20px;
  transform: translateY(-50%);
}

/* ---- Row 2 extras: Center intermediates ---- */

.section-bg-images .bg-img.center-left-mid {
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.section-bg-images .bg-img.center-right-mid {
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
}

/* ---- Row 4: Lower (75% from top) ---- */

.section-bg-images .bg-img.lower-left {
  top: 75%;
  left: 20px;
  transform: translateY(-50%);
}

.section-bg-images .bg-img.lower-left-mid {
  top: 75%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.section-bg-images .bg-img.lower-center {
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.section-bg-images .bg-img.lower-right-mid {
  top: 75%;
  left: 75%;
  transform: translate(-50%, -50%);
}

.section-bg-images .bg-img.lower-right {
  top: 75%;
  right: 20px;
  transform: translateY(-50%);
}

/* ---- Row 5 extras: Bottom intermediates ---- */

.section-bg-images .bg-img.bottom-left-mid {
  bottom: 20px;
  left: 25%;
  transform: translateX(-50%);
}

.section-bg-images .bg-img.bottom-right-mid {
  bottom: 20px;
  left: 75%;
  transform: translateX(-50%);
}

/* Ensure section content stays above background images */
section > .container,
.main-footer > .container {
  position: relative;
  z-index: 1;
}

/* ---- Optional: Size variations ---- */

.section-bg-images .bg-img.size-small {
  width: 80px;
  height: 80px;
}

.section-bg-images .bg-img.size-medium {
  width: 150px;
  height: 150px;
}

.section-bg-images .bg-img.size-large {
  width: 250px;
  height: 250px;
}

/* ---- Optional: Opacity variations ---- */

.section-bg-images .bg-img.opacity-light {
  opacity: 0.04;
}

.section-bg-images .bg-img.opacity-normal {
  opacity: 0.08;
}

.section-bg-images .bg-img.opacity-strong {
  opacity: 0.15;
}

/* ---- Force low opacity after AOS animates in ---- */
/* AOS sets opacity:1 on .aos-animate, override it to keep shapes subtle */

.section-bg-images .bg-img.aos-animate {
  opacity: 0.08 !important;
}

.section-bg-images .bg-img.opacity-light.aos-animate {
  opacity: 0.04 !important;
}

.section-bg-images .bg-img.opacity-normal.aos-animate {
  opacity: 0.08 !important;
}

.section-bg-images .bg-img.opacity-strong.aos-animate {
  opacity: 0.15 !important;
}