/*
 * fx.css · Piezas visuales de la librería de movimiento de «Yo digo que fue…»
 * Dueño: arte-branding. Todo en CSS/SVG embebido, sin imágenes externas.
 * Paleta de la guía visual: manila #EFE6D2 · tinta #1E2226 · rojo sello #A8231B · azul #24438A · naranja #B8561E
 */

@font-face { font-family: "fx-alfa"; src: url("../fonts/AlfaSlabOne-400.woff") format("woff"); font-display: swap; }
@font-face { font-family: "fx-sc"; src: url("../fonts/AlegreyaSC-700.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --fx-manila: #EFE6D2;
  --fx-tinta: #1E2226;
  --fx-rojo: #A8231B;
  --fx-azul: #24438A;
  --fx-naranja: #B8561E;
  --fx-sombra-hoja: 0 22px 44px -14px rgba(10, 12, 14, .55), 0 2px 0 rgba(30, 34, 38, .10);
  /* Textura de goma para sellos (ruido SVG → máscara). */
  --fx-mascara-goma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 0 0 0 2.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Capa de efectos y grano ---------- */
#fx-capa {
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: none; overflow: hidden; contain: strict;
}
#fx-capa > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }

#fx-grano {
  position: fixed; inset: -80px; z-index: 2147482990; pointer-events: none;
  opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .13 0 0 0 0 .15 4.2 0 0 0 -2.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: fx-grano 0.9s steps(1) infinite;
  will-change: transform;
}
@keyframes fx-grano {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-37px, 23px, 0); }
  40%  { transform: translate3d(29px, -41px, 0); }
  60%  { transform: translate3d(-13px, -27px, 0); }
  80%  { transform: translate3d(43px, 17px, 0); }
}

html.fx-en-transicion, html.fx-en-transicion body { overflow-x: clip; }
.fx-hoja-movil { box-shadow: var(--fx-sombra-hoja); }

/* ---------- View Transitions entre pantallas ---------- */
::view-transition-group(fx-hoja) { animation: none; }
::view-transition-image-pair(fx-hoja) { isolation: auto; }
::view-transition-old(fx-hoja), ::view-transition-new(fx-hoja) {
  mix-blend-mode: normal; animation-fill-mode: both; height: auto;
}
html[data-fx-dir="adelante"]::view-transition-old(fx-hoja) { animation: fx-vt-al-fondo 460ms cubic-bezier(.22,1,.36,1) both; z-index: 1; }
html[data-fx-dir="adelante"]::view-transition-new(fx-hoja) { animation: fx-vt-desde-der var(--fx-resorte-hoja-dur, 520ms) var(--fx-resorte-hoja, cubic-bezier(.34,1.3,.64,1)) both; z-index: 2; box-shadow: var(--fx-sombra-hoja); }
html[data-fx-dir="atras"]::view-transition-old(fx-hoja) { animation: fx-vt-sale-der 460ms cubic-bezier(.65,0,.35,1) both; z-index: 2; box-shadow: var(--fx-sombra-hoja); }
html[data-fx-dir="atras"]::view-transition-new(fx-hoja) { animation: fx-vt-desde-fondo var(--fx-resorte-hoja-dur, 520ms) var(--fx-resorte-hoja, cubic-bezier(.34,1.3,.64,1)) both; z-index: 1; }
html[data-fx-dir="arriba"]::view-transition-old(fx-hoja) { animation: fx-vt-al-fondo-arriba 460ms cubic-bezier(.22,1,.36,1) both; z-index: 1; }
html[data-fx-dir="arriba"]::view-transition-new(fx-hoja) { animation: fx-vt-desde-abajo var(--fx-resorte-hoja-dur, 520ms) var(--fx-resorte-hoja, cubic-bezier(.34,1.3,.64,1)) both; z-index: 2; box-shadow: var(--fx-sombra-hoja); }

@keyframes fx-vt-al-fondo        { to   { transform: translateX(-16%) scale(.92); opacity: .45; } }
@keyframes fx-vt-desde-der       { from { transform: translateX(104%) rotate(5deg); } }
@keyframes fx-vt-sale-der        { 18% { transform: translateX(-10px) rotate(-1deg); } to { transform: translate(106%, 18px) rotate(7deg); } }
@keyframes fx-vt-desde-fondo     { from { transform: translateX(-16%) scale(.92); opacity: .45; } }
@keyframes fx-vt-al-fondo-arriba { to   { transform: translateY(-3%) scale(.92); opacity: .4; } }
@keyframes fx-vt-desde-abajo     { from { transform: translateY(102%) rotate(-2deg); } }

/* ---------- Sellos de goma ---------- */
.fx-sello-pos {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.fx-sello {
  --fx-sello-color: var(--fx-rojo);
  position: relative;
  font-family: "fx-alfa", "Alfa Slab One", Georgia, serif;
  font-size: 48px; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  color: var(--fx-sello-color);
  padding: .24em .44em .18em;
  border: .09em solid currentColor;
  border-radius: .16em;
  transform: rotate(var(--fx-sello-rot, -8deg));
  -webkit-mask-image: var(--fx-mascara-goma); mask-image: var(--fx-mascara-goma);
  -webkit-mask-size: 180px 180px; mask-size: 180px 180px;
  opacity: .94;
}
.fx-sello::before { /* doble filete interior */
  content: ""; position: absolute; inset: .09em;
  border: .035em solid currentColor; border-radius: .08em;
}
/* Sobre papel claro, el sello puede «absorberse»: <html class="fx-papel-claro"> */
.fx-papel-claro .fx-sello { mix-blend-mode: multiply; }

/* ---------- Ficha elegida: círculo a mano ---------- */
.fx-circulo {
  --fx-circulo-color: var(--fx-rojo);
  position: absolute; inset: -26% -30%; z-index: 15; pointer-events: none;
}
.fx-circulo svg { width: 100%; height: 100%; overflow: visible; display: block; }
.fx-circulo path {
  fill: none; stroke: var(--fx-circulo-color); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 0;
}

/* ---------- Dorso temporal de la carta ---------- */
.fx-dorso {
  position: absolute; inset: 0; z-index: 30; border-radius: inherit;
  transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(239, 230, 210, .10) 0 34%, transparent 35%),
    repeating-linear-gradient(45deg, rgba(168, 35, 27, .55) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, rgba(168, 35, 27, .55) 0 2px, transparent 2px 11px),
    var(--fx-tinta);
  box-shadow: inset 0 0 0 6px var(--fx-tinta), inset 0 0 0 8px var(--fx-manila);
}
.fx-dorso span {
  font-family: "fx-alfa", "Alfa Slab One", Georgia, serif; color: var(--fx-manila);
  font-size: clamp(22px, 9vw, 54px); letter-spacing: .02em;
  background: var(--fx-rojo); padding: .08em .3em; border-radius: .12em; transform: rotate(-6deg);
}

/* ---------- Brillo y destello ---------- */
.fx-brillo { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 25; }
.fx-brillo i {
  position: absolute; top: -30%; bottom: -30%; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 252, 240, .85) 50%, transparent);
  transform: translateX(-130%) skewX(-18deg);
}
.fx-estrella svg { width: 100%; height: 100%; display: block; fill: #FFF6D6; filter: drop-shadow(0 0 3px rgba(255, 220, 140, .9)); }

/* ---------- Partículas ---------- */
.fx-polvo { border-radius: 1px; }
.fx-onda { border: 3px solid var(--fx-rojo); border-radius: 50%; }
.fx-foco {
  inset: 0; right: 0; bottom: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at var(--x) var(--y), transparent 0 var(--r), rgba(16, 18, 21, .62) calc(var(--r) + 140px));
  opacity: 0;
}
.fx-ficha-punto {
  --fx-ficha: var(--fx-rojo);
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 17px/1 "fx-alfa", "Alfa Slab One", Georgia, serif; color: var(--fx-manila);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .28), transparent 45%), var(--fx-ficha);
  box-shadow: inset 0 0 0 3px rgba(239, 230, 210, .9), inset 0 0 0 5px var(--fx-ficha), 0 6px 12px -4px rgba(0, 0, 0, .5);
}
.fx-papelito { backface-visibility: visible; border-radius: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.fx-p-diario { background: repeating-linear-gradient(180deg, #F3ECDC 0 3px, rgba(30, 34, 38, .55) 3px 4px), #F3ECDC; }
.fx-p-manila { background: var(--fx-manila); }
.fx-p-rojo   { background: var(--fx-rojo); }
.fx-p-azul   { background: var(--fx-azul); }
.fx-p-naranja{ background: var(--fx-naranja); }
.fx-p-tinta  { background: repeating-linear-gradient(180deg, var(--fx-tinta) 0 3px, rgba(239, 230, 210, .5) 3px 4px); }

/* ---------- Máquina de escribir ---------- */
.fx-resto { color: transparent; }
.fx-caret {
  display: inline-block; width: 0; height: 1em; vertical-align: -.12em;
  border-left: .08em solid currentColor; margin-right: -.08em;
  animation: fx-caret .55s steps(1) infinite;
}
@keyframes fx-caret { 50% { opacity: 0; } }

/* ---------- Carpeta (estilo opcional para la cortina de «pasá el teléfono») ---------- */
.fx-carpeta {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  color: var(--fx-tinta); text-align: center;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 22%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(122, 74, 33, .10) 31px 32px),
    #E4D3A8;
  box-shadow: inset 0 -10px 30px rgba(122, 74, 33, .18);
  backface-visibility: hidden;
}
.fx-carpeta::before { /* pestaña */
  content: ""; position: absolute; top: 0; left: 50%; width: 46%; height: 26px; transform: translateX(-50%);
  background: #D9C493; border-radius: 0 0 12px 12px; box-shadow: 0 2px 0 rgba(122, 74, 33, .25);
}
.fx-carpeta::after { /* sello CONFIDENCIAL */
  content: "CONFIDENCIAL"; position: absolute; top: 15%; right: 8%;
  font: 15px/1 "fx-alfa", "Alfa Slab One", Georgia, serif; letter-spacing: .08em; color: var(--fx-rojo);
  border: 3px solid currentColor; border-radius: 4px; padding: 6px 8px 4px; transform: rotate(9deg); opacity: .85;
  -webkit-mask-image: var(--fx-mascara-goma); mask-image: var(--fx-mascara-goma); -webkit-mask-size: 180px; mask-size: 180px;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  #fx-grano { animation: none; }
  .fx-caret { animation: none; }
  ::view-transition-old(fx-hoja), ::view-transition-new(fx-hoja) { animation-duration: 1ms !important; }
}