/*
 * 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/Filmstrip.module.css ─────────────────────────────────────── */
.us-fs { position: relative; padding-block: var(--air); overflow: hidden; }

.us-fs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}

.us-fs-head-left { display: flex; flex-direction: column; gap: 0.7rem; }
.us-fs-sub { font-size: 0.9rem; color: var(--grey); }

.us-fs-controls { display: flex; align-items: center; gap: 0.6rem; }

.us-fs-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ink-12);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.us-fs-arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.us-fs-arrow svg path { stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.us-fs-arrow:disabled { opacity: 0.3; pointer-events: none; }

/* ── the strip itself ── */
.us-fs-strip {
  position: relative;
  /* One place for the card gap: the track lays out with it and Filmstrip.tsx
     measures the snap step from it. */
  --cell-gap: 14px;
  border-block: 2px solid var(--ink);
  padding-block: 14px;
  cursor: grab;
  overflow: hidden;
  /* Belt and braces with the `dragstart` handler in the component: without
     these, dragging a product photo starts a native image drag that captures
     the pointer and kills the gesture. `pan-y` keeps vertical swipes scrolling
     the page, matching the carousel. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  /*
   * Opaque on purpose, even though the page behind it is already white.
   *
   * The strip is the one long horizontal edge in this section, and it is what
   * Rex peers over from behind (see `.decoRex`). Without a background of its
   * own the strip is a transparent box with an opaque card row inside it, so
   * anything behind it showed through the 14px sprocket bar's gaps and through
   * the padding band between the bar and the cards — a green stripe across a
   * character who was supposed to be hidden. This makes the whole strip a
   * solid occluder and changes nothing about how it looks on its own.
   */
  background: var(--white);
  /* full-bleed past the page gutters */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.us-fs-strip:active { cursor: grabbing; }

/* sprocket holes, drawn as a repeating gradient on the frame edges */
.us-fs-strip::before,
.us-fs-strip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background-image: repeating-linear-gradient(
    to right,
    var(--ink) 0 9px,
    transparent 9px 24px
  );
  -webkit-mask-image: linear-gradient(#000 0 100%);
  opacity: 0.85;
}
.us-fs-strip::before { top: 0; }
.us-fs-strip::after { bottom: 0; }

.us-fs-track {
  display: flex;
  gap: var(--cell-gap);
  align-items: stretch;
  will-change: transform;
  width: max-content;
}

.us-fs-cell img {
  -webkit-user-drag: none;
}

.us-fs-cell {
  position: relative;
  /* Explicit: this is an <a> (each cell links to its product), and an inline
     box here would depend on flex blockification to lay out correctly. */
  display: block;
  flex: 0 0 auto;
  width: clamp(210px, 22vw, 320px);
  border-radius: 4px;
  overflow: hidden;
  background: var(--tint-soft, var(--lilac-soft));
}

.us-fs-cell-body { position: relative; }

.us-fs-cell-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.9rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.us-fs-cell:hover .us-fs-cell-meta { opacity: 1; transform: translateY(0); }

.us-fs-cell-name { font-size: 0.8rem; font-weight: 600; line-height: 1.25; }
.us-fs-cell-price { font-size: 0.78rem; color: var(--grey); font-variant-numeric: tabular-nums; }

.us-fs-foot-note {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-30);
}

@media (max-width: 899px) {
  /*
   * One card, centred.
   *
   * The strip is full-bleed, so its content box is the whole screen and a
   * gutter-sized inline padding put the *edge* of a card near the middle —
   * which is why two half-cards straddled the centre with nothing whole
   * between them. Padding the strip by exactly half the leftover space makes
   * the resting position of card 0 dead centre, and every card after it lands
   * there too, because the step is one card plus one gap.
   *
   * The gap is a custom property rather than a literal because Filmstrip.tsx
   * measures the step from it; see `stepSize()` there.
   */
  .us-fs-strip {
    --cell-w: min(74vw, 300px);
    padding-inline: calc((100vw - var(--cell-w)) / 2);
  }

  .us-fs-cell { width: var(--cell-w); }

  /* No hover on a touch screen, so the name and price have to be on. The
     entrance tween owns `opacity` on the cell itself (GSAP writes it inline,
     which no stylesheet rule can override), so anything fading a card has to
     happen on an inner element — hence this sits on .cellMeta. */
  .us-fs-cell-meta { opacity: 1; transform: none; }
}

/* ── 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-fs { isolation: isolate; }

.us-fs-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-fs-deco > * { position: absolute; }

/* Placed in the zones the content actually leaves free. */
.us-fs-deco-a { top: 7%; right: 6%; opacity: 0.5; }
.us-fs-deco-b { bottom: 6%; right: 9%; opacity: 0.45; }
.us-fs-deco-c { top: 3%; right: 22%; opacity: 0.55; }

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

@media (max-width: 899px) {
  /* At phone width the section is far narrower than it is tall and the content
     runs edge to edge; the extra marks land on the copy rather than beside it. */
  .us-fs-deco-b, .us-fs-deco-c { display: none; }
}

/* ── The cast ────────────────────────────────────────────────────────
 * Woody and Rex, both on the filmstrip's top edge — the one long horizontal
 * line in the section, and the only edge here a toy can be in front of or
 * behind. Woody stands on it; Rex peers over it from behind. Sharing one edge
 * is what makes them read as two toys on one shelf rather than two stickers.
 *
 * The strip is an opaque occluder (see `background` on `.strip`), so `.deco`'s
 * `z-index: 0` against the content's `1` genuinely hides whatever crosses
 * under it — which is the whole mechanism here.
 *
 * Both are anchored with a pixel `top` measured from the section's own top
 * edge, not a percentage: the section's height changes by ~120px between
 * 1000px and 1920px (the cards scale with the viewport) while this head band
 * does not move at all — it is a fixed `--air` plus a one-line heading at
 * every desktop width. Measured, not guessed: `.strip`'s top edge sits
 * 271-293px below `.wrap`'s at 1000-1920.
 *
 * Nothing goes in the section's first ~90px. The nav is `position: fixed`, so
 * that band belongs to it whenever this section is at the top of the viewport
 * — Woody was at 13px once and the "Shop" link ran through his hat.
 */

/*
 * Woody stands on the strip's top edge like a toy on the shelf itself.
 *
 * 52% clears the heading (which ends at ~687px at 1440) on one side and the
 * two scroll arrows on the other.
 */
.us-fs-deco-woody {
  /*
   * Bigger than he was — 100px instead of 82 at the cap, so he stands 215px
   * rather than 177 — because at 82px he was the smallest thing in a band that
   * also holds a 200px dinosaur, and the two read as one toy and one prop
   * rather than as two toys.
   *
   * `top` and the width cap are a pair, and the pair is bounded from both
   * ends. The nav is `position: fixed`, so nothing may sit in the section's
   * first ~90px; the strip's top edge is `var(--air) + 148px` below the
   * section's own top at every width from 1440 up, and less than that as the
   * heading shrinks below it. Measured, the strip's top edge runs 234px (900)
   * to 321px (1920) — so a flat `top` has to leave his feet *behind* the strip
   * at 900 without pushing his hat under the nav at 1920.
   *
   * 128/100 buries his boots 11-23px at every width between 900 and 1500, and
   * the rule below takes over where the band is deep enough for more of him.
   */
  --woody-w: clamp(60px, 5.8vw, 100px);
  width: var(--woody-w);
  top: 128px;
  left: 52%;
}

@media (min-width: 1500px) {
  /* The head band is 239px deep here (nav at 82, strip at 321), which is room
     for the full 108px cut-out — 233px tall, boots 20px behind the film and
     his hat 26px clear of the nav. */
  .us-fs-deco-woody { --woody-w: clamp(90px, 6.6vw, 108px); top: 108px; }
}

/*
 * Lotso, on the same edge as the other two.
 *
 * The band between the heading and the strip is 700px of empty white on this
 * side at 1920 — the heading stops at x700 and Woody does not start until 998
 * — and the fix for it is not a mark floating in the middle of that gap. It is
 * a third toy standing on the shelf the other two are already on, so the three
 * of them read as a row of toys on the edge of the film rather than as two
 * characters and a decoration.
 *
 * He is the one cut-out in `Elements/toy story/` left over, and the only one of
 * the three with feet planted flat and square — Woody is mid-gesture and Rex
 * has no legs at all — which is what lets him hold the middle of the row.
 *
 * The anchor is `--air`-relative rather than a flat `top` like the other two,
 * and that is forced by his shape: he is very nearly square (460x465), so his
 * height barely grows with the viewport while the strip's top edge climbs 87px
 * between 900 and 1920. A constant `top` that buried his feet at 900 left him
 * floating two pixels above the film at 1920. `var(--air) + 168px` is the
 * strip's own top edge plus a 20px tuck, derived the same way `.decoWoody`'s
 * note derives it.
 */
.us-fs-deco-lotso {
  --lotso-w: clamp(72px, 6.4vw, 118px);
  /* 460x465 in the manifest; the ratio is read off the built asset, never
     guessed, because a wrong one puts his feet in the wrong place. */
  --lotso-h: calc(var(--lotso-w) * 1.0109);
  width: var(--lotso-w);
  top: calc(var(--air) + 168px - var(--lotso-h));
  /*
   * Off below 1280, and that is a measurement, not a preference.
   *
   * The band he stands in is bounded by the heading on one side and the two
   * scroll arrows on the other, and it closes fast: the h2's right edge is at
   * 36.5% of the viewport at 1920 and at 49.3% from 1280 down (the `clamp()`
   * on `display-md` pins the font size, so the heading stops growing while the
   * page keeps widening). The arrows sit at 87.6% and 83%. That leaves 298px
   * of clear band at 1920 and 75px at 1100 — and three toys plus the gaps
   * between them need about 390. Two fit there; three do not, and the third
   * one squeezed in is what a viewer reads as clutter.
   */
  display: none;
}

/*
 * Rex peers over the strip's top edge from behind it.
 *
 * He is a standee crop — a head and chest cut off flat at the bottom — so he
 * only works with something in front of that cut. Below the strip there is
 * nothing to be behind: the footnote sits 18px under it and then `--air` opens
 * ~184px of white before the section ends, and every earlier attempt to use
 * that band produced the same picture — a large green head floating in white
 * with a flat edge across its chest. The band is also 184px tall at every
 * width, so a character sized to fill it cleanly is necessarily big, and one
 * sized not to be big necessarily floats. There is no arrangement of the two.
 *
 * Above the strip he has an edge. `top` puts his crown in the clear band and
 * the strip cuts him at ~142px (1440), so what shows is his head and the top
 * of his neck and the flat chest is behind the film. `peek` enters him from
 * `yPercent: 40` — 80px lower, i.e. rising up from behind the shelf — which is
 * the entrance this placement was always meant to have.
 *
 * His `width` in the component is a constant, not a `vw` clamp, for the same
 * reason the anchor is: the space he sits in is a fixed pixel band, so scaling
 * him with the viewport only pushes his crown up into the nav at 1920.
 */
.us-fs-deco-rex {
  /*
   * 172, not 150, and 118px wide rather than 132.
   *
   * He was the largest thing in the band by some way — 171px of dinosaur head
   * standing over a 177px Woody — and what that read as was a dinosaur in the
   * room rather than one peering over a shelf. Dropping him 22px and taking
   * 14px off his width shows 149px of him at 1920 against Woody's 213, which
   * puts the head where a head peering over an edge belongs: below the top of
   * the figure standing beside it.
   *
   * The `top` still has to work against a strip edge that moves 87px between
   * 900 and 1920, and it does: what shows above the film is 62px at 900 and
   * 149px at 1920, so he is a snout on a small screen and a head on a large
   * one, and never a body with no legs.
   */
  top: 172px;
  left: 68%;
}

@media (min-width: 1280px) {
  .us-fs-deco-lotso { display: block; }
  /*
   * The row re-spaces when he joins it. Woody and Rex were placed to sit
   * either side of a gap; with a third toy the three share the band instead,
   * and the percentages are set from the band's real edges at each end of the
   * range rather than from one width.
   */
  .us-fs-deco-lotso { left: 52%; }
  .us-fs-deco-woody { left: 61.5%; }
  .us-fs-deco-rex { left: 70.5%; }
}

@media (min-width: 1650px) {
  /*
   * Wider again, and the heading pulls away from them: at 1728 it ends at
   * 40.4% and at 1920 at 36.5%, which opens 200-300px of white on the left of
   * the row. Sliding all three left closes it — this is the gap the section
   * was reported as "blank" for.
   */
  .us-fs-deco-lotso { left: 44%; }
  .us-fs-deco-woody { left: 56%; }
  .us-fs-deco-rex { left: 71%; }
}

@media (max-width: 1099px) {
  /* The band closes in from both sides as the page narrows: the arrows come
     left (they end ~892px at 1000) and Woody stays put at 52%. 62% is the
     middle of what is left — ~46px clear of Woody's hat on one side and ~85px
     clear of the arrows on the other. 68% lands on the arrows; 58% put Rex's
     snout on Woody. */
  .us-fs-deco-rex { left: 62%; }
}

@media (max-width: 899px) {
  /*
   * Rex is off. He needs 143px of clear height above the strip to show a head
   * over it, and the phone head band gives him about 90.
   */
  .us-fs-deco-rex { display: none; }

  /*
   * Woody stays, and keeps his job — he still stands on the strip's top edge —
   * but the offset splits in two here, because the head band does.
   *
   * Measured, `.strip`'s top edge sits `var(--air)` plus a delta below the
   * section's own, and that delta is 102-122px from 430 to 899 and 171-175px
   * below 430: the two scroll arrows sit beside the heading on a tablet and
   * wrap under it on a phone, which moves the whole strip down by ~60px. One
   * constant across both left him 97px deep in the film at 768 — 32px of hat
   * over a 129px figure — which is not a toy standing on a shelf, it is a hat.
   *
   * His height is fixed across this whole range (`5.8vw` is below the clamp's
   * 60px floor under 1034px, so the floor is what renders), so each of the two
   * offsets is just that band's delta plus a 12-32px tuck.
   *
   * 73% is the one clear column: the heading and its line run to 251px at 390,
   * and the two arrows sit at the left under them.
   */
  .us-fs-deco-woody { top: calc(var(--air) + 5px); left: 73%; }
}

@media (max-width: 429px) {
  /* The arrows wrap below the heading here and take the strip ~60px down with
     them; see the note above. */
  .us-fs-deco-woody { top: calc(var(--air) + 62px); }
}