/*
 * Generated by scripts/port-css.mjs from the CSS Modules that preceded
 * this theme. Edit the rules here — the generator is kept for reference,
 * not re-run against a moved target.
 */

/* ─── components/sections/MotionPathDeck.module.css ─────────────────────────────────────── */
.us-mp { position: relative; }

.us-mp-pin {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding-top: 6rem;
  padding-bottom: 3rem;
  overflow: hidden;
}

.us-mp-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.4rem; max-width: 30rem; }

.us-mp-stat { display: flex; gap: 2.4rem; margin-top: 0.6rem; }
.us-mp-stat-item { display: flex; flex-direction: column; gap: 0.2rem; }
.us-mp-stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.us-mp-stat-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }

/* ── the flight path ── */
.us-mp-stage { position: absolute; inset: 4% calc(var(--rail) + 1rem) 4% 46%; z-index: 1; pointer-events: none; }

.us-mp-path-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.us-mp-path-line {
  fill: none;
  stroke: var(--lilac);
  stroke-width: 1.6;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  opacity: 0.75;
}

.us-mp-flier {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(112px, 12vw, 172px);
  will-change: transform;
}
.us-mp-flier-inner {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 44px -30px rgba(20, 16, 26, 0.5);
}

@media (max-width: 899px) {
  .us-mp-pin { grid-template-columns: 1fr; min-height: auto; padding-block: 4rem; }
  .us-mp-stage {
    position: relative;
    inset: auto;
    height: auto;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  .us-mp-path-svg { display: none; }
  .us-mp-flier { position: relative; width: calc(33.333% - 7px); }
}

@media (max-width: 599px) {
  /* Three across leaves each flier about 105px on a 375px screen — smaller
     than the product tiles everywhere else on the page, for no reason other
     than that the desktop path had three lanes. */
  .us-mp-flier { width: calc(50% - 5px); }
}

/* ── Decoration ──────────────────────────────────────────────────────
   The house art layer: absolutely placed, behind the content, inert to the
   pointer, and animated by the one `drawIn` in this section's `useGSAP`.
   `data-speed` is ScrollSmoother's own parallax and costs no ScrollTrigger.
   Same pattern as `BundleBuilder.module.css`. */
.us-mp { isolation: isolate; }

.us-mp-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* `data-speed` moves these vertically; clip so the travel does not add to
     the section's own scroll height. */
  overflow: hidden;
}

.us-mp-deco > * { position: absolute; }

/* Placed in the zones the content actually leaves free. */
.us-mp-deco-b { bottom: 3%; left: 5%; opacity: 0.45; }

/*
 * The creeper, in the empty quarter between the CTA and the flying deck.
 *
 * A `left` in pixels, not a percentage, and that is the whole trick. The
 * things it has to stay clear of all sit at fixed distances from the left
 * edge — the button is shrink-wrapped around a fixed string and ends ~241–266px
 * in, and the three stat labels end ~324–342px in — while `.stage` starts at
 * `46%`, i.e. 589px at 1280 and 795px at 1728. A percentage `left` tracks
 * neither end of that gap, so it drifted onto the button at one width and
 * under the bags at another. 370px clears the widest stat block and still
 * leaves 119–425px of air before the stage begins.
 *
 * Not below the button, which is the obvious spot and does not work: `.pin`
 * is `align-items: center`, so the copy column's bottom edge lands 708–786px
 * down a 900px section and the clear band under it is only ~115px at 1440 and
 * 1920 — less than this asset is tall.
 *
 * Fully inside the frame, deliberately. A first pass hung it off the corner
 * on negative offsets, on the theory that `.deco`'s clip would read as a
 * second incidental tear. It does not: the asset is a creeper's face framed
 * by the jagged hole it is pushing through, and cropping two edges away takes
 * the frame with them — what is left reads as a green blob in the corner
 * rather than as something watching you through a hole in the page. The hole
 * IS the composition here, so all four of its edges have to be on screen.
 */
.us-mp-deco-a { bottom: 2%; left: 370px; opacity: 0.96; }

@media (max-width: 899px) {
  /* Both are `mobile="off"`; this only keeps the rule from applying if that
     ever changes. `.pin` collapses to one column at this width and the free
     space this was measured against is gone. */
  .us-mp-deco-a { display: none; }
}

/* Content sits above the decoration. Every direct child of the section is a
   plain block, so one rule covers them without naming each. */
.us-mp > *:not(.us-mp-deco) { position: relative; z-index: 1; }

/*
 * ── Alex ────────────────────────────────────────────────────────────────
 * Lives inside `.stage`, in the same `top: 0; left: 0` coordinate frame as
 * `.flier` — the `motionPath` tween added to this section's scrub `tl`
 * measures against exactly that origin, the same way the six bags do.
 */
.us-mp-deco-alex { top: 0; left: 0; }