/* Trazos (unidad C2): pluma y sello que se forma (C-01), ramas, lazo y argollas (C-03), títulos (C-04) y cierre (C-07).
   Lo oculto va bajo .js.trazos (trazos.js pone .trazos sin movimiento reducido). Sin JS todo se ve. */

/* ---------- C-01 · Pluma y sello del sobre ---------- */

/* Antes de que llegue trazos.js el nombre y la cera esperan ocultos; si nunca llega, aparecen solos */
@media (prefers-reduced-motion: no-preference) {
  .js .sobre-nombre:not(.pluma-lista) { animation: espera-trazo 2.4s step-end both; }
  .js .escena-sobre .sello:not(.estampado) { animation: espera-trazo 4s step-end both; }
}
@keyframes espera-trazo { from { opacity: 0; } }

/* Gotas que se funden en el sello (7-oct): capa temporal centrada en la cera, 4 sellos de ancho; trazos.js la quita al terminar */
.sello-funde { position: absolute; left: 50%; top: 50%; width: 400%; height: 180%; translate: -50% -50%; overflow: visible; pointer-events: none; }
.sello-funde * { transform-box: view-box; transform-origin: 0 0; }

.js.trazos :is(.sobre-nombre, .cierre .guion):not(.tinta-humeda) { transition: color 700ms var(--suave); }
.js.trazos .sobre-nombre.tinta-humeda { color: #4A5039; }
.js.trazos .cierre .guion.tinta-humeda { color: var(--terracota-honda); }

/* ---------- C-03 · Ramas que se dibujan ---------- */

.js.trazos :is(.rama, .tarjeta-rama) .tallo { stroke-dasharray: 1 2; }
.js.trazos .rama .hoja { transform-box: fill-box; transform-origin: 0 50%; }
.js.trazos .rama:not(.dibujada, .visto) .tallo { stroke-dashoffset: 1.01; }
.js.trazos .rama:not(.dibujada, .visto) .hoja { opacity: 0; transform: scale(0) rotate(-22deg); }
.rama:is(.dibujada, .visto) .tallo { transition: stroke-dashoffset 900ms cubic-bezier(.45, .05, .25, 1); }
.rama:is(.dibujada, .visto) .hoja { transition: transform 650ms var(--lento), opacity 650ms var(--lento); transition-delay: calc(var(--h) * 90ms + 150ms); }
/* En la portada, después de «Nos casamos» */
.portada-texto .rama.dibujada .tallo { transition-delay: 300ms; }
.portada-texto .rama.dibujada .hoja { transition-delay: calc(var(--h) * 90ms + 450ms); }
/* Final sin animación (celebración al recargar con «sí») */
.rama.ya-dibujada :is(.tallo, .hoja) { transition: none; }
@media (max-width: 820px) { .rama:is(.dibujada, .visto) .tallo { transition-duration: 750ms; } }

/* Tarjeta del sobre: va con el scroll (--brote lo escribe escenas.js), sin transición */
.js.trazos .tarjeta-rama .tallo { stroke-dashoffset: calc(1.01 - 1.01 * var(--brote, 1)); }
.js.trazos .tarjeta-rama .hoja { opacity: clamp(0, calc((var(--brote, 1) - var(--h) * .1) * 5), .85); }

/* ---------- 7-oct · El lazo y las argollas se dibujan (una vez) ---------- */

.js.trazos :is(.lazo, .argollas) path[pathLength] { stroke-dasharray: 1 2; }
.js.trazos .lazo:not(.dibujada) path { stroke-dashoffset: 1.01; }
.lazo.dibujada path { transition: stroke-dashoffset 1600ms var(--pluma); }
/* Cada argolla se traza desde su lado; al cerrarse se acercan y se enlazan (el cruce pasa la olivo por encima) */
.js.trazos .argollas:not(.dibujada) .argolla { stroke-dashoffset: 1.01; }
.js.trazos .argollas:not(.dibujada) .argolla.a { transform: translateX(-3px); }
.js.trazos .argollas:not(.dibujada) .argolla.b { transform: translateX(3px); }
.js.trazos .argollas:not(.dibujada) .cruce { opacity: 0; }
.argollas.dibujada .argolla { transition: stroke-dashoffset 1100ms var(--pluma), transform 900ms var(--lento) 1000ms; }
.argollas.dibujada .argolla.b { transition-delay: 300ms, 1000ms; }
.argollas.dibujada .cruce { transition: opacity 350ms var(--suave) 1500ms; }

/* ---------- C-04 · Títulos que suben de su ranura ---------- */

.ts-ranura { display: inline-block; overflow: hidden; overflow: clip; padding-block: .18em; margin-block: -.18em; }
.js.trazos [data-arte="titulo"] .ts-texto { display: inline-block; }
.js.trazos [data-arte="titulo"]:not(.arte-visto) .ts-texto { transform: translateY(108%); }
.js.trazos [data-arte="titulo"] :is(.asta, .puntas) { stroke-dasharray: 1 2; }
.js.trazos [data-arte="titulo"]:not(.arte-visto) .asta { stroke-dashoffset: 1.01; }
/* Offset negativo: el guion se reinicia en cada subtrazo, así las puntas salen al final y no antes que el asta */
.js.trazos [data-arte="titulo"]:not(.arte-visto) .puntas { stroke-dashoffset: -1.01; }
.arte-visto .ts-texto { transition: transform 1100ms var(--lento); }
.arte-visto :is(.asta, .puntas) { transition: stroke-dashoffset 800ms cubic-bezier(.45, .05, .25, 1); }
.arte-visto .puntas { transition-delay: 120ms; }

/* ---------- C-07 · Cierre firmado y sellado ---------- */

.js.trazos .cierre:not(.en-escena) :is(.cn, .fecha-grande) { opacity: 0; }
.js.trazos .cierre:not(.en-escena) span.cn { filter: blur(3px); }
.js.trazos .cierre:not(.en-escena) .fecha-grande { transform: translateY(8px); }
.js.trazos .cierre .guion:not(.pluma-lista), .js.trazos .cierre .sello:not(.estampado) { opacity: 0; }
.cierre.en-escena .cn { transition: opacity 1200ms var(--lento) 700ms, filter 1200ms var(--lento) 700ms; }
.cierre.en-escena em.cn { transition-delay: 1000ms; }
.cierre.en-escena .cn:last-child { transition-delay: 1150ms; }
.cierre.en-escena .fecha-grande { transition: opacity 900ms var(--lento) 3600ms, transform 900ms var(--lento) 3600ms; }
.cierre.en-escena .cierre-luz { opacity: .7; transition: opacity 4500ms var(--suave); }
.cierre.en-escena.completo :is(.cn, .fecha-grande, .cierre-luz, .tallo, .hoja) { transition-duration: 200ms; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .cierre.en-escena .cierre-luz { transition-duration: 400ms; } }