/* ═══════════════════════════════════════════════════════════════════
   RIVEL · CINE EN TODO TAMAÑO
   Los capitulos 002-004 ya no caen a diagramas en flujo en tablet y movil:
   montan el mismo cine que escritorio (ver js/rivel-cinema.js). Esta hoja
   solo recompone, por FORMATO, lo que la composicion de escritorio da por
   hecho. Va la ultima de la home para ganar por orden.

   Formatos:
     vertical  (max-aspect-ratio: 1/1)  telefonos y tablets de pie, ventanas
                                         estrechas. Todo se apila en el eje.
     bajo      apaisado y max-height     portatiles de ventana baja (1280x700),
               739px / 520px             telefonos tumbados.
   Con movimiento reducido no se monta el cine y nada de esto aplica: esas
   personas siguen viendo la version en flujo (bloques reduced-motion de
   cada hoja de capitulo).
   ═══════════════════════════════════════════════════════════════════ */

/* Estados que pone el JS solo cuando hacen falta (fuera de media query). */

/* 004: los cinco rotulos de la persona no caben en una fila y se escalonan
   (index.js placeAnchors). Con el tracking de escritorio (.2em) chocan. */
.hps-stack__anchors.is-tight span {
  letter-spacing: .1em;
}

/* 004 acto 07 en vertical: el legendario del apilado es una lista bajo la
   pieza en vez de una regla en el margen izquierdo, que no existe. */
.hps-stack__layers.is-list {
  /* Bajo la pieza, no pegado al canto: la camara posa el apilado hacia el
     60% de la altura en vertical, asi que la lista arranca un poco por debajo. */
  inset: auto 1rem 23svh 1rem;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  gap: .75rem 1.5rem;
  font-size: 10.5px;
}
.hps-stack__layers.is-list span {
  position: static;
  transform: none;
  justify-content: flex-start;
  gap: .55em;
  will-change: opacity;
}

/* ── VERTICAL ──────────────────────────────────────────────────── */
/* Hueco superior = donde acaba la pildora del nav + aire. En telefono la
   pildora acaba a ~72 px; desde 600 px baja a 32-88 px y con el mismo hueco
   el titular del 003 y el kicker del 002 se metian debajo. */
@media (prefers-reduced-motion: no-preference) and (max-aspect-ratio: 1/1) {
  .hps-axiom-sec__stage,
  .hps-loop {
    --cine-top: 5.3rem;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-aspect-ratio: 1/1) and (min-width: 600px) {
  .hps-axiom-sec__stage,
  .hps-loop {
    --cine-top: 6.6rem;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-aspect-ratio: 1/1) {

  /* 002 · Orbe arriba, copy debajo, marcas al pie. Todo en el eje. */
  .hps-axiom-sec__stage {
    padding: var(--cine-top) 1.25rem calc(.85rem + env(safe-area-inset-bottom, 0px));
  }
  .hps-axiom {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: .6rem;
  }
  .hps-axiom .hps-theatre-kicker {
    justify-self: center;
  }
  .hps-axiom__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    row-gap: clamp(1rem, 3.2svh, 2.2rem);
    padding-left: 0;
  }
  .hps-axiom__orb-col {
    justify-self: center;
    gap: .5rem;
  }
  .hps-axiom__orb {
    width: min(58vw, 30svh, 22rem);
    height: min(58vw, 30svh, 22rem);
  }
  /* La caja de la copy se reserva entera: los cinco pasos tienen titulares y
     entradillas de largo distinto y, sin reserva, el orbe subia y bajaba con
     cada cambio de paso. */
  .hps-axiom__copy {
    justify-self: center;
    width: 100%;
    max-width: 34rem;
    min-height: clamp(11.5rem, 27svh, 14rem);
    text-align: center;
  }
  .hps-axiom__title {
    font-size: clamp(1.95rem, 8.4vw, 3.1rem);
    text-wrap: balance;
  }
  .hps-axiom__lede {
    margin: .8rem auto 0;
    max-width: 36ch;
    font-size: clamp(.95rem, 3.9vw, 1.08rem);
    line-height: 1.58;
  }
  /* Cinco marcas con nombre no caben en 375 px: las inactivas quedan en su
     numero y la activa enseña el nombre. El texto sigue en el DOM (font-size
     0, no display:none), asi que el nombre accesible no cambia. */
  .hps-axiom__marks {
    justify-content: center;
    flex-wrap: nowrap;
    gap: .1rem .85rem;
    padding: 0;
  }
  .hps-axiom__marks button {
    min-width: 44px;
    padding: 0 .15rem;
    font-size: 0;
    letter-spacing: .14em;
    white-space: nowrap;
  }
  .hps-axiom__marks button span {
    margin-right: 0;
    font-size: .7rem;
  }
  .hps-axiom__marks button[aria-current] {
    font-size: .7rem;
  }
  .hps-axiom__marks button[aria-current] span {
    margin-right: .45rem;
  }

  /* 003 · Titular arriba, anillo en el centro, lectura del paso debajo. El
     anillo ya no lleva el HUD dentro: en 375 px no cabe una entradilla dentro
     de un circulo. El pozo ocupa el hueco que queda y la escena encaja el
     anillo en el (--loop-fit-*, ver LoopScene.js). El HUD tiene altura fija:
     si creciera con el texto, el pozo cambiaria de tamaño en cada paso. */
  .hps-loop {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    row-gap: clamp(.55rem, 1.6svh, 1.1rem);
    padding: var(--cine-top) 1.25rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
  .hps-loop-sec__copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .hps-loop-sec__copy .hps-display {
    font-size: clamp(1.7rem, 7.4vw, 2.6rem);
  }
  .hps-loop__well {
    --loop-fit-v: .84;
    --loop-fit-h: .86;
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .hps-loop__node {
    min-width: 44px;
    min-height: 44px;
  }
  .hps-loop__node span {
    width: 1.85rem;
    height: 1.85rem;
    font-size: .6rem;
  }
  .hps-loop__hud {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 32rem;
    height: clamp(9.75rem, 22svh, 11.5rem);
    justify-self: center;
    justify-content: flex-start;
    gap: .35rem;
    transform: none;
    overflow: hidden;
  }
  .hps-loop__title {
    font-size: clamp(1.55rem, 6.6vw, 2.3rem);
  }
  .hps-loop__desc {
    max-width: 36ch;
    font-size: clamp(.92rem, 3.7vw, 1rem);
    line-height: 1.5;
    color: rgba(232, 237, 242, .62);
  }
  .hps-loop__bridge {
    position: relative;
    left: auto;
    bottom: auto;
    justify-self: center;
    min-height: 1.4em;
    white-space: normal;
    text-align: center;
    transform: translateY(6px);
  }
  .hps-loop.is-closing .hps-loop__bridge {
    transform: none;
  }

  /* 004 · Titular arriba; la placa, de canto a canto, la encaja la camara
     (cameraTimeline.js, portraitMix). */
  .hps-stack__story {
    top: max(10.5svh, 5.6rem);
    width: calc(100% - 2.5rem);
  }
  .hps-stack__story h3 {
    font-size: clamp(1.6rem, 6.8vw, 2.4rem);
    line-height: 1.12;
  }
  .hps-stack__story [data-story-sub] {
    max-width: 36ch;
    font-size: clamp(.92rem, 3.7vw, 1.02rem);
    line-height: 1.5;
  }
}

/* ── APAISADO BAJO ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 1001/1000) and (max-height: 739px) {
  .hps-axiom-sec__stage {
    padding-top: 4.6rem;
    padding-bottom: .55rem;
  }
  .hps-axiom__orb {
    width: min(40vmin, 20rem);
    height: min(40vmin, 20rem);
  }
  .hps-axiom__title {
    font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  }
  .hps-axiom__lede {
    margin-top: .7rem;
    font-size: .98rem;
    line-height: 1.55;
  }
  .hps-loop-sec__copy {
    top: 4.6rem;
  }
  .hps-loop__title {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
  }
  .hps-stack__story {
    top: 11.5%;
  }
}

/* Telefono tumbado: no caben marcas ni entradillas largas. */
@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 1001/1000) and (max-height: 520px) {
  .hps-axiom .hps-theatre-kicker,
  .hps-axiom__marks {
    display: none;
  }
  .hps-axiom-sec__stage {
    padding-top: 4.2rem;
  }
  /* Sin kicker ni marcas, el stage caia en una fila auto y se pegaba arriba. */
  .hps-axiom {
    grid-template-rows: minmax(0, 1fr);
  }
  .hps-axiom__orb {
    width: 44vmin;
    height: 44vmin;
  }
  .hps-axiom__orb-name {
    display: none;
  }
  .hps-axiom__title {
    font-size: clamp(1.45rem, 3.8vw, 2.2rem);
  }
  .hps-axiom__lede {
    font-size: .9rem;
    max-width: 46ch;
  }
  .hps-axiom__mode {
    margin-bottom: .35rem;
  }
  .hps-loop-sec__copy {
    top: 4.2rem;
  }
  .hps-loop-sec__copy .hps-display {
    font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  }
  /* El lienzo arranca bajo la pildora del nav: con 390 px de alto el anillo
     subia hasta tocarla. */
  .hps-loop__well {
    inset: 5.4rem 0 0 0;
  }
  /* El HUD vive centrado en el anillo, que ahora baja la mitad de ese hueco. */
  .hps-loop__hud {
    top: calc(50% + 2.7rem);
  }
  .hps-loop__desc {
    display: none;
  }
  .hps-loop__title {
    font-size: clamp(1.15rem, 2.8vw, 1.6rem);
  }
  .hps-stack__story {
    top: 5.7rem;
  }
  .hps-stack__story h3 {
    font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  }
  .hps-stack__story [data-story-sub] {
    display: none;
  }
}

/* 003 · Por debajo de 1100 px el nombre de cada nodo no cabe junto al anillo
   (home-loop.css lo quita con display:none). Se deja visualmente oculto pero
   presente: sin el, un lector de pantalla anunciaba solo "01".."07". */
@media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
  .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;
  }
}