/* lente-de-peso — the catalyst is the lens.
   BASE (no JS, reduced motion, failed init): one static ink line at weight 900,
   left-aligned on the gutter, clipped, unpinned. The section stays aria-hidden.
   ENHANCED: everything below `html.fx-lente` (added only after a successful
   init and only without reduced motion): a sticky pin with the line at 58%,
   the track driven by scroll, and the weight lens under the catalyst. */

.ribbon {
  --lens-fs: clamp(72px, 16vw, 240px);
}

/* Phones: the line carries the screen instead of floating as a thin band in blue. */
@media (max-width: 719px) {
  .ribbon { --lens-fs: clamp(80px, 21vw, 240px); }
}

/* Portrait tablets: width alone gave ~12% of the height; the line stays monumental. */
@media (orientation: portrait) and (min-width: 720px) {
  .ribbon {
    --lens-fs: clamp(72px, max(16vw, 17vh), 240px);
    --lens-fs: clamp(72px, max(16vw, 17svh), 240px);
  }
}

.ribbon-pin {
  overflow: hidden;
  padding: clamp(64px, 9vw, 136px) 0;
}

.lens-track {
  display: block;
  width: max-content;
  white-space: nowrap;
  padding-inline-start: var(--gutter);
  font-size: var(--lens-fs);
  line-height: 1;
}

.lens-text {
  font-size: var(--lens-fs);
  font-weight: var(--w, 900);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.sep {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin: 0 0.18em;
}

.sep svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  overflow: visible;
  transform: rotate(-10deg);
}

/* No JS (and the CDN-down fallback): nothing moves and no lens explains an offset, so
   the line starts on the gutter and is sized so the whole first phrase, 'Ocurre antes'
   plus its mark (6.57em in Geist 900 at -0.05em), sits inside the gutters on every
   viewport. Only 'Sigue siendo…' runs off the right edge, as the ribbon's bleed.
   Beats the phone and portrait-tablet sizes above by specificity. */
html.no-js .ribbon {
  --lens-fs: min(240px, calc((100vw - 2 * var(--gutter)) / 6.8));
}

/* Two copies are enough to wrap a phone-width viewport. */
@media (max-width: 719px) {
  .lens-text:nth-child(3) { display: none; }
}

/* ---------- Enhanced: the pin ---------- */
html.fx-lente .ribbon {
  height: 160vh;
  height: 160svh;
}

html.fx-lente .ribbon-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: start;
  justify-items: start;
  /* The line's centre sits at 58% of the pin; api.lineTop() measures the result. */
  padding: calc(58vh - var(--lens-fs) / 2) 0 0;
  padding: calc(58svh - var(--lens-fs) / 2) 0 0;
  contain: layout paint;
}

html.fx-lente .lens-track {
  padding-inline-start: 0;
  will-change: transform;
  backface-visibility: hidden;
}

@media (max-width: 719px) {
  html.fx-lente .ribbon {
    height: 140vh;
    height: 140svh;
  }
}

/* ---------- Reduced motion: no pin, a frozen typographic image ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Same fit as no-JS: the line stays on the gutter and 'Ocurre antes' reads whole. */
  html .ribbon {
    --lens-fs: min(240px, calc((100vw - 2 * var(--gutter)) / 6.8));
  }

  .ribbon-pin {
    padding: 12vh 0;
    padding: 12svh 0;
  }

  html.fx-lente .ribbon { height: auto; }

  html.fx-lente .ribbon-pin {
    position: relative;
    height: auto;
    display: block;
    padding: 12vh 0;
    padding: 12svh 0;
    contain: none;
  }

  html.fx-lente .lens-track { will-change: auto; }
}