/* Products → Logistics keeps both real scenes in place while the final
   Products frame hands the viewport to the Logistics composition. */
.scene--logistics.has-products-logistics-transition {
  --products-logistics-transition-distance: 0px;
  --products-logistics-overlap-distance: 0px;
  --products-logistics-background-opacity: 0;
  --products-logistics-band-progress: 0;
  z-index: 6;
  min-height: calc(
    120svh
    + var(--products-logistics-transition-distance)
  );
  margin-top: calc(0px - var(--products-logistics-overlap-distance));
  background: transparent;
  isolation: isolate;
}

.scene--logistics.has-products-logistics-transition .logistics__stage::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 18% 12%, rgb(201 164 92 / 10%), transparent 32rem),
    var(--bg-primary);
  opacity: var(--products-logistics-background-opacity);
  pointer-events: none;
  will-change: opacity;
}

.scene--logistics.has-products-logistics-transition .logistics__layout {
  position: relative;
  z-index: 1;
}

.scene--logistics.has-products-logistics-transition .logistics__benefits {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.scene--logistics.has-products-logistics-transition .logistics__benefits::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: var(--forest);
  pointer-events: none;
  transform: scaleX(var(--products-logistics-band-progress));
  transform-origin: left center;
  will-change: transform;
}

.scene--logistics.has-products-logistics-transition .logistics__benefits li {
  position: relative;
  z-index: 1;
}

.scene--logistics.has-products-logistics-transition .logistics__hero,
.scene--logistics.has-products-logistics-transition .logistics__coverage {
  position: relative;
  z-index: 1;
  will-change: opacity, transform, clip-path;
}

@media (max-width: 48rem) {
  .scene--logistics.has-products-logistics-transition {
    min-height: calc(
      112svh
      + var(--products-logistics-transition-distance)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene--logistics.has-products-logistics-transition {
    --products-logistics-transition-distance: 0px;
    --products-logistics-overlap-distance: 0px;
    --products-logistics-background-opacity: 1;
    --products-logistics-band-progress: 1;
    z-index: auto;
    min-height: 100svh;
    margin-top: 0;
    background:
      radial-gradient(circle at 18% 12%, rgb(201 164 92 / 10%), transparent 32rem),
      var(--bg-primary);
    isolation: auto;
  }

  .scene--logistics.has-products-logistics-transition .logistics__stage::before,
  .scene--logistics.has-products-logistics-transition .logistics__benefits::before {
    display: none;
  }

  .scene--logistics.has-products-logistics-transition .logistics__layout,
  .scene--logistics.has-products-logistics-transition .logistics__benefits,
  .scene--logistics.has-products-logistics-transition .logistics__benefits li,
  .scene--logistics.has-products-logistics-transition .logistics__hero,
  .scene--logistics.has-products-logistics-transition .logistics__coverage {
    position: static;
    z-index: auto;
  }

  .scene--logistics.has-products-logistics-transition .logistics__benefits {
    overflow: visible;
    background: var(--forest);
    isolation: auto;
  }

  .scene--logistics.has-products-logistics-transition .logistics__hero,
  .scene--logistics.has-products-logistics-transition .logistics__coverage {
    will-change: auto;
  }
}