/* ═══════════════════════════════════════════════════════════════════════════
   Yaku Makara Club · pinceladas.css
   Letra de pincel y trazos de tinta (ver js/modulos/pinceladas.js)
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Makara Pincel";
  src: url("../../fuentes/pincel.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --f-pincel: "Makara Pincel", "Instrument Serif", cursive;
}

/* Colores de tinta */
[data-pincel-color="naranja"]  { --pincel-color: var(--naranja); }
[data-pincel-color="turquesa"] { --pincel-color: var(--turquesa); }
[data-pincel-color="turquesa-luz"] { --pincel-color: var(--turquesa-luz); }
[data-pincel-color="coral"]    { --pincel-color: var(--coral); }
[data-pincel-color="espuma"]   { --pincel-color: var(--espuma); }
[data-pincel-color="petroleo"] { --pincel-color: var(--petroleo); }
[data-pincel-color="bio"]      { --pincel-color: var(--bio); }
[data-pincel-color="arena"]    { --pincel-color: var(--arena); }

/* ─── Letra de pincel ─────────────────────────────────────────────────────
   La letra tiene ojo pequeño: junto a Makara Display se ve bien un poco más grande. */
.pincel,
[data-pincel="escribir"] {
  font-family: var(--f-pincel);
  font-weight: 400;
  font-style: normal;
  font-size: var(--pincel-tam, 1.3em);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  font-kerning: normal;
  white-space: nowrap;
}
[data-pincel="escribir"] {
  display: inline-block;
  position: relative;
  padding-inline: .14em .12em;
  color: var(--pincel-color, currentColor);
  vertical-align: baseline;
}
/* dentro de un titular en mayúsculas, la palabra de pincel baja un poco y se monta sobre la línea */
.titulo [data-pincel="escribir"] { margin-block: -.28em -.1em; vertical-align: -.04em; }

/* Mientras el pincel no la ha escrito, la palabra no se ve (el texto sigue ahí para lectores de pantalla).
   Si por algo el script no arranca, aparece sola a los pocos segundos. */
.js:not(.es-reducido) [data-pincel="escribir"]:not(.pincel-hecho) {
  -webkit-text-fill-color: transparent;
  animation: pincel-seguro .6s 4s forwards;
}
.js:not(.es-reducido) [data-pincel="escribir"].pincel-vivo { animation: none; }
@keyframes pincel-seguro { to { -webkit-text-fill-color: currentColor; } }

.pincel-svg {
  position: absolute;
  left: 0; top: 0;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.pincel-escribir .pincel-svg text {
  font-family: var(--f-pincel);
  font-kerning: normal;
  fill: var(--pincel-color, currentColor);
  -webkit-text-fill-color: var(--pincel-color, currentColor);
}
.pincel-escribir .pincel-svg .pincel-sangre { opacity: .32; }

/* ─── Trazos ────────────────────────────────────────────────────────────── */
[data-pincel="subrayar"],
[data-pincel="rodear"],
[data-pincel="mancha"] {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
[data-pincel="rodear"] { margin-inline: .3em; }
[data-pincel="mancha"] { padding-inline: .12em; }
[data-pincel="trazo"] {
  position: relative;
  display: block;
  width: var(--pincel-ancho, min(18rem, 70%));
  height: var(--pincel-alto, 3.2rem);
  pointer-events: none;
}
.pincel-tinta-trazo, .pincel-gota { fill: var(--pincel-color, var(--naranja)); }
.pincel-cerdas { stroke: var(--pincel-color, var(--naranja)); }
.pincel-svg--mancha, .pincel-svg--rodear { z-index: -1; }
.pincel-svg--mancha { opacity: .92; }

/* ─── Titular revelado por brochazo ─────────────────────────────────────── */
.pincel-titular.pincel-vivo .pincel-linea {
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  padding-block: .14em; margin-block: -.28em 0;
  transform: translateX(-.06em);
  transition: -webkit-mask-position 1.3s cubic-bezier(.5, .05, .25, 1), mask-position 1.3s cubic-bezier(.5, .05, .25, 1), transform 1.5s var(--agua-ease, ease-out);
}
.pincel-titular.pincel-vivo .pincel-linea:first-child { margin-top: -.14em; }
.pincel-titular.pincel-vivo .pincel-linea:last-child { margin-bottom: -.14em; }
.pincel-titular.pincel-on .pincel-linea {
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-pincel="escribir"] { -webkit-text-fill-color: currentColor !important; animation: none !important; }
}