/* ==========================================================================
   Floating cards — hero → about, driven by GSAP Flip on scroll

   The cards live in the about section in the markup (their resting home) and
   are moved into the hero slots on load, then flipped back down on scroll.
   Markup: .about-float-slot[data-float-slot] in the hero,
           .about1-thumb--floats > .about-float[data-about-float] in about.
   ========================================================================== */

/* --- Hero start positions ------------------------------------------------ */

.hero-float-stage {
  position: relative;
}

.about-float-slot {
  position: absolute;
  z-index: 3;
  width: 36%;
  aspect-ratio: 4 / 3;
  pointer-events: none;
}

/* A card sitting in a hero slot fills that slot exactly. */
.about-float-slot > .about-float {
  position: absolute;
  inset: 0;
  width: auto;
  max-width: none;
  pointer-events: auto;
}

/* Offsets are tuned against the visible area of the hero artwork, which
   overflows its column to the right. Both slots share the same `bottom` so
   the two cards sit on one line across the base of the hero. */
.about-float-slot--tr {
  bottom: 14%;
  right: -4%;
}

.about-float-slot--bl {
  bottom: 14%;
  left: 4%;
}

@media (max-width: 991.98px) {
  .about-float-slot {
    /* Flip is disabled below lg; slots stay empty and take no space. */
    display: none;
  }
}

/* --- About resting positions --------------------------------------------- */

.about1-thumb--floats {
  position: relative;
  /* cards are pulled outside this box, so it must not clip them */
  overflow: visible;
}

.about1-thumb--floats > img {
  position: relative;
  z-index: 1;
}

.about-float {
  position: absolute;
  z-index: 2;
  margin: 0;
  width: 42%;
  max-width: 260px;
  padding: 8px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18);
  /* GSAP drives transform; keep it composited */
  will-change: transform;
  overflow: hidden;
}

.about-float img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}

/* Negative offsets push roughly half the card outside the main image. */
.about-float--tr {
  top: -8%;
  right: -11%;
}

.about-float--bl {
  bottom: -8%;
  left: -11%;
}

@media (max-width: 991.98px) {
  .about-float--tr {
    top: -6%;
    right: -10%;
  }

  .about-float--bl {
    bottom: -6%;
    left: -10%;
  }

  .about-float {
    width: 38%;
    max-width: 190px;
    padding: 6px;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.16);
  }
}

@media (max-width: 575.98px) {
  .about-float {
    width: 40%;
    max-width: 150px;
  }

  /* Keep the overhang inside the viewport on phones — no sideways scroll. */
  .about-float--tr {
    right: -3%;
  }

  .about-float--bl {
    left: -3%;
  }
}

/* Users who prefer reduced motion get the settled layout with no movement. */
@media (prefers-reduced-motion: reduce) {
  .about-float {
    transform: none !important;
    opacity: 1 !important;
  }
}