/**
 * AK Image Scatter Component
 * Floating images section with scroll-based animations
 */

/* Main Section */
.ak-image-scatter {
  position: relative;
  height: 500vh;
}

.ak-image-scatter__pinned {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* background: #F0F7F1; */
  background: linear-gradient(180deg, #f0f7f1 0%, rgba(240, 247, 241, 0) 100%);
}

/* Text Content */

.ak-image-scatter__label {
  color: #e45110;
  margin: 0 0 3.558rem;
}
.ak-image-scatter__heading {
  margin-bottom: 5.336rem;
}
.ak-image-scatter__cta {
  margin-top: 4.5rem;
}
.ak-image-scatter__cta .btn {
  margin: 0 auto;
}
.ak-image-scatter__content {
  position: relative;
  z-index: 10;
  text-align: center;
  width: 100%;
  max-width: 45.558rem;
  /*display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3.558rem;
	    color: #484848;
  padding: 2rem;*/
}

/* Floating Images Container */
.ak-image-scatter__images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Individual Floating Image */
.ak-image-scatter__image {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  will-change: transform, opacity, height;
}

.ak-image-scatter__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image 1 - Left side */
.ak-image-scatter__image--1 {
  width: 280px;
  top: 50%;
  left: 50%;
}

/* Image 2 - Right side */
.ak-image-scatter__image--2 {
  width: 260px;
  top: 50%;
  right: 0;
}

/* Image 3 - Left side, larger than image 1 */
.ak-image-scatter__image--3 {
  width: 18vw;
  top: 50%;
  left: 50%;
}

/* Image 4 - Slightly right of center, top area */
.ak-image-scatter__image--4 {
  top: 25%;
  left: calc(50% + 10vw);
}

/* Image 5 - Left side, lower position */
.ak-image-scatter__image--5 {
  top: 65%;
  left: calc(50% - 20vw);
}

/* Image 6 - Similar to image 5, slightly bigger */
.ak-image-scatter__image--6 {
  top: 50%;
  left: calc(50% - 20vw);
}

/* Image 7 - Right side, center-right */
.ak-image-scatter__image--7 {
  top: 50%;
  left: calc(50% + 15vw);
}

/* ============================================
   Mobile Version
   ============================================ */

/* Hide mobile by default, show desktop */
.ak-image-scatter__mobile {
  display: none;
}

@media (max-width: 1024px) {
  /* Hide desktop, show mobile */
  .ak-image-scatter__desktop {
    display: none;
  }

  .ak-image-scatter__mobile {
    display: block;
    padding: 4rem 0;
  }

  /* Reset section height for mobile */
  .ak-image-scatter {
    height: auto;
  }

  /* Mobile Content */
  .ak-image-scatter__mobile-content {
    text-align: center;
    padding: 0 45rem;
  }

  .ak-image-scatter__mobile-content .ak-image-scatter__heading,
  .ak-image-scatter__mobile-content .ak-image-scatter__description {
    margin-bottom: 2.846rem;
  }

  /* Mobile Swiper Slider */
  .ak-image-scatter__slider {
    padding: 5rem 0 22rem;
  }

  .ak-image-scatter__slider .swiper-wrapper {
    align-items: center;
  }

  .ak-image-scatter__slide {
    width: 65%;
    transition: transform 0.3s ease;
  }

  .ak-image-scatter__slide-image {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  }

  .ak-image-scatter__slide-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
  }

  /* Center slide - slightly translated down */
  .ak-image-scatter__slide.swiper-slide-active {
    transform: translateY(10rem);
  }

  /* Side slides - normal position */
  .ak-image-scatter__slide.swiper-slide-prev,
  .ak-image-scatter__slide.swiper-slide-next {
    transform: translateY(0);
  }
}

@media only screen and (max-width: 767px) {
  .ak-image-scatter__slider {
    padding: 40px 0 80px;
  }
  .ak-image-scatter__mobile-content {
    padding: 0 16px;
  }
  .ak-image-scatter__mobile-content .ak-image-scatter__label {
    margin-bottom: 20px;
  }
  .ak-image-scatter__mobile-content .ak-image-scatter__heading,
  .ak-image-scatter__mobile-content .ak-image-scatter__description {
    margin-bottom: 32px;
  }
}