/* Relieve Hanya · módulo compartido · v1.2.0 · 11-10-2026
   Se enlaza tal cual. Los mockups no redefinen nada de lo que hay aquí (ver README.md, «Prohibido»).
   v1.1: acabado «firma» (la L de Hazel de la prueba del 09-10): .rl-firma lo pone el script en el soporte.
   v1.2: el script pone .rl-firma también sin WebGL2 (la reserva de la firma de abajo ya se aplica). Las fotos fijas de los
   soportes lejanos (.rl-lienzo.rl-foto) usan las mismas reglas que el lienzo. Nada más cambia aquí. */

@font-face {
  font-family: "Hazel Shore Relieve";
  src: url("../fonts/SLTFHazelShore-Script.woff2") format("woff2"),
       url("../fonts/SLTFHazelShore-Script.otf") format("opentype");
  font-display: block;
}

:root {
  /* Colores del material (sRGB) que se ven en reposo. burdeos = medidos en la tarjeta Hanya (papel 75,16,20 ·
     relleno 49,0,0). marfil y negro = centro del soporte alineado con --ll-blanco y --ll-negro-2 del sistema. */
  --rl-burdeos-papel: #4b1014;
  --rl-burdeos-laca: #310000;
  --rl-marfil-papel: #faf9f7;
  --rl-marfil-laca: #e7e3df;
  --rl-negro-papel: #1d1617;
  --rl-negro-laca: #0a0708;
  /* Firma en burdeos = la prueba del 09-10 tal cual: papel #4D1216 con ruido negro al 22 % (se ve #451014), tinta #33040A.
     En marfil y negro la firma usa el mismo papel visto que el acabado Hanya. */
  --rl-firma-papel: #451014;
  --rl-firma-tinta: #33040a;
}

/* El soporte: tarjeta o fondo de terciopelo. El lienzo WebGL lo cubre entero; las palabras van encima, en
   texto real transparente (se pueden seleccionar y las leen los lectores de pantalla). */
/* Maquetación con especificidad cero (:where): cualquier regla del mockup (absolute, sticky, z-index…) manda.
   Solo hace falta que el soporte no sea position: static. El material (colores) sí lo fija el módulo. */
:where(.rl-soporte) {
  position: relative;
  isolation: isolate;
  transform-origin: 50% 50%;
  touch-action: pan-y pinch-zoom; /* arrastrar en horizontal mueve la luz; en vertical, scroll normal */
}
.rl-soporte { background-color: var(--rl-burdeos-papel); }
.rl-soporte.rl-inclinable { will-change: transform; }
.rl-soporte[data-relieve-tono="marfil"] { background-color: var(--rl-marfil-papel); }
.rl-soporte[data-relieve-tono="negro"]  { background-color: var(--rl-negro-papel); }
.rl-soporte.rl-firma:not([data-relieve-tono="marfil"]):not([data-relieve-tono="negro"]):not([data-relieve-soporte="transparente"]) { background-color: var(--rl-firma-papel); }
.rl-soporte[data-relieve-soporte="transparente"] { background-color: transparent; }

.rl-soporte > .rl-lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

:where(.rl-palabra) {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-kerning: normal;
  font-synthesis: none;
}
/* Antes de que el relieve esté listo (o sin WebGL): la letra en el tono de la laca, plana. Nunca text-shadow. */
.rl-soporte .rl-palabra { color: var(--rl-burdeos-laca); text-shadow: none; }
.rl-soporte[data-relieve-tono="marfil"] .rl-palabra { color: #d8d2cb; } /* reserva sin WebGL: algo más oscura para que se lea */
.rl-soporte[data-relieve-tono="negro"] .rl-palabra  { color: var(--rl-negro-laca); }
.rl-soporte.rl-firma:not(.rl-activo):not([data-relieve-tono="marfil"]):not([data-relieve-tono="negro"]) .rl-palabra { color: var(--rl-firma-tinta); }

/* Con el relieve pintado, el texto DOM se vuelve transparente: el ojo ve el relieve y el lector, el texto. */
.rl-soporte.rl-activo .rl-palabra { color: transparent; }
.rl-soporte.rl-activo .rl-palabra::selection { color: transparent; background: rgba(255, 255, 255, .18); }

/* La L de Hazel como firma. Úsese dentro de un .rl-soporte: <span class="rl-palabra rl-hazel" aria-hidden="true">L</span>
   Un soporte cuyas palabras son todas Hazel toma solo el acabado «firma» (o con data-relieve="firma"). */
.rl-hazel {
  font-family: "Hazel Shore Relieve", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Depuración: el texto DOM en rojo translúcido sobre el relieve (Relieve.depurar()). */
.rl-depurar .rl-soporte.rl-activo .rl-palabra { color: rgba(255, 0, 60, .45); }

/* Colores forzados (alto contraste de Windows): sin lienzo, texto del sistema. */
@media (forced-colors: active) {
  .rl-soporte > .rl-lienzo { display: none; }
  .rl-soporte .rl-palabra, .rl-soporte.rl-activo .rl-palabra { color: CanvasText; }
}

/* Movimiento reducido: el módulo deja el reposo calibrado y quita la inclinación. */
@media (prefers-reduced-motion: reduce) {
  .rl-soporte { transform: none !important; }
  .rl-soporte.rl-inclinable { will-change: auto; }
}

/* Texto solo para lectores de pantalla (cuando la palabra en relieve no repite un titular legible). */
.rl-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}