/* ============================================================================
   THE ROPE — presentation. Geometry lives in js/motion/rope.js; this file only
   places the SVGs and holds the 16px clearance and the 264x455 / r8 window.
   ========================================================================== */

/* COLOUR. The source artwork is exactly one ink, #035C9D, on white. That ink
   is kept in anchor-mark.js as ANCHOR.INK for full-size use, but the rope here
   still inherits --rope so it flips with the theme checkerboard: #035C9D on
   the #05091f ground is 2.84:1, a murky blue-on-blue, and it would not invert
   with .theme-light. What was reused is the client's MARK, not their ground. */
.rope { color: var(--rope); overflow: visible; }
.rope__cord { vector-effect: non-scaling-stroke; }
.rope__knot { transition: transform 250ms cubic-bezier(0, 0, .2, 1); }
/* The marks are Outback's own traced anchor. It is a silhouette, not a
   hairline, so it must not be smeared by the browser's geometry snapping. */
.rope__anchor { shape-rendering: geometricPrecision; }

/* --- rope-bracket: two ropes bracketing a crawling row of images ---------- */
.rope-marquee {
  position: relative;
  overflow: hidden;
  cursor: grab;
  /* 455 card + 2 x 16px clearance + 2 x 20px rope box */
  padding: 0;
  -webkit-user-select: none; user-select: none;
}
.rope-marquee.is-dragging { cursor: grabbing; }
.rope-marquee__track { will-change: transform; }
.rope-marquee__lane {
  position: relative;
  margin: 16px 0;                       /* the MEASURED 16px clearance */
}
.rope-card {
  position: absolute;
  top: 0;
  width: 264px;                          /* MEASURED card / image window */
  height: 455px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
.rope-card img { width: 100%; height: 100%; object-fit: cover; }
.rope-card__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 14px 12px;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #eef2f7;
  background: linear-gradient(to top, rgba(5, 9, 31, 0.82), rgba(5, 9, 31, 0));
}
.rope--bracket-top, .rope--bracket-bottom { display: block; }

/* Fade the strip into the section edges instead of cutting it off square. */
.rope-marquee::before, .rope-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 96px; z-index: 2;
  pointer-events: none;
}
.rope-marquee::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.rope-marquee::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

/* --- rope-gauge: vertical, beside the sticky panel ----------------------- */
.rope-gauge { display: flex; justify-content: center; }
.gauge-panel { position: sticky; top: 175px; }   /* MEASURED sticky offset */

/* --- rope-stepper: horizontal, clickable --------------------------------- */
.rope-stepper { position: relative; height: 34px; margin: 0 auto; }
/* The rope box is now sized by the MAJOR anchor (26.4px), not by the 34px
   track, so centre it in the track instead of letting it sit at the top —
   otherwise the marks and the .rope-stepper__hit targets disagree by 4px. */
.rope-stepper > .rope {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
}
.rope-stepper__hit {
  position: absolute; top: 50%; width: 30px; height: 34px;
  transform: translate(-50%, -50%); padding: 0;
  background: none; border: 0; cursor: pointer;
}
.rope-stepper__hit:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }