/**
 * Homepage pinned scroll transition — Services -> Why Choose Us.
 *
 * The JS wraps the two adjacent Elementor sections in:
 *   .alnair-pin  (tall driver – gives the pin its scroll length)
 *     .alnair-pin__stage  (native sticky, viewport-tall, clips overflow)
 *       .alnair-pin__sec--a  (Our Exclusive Services)
 *       .alnair-pin__sec--b  (Why Choose Us)
 *
 * Transforms/opacity are set inline by JS; this file only handles layout,
 * stacking and the reduced-motion fallback.
 */

.alnair-pin {
  position: relative;
  width: 100%;
  /* height is set inline by JS = 100vh + pin duration */
}

.alnair-pin__stage {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background-color: var(--alnair-pin-bg, #080b14);
}

/* Both sections share the stage; JS drives only their transform. */
.alnair-pin__sec {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 !important;
  will-change: transform;
  backface-visibility: hidden;
}

/*
 * The Elementor sections are transparent by design (they rely on the page's
 * dark background). Inside the pin they overlap, so force a SOLID opaque
 * background — otherwise B is see-through and A ghosts behind it during the
 * swap. Higher specificity + !important beats Elementor's own bg rules.
 *
 * min-height:100vh makes each section's opaque box fill the whole stage, so:
 *   - the covering section always fully hides the one behind it (no poke-through),
 *   - a section shorter than the viewport never leaves an empty dark gap.
 * justify-content:center vertically centres the section's content block
 * (.e-con-inner) so short sections look balanced instead of top-stuck.
 */
.alnair-pin .alnair-pin__sec {
  background-color: var(--alnair-pin-bg, #080b14) !important;
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
}

/*
 * Elementor's inner wrapper flex-grows to fill the container, which would push
 * content back to the top. Stop it growing so the parent's justify-content
 * actually centres it (short section -> centred; tall section -> fills & is
 * revealed by the phase-1/3 scroll-through, so this is a no-op there).
 */
.alnair-pin .alnair-pin__sec > .e-con-inner {
  flex-grow: 0;
  flex-shrink: 0;
}

.alnair-pin__sec--a {
  z-index: 1;
}

/* Why Choose Us rides above Services during the swap, sliding in from the
 * right. The left-edge shadow gives it depth as it covers Services. */
.alnair-pin__sec--b {
  z-index: 2;
  transform: translate3d(100%, 0, 0); /* start off-screen right, pre-JS-frame */
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------ */
/* Reduced motion: JS tears the wrapper down, but keep a hard CSS      */
/* fallback so nothing is ever pinned/clipped without motion.          */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .alnair-pin {
    height: auto !important;
  }

  .alnair-pin__stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  .alnair-pin__sec {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
    box-shadow: none !important;
  }
}