/* Escena "Diseño web": las TRANSICIONES entre ventanas.
   Todas las ventanas se apilan (sticky) y la siguiente sube por encima de la anterior.
   En cada frontera pasa lo mismo, a la ida y a la vuelta (todo sale del progreso p del scroll,
   no del sentido):
     - la ventana que SALE sube un ~10 % más despacio de lo que la tapan (paralaje: da
       profundidad) y se oscurece con su velo (`.wd__veil`, --v);
     - en la PRIMERA transición (portada → datos) se retira el marco amarillo (webdesign-fx.js
       escribe --fr);
     - en la transición a la ventana 3 (el estudio) ya no hay un cambio de estética que necesite
       una "costura" con forma: el estudio continúa la misma paleta crema/navy, así que solo se
       nota en una línea gris fina (`.wd__hub::before`, en webdesign-chapters.css). El mecanismo
       de costuras con forma (`.wd__seam`, ola/barras/portal) se usó mientras hubo capítulos con
       estéticas propias que se sucedían por scroll; ahora esos capítulos son pestañas dentro de
       la ventana 3 y no hay más fronteras que las necesiten. Se deja la pieza base (`.wd__seam`)
       por si una futura ventana con estética propia la necesita, pero hoy ninguna `.wd__seam`
       vive en el HTML.
   webdesign-fx.js escribe en cada frontera (hojas, sin hijos que recalcular):
     --v  progreso de la llegada (0…1), con el que se oscurece el velo hasta su --veil-max.
   Solo `translate` y `scale` (GPU); nada de filtros ni mezclas. */

.wd__seam {
  /* fracción que sube la ventana que sale (igual que OUT_SHIFT en webdesign-fx.js) */
  --wd-shift: 0.1;
  --seam-h: calc(var(--wd-view-h) * 0.3);
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--seam-h);
  pointer-events: none;
  transform-origin: 50% 100%;
  translate: 0 calc(-1 * var(--wd-view-h) * var(--p, 0) * (1 - var(--wd-shift)));
  scale: 1 var(--b, 0);
}

/* El velo oscurece la ventana que sale según llega la siguiente: --v (0…1, lo escribe
   webdesign-fx.js) por lo que oscurece como máximo, --veil-max (más suave en las claras: un
   negro al 55 % sobre el amarillo lo dejaba turbio). */
.wd__veil {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  background: #000;
  opacity: calc(var(--v, 0) * var(--veil-max, 0.55));
}

.wd__card--paper {
  --veil-max: 0.42;
}

.wd__hub {
  --veil-max: 0.3;
}

@media (prefers-reduced-motion: reduce) and (width < 0px) {
  .wd__seam,
  .wd__veil {
    display: none;
  }
}