/* ==========================================================================
   MIND MIAMI — ART LAYER v1 · capa de estilo del arte vectorial de escenas
   (assets/art/scenes.svg). Archivo NUEVO: no toca system.css ni motion.css.

   DOS FORMAS DE CONSUMIR EL SPRITE
   1) ESTÁTICA (la barata) — <use> apunta al sprite; sus estilos viajan dentro
      del propio archivo, así que NO hace falta este CSS:
        <svg viewBox="0 0 800 500" role="img" aria-label="…">
          <use href="/assets/art/scenes.svg#sc-web"></use>
        </svg>
      Contra: el contenido vive en shadow DOM — no es alcanzable por JS ni por
      selectores de la página, así que no se puede animar por nodo.

   2) INLINE (la animable) — se pega el contenido del <symbol> dentro de un
      <svg> de la página. Ahí el shadow DOM desaparece y cada trazo es un nodo
      real… pero el <style> del sprite ya no viaja con él: ESTE archivo aporta
      esas clases. Enlázalo en cualquier página que inline escenas.

   COLOR
   Todo es currentColor: la escena se tiñe con el `color` del contenedor
   (tinta sobre papel, texto-sobre-navy sobre navy). El cian solo aparece como
   RELLENO en .art-accent — nunca como trazo fino, porque #06d6dd a 1.4–2 de
   grosor no contrasta sobre papel.
   ========================================================================== */

/* ------------------------ clases base del dibujo ------------------------ */
.art-line   { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: miter; stroke-miterlimit: 6; }
.art-thin   { stroke-width: 1.4; }
.art-solid  { fill: currentColor; stroke: none; }
.art-round  { stroke-linecap: round; stroke-linejoin: round; }
.art-dash   { stroke-dasharray: 7 9; }
.art-accent { fill: #06d6dd; stroke: none; }

/* La escena ocupa el ancho de su caja y conserva proporción 8:5. */
.art-scene { display: block; width: 100%; height: auto; }

/* ==========================================================================
   MOVIMIENTO (opt-in). Igual que motion.css, todo lo que oculta o mueve va
   colgado de html.mm-motion — la clase que pone js/motion.js solo si hay JS y
   NO hay prefers-reduced-motion. Sin motor: escena completa, estática, visible.
   ========================================================================== */

/* --- 1 · TRAZO DIBUJABLE ------------------------------------------------
   Cada elemento .art-draw del sprite trae pathLength="1", así que su longitud
   ya está normalizada: no hace falta getTotalLength() ni medir el DOM.
   Uso:  <svg class="art-scene" data-art-draw> … </svg>
   y quien lo consuma añade .is-drawn cuando la escena entra en viewport
   (IntersectionObserver con threshold 0 — con clip-path uno mayor no dispara).
   stroke-dashoffset es propiedad de pintado: no provoca layout.            */
.mm-motion [data-art-draw] .art-draw {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--art-draw-dur, 1.4s) var(--mm-ease-out, cubic-bezier(.19, 1, .22, 1)) var(--art-draw-delay, 0s);
}
.mm-motion [data-art-draw].is-drawn .art-draw { stroke-dashoffset: 0; }

/* Los rellenos (masas y acentos) entran por opacidad, ya dibujado el trazo. */
.mm-motion [data-art-draw] :is(.art-solid, .art-accent) {
  opacity: 0;
  transition: opacity .5s ease var(--art-fill-delay, .55s);
}
.mm-motion [data-art-draw].is-drawn :is(.art-solid, .art-accent) { opacity: 1; }

/* Escalonado por capa: fondo primero, primer plano al final. */
.mm-motion [data-art-draw] [data-layer="2"] .art-draw { transition-delay: calc(var(--art-draw-delay, 0s) + .18s); }
.mm-motion [data-art-draw] [data-layer="3"] .art-draw { transition-delay: calc(var(--art-draw-delay, 0s) + .36s); }

/* --- 2 · PARALLAX POR CAPA ----------------------------------------------
   Uso:  <svg class="art-scene" data-art-parallax> … </svg>
   y quien lo consuma escribe --art-p (0→1) según el scroll. Solo transform:
   ni layout ni repintado de geometría. Amplitud contenida a propósito —
   el arte no debe desarmarse, solo respirar.                               */
.mm-motion [data-art-parallax] [data-layer] { will-change: transform; }
.mm-motion [data-art-parallax] [data-layer="1"] { transform: translate3d(calc(var(--art-p, 0) * -18px), 0, 0); }
.mm-motion [data-art-parallax] [data-layer="2"] { transform: translate3d(calc(var(--art-p, 0) * 8px), 0, 0); }
.mm-motion [data-art-parallax] [data-layer="3"] { transform: translate3d(calc(var(--art-p, 0) * 30px), calc(var(--art-p, 0) * 5px), 0); }

/* ---------------- REDUCED MOTION: todo estático y visible ---------------- */
@media (prefers-reduced-motion: reduce) {
  [data-art-draw] .art-draw {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  [data-art-draw] :is(.art-solid, .art-accent) { opacity: 1 !important; transition: none !important; }
  [data-art-parallax] [data-layer] { transform: none !important; will-change: auto !important; }
}