/*!
 * PHARMA CONNECT — Global CSS  v1.2.0  (replaces v1.1.0 completely)
 *
 * NEW IN v1.2 — the pinned-rail overlap fix.
 * GSAP pins by setting position:fixed on the TRIGGER element, which for the
 * Capabilities rail is `.pc-horiz` — an element with no background at all.
 * While it is fixed, the sections above and below scroll straight through it.
 * That is the "overlaps and looks jerky" you described: not a broken pin, a
 * see-through one. Every pinned wrapper is now opaque and raised in the stack.
 *
 * CARRIED OVER FROM v1.1 — do NOT re-add:
 *     .pc-page > section { contain: layout paint style; }
 * `contain: layout` and `contain: paint` each create a containing block for
 * position:fixed descendants, which silently breaks GSAP pinning outright and
 * clips hover shadows. That rule caused the original three-bug regression.
 */

/* ============================================================
   1. Lenis required styles
   ============================================================ */
html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

html { scroll-behavior: auto !important; }   /* never combine with Lenis */

/* ============================================================
   2. *** PINNED RAILS — opaque + raised (the overlap fix) ***
   ============================================================ */

/* The pinned element itself. Solid background so nothing shows through while
   it is position:fixed. The faint 160px grid is repeated here so the band
   still matches the rest of the page. */
.pc-horiz {
  position: relative;
  z-index: 3;
  background-color: #FBFAF6;
  background-image:
    linear-gradient(to right, rgba(0, 58, 93, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 58, 93, 0.04) 1px, transparent 1px);
  background-size: 160px 160px;
}

/* Same treatment for the other pinned rails on the inner pages. */
.pc-hubhoriz {
  position: relative;
  z-index: 3;
  background-color: #FBFAF6;
}

.pc-shoriz {
  position: relative;
  z-index: 3;
  background-color: #FBFAF6;
}

.pc-chainwrap {
  position: relative;
  z-index: 3;
  background-color: #E7F0F0;   /* matches the .pc-chain gradient at that point */
}

/* Keep the pinned section above its neighbours in paint order. */
.pc-capabilities,
.pc-hub,
.pc-safety,
.pc-chain { position: relative; z-index: 2; }

/* GSAP's generated wrapper must not clip or create a containing block. */
.pin-spacer { pointer-events: none; }
.pin-spacer > * { pointer-events: auto; }

/* Below the mobile breakpoint the rails are not pinned, so drop the overrides
   and let the native page background show through again. */
@media (max-width: 900px) {
  .pc-horiz,
  .pc-hubhoriz,
  .pc-shoriz,
  .pc-chainwrap {
    background-color: transparent;
    background-image: none;
    z-index: auto;
  }
}

/* ============================================================
   3. Scroll-jank fixes
   ============================================================ */

/* 3a. Fixed, full-viewport blended noise composites the whole screen every
       frame. Desktop only, non-fixed, non-blended. */
.pc-page::before { display: none !important; }

@media (min-width: 1081px) and (hover: hover) {
  .pc-page::before {
    display: block !important;
    position: absolute !important;
    mix-blend-mode: normal !important;
    opacity: .022 !important;
    z-index: 0 !important;
  }
}

/* 3b. backdrop-filter on a fixed nav = a blurred repaint every scroll frame. */
@media (max-width: 1080px) {
  #pcNav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(251, 250, 246, .96) !important;
  }
}

/* 3c. Permanent will-change holds GPU layers alive for the whole session. */
.pc-horiz-track,
.pc-strack,
.pc-hubtrack,
.pc-chain-track,
.pc-stk,
.pc-edge-card,
.pc-fnstack-card { will-change: auto; }

/* ============================================================
   4. Mobile (<=900px): horizontal rails scroll natively.
   pc-smooth.js kills the pinned triggers; this makes the tracks swipeable.
   ============================================================ */
@media (max-width: 900px) {
  .pc-horiz,
  .pc-shoriz,
  .pc-hubhoriz,
  .pc-chainwrap {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .pc-horiz::-webkit-scrollbar,
  .pc-shoriz::-webkit-scrollbar,
  .pc-hubhoriz::-webkit-scrollbar,
  .pc-chainwrap::-webkit-scrollbar { display: none; }

  .pc-horiz-track,
  .pc-strack,
  .pc-hubtrack,
  .pc-chain-track {
    transform: none !important;
    width: max-content !important;
  }

  .pc-cap-card,
  .pc-scard,
  .pc-hubcard { scroll-snap-align: center; }

  .pc-horiz-progress,
  .pc-sprog,
  .pc-hubprog { display: none !important; }
}

/* ============================================================
   5. Depth + parallax helpers (data-pc-depth / data-pc-speed)
   ============================================================ */
[data-pc-depth] {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
[data-pc-speed] { will-change: transform; }

@media (max-width: 900px) {
  [data-pc-depth],
  [data-pc-speed] { transform: none !important; will-change: auto; }
}

/* ============================================================
   6. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pc-reveal,
  .pc-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pc-shero-frame img { animation: none !important; }
  [data-pc-depth], [data-pc-speed] { transform: none !important; }
}

/* ============================================================
   7. Small global corrections
   ============================================================ */

/* Typo in the homepage stylesheet: `position: absolute inset: 0;` (missing
   semicolon) dropped the whole block. Restored here so the fix applies even to
   pages you have not re-uploaded. */
.pc-dubai-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Do NOT add transform / filter / contain / perspective / will-change:transform
   to any ancestor of a pinned section — all of them create a containing block
   and break position:fixed pinning. Keep .pc-page and its <section> elements
   free of them. */