/* Las viñetas: las escenas ilustradas de toda la web. La cargan el portal (base.html) y las
   páginas generadas (generar.py), que tienen hojas distintas: por eso va aparte, como
   `movimiento.css`, y no usa ninguna variable sin su respaldo. El dibujo de cada escena está en
   `templates/_vinetas.html`; aquí van sus materiales y su movimiento.

   Cómo se mueven. Cada viñeta tiene UN avance, `--p` (de 0 a 1), y cada pieza de dentro dice
   cuándo entra (`--a`) y cuánto tarda (`--l`); de ahí sale el avance propio de la pieza, `--q`,
   y todo lo demás es CSS sobre esa cuenta: subir, crecer, trazarse, llenarse. Quién sube `--p`
   depende de dónde esté la viñeta:
     · en la portada, `portada.js`, ligado al scroll (avanza y retrocede con el dedo);
     · `.vineta--sola`, en la cabecera de una página: se construye una vez al cargar, sin guion;
     · `.vineta--alpaso`, más abajo: se construye al cruzar la pantalla, con `animation-timeline`
       donde el navegador la tiene, y entera donde no.
   Sin nada de eso —o con «reducir movimiento»— `--p` vale 1: la escena sale construida. */

/* Registrada como número para poder animarla con @keyframes. Donde `@property` no existe, la
   animación salta de 0 a 1 a la mitad en vez de recorrerlo: se ve menos fino, no se rompe. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 1; }

.vineta {
  --p: 1;
  --v-cristal: rgba(255, 255, 255, .58);
  --v-cristal-2: rgba(255, 255, 255, .88);
  --v-cristal-3: rgba(255, 255, 255, .97);
  --v-borde: rgba(15, 23, 42, .10);
  --v-tinta: #0f172a;
  --v-pantalla: #1e293b;
  --v-pomo: #fff;
  position: relative; aspect-ratio: 16 / 10; border-radius: clamp(18px, 2.4vw, 28px); overflow: hidden;
  background:
    radial-gradient(110% 90% at 88% -10%, color-mix(in srgb, var(--azul, var(--acento, #2563eb)) 20%, transparent), transparent 62%),
    radial-gradient(90% 80% at -5% 105%, color-mix(in srgb, #8b5cf6 16%, transparent), transparent 58%),
    var(--panel, var(--cristal, rgba(255, 255, 255, .72)));
  border: 1px solid var(--cristal-borde, rgba(255, 255, 255, .55));
  box-shadow: var(--sombra-2, 0 8px 20px -6px rgba(15, 23, 42, .12)),
              var(--vidrio-canto-luz, var(--vidrio-luz, inset 0 1px 0 rgba(255, 255, 255, .6)));
}
/* La trama de puntos: lo que separa un cristal de un rectángulo de color liso. */
.vineta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--v-tinta) 16%, transparent) 1px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 0, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 0, transparent 78%);
}
.vineta svg { position: relative; display: block; width: 100%; height: 100%; }
.v-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

:root[data-theme="dark"] .vineta {
  --v-cristal: rgba(148, 163, 184, .11);
  --v-cristal-2: rgba(148, 163, 184, .23);
  --v-cristal-3: rgba(30, 41, 59, .96);
  --v-borde: rgba(148, 163, 184, .24);
  --v-tinta: #e2e8f0;
  --v-pantalla: #050a14;
  --v-pomo: #f8fafc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vineta {
    --v-cristal: rgba(148, 163, 184, .11);
    --v-cristal-2: rgba(148, 163, 184, .23);
    --v-cristal-3: rgba(30, 41, 59, .96);
    --v-borde: rgba(148, 163, 184, .24);
    --v-tinta: #e2e8f0;
    --v-pantalla: #050a14;
    --v-pomo: #f8fafc;
  }
}

/* ── los materiales ─────────────────────────────────────────────────────────── */
.v-c  { fill: var(--v-cristal); stroke: var(--v-borde); stroke-width: 1; }
.v-c2 { fill: var(--v-cristal-2); stroke: var(--v-borde); stroke-width: 1; }
.v-c3 { fill: var(--v-cristal-3); stroke: var(--v-borde); stroke-width: 1; filter: drop-shadow(0 5px 9px rgba(2, 6, 23, .22)); }
.v-pantalla { fill: var(--v-pantalla); }
.v-pista { fill: color-mix(in srgb, var(--v-tinta) 11%, transparent); }
.v-t  { fill: color-mix(in srgb, var(--v-tinta) 20%, transparent); }
.v-t2 { fill: color-mix(in srgb, var(--v-tinta) 40%, transparent); }
.v-as { fill: color-mix(in srgb, #3b82f6 42%, transparent); }
.v-f3 { fill: color-mix(in srgb, var(--v-tinta) 26%, transparent); }
.v-b  { fill: rgba(255, 255, 255, .92); }
.v-b2 { fill: rgba(255, 255, 255, .34); }
.v-b3 { fill: rgba(255, 255, 255, .16); }
.v-b4 { fill: rgba(255, 255, 255, .09); }
.v-rojo { fill: #ef4444; }
.v-pomo { fill: var(--v-pomo); filter: drop-shadow(0 1px 2px rgba(2, 6, 23, .35)); }
.v-halo { fill: color-mix(in srgb, #3b82f6 26%, transparent); }
.v-area { fill: color-mix(in srgb, #3b82f6 15%, transparent); }
.v-anillo { fill: none; stroke: color-mix(in srgb, var(--v-tinta) 30%, transparent); stroke-width: 2; }
.v-anillo-fino { stroke-width: 1.2; }
.v-relleno-l2 { fill: #8b5cf6; }
/* los trazos */
.v-l, .v-l2, .v-lok, .v-lb, .v-lrojo, .v-lf, .v-pista-l { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.v-l.v-relleno-a { fill: color-mix(in srgb, #3b82f6 12%, transparent); }
.v-l2.v-relleno-l { fill: color-mix(in srgb, #8b5cf6 12%, transparent); }
.v-l  { stroke: #3b82f6; stroke-width: 3; }
.v-l2 { stroke: #8b5cf6; stroke-width: 3; }
.v-fino { stroke-width: 2; }
.v-lok { stroke: #22c55e; stroke-width: 4.5; }
.v-lb { stroke: #fff; stroke-width: 1.8; }
.v-lb-gordo { stroke-width: 2.8; }
.v-loro { fill: none; stroke: #d4a72c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.v-lrojo { stroke: #ef4444; stroke-width: 2; }
.v-lf { stroke: color-mix(in srgb, var(--v-tinta) 13%, transparent); stroke-width: 1; }
.v-pista-l { stroke: color-mix(in srgb, var(--v-tinta) 30%, transparent); stroke-width: 2.6; }
.v-tubo { fill: none; stroke: color-mix(in srgb, var(--v-tinta) 10%, transparent); stroke-width: 13; stroke-linecap: round; }

/* ── el movimiento ──────────────────────────────────────────────────────────── */
.vineta [style*="--a"], .lp-lamina [style*="--a"] { --q: clamp(0, calc((var(--p) - var(--a)) / var(--l, .22)), 1); }
.v-sube  { opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 14px)); }
.v-crece { opacity: var(--q); transform: scale(calc(.5 + .5 * var(--q))); transform-box: fill-box; transform-origin: center; }
.v-traza { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--q)); }
.v-llena { transform: scaleX(var(--q)); transform-box: fill-box; transform-origin: left center; }
.v-luz   { opacity: calc(.16 + .84 * var(--q)); }
.v-luz0  { opacity: var(--q); }
.v-corre { transform: translateX(calc(var(--q) * var(--dx, 16px))); }
.v-llega { opacity: calc(.25 + .75 * var(--q)); transform: translateX(calc((1 - var(--q)) * var(--dx, 16px))); }
.v-baja  { transform: translateY(calc(var(--q) * var(--dy, 60px))); }

/* La de cabecera: se construye una vez, al cargar. */
.vineta--sola { animation: vineta-construir 2.4s cubic-bezier(.3, .6, .25, 1) .3s both; }
/* La de más abajo: se construye al cruzar la pantalla, donde el navegador sabe ligar una
   animación al scroll. Donde no, no hay animación y sale entera. */
@supports (animation-timeline: view()) {
  .vineta--alpaso {
    animation: vineta-construir linear both; animation-timeline: view(); animation-range: entry 15% cover 48%;
  }
}
@keyframes vineta-construir { from { --p: 0; } to { --p: 1; } }

/* [movimiento: reducido] Por el MANDO de la página (`data-movimiento`), no por la consulta de medios:
   esta hoja se quedó fuera cuando las otras cuatro pasaron al atributo, y una consulta de medios no se
   puede anular desde la página: en un equipo con los «efectos de animación» de Windows apagados, quien
   elegía ver las animaciones las veía todas MENOS las diecinueve viñetas, que seguían saliendo ya
   dibujadas (y con `--p: 1 !important`, que además pisaba la cuenta que hace la pila de láminas). */
:where(html[data-movimiento="reducido"]) .vineta,
:where(html[data-movimiento="reducido"]) .lp-lamina { --p: 1 !important; animation: none !important; }