/* Escena "Diseño web": la CAPA FIJA (HUD). Lo que acompaña a las ventanas por encima del scroll
   (por debajo del marco amarillo) y hace que se lean como UNA secuencia. Dos piezas:

     1. La barra (Volver · Arriba · Baja): es la MISMA barra de la ventana 2. Mientras la ventana 2
        sube se ve la suya (sube con ella); en cuanto llega arriba, esta copia fija la releva en el
        mismo sitio, con el mismo alto (--wd-bar-h) y aspecto, y se queda ahí el resto del
        recorrido (petición del usuario: "que al scrollear hacia abajo se mantenga y todo lo que
        vaya pasando por debajo se ponga borroso"). Lo de debajo se desenfoca con backdrop-filter;
        el tinte de fondo solo entra cuando ya hay algo pasando por debajo (.is-bar-tint): justo al
        acoplarse no lo lleva, así el relevo sobre el degradado de la ventana 2 no se nota.
     2. El número del capítulo (01–04): UN solo elemento, que rueda de uno a otro. Antes cada número
        tenía su tipografía y color; el usuario pidió que "la zona de los números coincida y tengan
        un tamaño estándar": ahora los cuatro son iguales (misma letra, tamaño y sitio) y su parte de
        arriba cae en la misma línea que el título de la pestaña y el menú (--wd-hub-top).

   (Hubo una tercera pieza, la línea lateral con una marca por ventana a la derecha; el usuario
   pidió quitarla.)

   webdesign-fx.js decide qué ventana hay bajo cada pieza (según el scroll) y escribe el estado
   (clases y --k); aquí solo está el aspecto. */

.wd__hud {
  position: absolute;
  inset: 0;
  z-index: 26; /* sobre las ventanas (≤ 7), bajo el marco (30) */
  pointer-events: none;
}

/* ---------- 1. La barra ---------- */

.wd__hud-bar {
  /* tokens de la ventana 2 (papel): la barra se ve igual que la suya */
  --wd-ink: #231aab;
  --wd-blue: #f4f1e8;
  --wd-line: rgba(35, 26, 171, 0.2);
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  /* ocupa desde el borde de la pantalla (lo que pasa por encima de la barra también se
     desenfoca), pero la barra en sí va metida lo mismo que la de la ventana 2 */
  padding: var(--wd-frame-w) var(--wd-frame-w) 0;
  color: var(--wd-ink);
  background-color: transparent;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  visibility: hidden;
  pointer-events: auto;
  transition: background-color 350ms ease, color 350ms ease;
}

.wd__hud.is-bar-on .wd__hud-bar {
  visibility: visible;
}

/* El tinte es el MISMO color de fondo de lo que hay debajo (--wd-bar-bg, lo escribe
   webdesign-fx.js: el crema de la ventana 2 o el de la pestaña del estudio), algo transparente:
   en reposo la barra no se distingue del fondo, y lo que pasa por debajo se ve velado y borroso. */
.wd__hud.is-bar-tint .wd__hud-bar {
  background-color: rgba(244, 241, 232, 0.72);
  background-color: color-mix(in srgb, var(--wd-bar-bg, #f4f1e8) 72%, transparent);
}

/* sobre una pestaña oscura ("Casos", fondo negro): tinta clara */
.wd__hud.is-light .wd__hud-bar {
  --wd-ink: #f4f1e8;
  --wd-blue: #0b0b0d;
  --wd-line: rgba(244, 241, 232, 0.2);
}

.wd__bar--hud {
  /* ya entró con la ventana 2: esta copia no repite la animación de entrada */
  animation: none;
}

.wd__hud :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

/* ---------- 2. Número del capítulo ---------- */

.wd__hud-n {
  /* UN tamaño para todos */
  --num-size: clamp(5.5rem, 2rem + 9.5vw, 11rem);
  position: absolute;
  z-index: 1;
  /* arriba, en la misma línea que el título de la pestaña */
  top: calc(var(--wd-frame-w) + var(--wd-bar-h) + var(--wd-hub-top));
  right: calc(var(--wd-frame-w) + var(--wd-hub-pad-x));
  display: flex;
  height: calc(var(--num-size) * 0.86);
  margin: 0;
  font-size: var(--num-size);
  line-height: 1;
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 700ms ease, transform 900ms var(--ease-out-expo);
}

.wd__hud.is-num-on .wd__hud-n {
  opacity: 1;
  transform: none;
}

/* Petición del usuario: al cambiar de pestaña "que el 0 se mantenga y cambie el que viene
   después". El 0 es un elemento aparte, quieto; solo la segunda cifra rueda, en su ventana
   (overflow: hidden de un número de alto). Cifras tabulares: todas miden lo mismo. */
.wd__hud-win {
  display: block;
  height: calc(var(--num-size) * 0.86);
  overflow: hidden;
}

.wd__hud-roll {
  display: block;
  transform: translateY(calc(var(--k, 0) * var(--num-size) * -0.86));
  transition: transform 900ms var(--ease-out-expo);
}

.wd__n {
  display: block;
  height: calc(var(--num-size) * 0.86);
  color: var(--wd-indigo, #231aab);
  font-family: var(--font-display);
  font-size: var(--num-size);
  font-synthesis: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  line-height: calc(var(--num-size) * 0.86);
  text-align: right;
  white-space: nowrap;
  transition: color 350ms ease;
}

.wd__hud.is-light .wd__n {
  color: #f4f1e8;
}

/* ---------- Móvil ---------- */

@media (max-width: 42rem) {
  .wd__hud-n {
    --num-size: clamp(4rem, 1rem + 14vw, 6rem);
    top: calc(var(--wd-frame-w) + var(--wd-bar-h) + 0.6rem);
  }
}

@media (prefers-reduced-motion: reduce) and (width < 0px) {
  .wd__hud-bar,
  .wd__hud-n,
  .wd__hud-roll,
  .wd__n {
    transition: none;
  }
}