/* capsulas-selladas — two sealed capsules that almost grow, then hold back.
   CSS-first: no canvas, no letters. The base rules below also hold with no JS
   (solid ink pills, caret at rest, static status). Everything that moves on its
   own is gated on html.fx-capsulas and on .silent.is-inview, so nothing loops
   offscreen. Contact (.is-catalyzed, added by the script) animates clip-path and
   transform only: paint and composite, never layout. */

/* ---------- Capsule (base) ---------- */
.r-bar {
  position: relative;
  display: block;
  font-size: clamp(22px, 3vw, 44px);
  height: 0.72em;
  width: var(--len, 5em);
  max-width: calc(100% - 24px);
}

/* The fill is .6em longer than the bar; the clip hides that last .6em at rest. */
.r-fill {
  position: absolute;
  inset: 0 -0.6em 0 0;
  background: var(--ink);
  border-radius: 999px;
  clip-path: inset(0 0.6em 0 0 round 999px);
  transition: clip-path var(--t-short) var(--ease-react);
}

/* #5472FB on white: 4.06:1, above the 3:1 graphic floor. */
.r-caret {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + 8px);
  width: 2px;
  background: var(--blue);
  transition: transform var(--t-short) var(--ease-react);
}

/* ---------- Status: both lines share one cell, so the swap never reflows ---------- */
.r-status {
  display: grid;
  grid-template-columns: 9px auto;
  column-gap: 10px;
  align-items: center;
  justify-content: start;
}

.r-status i { grid-area: 1 / 1; }

.r-s1,
.r-s2 {
  grid-area: 1 / 2;
  white-space: nowrap;
  transition: opacity var(--t-micro) var(--ease-react), transform var(--t-micro) var(--ease-react);
}

/* 'Todavía no.' is aria-hidden: the accessible status always stays 'En desarrollo'. */
.r-s2 {
  display: block;
  opacity: 0;
  transform: translateY(0.35em);
  pointer-events: none;
  user-select: none;
}

/* ---------- Contact: something grows, then holds back ---------- */
.redacted li.is-catalyzed .r-fill { clip-path: inset(0 0 0 0 round 999px); }
.redacted li.is-catalyzed .r-caret { transform: translateX(0.6em); }
.redacted li.is-catalyzed .r-s1 { opacity: 0; transform: translateY(-0.35em); }
.redacted li.is-catalyzed .r-s2 { opacity: 1; transform: none; }

/* ---------- Enhanced (html.fx-capsulas: added after a successful init, never when reduced) ---------- */
html.fx-capsulas .silent {
  padding-block: 24vh;
  padding-block: 24svh;
}

/* Phones and tall portrait tablets: the note's full stop sits at least ~45svh above
   the lens section, so its flood is already swelling when that section's edge comes
   into view (styles.css carries the same reservation for the base layout). */
@media (orientation: portrait) and (min-width: 720px), (max-width: 719px) {
  html.fx-capsulas .silent {
    padding-bottom: 45vh;
    padding-bottom: 45svh;
  }
}

/* Hairlines draw once, left to right. The 1px borders stay (transparent) so the
   rows never shift; the drawn line sits exactly on top of them. */
html.fx-capsulas .redacted li { position: relative; border-top-color: transparent; }
html.fx-capsulas .redacted li:last-child { border-bottom-color: transparent; }

html.fx-capsulas .redacted li::before,
html.fx-capsulas .redacted li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(var(--cap-line, 1));
  transform-origin: 0 50%;
  pointer-events: none;
}

html.fx-capsulas .redacted li:last-child::after {
  top: auto;
  bottom: -1px;
  transform: scaleX(var(--cap-end, 1));
}

/* The status dot breathes only while the section is in view. */
@keyframes cap-dot {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

html.fx-capsulas .silent.is-inview .r-status i {
  animation: cap-dot 2.4s var(--ease-settle) infinite alternate;
}

/* The caret blinks only on contact (hover, a tap) or for 3.2s on first view on touch. */
@keyframes cap-caret {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

html.fx-capsulas .silent.is-inview .redacted li.is-writing .r-caret,
html.fx-capsulas .silent.is-inview .redacted li.is-catalyzed .r-caret {
  animation: cap-caret 1.06s steps(1) infinite;
}

@media (hover: hover) and (pointer: fine) {
  html.fx-capsulas .silent.is-inview .redacted li:hover .r-caret {
    animation: cap-caret 1.06s steps(1) infinite;
  }
}

/* ---------- Forced colours: keep the pills, caret and dot visible ---------- */
@media (forced-colors: active) {
  .r-fill { forced-color-adjust: none; background: CanvasText; }
  .r-caret { forced-color-adjust: none; background: Highlight; }
  .r-status i { forced-color-adjust: none; background: CanvasText; }
}

/* ---------- Reduced motion: static caret and dot; contact becomes an instant cut ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fx-capsulas .silent { padding-block: clamp(96px, 12vw, 180px); }
  html.fx-capsulas .redacted li::before,
  html.fx-capsulas .redacted li:last-child::after { transform: none; }
  .r-caret,
  .r-status i { animation: none !important; }
  .r-fill,
  .r-caret,
  .r-s1,
  .r-s2 { transition-duration: 0.01ms !important; }
}

/* ---------- Print: the scroll reveals never fire, so release their hidden states ---------- */
@media print {
  html.fx-capsulas .silent h2 { opacity: 1 !important; }
  html.fx-capsulas .redacted li::before,
  html.fx-capsulas .redacted li:last-child::after { transform: none; }
}