/* ═══════════════════════════════════════════════════════════════════════════
   LA LECTURA DEL RÉGIMEN · el pie de foto del relieve

   Qué régimen está pintado en la isla del fondo, de qué día es y con qué cifra
   medida. Es la pieza que distingue un relieve que cambia de color de un
   relieve que dice algo.

   ES EL HERMANO DEL RAÍL, y se compone como tal: misma familia mono, mismo
   ámbar para la cifra que importa, misma alineación hacia el canto de pantalla.
   El raíl manda en el flanco izquierdo y contesta «a qué altura vas»; esto se
   sienta en el ángulo bajo derecho y contesta «qué tiempo estás mirando».

   ── DE PLACA DESVANECIDA A PANEL, Y POR QUÉ ────────────────────────────────
   Esto vivía al pie de la banda de la isla, que era una columna de hasta 700 px
   donde no había una sola letra: bastaba con una placa de degradado por debajo
   para levantarle el contraste sobre el relieve, y el texto de la página nunca
   llegaba hasta ahí. Sin banda, el contenido pasa por ese ángulo, y un
   degradado a media tinta debajo de un párrafo no es una lectura: son dos
   textos superpuestos.

   Así que ahora es lo que de verdad era: un panel flotante, con el mismo
   grafismo que los de la aplicación —filete, canto redondeado, cabecera de
   rótulo— y por encima del contenido. Que la portada se parezca al producto es
   lo que promete el enlace, y en el producto los paneles flotan sobre el mapa.

   ── SOLO DONDE HAY SITIO ───────────────────────────────────────────────────
   Por debajo de 1180 px el panel se comería un tercio del ancho de un teléfono
   por encima del texto que se está leyendo. Se apaga y no se dibuja.
   ═══════════════════════════════════════════════════════════════════════════ */

.regimen {
  display: none;
}

@media (min-width: 1180px) {
  /* Solo cuando el relieve está en pie: sin WebGL no hay régimen que leer. */
  .isla3d-ok .regimen {
    display: block;
    /* Cromo, como la barra y el raíl: por encima del contenido, que pasa por
       debajo. Por debajo de la barra, que es la que manda. */
    position: fixed;
    z-index: 5;
    right: clamp(1.1rem, 2.4vw, 2.8rem);
    bottom: clamp(1.5rem, 5vh, 3.4rem);
    /* La nota más larga —«+3,6 °C al cruzar los 650 m · R² 0,25»— pide 30
       caracteres mono; con el relleno del panel, 30ch es el ancho útil. */
    width: 30ch;
    padding: 0.85rem 1rem 0.95rem;
    text-align: right;
    pointer-events: none;

    /* La misma carcasa que un panel de la aplicación. Opaca de verdad: es lo
       que permite que el texto de dentro se mida contra su propio fondo y no
       contra la ladera iluminada que pasa por detrás. */
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
  }

  /* El filete: corto, ámbar y a lo ancho de la cabecera. Es el mismo gesto que
     la marca del hito encendido del raíl, del otro lado de la pantalla. */
  .regimen b {
    display: block;
    padding-top: 0.62rem;
    border-top: 1px solid var(--amber);
    font-family: var(--sans);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--fg);
  }

  .regimen .reg-fecha {
    display: block;
    margin-top: 0.34rem;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--amber);
  }

  .regimen .reg-nota {
    display: block;
    margin-top: 0.42rem;
    font-family: var(--mono);
    font-size: 0.605rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: var(--fg-faint);
    font-variant-numeric: tabular-nums;
  }

  /* EL CRUCE. Los números del relieve se mezclan poco a poco en el sombreador,
     pero el texto no puede: «8,0 °C/km» a medio camino de «−2,4 °C/km» sería una
     cifra que nadie ha medido. Así que la etiqueta cambia de golpe cuando el
     régimen nuevo pasa a mandar, y lo único que se interpola es este
     desvanecido. El filete entra por delante, que es lo que hace que se note el
     cambio sin necesidad de mover nada más. */
  .regimen.viva b {
    animation: reg-filete 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .regimen.viva .reg-fecha {
    animation: reg-entra 0.6s ease 0.06s both;
  }
  .regimen.viva .reg-nota {
    animation: reg-entra 0.6s ease 0.14s both;
  }

  @keyframes reg-filete {
    from {
      opacity: 0;
      clip-path: inset(0 0 0 100%);
    }
    to {
      opacity: 1;
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes reg-entra {
    from {
      opacity: 0;
      transform: translate3d(0, 0.4rem, 0);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Sin movimiento no hay isla —`isla3d.js` no arranca—, así que esto no llega a
   dibujarse nunca. La regla está de todas formas: si algún día el relieve se
   quedara quieto en vez de apagarse, el texto tiene que aparecer sin animación en
   lugar de quedarse en `opacity: 0` para siempre. */
@media (prefers-reduced-motion: reduce) {
  .regimen.viva b,
  .regimen.viva .reg-fecha,
  .regimen.viva .reg-nota {
    animation: none;
  }
}