/*
  Elementos que reaccionan a la luz del cursor.
  ui/lit.js escribe en cada [data-lit]:
    --lx / --ly  posición de la luz en px, relativa al elemento
    --li         proximidad 0..1 (ya suavizada y multiplicada por la ganancia de la luz)
    --rx / --ry  inclinación en grados (solo con data-lit-tilt)
  Sin JS ni puntero fino las variables no existen y todo queda en su estado de reposo.
*/

/* border — aro de 1px que se enciende cerca de la luz */
[data-lit="border"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    calc(110px + 90px * var(--li, 0)) circle at var(--lx, 50%) var(--ly, 50%),
    rgb(var(--ember) / calc(0.95 * var(--li, 0))),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* text — el relleno del texto se enciende donde cae la luz (sin tinta propia: solo se ve donde llega la luz) */
[data-lit="text"] {
  background-image: radial-gradient(
    calc(190px + 120px * var(--li, 0)) circle at var(--lx, 50%) var(--ly, 50%),
    rgb(224 52 63 / calc(0.9 * var(--li, 0))),
    rgb(196 32 46 / calc(0.32 * var(--li, 0))) 45%,
    transparent 78%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* text + data-lit-ink — texto macizo en tinta (numerales de las partes, palabra del documental). La tinta es una capa
   sólida bajo la luz, así existe también sin JS ni puntero. La luz no la tiñe del rojo de la tela (bajo el cursor la
   tela también brilla y la letra se fundiría con ella): la calienta como una brasa, núcleo ámbar y halo rojo oscuro,
   siempre más oscura que la tela. Tope del núcleo: el hueso del texto que pasa por encima no baja de 4.5:1 */
[data-lit="text"][data-lit-ink] {
  background-image:
    radial-gradient(
      calc(190px + 120px * var(--li, 0)) circle at var(--lx, 50%) var(--ly, 50%),
      rgb(var(--ember) / calc(0.45 * var(--li, 0))),
      rgb(224 52 63 / calc(0.3 * var(--li, 0))) 35%,
      transparent 75%
    ),
    linear-gradient(var(--ink-dark), var(--ink-dark));
}

/* sheen — reflejo suave sobre superficies (portada, fotograma del documental) */
[data-lit="sheen"] { position: relative; }
[data-lit="sheen"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: var(--li, 0);
  background: radial-gradient(
    300px circle at var(--lx, 50%) var(--ly, 50%),
    rgb(255 214 190 / 0.75),
    transparent 70%
  );
}
[data-lit-tilt] {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  will-change: transform;
}

/* photo — una segunda copia, con color y brillo, solo dentro del radio de la luz */
[data-lit="photo"] .author__img--lit {
  opacity: var(--li, 0);
  -webkit-mask-image: radial-gradient(
    calc(150px + 150px * var(--li, 0)) circle at var(--lx, 50%) var(--ly, 50%),
    #000 0%,
    transparent 100%
  );
  mask-image: radial-gradient(
    calc(150px + 150px * var(--li, 0)) circle at var(--lx, 50%) var(--ly, 50%),
    #000 0%,
    transparent 100%
  );
}