/* ═══════════════════════════════════════════════════════════════════
   RIVEL · THE LOOP
   The circuit is the stage. Copy sits on the field. Center stays open
   so Dark Veil shows through. Pin math is owned by home-loop.js.
   ═══════════════════════════════════════════════════════════════════ */

.hps:has(#loop) { overflow: visible; }

.hps-section.hps-loop-sec {
  padding: 0;
  overflow: visible;
  overflow-anchor: none;
}

#founder-venture.hps-section {
  position: relative;
}

.hps-loop-sec .pin-spacer,
.hps-loop-sec__stage,
.hps-loop,
.hps-loop__gl {
  background: transparent;
  background-color: transparent;
}

.hps-loop-sec__stage {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  overflow-anchor: none;
  box-sizing: border-box;
}

.hps-loop {
  --loop-ink: #9c43fe;
  --loop-lit: #c9aaff;
  position: relative;
  width: 100%;
  height: 100%;
}

.hps-loop__well {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hps-loop__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hps-loop-sec__copy {
  position: absolute;
  top: 5.15rem;
  left: clamp(.7rem, 2vw, 1.4rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: min(23rem, 34vw);
  text-align: left;
  pointer-events: none;
}
#loop .hps-loop-sec__copy .hps-theatre-kicker {
  display: none;
}
.hps-loop-sec__copy .hps-display {
  margin: 0;
  font-size: clamp(1.85rem, 3.3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.hps-loop-sec__copy .hps-display em {
  display: block;
  padding-bottom: .12em;
}
#loop .hps-loop-sec__copy .hps-lede {
  display: none;
}

.hps-loop__orbit,
.hps-loop__nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hps-loop__node {
  pointer-events: auto;
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  min-width: 2.1rem;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(232, 237, 242, .38);
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  cursor: pointer;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .28rem;
  transition: color .4s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1);
}
.hps-loop__node span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .12em;
  background: transparent;
}
.hps-loop__node b {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--ox, 0rem), var(--oy, 1.4rem));
}
.hps-loop__node.is-done {
  color: color-mix(in oklab, var(--loop-lit) 70%, #fff);
}
.hps-loop__node.is-done span,
.hps-loop__node.is-kin span {
  border-color: color-mix(in oklab, var(--loop-ink) 50%, transparent);
}
.hps-loop__node.is-active,
.hps-loop__node.is-kin {
  color: #fff;
  z-index: 2;
}
.hps-loop__node.is-active span {
  border-color: color-mix(in oklab, var(--loop-ink) 80%, #fff);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--loop-ink) 16%, transparent);
}
.hps-loop__node:hover { color: var(--loop-lit); }
.hps-loop__node:focus-visible {
  outline: 2px solid #b06bff;
  outline-offset: 4px;
}

.hps-loop__hud,
.hps-loop__hud.rg-glass,
.hps-loop__node.rg-glass {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent;
  box-shadow: none !important;
}
.hps-loop__hud {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(26rem, 52vw);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
  pointer-events: none;
  color: #fff;
}
.hps-loop__hud.is-swap .hps-loop__num,
.hps-loop__hud.is-swap .hps-loop__title,
.hps-loop__hud.is-swap .hps-loop__desc {
  opacity: 0;
}
.hps-loop__num,
.hps-loop__title,
.hps-loop__desc {
  position: relative;
  transition: opacity .18s ease;
}
.hps-loop__num {
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--loop-lit);
}
.hps-loop__title {
  margin: 0;
  font-family: var(--hps-display, 'PP Neue Machina', sans-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  letter-spacing: -.035em;
  line-height: 1.05;
}
.hps-loop__desc {
  margin: 0;
  max-width: 34ch;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(232, 237, 242, .58);
}

.hps-loop__bridge {
  position: absolute;
  left: 50%;
  bottom: 1.35rem;
  z-index: 3;
  margin: 0;
  transform: translate(-50%, 6px);
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7dd3fc;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1);
}
.hps-loop.is-closing .hps-loop__bridge {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1100px) {
  .hps-loop__node b { display: none; }
}

/* iPad + phone + short desktop: document instrument, never a half-pinned circuit. */
@media (max-width: 1079px), (max-height: 739px), (pointer: coarse) {
  .hps-loop-sec__stage {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .hps-loop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
    padding: 5.1rem clamp(1.15rem, 4vw, 2.6rem) 2.4rem;
    box-sizing: border-box;
    gap: 1.15rem;
  }
  .hps-loop-sec__copy {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    width: min(38rem, 100%);
    pointer-events: auto;
  }
  #loop .hps-loop-sec__copy .hps-theatre-kicker {
    display: block;
    margin-bottom: .65rem;
  }
  #loop .hps-loop-sec__copy .hps-lede {
    display: block;
    margin: .75rem 0 0;
    max-width: 42ch;
  }
  .hps-loop-sec__copy .hps-display {
    font-size: clamp(1.7rem, 5.2vw, 2.45rem);
  }
  .hps-loop__well {
    position: relative;
    inset: auto;
    width: min(100%, 28rem);
    aspect-ratio: 1;
    margin: .1rem auto 0;
    pointer-events: auto;
  }
  .hps-loop__node {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .45rem;
  }
  .hps-loop__node b { display: none; }
  .hps-loop__hud {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    transform: none;
    align-items: flex-start;
    text-align: left;
    gap: .35rem;
  }
  .hps-loop__desc { display: block; }
  .hps-loop__title { font-size: clamp(1.45rem, 4vw, 1.85rem); }
  .hps-loop__bridge {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    transform: none;
    white-space: normal;
    text-align: left;
    line-height: 1.45;
  }
  .hps-loop.is-closing .hps-loop__bridge {
    transform: none;
  }
}

@media (max-width: 720px) {
  .hps-loop {
    padding: 4.6rem 1.2rem 2.6rem;
    gap: 1.25rem;
  }
  .hps-loop-sec__copy .hps-display {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }
  #loop .hps-loop-sec__copy .hps-lede {
    font-size: .98rem;
    line-height: 1.55;
    color: rgba(232, 237, 242, .62);
  }
  .hps-loop__well {
    width: min(100%, 19.5rem);
  }
  .hps-loop__node span {
    width: 2rem;
    height: 2rem;
    font-size: .56rem;
  }
  .hps-loop__title {
    font-size: clamp(1.55rem, 7vw, 1.85rem);
  }
  .hps-loop__desc {
    max-width: 38ch;
    font-size: .98rem;
    line-height: 1.55;
    color: rgba(232, 237, 242, .6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hps-loop__node,
  .hps-loop__hud .hps-loop__num,
  .hps-loop__hud .hps-loop__title,
  .hps-loop__hud .hps-loop__desc,
  .hps-loop__bridge { transition: none; }
}

@supports not (color: color-mix(in oklab, red 50%, transparent)) {
  .hps-loop__node.is-active span { box-shadow: 0 0 0 4px rgba(156, 67, 254, .2); }
}

/* ══════════════════════════════════════════════════════════════════
   MOVIL v1 · bloque de correcciones responsive (append: gana por orden)
   ══════════════════════════════════════════════════════════════════ */

/* ═══ 6.1 Nodos del bucle: 8,32px en tablet y 8,96px en telefono, con
   3,09:1 de contraste. El objetivo tactil ya cumplia (2.75rem en la linea
   295), lo que falla es el glifo. Va en el bloque sin cine y no en el de
   720px porque entre 721 y 1079 los numeros se quedaban aun mas pequenos.
   El <b> con el nombre del paso NO se muestra: los circulos se colocan con
   scene.projectNodes() sobre la proyeccion exacta de las esferas 3D, y
   meter la etiqueta en el flujo los despega de sus puntos luminosos.
   Se deja visualmente oculto pero presente para que el lector de pantalla
   no anuncie solo "01".."07" (esto sustituye a los 14 aria-label que se
   proponian en index.html y es/index.html: un cambio de CSS cubre los dos
   idiomas y no puede incumplir 2.5.3 Label in Name). ═══ */
@media (max-width: 1079px), (max-height: 739px), (pointer: coarse) {
  .hps-loop__node { color: rgba(232, 237, 242, .58); }   /* 5,99:1 */
  .hps-loop__node span {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .68rem;                  /* 10,88px, ni 8,96 ni 8,32 */
    letter-spacing: .08em;
    border-color: rgba(255, 255, 255, .38);
  }
  .hps-loop__node b {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    transform: none;
  }

  /* ═══ 6.2 Reserva de la caja del parrafo. Fuera del cine el HUD esta en
     flujo, asi que cambiar de paso (por autoplay o por toque) mueve TODA la
     pagina por debajo: medido, el scrollHeight salta 24-25px.
     Fuente .92rem / line-height 1.5, peor caso medido 4 lineas. ═══ */
  .hps-loop__desc { display: block; min-height: 6em; }
}

@media (max-width: 720px) {
  /* fuente .98rem / line-height 1.55, peor caso medido 4 lineas (360 y 390px).
     La regla .hps-loop__node span de la linea 348 queda muerta con esto. */
  .hps-loop__desc { min-height: 6.2em; }
}

@media (max-width: 359px) {
  /* el ES llega a 5 lineas en telefono estrecho */
  .hps-loop__desc { min-height: 7.75em; }
}

/* [OPCIONAL, verificar en iPad] Una sola medida centrada en tablet: hoy la
   copy va a bandera izquierda a 38rem, el pozo a 28rem centrado y el hud a
   36rem centrado, o sea tres bordes izquierdos distintos en la misma columna. */
@media (min-width: 900px) and (max-width: 1079px),
       (min-width: 900px) and (max-height: 739px),
       (min-width: 900px) and (pointer: coarse) {
  .hps-loop { max-width: 60rem; margin-inline: auto; }
  .hps-loop-sec__copy { width: 100%; }
  .hps-loop__well { width: min(100%, 30rem); }
  .hps-loop__hud,
  .hps-loop__bridge { max-width: none; margin: 0; }
}


 7) css/home-stack.css
    7.A  BORRADO OBLIGATORIO (unico del plan)
    7.B  APPEND AL FINAL DEL ARCHIVO

/* ── 7.A  BORRAR las lineas 406-408 enteras:

@media (max-height: 740px) {
  .hps-stack-sec__head .hps-lede { display: none; }
}

   Por que borrar y no acotar: el pin del 004 solo se monta en el cine
   (min-width:1080px and min-height:740px and pointer:fine). Por debajo de
   740px de alto el stage ya cae a height:auto (linea 347) y no hay nada que
   proteger; por encima de 740px la consulta ni dispara. La UNICA altura
   donde toca un capitulo pineado es 740px exactos, y ahi tampoco hace
   falta: el lede esta topado a dos lineas con -webkit-line-clamp:2 y al
   stage le sobran ~400px sobre el min-height de la placa. Hoy la regla solo
   borra la unica frase que explica el capitulo en TODO movil apaisado, en
   un iPhone SE en vertical (667px de alto) y en cualquier ventana baja.
   Comando exacto: */

cd /Users/rivelfounder/rivel-companies-web
perl -0pi -e 's{\n\@media \(max-height: 740px\) \{\n  \.hps-stack-sec__head \.hps-lede \{ display: none; \}\n\}\n}{\n}s' css/home-stack.css
grep -n "max-height: 740px" css/home-stack.css   # debe salir vacio


/* ══════════ 7.B  APPEND AL FINAL DE css/home-stack.css ══════════ */

/* ═══ [M] Fuera del cine no hay scrub: la placa no narra los seis actos, se
   queda congelada en applyProgress(0.712). El texto vuelve a ser quien
   cuenta el capitulo, igual que en el 002 (home-axiom.css:249, que es la
   vara de medir). Hoy .hps-stack.is-webgl .hps-stack__fallback lo recorta a
   1px en cuanto arranca WebGL, y WebGL SI arranca en el telefono.
   El .hps-stack__story NO se oculta: es el pie de foto vivo que escriben
   los botones del rail, y su acto por defecto ("RIVEL makes those
   relationships visible") no esta en la lista del fallback. ═══ */
@media (max-width: 1079px), (max-height: 739px), (pointer: coarse) {
  .hps-stack.is-webgl .hps-stack__fallback {
    position: static;
    width: auto;
    height: auto;
    margin: .4rem 0 0;
    padding: 1.25rem 1.1rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1.5rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .hps-stack__fallback li {
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(232, 237, 242, .58);
  }

  /* Seguro por si se prefiere no borrar el bloque de max-height:740px:
     esto lo cubre en todo el regimen sin cine (queda fuera solo una ventana
     de cine de 740px exactos de alto). */
  .hps-stack-sec__head .hps-lede { display: block; }

  /* Fuera del cine el rail es el UNICO control del capitulo: el pin no se
     monta y el scroll ya no mueve la placa. Medido: 29,8px de alto en iPad
     vertical y 36,7px en telefono, con 5,6px entre pildoras. Mismo pase
     tactil que los nodos del Loop (home-loop.css:296).
     El min-height gobierna la altura, asi que no hay padding vertical. */
  .hps-stack__rail { gap: .45rem; }
  .hps-stack__rail button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 .8rem;
    line-height: 1.1;
    font-size: .62rem;
  }
}

@media (max-width: 720px) {
  /* solo se sube el cuerpo para que se lea en telefono: el alto lo hereda.
     .8rem y .9rem de padding estan medidos para que las seis etiquetas
     sigan cabiendo en DOS filas en EN y en ES a 360 y 390px. */
  .hps-stack__rail button { padding: 0 .9rem; font-size: .64rem; }
}