/* ============================================================
   AIM LEX — Motor de efectos (Fase 1)
   Atmósfera + movimiento + gráficos. Vanilla, sin librerías.
   Respeta prefers-reduced-motion y degrada en pointer:coarse.
   Usa los tokens de identidad de lex.css (papel/tinta/verde/sello).
   ============================================================ */

/* ---------- Atmósfera de fondo (canvas) ---------- */
.fx-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fx-atmos canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* el contenido del contenedor con atmósfera va por encima */
[data-atmosphere]{ position:relative; }
[data-atmosphere] > *:not(.fx-atmos){ position:relative; z-index:1; }

/* ---------- Reveal (scroll-reveal) ---------- */
.fx-reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change:opacity, transform;
}
.fx-reveal.is-in{ opacity:1; transform:none; }
/* variantes de dirección */
.fx-reveal[data-reveal="left"]{ transform:translateX(-26px); }
.fx-reveal[data-reveal="right"]{ transform:translateX(26px); }
.fx-reveal[data-reveal="scale"]{ transform:scale(.96); }
.fx-reveal[data-reveal="left"].is-in,
.fx-reveal[data-reveal="right"].is-in,
.fx-reveal[data-reveal="scale"].is-in{ transform:none; }

/* ---------- Parallax ---------- */
.fx-parallax{ will-change:transform; }

/* ---------- CountUp ---------- */
.fx-countup{ font-variant-numeric:tabular-nums; }

/* ---------- Gráficos (SVG) ---------- */
.fx-chart{ width:100%; display:block; }
.fx-chart svg{ width:100%; height:auto; display:block; overflow:visible; }

/* línea/área que se dibuja */
.fx-chart .fx-line{
  fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 1.3s var(--ease-out);
}
.fx-chart.is-in .fx-line{ stroke-dashoffset:0; }
.fx-chart .fx-area{ opacity:0; transition:opacity 1s ease .35s; }
.fx-chart.is-in .fx-area{ opacity:1; }
.fx-chart .fx-dot{ opacity:0; transition:opacity .5s ease .9s, transform .5s var(--ease-out) .9s; transform:scale(.4); transform-box:fill-box; transform-origin:center; }
.fx-chart.is-in .fx-dot{ opacity:1; transform:scale(1); }
.fx-chart .fx-zero{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; }
.fx-chart .fx-axislabel{ font:500 11px var(--mono); fill:var(--ink-soft); }
.fx-chart .fx-pointlabel{ font:600 12px var(--mono); fill:var(--ink-2); opacity:0; transition:opacity .5s ease 1s; }
.fx-chart.is-in .fx-pointlabel{ opacity:1; }

/* barras que crecen */
.fx-chart .fx-bar{
  transform:scaleY(0); transform-origin:bottom; transform-box:fill-box;
  transition:transform .9s var(--ease-out);
}
.fx-chart.is-in .fx-bar{ transform:scaleY(1); }
.fx-chart .fx-bar-h{
  transform:scaleX(0); transform-origin:left; transform-box:fill-box;
  transition:transform .9s var(--ease-out);
}
.fx-chart.is-in .fx-bar-h{ transform:scaleX(1); }
.fx-chart .fx-barlabel{ font:600 12px var(--mono); fill:var(--ink-2); opacity:0; transition:opacity .5s ease .5s; }
.fx-chart .fx-barcat{ font:500 11px var(--sans); fill:var(--ink-soft); }
.fx-chart.is-in .fx-barlabel{ opacity:1; }

/* barra apilada */
.fx-chart .fx-seg{ transition:width 1s var(--ease-out); }

/* donut */
.fx-chart .fx-arc{
  fill:none; stroke-linecap:butt;
  stroke-dasharray:var(--arc,0) var(--circ,1000);
  stroke-dashoffset:var(--off,0);
  transition:stroke-dasharray 1.1s var(--ease-out);
}
.fx-donut-center{ text-align:center; }

/* leyenda compartida */
.fx-legend{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:.85rem; }
.fx-legend .it{ display:inline-flex; align-items:center; gap:.45rem; font:500 12.5px var(--sans); color:var(--ink-2); }
.fx-legend .sw{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.fx-legend .vl{ font:600 12.5px var(--mono); color:var(--ink); }

/* ---------- Degradación ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .fx-chart .fx-line{ stroke-dashoffset:0 !important; transition:none !important; }
  .fx-chart .fx-area,
  .fx-chart .fx-dot,
  .fx-chart .fx-pointlabel,
  .fx-chart .fx-barlabel{ opacity:1 !important; transition:none !important; }
  .fx-chart .fx-dot{ transform:none !important; }
  .fx-chart .fx-bar{ transform:scaleY(1) !important; transition:none !important; }
  .fx-chart .fx-bar-h{ transform:scaleX(1) !important; transition:none !important; }
  .fx-chart .fx-arc{ transition:none !important; }
}