/**
 * Efectos tipográficos — 10 clases aplicables a cualquier bloque de texto.
 *
 * ── EL COLOR SALE DEL BLOQUE ────────────────────────────────────────────
 * Cada efecto declara `color: var(--cye-fx-…)` SIN !important. Eso lo
 * convierte en un simple valor por defecto (el de Ajustes): en cuanto el
 * editor fija un color en el bloque —Stackable lo escribe como estilo en
 * línea— ese color gana y el efecto se recalcula a partir de él.
 *
 * Los degradados no usan variables fijas sino `currentColor`, así que siguen
 * al color del bloque igual que los efectos de filtro.
 *
 * ── POR QUÉ -webkit-text-fill-color Y NO color: transparent ─────────────
 * background-clip:text necesita que el relleno del texto sea transparente
 * para que se vea el degradado. Con `color: transparent` se conseguía… pero
 * entonces `currentColor` valía transparente y el degradado se quedaba sin
 * color: imposible heredar nada.
 * `-webkit-text-fill-color` vacía el relleno SIN tocar `color`, de modo que
 * currentColor conserva el color real del bloque. Está soportado en todos los
 * navegadores que soportan background-clip:text, así que no añade requisitos.
 *
 * ── SELECTORES DE DESCENDIENTES ─────────────────────────────────────────
 * En Gutenberg la clase cae sobre el propio <h2> y basta. En Stackable cae
 * sobre el <div> contenedor y el texto vive en un hijo, así que las reglas se
 * repiten para los elementos de texto internos. Los efectos que solo usan
 * `filter` no lo necesitan: filter afecta a todo lo que el elemento pinta.
 *
 * @package CYE
 */

:root {
  /* Valores de respaldo por si no llegara el inline style de Ajustes. */
  --cye-fx:      #b8933f;
  --cye-fx-tela: #e6ded0;

  --cye-fx-deep:  color-mix(in srgb, var(--cye-fx) 46%, #0f0a02);
  --cye-fx-mid:   var(--cye-fx);
  --cye-fx-ink:   color-mix(in srgb, var(--cye-fx) 46%, #17120a);
  --cye-fx-hundido: color-mix(in srgb, var(--cye-fx-tela) 82%, var(--cye-fx-deep));

  /* Paso de la puntada del bordado. Tunable desde el bloque si hace falta. */
  --cye-hilo-paso: 3.5px;
}

/* ═══════════════════════════════════════════════════════════════════════
   1 · EFECTOS DE FILTRO — heredan el color del bloque tal cual
   ═══════════════════════════════════════════════════════════════════════ */

.cye-x-vela     { color: var(--cye-fx-mid);     filter: url(#cyeFxVela); }
.cye-x-pulido   { color: var(--cye-fx-mid);     filter: url(#cyeFxPulido); }
.cye-x-satinado { color: var(--cye-fx-mid);     filter: url(#cyeFxSatinado); }
.cye-x-filo     { color: var(--cye-fx-deep);    filter: url(#cyeFxFilo); }
.cye-x-grabado  { color: var(--cye-fx-hundido); filter: url(#cyeFxGrabado); }
.cye-x-hueco    { color: var(--cye-fx-hundido); filter: url(#cyeFxHueco); }

/* Letterpress — tinta hundida.
   El reflejo va DEBAJO (0 1px): es el canto del hueco que recibe la luz. Si
   se pusiera arriba, la letra se levantaría en lugar de hundirse.
   El multiply se reserva para cuando hay papel detrás (.cye-x-papel): sobre
   blanco puro no aporta nada —multiplicar por blanco no cambia el color— y
   además el reflejo blanco tampoco se distingue. */
.cye-x-letterpress,
.cye-x-letterpress :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em) {
  color: var(--cye-fx-ink);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .9),
    0 -1px 1px rgba(0, 0, 0, .30),
    0 1px 3px rgba(0, 0, 0, .12);
}

/* ═══════════════════════════════════════════════════════════════════════
   2 · EFECTOS DE DEGRADADO — currentColor los ata al color del bloque
   ═══════════════════════════════════════════════════════════════════════ */

/* Foil cónico — el reflejo GIRA en lugar de cruzar en recta, que es como se
   comporta una superficie curva real. Un degradado lineal es justo lo que
   delata el truco en las herramientas de diseño al uso. */
.cye-x-conico,
.cye-x-conico :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em) {
  background-image: conic-gradient(from 210deg at 50% 45%,
    color-mix(in srgb, currentColor 46%, #0f0a02)   0deg,
    currentColor                                     42deg,
    color-mix(in srgb, currentColor 44%, #fffdf4)   74deg,
    color-mix(in srgb, currentColor  8%, #ffffff)   92deg,
    currentColor                                    130deg,
    color-mix(in srgb, currentColor 74%, #241906)  172deg,
    color-mix(in srgb, currentColor 46%, #0f0a02)  200deg,
    currentColor                                    246deg,
    color-mix(in srgb, currentColor 44%, #fffdf4)  288deg,
    color-mix(in srgb, currentColor  8%, #ffffff)  304deg,
    currentColor                                    334deg,
    color-mix(in srgb, currentColor 46%, #0f0a02)  360deg);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cye-x-conico {
  color: var(--cye-fx-mid);
  filter: url(#cyeFxFino) drop-shadow(0 1px 1px rgba(40, 30, 10, .26));
}

/* Ombré — la tinta se agota a lo largo de la palabra, como una plumilla que
   se queda sin carga. */
.cye-x-ombre,
.cye-x-ombre :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em) {
  background-image: linear-gradient(100deg,
    color-mix(in srgb, currentColor 46%, #0f0a02)  0%,
    color-mix(in srgb, currentColor 74%, #241906) 24%,
    currentColor                                  52%,
    color-mix(in srgb, currentColor 70%, #fffdf4) 76%,
    color-mix(in srgb, currentColor 44%, #fffdf4) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cye-x-ombre { color: var(--cye-fx-mid); }

/* ═══════════════════════════════════════════════════════════════════════
   3 · BORDADO
   ═══════════════════════════════════════════════════════════════════════
   Antes iba por shortcode con un <pattern> de SVG. No hacía falta: el mismo
   hilo se construye con dos repeating-linear-gradient superpuestos y
   background-clip:text, igual que el foil cónico.

   Capa superior — TORSIÓN: el hilo de bordar son varias hebras retorcidas
   entre sí. Ese giro es justo lo que distingue un hilo de un caramelo, y se
   consigue cruzando las hebras con marcas en otro ángulo.

   Capa inferior — HEBRAS: transiciones suaves entre canto oscuro, cuerpo y
   una banda clara central. El rango es CORTO y no llega al blanco: llegar al
   blanco convierte la hebra en tubo de plástico brillante.
   El hueco entre hebras se pinta en tono de TELA oscurecida, no de hilo
   apagado — lo que se ve ahí es el tejido en sombra.

   El relieve y el hundido los pone el filtro (ver text-effects-defs.php).
   ═══════════════════════════════════════════════════════════════════════ */
.cye-x-bordado,
.cye-x-bordado :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em) {
  background-image:
    /* Torsión de las hebras */
    repeating-linear-gradient(68deg,
      color-mix(in srgb, currentColor 30%, transparent) 0,
      color-mix(in srgb, currentColor 30%, transparent) .3px,
      transparent .3px,
      transparent 1.5px),
    /* Hebras */
    repeating-linear-gradient(128deg,
      color-mix(in srgb, var(--cye-fx-tela) 66%, #2b2418) 0,
      color-mix(in srgb, currentColor 58%, #1a1206)  calc(var(--cye-hilo-paso) * .12),
      color-mix(in srgb, currentColor 84%, #241a08)  calc(var(--cye-hilo-paso) * .31),
      color-mix(in srgb, currentColor 92%, #fff4d8)  calc(var(--cye-hilo-paso) * .50),
      color-mix(in srgb, currentColor 84%, #241a08)  calc(var(--cye-hilo-paso) * .69),
      color-mix(in srgb, currentColor 58%, #1a1206)  calc(var(--cye-hilo-paso) * .88),
      color-mix(in srgb, var(--cye-fx-tela) 66%, #2b2418) var(--cye-hilo-paso));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cye-x-bordado {
  color: var(--cye-fx-mid);
  filter: url(#cyeFxBordado);
}

/* ═══════════════════════════════════════════════════════════════════════
   4 · SUPERFICIES COMBINABLES
   ═══════════════════════════════════════════════════════════════════════ */

/* Papel con grano. Pareja natural de letterpress y grabado: ambos son una
   marca hecha SOBRE una superficie, y necesitan que esa superficie exista.
   Uso en el editor:  cye-x-letterpress cye-x-papel  */
.cye-x-papel {
  position: relative;
  isolation: isolate;
  background-color: var(--cye-fx-tela);
  padding: .6em .9em;
}
.cye-x-papel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Con papel detrás sí merece la pena el multiply: la tinta se mezcla con el
   grano en lugar de flotar sobre él. */
.cye-x-papel.cye-x-letterpress,
.cye-x-papel .cye-x-letterpress,
.cye-x-letterpress.cye-x-papel :is(h1, h2, h3, h4, h5, h6, p, span) {
  mix-blend-mode: multiply;
}

/* Lino tejido — urdimbre y trama. Pareja natural del bordado: sin tela, el
   hilo no tiene dónde estar cosido y el efecto no resulta creíble.
   Uso en el editor:  cye-x-bordado cye-x-tela  */
.cye-x-tela {
  position: relative;
  isolation: isolate;
  background-color: var(--cye-fx-tela);
  padding: .7em 1em;
}
.cye-x-tela::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 105, 85, .17) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(120, 105, 85, .14) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23w)' opacity='0.45'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════
   5 · RESPALDOS
   ═══════════════════════════════════════════════════════════════════════ */

/* Sin background-clip:text, el relleno transparente dejaría el texto
   INVISIBLE. Se devuelve a color sólido. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .cye-x-conico,  .cye-x-ombre,  .cye-x-bordado,
  .cye-x-conico  :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em),
  .cye-x-ombre   :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em),
  .cye-x-bordado :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
}

/* Sin color-mix, todas las derivadas quedarían sin valor. Se fija una rampa
   de oro para que al menos se vea algo coherente. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --cye-fx-deep:    #6b5320;
    --cye-fx-ink:     #4c4438;
    --cye-fx-hundido: #cdc5b2;
  }
  .cye-x-conico, .cye-x-ombre, .cye-x-bordado,
  .cye-x-conico  :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em),
  .cye-x-ombre   :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em),
  .cye-x-bordado :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

@media (prefers-contrast: more) {
  .cye-x-conico, .cye-x-ombre, .cye-x-bordado,
  .cye-x-conico  :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em),
  .cye-x-ombre   :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em),
  .cye-x-bordado :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
  .cye-x-letterpress,
  .cye-x-letterpress :is(h1, h2, h3, h4, h5, h6, p, span, a, strong, em) {
    mix-blend-mode: normal;
    text-shadow: none;
  }
}