/* ==========================================================================
   How it works  —  Figma "Component 480 / How it works - Animation"
   (819:151727). 1920 x 1080 at y 2192, on Mono/Dark.

   A 1px #ECF7FF @ 0.15 grid (verticals at 2.5 / 33.44 / 66.51 / 97.42%,
   horizontals at y 90 / 340 / 740 / 990), yellow corner brackets around the
   centre cell, and a 4541px rail of five glass step cards that runs off the
   right edge — the "Scroll" pill is the affordance for dragging it.

   Cards alternate y 1 / 114 and are joined by zigzag connectors.

   Default -> Animate:
     vertical rules    height 36 -> 899, opacity 0 -> 1 (grow downward)
     horizontal rules  width 56 -> 1823 (grow rightward)
     eyebrow           translateY +40 -> 0
     title             translateY +70 -> 0
     centre brackets   expand from a small centre box to the cell bounds
     rail contents     translateX +422 -> 0
   ========================================================================== */

.tech-hiw {
  top: calc(2192 * var(--s));
  height: calc(1080 * var(--s));
  background: var(--c-mono-dark);
  overflow: clip;   /* not `hidden` — that would trap the sticky pin */
  z-index: 2;
}

/* --- pinned horizontal scroll --------------------------------------------
   The stage is the 1080px frame from Figma. When the rail has somewhere to
   travel, ui.js adds `has-pin` and sets the two custom properties: the
   section grows by the runway (vertical scroll distance the horizontal
   travel consumes) and the stage sticks once it is centred in the viewport.
   Scroll position inside the runway then drives the track's translateX, so
   the five step cards pass through card by card; when the last one clears
   the left edge the runway ends and the page scrolls on normally. */

.tech-hiw__pin {
  position: relative;
  width: 100%;
  height: calc(1080 * var(--s));
}

.tech-hiw.has-pin {
  height: calc(1080 * var(--s) + var(--hiw-runway, 0px));
}

.tech-hiw.has-pin .tech-hiw__pin {
  position: sticky;
  top: var(--hiw-top, 0px);
}

/* Scroll drives the rail while pinned, so the grab cursor would lie. */
.tech-hiw.has-pin .tech-hiw__track { cursor: default; }

/* The cards are glass (translucent + backdrop-blur) and the rail now spans
   the full frame, so they pass in front of the centred "How it works" title.
   Lift them above it and let the blur do the work. */
.tech-hiw__rail { z-index: 3; }

/* --- grid ---------------------------------------------------------------- */

.tech-hiw__rule {
  position: absolute;
  background: var(--c-mono-light);
  opacity: 0.15;
}
.tech-hiw__rule--h {
  left: calc(49 * var(--s));
  height: 1px;
  width: calc(56 * var(--s));
  transition: width calc(var(--rv-dur) * 1.1) var(--rv-ease);
}
.tech-hiw.is-in .tech-hiw__rule--h { width: calc(1823 * var(--s)); }

.tech-hiw__rule--v {
  top: calc(90 * var(--s));
  width: 1px;
  height: calc(36 * var(--s));
  opacity: 0;
  transition:
    height calc(var(--rv-dur) * 1.15) var(--rv-ease),
    opacity calc(var(--rv-dur) * 0.6) var(--rv-ease);
}
.tech-hiw.is-in .tech-hiw__rule--v { height: calc(899 * var(--s)); opacity: 0.15; }

.tech-hiw__rule--h1 { top: calc(90 * var(--s)); }
.tech-hiw__rule--h2 { top: calc(340 * var(--s)); }
.tech-hiw__rule--h3 { top: calc(740 * var(--s)); }
.tech-hiw__rule--h4 { top: calc(989 * var(--s)); }

.tech-hiw__rule--v1 { left: 2.5%; }
.tech-hiw__rule--v2 { left: 33.44%; }
.tech-hiw__rule--v3 { left: 66.51%; }
.tech-hiw__rule--v4 { left: 97.42%; }

/* Brackets on the centre cell (33.49% -> 66.51%, y 340 -> 740). They start
   clustered near the middle and expand out to the cell bounds. */
.tech-hiw__cell {
  position: absolute;
  left: 41.3%;
  right: 41.3%;
  top: calc(504 * var(--s));
  height: calc(66 * var(--s));
  --brk-color: var(--c-accent-yellow);
  pointer-events: none;
  transition:
    left calc(var(--rv-dur) * 1.15) var(--rv-ease),
    right calc(var(--rv-dur) * 1.15) var(--rv-ease),
    top calc(var(--rv-dur) * 1.15) var(--rv-ease),
    height calc(var(--rv-dur) * 1.15) var(--rv-ease);
}
.tech-hiw.is-in .tech-hiw__cell {
  left: 33.49%;
  right: 33.49%;
  top: calc(340 * var(--s));
  height: calc(400 * var(--s));
}

/* --- head ---------------------------------------------------------------- */

.tech-hiw__eyebrow {
  position: absolute;
  left: calc(8.33% + 22 * var(--s));
  top: calc(196 * var(--s));
  width: calc(209 * var(--s));
  height: calc(38 * var(--s));
  color: var(--c-accent-yellow);
}

.tech-hiw__title {
  position: absolute;
  left: calc(33.33% + 153 * var(--s));
  top: calc(502 * var(--s));
  width: calc(334 * var(--s));
  height: calc(77 * var(--s));
}
.tech-hiw__title h2 {
  font-weight: 300;
  font-size: calc(64 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-2.56 * var(--s));
  text-align: center;
  color: var(--c-mono-light);
  white-space: nowrap;
}

/* --- the rail ------------------------------------------------------------ */

/* Full-bleed: the cards must run the whole width of the screen, entering at
   the right edge and leaving at the left. Figma's resting position (the rail
   starting at 75% + 66) is reproduced by the track's own margin below, not by
   insetting this window — so the pinned scrub can carry cards edge to edge
   without the window having to resize, which would shift every card at once. */
.tech-hiw__rail {
  position: absolute;
  left: 0;
  top: calc(427 * var(--s));
  right: 0;
  height: calc(339.1 * var(--s));
  overflow: hidden;
}

.tech-hiw__track {
  position: relative;
  /* Figma's rail offset. Absolutely positioned children resolve `left`
     against the padding box, which this margin shifts, so every card, zigzag
     and the "Scroll" pill land exactly where Figma puts them at rest — with
     no JS, so the resting frame is correct before the scrub ever runs. */
  margin-left: calc(75% + 66 * var(--s));
  width: calc(4541.372 * var(--s));
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
  /* Reveal offset lives on the wrapper, so the drag transform stays clean. */
  transition: transform 620ms var(--rv-ease);
}

.tech-hiw__rail-in {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateX(calc(422 * var(--s)));
  transition: transform calc(var(--rv-dur) * 1.2) var(--rv-ease);
}
.tech-hiw.is-in .tech-hiw__rail-in { transform: none; }
.tech-hiw__track.is-dragging { transition: none; cursor: grabbing; }

/* Scroll pill */
.tech-hiw__scroll {
  position: absolute;
  left: 0;
  top: calc(54 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(120 * var(--s));
  height: calc(120 * var(--s));
  padding: calc(46 * var(--s)) calc(8 * var(--s));
  border: 1px solid var(--c-mono-light);
  border-radius: calc(60 * var(--s));
  background: var(--c-mono-dark);
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: var(--c-accent-yellow);
  white-space: nowrap;
}

.tech-hiw__lead {
  position: absolute;
  left: calc(120 * var(--s));
  top: calc(112.5 * var(--s));
  width: calc(401 * var(--s));
  height: 1px;
  background: var(--c-mono-light);
  opacity: 0.3;
}

/* Step cards */
.tech-hiw__card {
  position: absolute;
  width: calc(546 * var(--s));
  height: calc(224 * var(--s));
  border: 1px solid #000;
  background-image: linear-gradient(124.714deg, rgba(255,255,255,0.08) 3.039%, rgba(255,255,255,0) 96.05%);
  -webkit-backdrop-filter: blur(calc(23.273 * var(--s)));
          backdrop-filter: blur(calc(23.273 * var(--s)));
  --brk-color: var(--c-accent-yellow);
}
.tech-hiw__card--up   { top: calc(1 * var(--s)); }
.tech-hiw__card--down { top: calc(114 * var(--s)); }

.tech-hiw__card-num {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(45 * var(--s));
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-accent-yellow);
  white-space: nowrap;
}
.tech-hiw__card-title {
  position: absolute;
  left: calc(100 * var(--s));
  top: calc(32 * var(--s));
  font-weight: 300;
  font-size: calc(32 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--s));
  color: var(--c-mono-light);
  white-space: nowrap;
}
.tech-hiw__card-body {
  position: absolute;
  left: calc(100 * var(--s));
  top: calc(94 * var(--s));
  width: calc(334 * var(--s));
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.4;
  letter-spacing: calc(-0.48 * var(--s));
  color: var(--c-light-grey-02);
}

/* Zigzag connectors between staggered cards */
.tech-hiw__zig {
  position: absolute;
  top: calc(113.02 * var(--s));
  width: calc(321 * var(--s));
  height: calc(113 * var(--s));
  opacity: 0.4;
}
.tech-hiw__zig img { width: 100%; height: 100%; }
.tech-hiw__zig--flip { transform: scaleY(-1); }

@media (prefers-reduced-motion: reduce) {
  .tech-hiw__track, .tech-hiw__rail-in, .tech-hiw__cell,
  .tech-hiw__rule--h, .tech-hiw__rule--v { transition: none; }
  .tech-hiw__rail-in { transform: none; }
  .tech-hiw__rule--h { width: calc(1823 * var(--s)); }
  .tech-hiw__rule--v { height: calc(899 * var(--s)); opacity: 0.15; }
}

/* ==========================================================================
   Reflow
   ========================================================================== */

/* The tablet band only. The 376 frame keeps the whole pinned rail -- grid,
   bracketed cell, Scroll badge, connectors and all -- so mobile.css rebuilds
   it there rather than inheriting this stack, and the three !importants
   below (which would pin the track and the cards in place) must not reach
   it. */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .tech-hiw { height: auto; padding: 48px 20px 56px; }
  .tech-hiw__rule, .tech-hiw__cell, .tech-hiw__zig, .tech-hiw__lead { display: none; }
  .tech-hiw__rail-in { transform: none !important; width: auto; height: auto; }
  /* No pinning below the reflow breakpoint — the rail is a native scroller. */
  .tech-hiw.has-pin { height: auto; }
  .tech-hiw.has-pin .tech-hiw__pin { position: static; }
  .tech-hiw__pin { height: auto; }

  .tech-hiw__eyebrow, .tech-hiw__title { position: static; width: auto; height: auto; }
  .tech-hiw__eyebrow { font-size: 12px; }
  .tech-hiw__title { margin-top: 16px; }
  .tech-hiw__title h2 { font-size: clamp(30px, 8vw, 44px); text-align: left; white-space: normal; }

  /* The rail becomes a native horizontal scroller. */
  .tech-hiw__rail {
    position: static;
    height: auto;
    margin-top: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tech-hiw__rail::-webkit-scrollbar { display: none; }
  .tech-hiw__track {
    width: max-content;
    height: auto;
    display: flex;
    gap: 16px;
    transform: none !important;
    margin-left: 0;
    cursor: auto;
  }
  .tech-hiw__scroll { display: none; }
  .tech-hiw__card {
    position: relative;
    top: auto !important;
    left: auto !important;
    flex: none;
    width: 82vw;
    max-width: 420px;
    height: auto;
    padding: 20px;
  }
  .tech-hiw__card-num, .tech-hiw__card-title, .tech-hiw__card-body {
    position: static; width: auto; text-align: left;
  }
  .tech-hiw__card-title { margin-top: 8px; font-size: 24px; white-space: normal; }
  .tech-hiw__card-body { margin-top: 10px; }
}