/* ============================================================
   EL GRANO · hoja compartida por todo el máster

   Va aquí y no dentro de cada página por una razón concreta: el
   grano es lo único capaz de unificar ocho tratamientos de origen
   distinto. Si cada tira lleva su copia, a la tercera ya no son el
   mismo grano y deja de coser nada.

   Las capas las mete grano.js — aquí solo está su aspecto.

   TRES CAPAS, y cada una hace un trabajo que las otras no pueden:

   .grano     overlay     el pique. Muerde el contraste de los medios
                          tonos, que es donde vive el grano de verdad.
   .grano.b   soft-light  el cuerpo. Más gruesa y más blanda, para que
                          el grano tenga tamaño y no sea solo ruido.
   .grano-negros  screen  el polvillo del fondo. Hace falta porque en
                          overlay el negro se queda negro: sin esta,
                          el fondo de la web queda liso y muerto al
                          lado de las celdas. Screen solo puede sumar
                          luz, así que levanta los negros y en los
                          medios tonos no se nota.
============================================================ */

/*  La franja: el hueco de una tira. La capa de grano va DENTRO de
    ella pero FUERA de la banda que se desplaza — si fuera dentro, el
    grano viajaría con la tira, y el grano no viaja: se vuelve a
    sortear en el sitio.

    isolation:isolate acota la mezcla a esta tira y no a media
    página. Pero aislar deja al grano sin fondo contra el que
    mezclarse, y overlay contra nada no puede hacer nada: en vez de
    desaparecer, el ruido se pinta tal cual y sale una banda gris a
    lo ancho de la tira. Por eso el negro va DENTRO del grupo
    aislado. Con negro debajo, overlay da negro y el grano solo
    aparece donde hay celda — que es todo lo que se le pide.       */
.franja{ position:relative; isolation:isolate; background:#000; }

.grano{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  mix-blend-mode:overlay;
  /*  --g es el multiplicador de ESTA tira (data-grano). Las ocho son
      materiales distintos: la que lleve archivo de los 70 pide más
      grano que la que lleve render limpio.                         */
  opacity:calc(var(--grano-op) * var(--g,1));
  background-image:var(--grano-img);
  background-position:var(--grano-pos);
  background-size:var(--grano-tam) auto;
}
.grano.b{
  z-index:6; mix-blend-mode:soft-light;
  opacity:calc(var(--grano-op-b) * var(--g,1));
  background-image:var(--grano-img-b);
  background-position:var(--grano-pos-b);
  background-size:var(--grano-tam-b) auto;
}
.grano-negros{
  position:fixed; inset:0; z-index:29; pointer-events:none;
  mix-blend-mode:screen;
  opacity:var(--grano-op-n);
  background-image:var(--grano-img-n);
  background-position:var(--grano-pos);
  background-size:var(--grano-tam-b) auto;
}

/*  Una página suelta: el grano va dentro del cuadro y se mide contra
    él, no contra la pantalla.                                      */
.cuadro > .grano{ position:absolute; z-index:7; }
.cuadro > .grano.b{ z-index:8; }

@media (prefers-reduced-motion:reduce){
  /*  Con el hervido continuo, un grano que se sortea doce veces por
      segundo a pantalla completa es exactamente lo que esta consulta
      existe para evitar. Se queda quieto, no se quita: sin grano la
      página es otra cosa.                                          */
  .grano, .grano.b, .grano-negros{ animation:none; }
}