/* =====================================================================
   INICIO  ·  pase de imágenes a pantalla completa
   Los tiempos vienen de assets/js/ajustes.js (se pasan como variables)
   ===================================================================== */

html, body { height: 100%; overflow: hidden; }

.pase {
  position: fixed; inset: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-fondo);
}

/* ---- Las dos capas de imagen que se van turnando ---- */
.pase__capa {
  position: absolute; inset: 0;
  opacity: 0;
  filter: blur(var(--desenfoque, 28px));
  transform: scale(var(--zoom, 1.07));
  transition:
    opacity   var(--t-imagen, 2200ms) var(--curva),
    filter    var(--t-imagen, 2200ms) var(--curva),
    transform calc(var(--t-imagen, 2200ms) * 1.4) var(--curva);
  will-change: opacity, filter, transform;
}
.pase__capa img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--encuadre, center);
}
.pase__capa.activa { opacity: 1; filter: blur(0); transform: scale(1); z-index: 1; }
.pase__capa.saliendo { opacity: 0; filter: blur(var(--desenfoque, 28px)); transform: scale(1.015); z-index: 0; }

/* El zoom muy lento de cada foto lo hace inicio.js (sin saltos al cambiar) */

/* ---- Texto: título, año y labor ---- */
.pase__pie {
  position: absolute; z-index: 5;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1400px);
  text-align: center;
  pointer-events: none;
}
.pase__titulo {
  font-family: var(--titulo-fuente);
  font-weight: var(--titulo-peso);
  font-style: var(--titulo-estilo);
  font-synthesis: weight style;
  font-size: calc(var(--titulo-tam) * 1.5);
  line-height: 1;
  letter-spacing: var(--titulo-espaciado);
  text-transform: uppercase;
}
.pase__datos {
  font-family: var(--fuente-inicio);
  margin-top: 1em;
  font-size: var(--inicio-tam-datos);
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* ---- Letras sin contorno; el contraste lo calcula diferencia.js ---- */
.pase__pie {
  color: var(--dif-letra);
  mix-blend-mode: normal;
  -webkit-text-stroke: 0;
}
/* Letra a letra: aparecen desde desenfocadas */
.pase__pie .palabra { display: inline-block; white-space: nowrap; }
.pase__pie .letra {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(.18em);
}
.pase__pie.entra .letra {
  transition:
    opacity   var(--t-texto, 1400ms) var(--curva) var(--d),
    filter    var(--t-texto, 1400ms) var(--curva) var(--d),
    transform var(--t-texto, 1400ms) var(--curva) var(--d);
  opacity: 1; filter: blur(0); transform: none;
}
.pase__pie.sale .letra {
  transition:
    opacity var(--t-salida, 1100ms) var(--curva),
    filter  var(--t-salida, 1100ms) var(--curva);
  opacity: 0; filter: blur(18px); transform: none;
}

.pase__vacio {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 2rem; color: var(--color-suave);
}

@media (max-width: 700px) {
  .pase__titulo { font-size: calc(var(--titulo-tam) * .85); }
  .pase__datos  { letter-spacing: .2em; }
}