/* ==========================================================================
   Torre de Collserola — movimiento «Ascenso»

   Segunda capa de animación, encima del revelado de main.js, que sigue igual.
   Una sola idea la ordena: el ascensor panorámico.

     · Todo sube. Letras, renglones y piezas entran de abajo arriba.
     · Las páginas se abren desde el eje, como sus puertas: al llegar a la web
       y al pasar de una página a otra.
     · Profundidad, no espectáculo: las fotografías van un poco más despacio
       que el texto. En reposo, la composición es la del Figma.
     · Un altímetro mide la subida: de 000 a 288 m a lo largo de la página.
     · Una curva y pocas duraciones, las de tokens.css.

   Todo lo que esconde algo cuelga de una marca que pone JavaScript (.mov,
   .tcs-intro, [data-letras], [data-renglones]…): si el script no llega, la web
   se ve entera y quieta. Con «reducir movimiento» no se aplica nada.

   El comportamiento vive en assets/js/movimiento.js y se carga desde
   inc/movimiento.php. Para apagarlo entero basta comentar su require_once en
   functions.php.
   ========================================================================== */


/* --- 1. Titulares letra a letra --------------------------------------------
   El renglón sigue siendo la ventana (overflow: clip, en main.css); lo que se
   mueve ahora son sus letras, veinte milisegundos detrás de la anterior. Al
   terminar, movimiento.js devuelve el texto a su forma original: el kerning y
   la medida vuelven a ser exactamente los del Figma. */
[data-letras] .linea > span {
  transform: none;
  transition: none;
  will-change: auto;
}

[data-letras] .palabra {
  display: inline-block;
  white-space: nowrap;
}

[data-letras] .letra {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--mov-letra, 950ms) var(--ease-out);
  transition-delay: calc(var(--tcs-retardo, 0ms) + var(--mov-base, 40ms) + var(--l, 0) * 20ms);
  will-change: transform;
}

[data-letras][data-visible="true"] .letra { transform: none; }

/* La portada es lo primero que se ve: espera un instante y va con más calma. */
.portada__titulo[data-letras]     { --mov-base: 200ms; --mov-letra: 1150ms; }
.composicion__palabra[data-letras] { --mov-letra: 1100ms; }
.pie__logotipo[data-letras]       { --mov-base: 120ms; --mov-letra: 1200ms; }

/* El logotipo del pie se parte aquí en renglones, como los titulares. Pero no
   es una celda de rejilla como ellos: sin esto, el margen negativo que abre la
   caja de cada renglón para las tildes (ajustes.css) se escaparía por arriba y
   la caja del párrafo crecería 0,22 em. Con flow-root se queda dentro y la
   medida es exactamente la de antes. */
.pie__logotipo[data-lineas] { display: flow-root; }


/* --- 2. Párrafos renglón a renglón -----------------------------------------
   Cada palabra sube un palmo y se funde; el turno lo marca su renglón, que se
   cuenta en el momento de entrar. Al acabar se devuelve el HTML original. */
[data-renglones] .renglon-p {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.85em);
  transition:
    opacity 650ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: calc(var(--tcs-retardo, 0ms) + 60ms + var(--r, 0) * 80ms);
}

[data-renglones][data-tcs-visto] .renglon-p { opacity: 1; transform: none; }

/* La entradilla de portada ya no se funde entera: lo hacen sus palabras. */
[data-renglones][data-entrada] { opacity: 1; transform: none; transition: none; }


/* --- 3. Las puertas de llegada ---------------------------------------------
   Solo la primera página de la visita, y solo si abre con fotografía. Lo
   decide un script mínimo en la cabecera (inc/movimiento.php), antes de que
   se pinte nada: así no hay parpadeo.

   Primero sube el eje —una línea del suelo al cielo—, luego las dos hojas se
   abren desde el centro y detrás la fotografía se asienta. El titular y las
   cifras esperan a que las puertas estén a medio abrir. Todo es CSS: aunque
   el JavaScript tarde, las puertas se abren igual. */
@media (prefers-reduced-motion: no-preference) {
  .tcs-intro .portada:not(.portada--sin-foto) { --tcs-retardo: 950ms; }

  .tcs-intro .portada:not(.portada--sin-foto)::before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    width: 1px;
    height: min(100svh, 100%);
    margin-left: -0.5px;
    background: var(--c-crema);
    transform-origin: 50% 100%;
    pointer-events: none;
    animation: tcs-eje 1100ms var(--ease-out) both;
  }

  /* Las hojas encogen hacia su borde en lugar de desplazarse: sobre un negro
     liso se ve igual y no empujan nada fuera de la página. */
  .tcs-intro .portada:not(.portada--sin-foto) .portada__lienzo::before,
  .tcs-intro .portada:not(.portada--sin-foto) .portada__lienzo::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    width: 50.5%;
    background: var(--c-ink);
    pointer-events: none;
    animation: tcs-hoja 1300ms var(--ease-in-out) 520ms both;
  }
  .tcs-intro .portada:not(.portada--sin-foto) .portada__lienzo::before { left: 0;  transform-origin: 0 50%; }
  .tcs-intro .portada:not(.portada--sin-foto) .portada__lienzo::after  { right: 0; transform-origin: 100% 50%; }

  .tcs-intro .portada:not(.portada--sin-foto) .portada__fondo img {
    animation: tcs-asienta 2400ms var(--ease-out) 380ms both;
  }

  .tcs-intro:has(.portada:not(.portada--sin-foto)) .barra {
    animation: tcs-funde 900ms var(--ease-out) 1350ms both;
  }

  .tcs-intro .portada:not(.portada--sin-foto) .cifras [data-cuenta] {
    transition-delay: calc(var(--tcs-retardo) + 560ms + var(--i, 0) * 90ms);
  }
  .tcs-intro .portada:not(.portada--sin-foto) [data-entrada] {
    transition-delay: calc(var(--tcs-retardo) + 220ms);
  }
}

@keyframes tcs-eje {
  0%   { transform: scaleY(0); opacity: 1; }
  45%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes tcs-hoja    { to { transform: scaleX(0); } }
@keyframes tcs-asienta { from { scale: 1.12; } to { scale: 1; } }
@keyframes tcs-funde   { from { opacity: 0; } }


/* --- 4. De una página a otra: las mismas puertas ----------------------------
   Transición nativa del navegador entre documentos. La página nueva se abre
   desde el eje mientras la anterior se apaga, como una luz que baja; el
   isotipo de la cabecera no se mueve. Sin JavaScript y sin coste: donde no hay
   soporte (Firefox, de momento) la navegación es la de siempre. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: tcs-vt-sale 900ms var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: tcs-vt-abre 900ms var(--ease-in-out) both; }

  .barra__marca { view-transition-name: tcs-marca; }
}

@keyframes tcs-vt-abre { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes tcs-vt-sale { to { filter: brightness(0.3); transform: scale(0.985); } }


/* --- 5. Profundidad ---------------------------------------------------------
   Las fotografías se desplazan dentro de su marco con la propiedad translate
   (y scale para tener margen), que se suma al transform del revelado y del
   acercamiento al pasar el ratón sin pisarlos. El marco recorta: en la portada
   de inicio el lienzo no está posicionado y sin este recorte la fotografía se
   saldría por debajo, encima de la sección siguiente. */
.portada__fondo {
  overflow: hidden;
  overflow: clip;
  /* Mientras llega la fotografía, negro y no blanco: las puertas se abren
     sobre la noche y la imagen entra fundida (movimiento.js), no de golpe. */
  background: var(--c-ink);
}


/* --- 6. El altímetro --------------------------------------------------------
   De 000 a 288 m —la altura estructural de la Torre— a lo largo de la página.
   Solo en escritorio y con ratón; aparece al dejar la portada. El color lo
   decide movimiento.js mirando qué hay detrás: blanco sobre fotografía y
   negro, tinta sobre crema y blanco. */
.altimetro {
  position: fixed;
  z-index: 30;
  top: 50%;
  right: clamp(16px, 1.9vw, 38px);
  display: grid;
  justify-items: center;
  gap: 12px;
  transform: translateY(-50%);
  color: var(--c-paper);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 600ms var(--ease-out),
    color 400ms var(--ease-out);
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--display-wdth);
  font-weight: var(--w-medium);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.altimetro[data-visible] { opacity: 1; }
.altimetro--oscuro { color: var(--c-ink); }

.altimetro__cifra { white-space: nowrap; font-variant-numeric: tabular-nums; }
.altimetro__num { display: inline-block; min-width: 3ch; text-align: right; }

.altimetro__via {
  position: relative;
  width: 9px;
  height: 22vh;
}

/* La escala: un eje fino y una marca cada diez por ciento. */
.altimetro__via::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat,
    repeating-linear-gradient(to top, currentColor 0 1px, transparent 1px 10%) 50% 0 / 5px 100% no-repeat;
}

.altimetro__marca {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  margin-bottom: -1px;
  background: currentColor;
  transform: translateY(calc(var(--alt, 0) * -22vh));
}

@media (max-width: 1023px) {
  .altimetro { display: none; }
}


/* --- 7. La cinta ------------------------------------------------------------
   movimiento.js toma el relevo de la animación CSS para que la cinta acelere
   con el scroll y cambie de sentido al subir. */
.banda__pista--viva {
  animation: none;
  will-change: transform;
}


/* --- 8. Menú: las entradas suben una detrás de otra ------------------------- */
.mov .menu-panel li {
  opacity: 0;
  translate: 0 0.45em;
  transition:
    opacity 250ms var(--ease-out),
    translate 250ms var(--ease-out);
}
.mov .menu-panel[data-abierto="true"] li {
  opacity: 1;
  translate: 0 0;
  transition-duration: 700ms, 950ms;
  transition-delay: calc(120ms + var(--i, 0) * 60ms);
}

.mov .menu-panel__sellos {
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}
.mov .menu-panel[data-abierto="true"] .menu-panel__sellos {
  opacity: 1;
  transition: opacity 900ms var(--ease-out) 560ms;
}


/* --- 9. Cronología: el raíl se traza y los años llegan en orden ------------ */
.mov [data-trazo] .cronologia__anios::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1600ms var(--ease-in-out) 120ms;
}
.mov [data-trazo="visto"] .cronologia__anios::before { transform: none; }

.mov [data-trazo] .anio {
  opacity: 0;
  translate: 0 12px;
  transition:
    color var(--dur-toque) var(--ease-toque),
    opacity 700ms var(--ease-out),
    translate 900ms var(--ease-out);
  transition-delay:
    0ms,
    calc(280ms + var(--i, 0) * 110ms),
    calc(280ms + var(--i, 0) * 110ms);
}
.mov [data-trazo="visto"] .anio { opacity: 1; translate: 0 0; }


/* --- 10. Detalles de puntero ----------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* Vidrio: un reflejo que sigue al puntero por la tarjeta. */
  .mov-raton .tarjeta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(22rem circle at var(--luz-x, 50%) var(--luz-y, 0%),
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 500ms var(--ease-out);
  }
  .mov-raton .tarjeta:hover::after { opacity: 1; }

  /* Galerías: el mismo acercamiento lento que ya tenían los accesos. */
  .mov-raton .galeria__pieza:hover img { transform: scale(1.035); }
}


/* --- 11. Impresión y respaldo ------------------------------------------------ */
@media print {
  [data-letras] .letra,
  [data-renglones] .renglon-p { opacity: 1 !important; transform: none !important; }
  .altimetro { display: none; }
}