/* ==========================================================================
   TRANSICION ENTRE PAGINAS — telon con borde curvo
   Portada de la guia GUIA-TRANSICION-ENTRE-PAGINAS.md (referencia
   hugeinc.com). transicion.js lleva el movimiento; el script del <head> de
   cada pagina pone .llega-con-transicion antes del primer pintado.

   Adaptado a la marca: el telon es el oscuro del sitio, el nombre en el
   claro y el punto en el verde claro (los tres de paleta.css). El tamano
   baja a 2rem en movil para que "Alejandra & Said." quepa a 375.
   ========================================================================== */

:root {
  --telon-fondo: var(--fondo-oscuro); /* color del telon */
  --telon-texto: var(--texto-inverso); /* color del nombre */
  --telon-acento: var(--texto-acento-inverso); /* color del punto final */
  --telon-tamano: clamp(2rem, 8vw, 7rem);
}

/* Un telon con un ovalo gigante en cada borde: lo que asoma es la curva.
   Las franjas que lo recortan se estiran o aplastan en vertical (scaleY):
   eso hace que el borde se abombe al subir y se aplane al salir. */
.transicion {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: clip;
  pointer-events: none;
}
.transicion.esta-activa,
.llega-con-transicion .transicion {
  pointer-events: auto;
}

.transicion__panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--telon-fondo);
  visibility: hidden;
}
.transicion__curva {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
/* El pixel de solape evita una raya clara entre franja y panel. */
.transicion__curva--arriba {
  bottom: calc(100% - 1px);
  height: 15vw;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.transicion__curva--abajo {
  top: calc(100% - 1px);
  height: 20vw;
  justify-content: flex-end;
  transform-origin: 50% 0;
}
.transicion__ovalo {
  flex: none;
  width: 125%;
  height: 500%;
  border-radius: 50%;
  background: var(--telon-fondo);
}

/* La letra es la del texto del sitio. 500 y no el 600 de la guia: Instrument
   Sans solo se carga en 400 y 500, y un 600 saldria en negrita sintetica. */
.transicion__rotulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--telon-texto);
  font-family: var(--fuente-texto, "Instrument Sans", system-ui, sans-serif);
  font-size: var(--telon-tamano);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  visibility: hidden;
}
/* Cada letra en su mascara; el relleno inferior deja sitio a los descendentes. */
.transicion__letra {
  display: inline-block;
  vertical-align: top;
  overflow: clip;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.transicion__letra-i {
  display: inline-block;
  will-change: transform;
}
.transicion__letra--punto {
  color: var(--telon-acento);
}

/* Llegada: la pagina nueva arranca ya tapada (clase puesta por el <head>). */
.llega-con-transicion .transicion__panel {
  visibility: visible;
  transform: translateY(-100%);
}
.llega-con-transicion .transicion__rotulo {
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .transicion {
    display: none;
  }
}