/**
 * La coreografía de Stride puesta sobre la web de Vinyo, en CSS propio.
 *
 * Este fichero no introduce un color, una tipografía ni un radio: mueve lo que
 * `estilos.css` ya pinta. Cada valor de tiempo, alza y desenfoque sale de la spec
 * de Stride tal cual (revelado 1400 ms con reparto 0,55, titular 1600 ms, hero que
 * se encoge 24 px en 0,45 alturas de ventana), con un nombre propio en `:root` para
 * que el número aparezca una sola vez y `coreografia.js` calcule sus retrasos con
 * los mismos números.
 *
 * ## El telón se ve sin JavaScript, y también se va sin JavaScript
 *
 * El telón está en el HTML desde el primer byte para que no haya un fotograma de
 * página desnuda. Eso obliga a que este CSS lo pinte a pantalla completa desde la
 * primera regla. `estilos.css` lo deja en `display: none` como red por si esta
 * hoja no carga; por eso la regla de abajo declara `display: block` de forma
 * explícita y gana en cascada solo porque se enlaza después. Pero un telón que solo quita el guion es un telón que, si el guion
 * no llega (un 404, un bloqueador, una red que se cae a medias), tapa la web de una
 * clínica para siempre. Por eso, mientras `<html>` no lleve la clase que el guion
 * cuelga al arrancar, el telón se retira solo a los tres segundos con una animación
 * de CSS. En cuanto el guion toma el mando, la animación deja de aplicarse y el
 * telón se mueve desde `coreografia.js`.
 *
 * ## Lo escondido solo se esconde con la clase de control
 *
 * Todo lo que se revela (los `data-revelar`, las palabras del titular) es invisible
 * únicamente bajo `html.con-coreografia`. Sin guion, o si el guion se cae y retira
 * la clase, la página se ve entera. El estado revelado no declara ninguna
 * transformación propia: solo el estado escondido lo hace, y la transición se
 * declara solo mientras la pieza se mueve (`.en-movimiento`). Así, cuando el
 * revelado termina, el `hover` de las tarjetas y de los botones recupera su propia
 * transición de `estilos.css` sin que ésta la pise.
 *
 * ## El hero se encoge en CSS donde el navegador sabe, y en JS donde no
 *
 * Con `animation-timeline` el encogimiento lo hace el navegador ligado al scroll y
 * el guion no toca nada. El rango `exit 0px exit 45vh` arranca justo cuando el
 * borde superior de la portada cruza el de la ventana y termina 0,45 alturas de
 * ventana después: es la fórmula de Stride con el recorrido acortado (0,6 en la
 * spec) para que la tarjeta termine de encogerse antes de salir por arriba, ya que
 * aquí la portada mide una ventana y no más. El radio del recorte es el
 * `--radio-grande` de la marca, no los 24 px de Stride. Por debajo de 900 px no se
 * encoge: en un móvil roba altura a un texto que ya va justo.
 *
 * ## El scroll se bloquea mientras el telón corre
 *
 * Se midió: quien hace scroll durante el telón sale a mitad de página con todo por
 * revelar, y un tutor impaciente hace justo eso. Mientras el guion tiene el telón
 * en marcha cuelga `con-telon` de `<html>` y esta hoja lo traduce a
 * `overflow: hidden`; `scrollbar-gutter: stable` conserva el hueco de la barra
 * para que liberar el scroll no desplace el contenido 15 px, y `touch-action:
 * none` sobre el telón corta el gesto táctil, que en el móvil no obedece al
 * `overflow` del documento. La clase se retira en `DONE_AT`, con el evento, y
 * también si el guion se cae: una página que no se puede desplazar es peor que un
 * telón que no sale.
 *
 * ## Las huellas se mueven con `translate`, no con `transform`
 *
 * La deriva lenta es una animación de CSS y el seguimiento del puntero lo escribe
 * el guion en `transform`. Si los dos escribieran la misma propiedad, la animación
 * pisaría al guion. La propiedad individual `translate` se compone con `transform`
 * sin estorbarse. El sangrado que evita que la deriva enseñe un borde sin trama lo
 * pone `estilos.css` (el patrón va un 12% más grande que la portada por cada lado).
 */

:root {
  --coreografia-curva-salida: cubic-bezier(0.25, 1, 0.5, 1);
  --coreografia-revelar-duracion: 630ms;
  --coreografia-revelar-alza: 16px;
  --coreografia-revelar-desenfoque: 8px;
  --coreografia-tarjeta-alza: 24px;
  --coreografia-tarjeta-desenfoque: 12px;
  --coreografia-titular-duracion: 720ms;
  --coreografia-portada-margen: 24px;
  --coreografia-portada-radio: var(--radio-grande);
  --coreografia-portada-escala-final: 0.9;
  --coreografia-telon-fino: 0.06;
  --coreografia-telon-retirada-sin-guion: 2400ms;
  --coreografia-deriva-ciclo: 40s;
  --coreografia-moneda-vuelta: 1100ms;
  --coreografia-moneda-vueltas: 2;
  --coreografia-moneda-curva: cubic-bezier(0.65, 0, 0.35, 1);
  --coreografia-moneda-perspectiva: 900px;
}

/* ── El telón ─────────────────────────────────────────────────────────── */

html.con-telon {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.telon {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  touch-action: none;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--tipo-cuerpo);
}

.telon--en-marcha,
.telon--en-marcha .telon__barra,
.telon--en-marcha .telon__relleno,
.telon--en-marcha .telon__contador {
  will-change: transform;
}

html:not(.con-coreografia) .telon {
  animation: coreografia-telon-sin-guion 600ms ease-out var(--coreografia-telon-retirada-sin-guion) forwards;
}

@keyframes coreografia-telon-sin-guion {
  to { opacity: 0; visibility: hidden; }
}

.telon__centro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.telon__emblema {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.telon__nombre {
  font-family: var(--tipo-marca);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tinta);
}

.telon__contador {
  position: absolute;
  left: 0;
  bottom: 4rem;
  font-family: var(--tipo-titulos);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  padding-right: 1.5rem;
  white-space: nowrap;
  color: var(--tinta);
  transform: translateX(calc(16vw - 100%));
}

@media (min-width: 768px) {
  .telon__contador { bottom: 5rem; }
}

.telon__barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  transform-origin: bottom;
  transform: scaleY(var(--coreografia-telon-fino));
}

.telon__relleno {
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(to right, var(--borde), var(--indigo));
  transform: scaleX(0);
}

/*
 * ── El telón de la moneda (solo la portada) ─────────────────────────────
 *
 * `telon--moneda` cambia la puesta en escena sin cambiar el contrato: el mismo
 * `#telon`, la misma barra, el mismo contador y el mismo guion. El emblema gira
 * en Y como una moneda y debajo corre una barra fina; al llegar al 100 % el
 * telón sube igual que el clásico. Las páginas de servicio siguen con el
 * clásico porque no llevan el modificador.
 *
 * La moneda tiene dos caras con la misma imagen. La de detrás va girada 180°
 * de antemano y con `backface-visibility: hidden`, así que cuando la moneda da
 * media vuelta se lee el emblema derecho y no su reflejo en espejo.
 *
 * El giro dura `vuelta × vueltas` y `coreografia.js` lee esas dos variables
 * para medir la carga: la barra llega al 100 % justo cuando la moneda termina
 * su última vuelta de frente. El número vive aquí una sola vez.
 *
 * La curva acelera en el canto y frena de frente. En el canto (90°) la moneda
 * desaparece un instante: es lo que hace que se lea como una moneda y no como
 * una imagen que se estrecha.
 *
 * El giro arranca con `telon--en-marcha`, que cuelga el guion en el mismo
 * instante en que empieza a contar. Sin guion la moneda se queda quieta de
 * frente y el telón se retira solo a los tres segundos: un giro que el guion
 * tuviera que reiniciar al llegar se vería saltar a media vuelta.
 */

.telon--moneda .telon__centro {
  flex-direction: column;
  gap: 2.5rem;
  perspective: var(--coreografia-moneda-perspectiva);
}

.telon__moneda {
  position: relative;
  width: clamp(112px, 24vw, 168px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
}

.telon__cara {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
}

.telon__cara--reverso { transform: rotateY(180deg); }

.telon--moneda.telon--en-marcha .telon__moneda {
  animation-name: coreografia-moneda-gira;
  animation-duration: var(--coreografia-moneda-vuelta);
  animation-timing-function: var(--coreografia-moneda-curva);
  animation-iteration-count: var(--coreografia-moneda-vueltas);
  animation-fill-mode: both;
  will-change: transform;
}

@keyframes coreografia-moneda-gira {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.telon__carga {
  display: grid;
  gap: 0.7rem;
  width: min(236px, 62vw);
}

.telon--moneda .telon__barra {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  height: 3px;
  border-radius: 999px;
  background: var(--borde);
  transform: none;
}

.telon--moneda .telon__relleno {
  border-radius: inherit;
  background: linear-gradient(to right, var(--indigo-claro), var(--indigo));
}

.telon__pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--tipo-cuerpo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.telon--moneda .telon__contador {
  position: static;
  padding: 0;
  font-family: var(--tipo-cuerpo);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tinta);
  transform: none;
}

/* ── El hero que se encoge ────────────────────────────────────────────── */

@supports (animation-timeline: scroll()) {
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    [data-encoger] {
      view-timeline: --coreografia-portada block;
      animation: coreografia-encoger-portada linear both;
      animation-timeline: --coreografia-portada;
      animation-range: exit 0px exit 45vh;
    }
    [data-encoger] > .portada__rejilla {
      animation: coreografia-encoger-rejilla linear both;
      animation-timeline: --coreografia-portada;
      animation-range: exit 0px exit 45vh;
    }
  }
}

@keyframes coreografia-encoger-portada {
  from { clip-path: inset(0px round 0px); }
  to { clip-path: inset(var(--coreografia-portada-margen) round var(--coreografia-portada-radio)); }
}

@keyframes coreografia-encoger-rejilla {
  from { transform: scale(1); }
  to { transform: scale(var(--coreografia-portada-escala-final)); }
}

[data-encoger].en-movimiento { will-change: clip-path; }
[data-encoger].en-movimiento > .portada__rejilla { will-change: transform; }

/* ── La cascada de revelado ───────────────────────────────────────────── */

html.con-coreografia [data-revelar]:not(.revelado) {
  opacity: 0;
  transform: translate3d(0, var(--coreografia-revelar-alza), 0);
  filter: blur(var(--coreografia-revelar-desenfoque));
}

html.con-coreografia [data-revelar="tarjeta"]:not(.revelado) {
  transform: translate3d(0, var(--coreografia-tarjeta-alza), 0);
  filter: blur(var(--coreografia-tarjeta-desenfoque));
}

html.con-coreografia [data-revelar].en-movimiento {
  transition:
    opacity var(--coreografia-revelar-duracion) var(--coreografia-curva-salida),
    transform var(--coreografia-revelar-duracion) var(--coreografia-curva-salida),
    filter var(--coreografia-revelar-duracion) var(--coreografia-curva-salida);
  will-change: opacity, transform, filter;
}

/* ── La cascada del titular ───────────────────────────────────────────── */

.cascada__palabra { display: inline-block; }

html.con-coreografia .cascada__palabra:not(.revelado) {
  opacity: 0;
  transform: translate3d(0, var(--coreografia-revelar-alza), 0);
  filter: blur(var(--coreografia-revelar-desenfoque));
}

html.con-coreografia .cascada__palabra.en-movimiento {
  transition:
    opacity var(--coreografia-titular-duracion) var(--coreografia-curva-salida),
    transform var(--coreografia-titular-duracion) var(--coreografia-curva-salida),
    filter var(--coreografia-titular-duracion) var(--coreografia-curva-salida);
  will-change: opacity, transform, filter;
}

/* ── La banda ligada al scroll ────────────────────────────────────────── */

[data-marquee] { overflow: hidden; }

[data-marquee-fila] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
}

[data-marquee-fila] > li {
  flex: none;
  white-space: nowrap;
}

[data-marquee-fila].en-movimiento { will-change: transform; }

/* ── Las huellas a la deriva ──────────────────────────────────────────── */

[data-deriva] {
  animation: coreografia-deriva var(--coreografia-deriva-ciclo) ease-in-out infinite;
  will-change: transform;
}

@keyframes coreografia-deriva {
  0% { translate: 0 0; }
  25% { translate: 10px -6px; }
  50% { translate: 4px 12px; }
  75% { translate: -8px 6px; }
  100% { translate: 0 0; }
}

/* ── Menos movimiento: todo quieto y todo visible ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html.con-coreografia [data-revelar]:not(.revelado),
  html.con-coreografia .cascada__palabra:not(.revelado) {
    opacity: 1;
    transform: none;
    filter: none;
  }
  [data-deriva] {
    animation: none;
    will-change: auto;
  }
}