/* 24 · Línea de Tinta · Dibujo de una sola línea.
   Papel blanco con nubes de tinta azul que se mueven; la pareja dibujada con una sola línea se traza al abrir y una
   línea negra sigue bajando por toda la invitación: se dibuja con el scroll de sección en sección y termina en el pin
   de cada lugar. Gesto propio en la fecha: la línea baja hasta el centro, deja caer un punto de tinta que se abre en
   mancha y la mancha se vuelve la banda azul de la fecha (morphing con clip-path).
   Partículas: puntos de tinta que se abren y se secan, y fibras de papel.
   Letras: Syne 800 (nombres y títulos) · Dancing Script 700 (solo el «&» y un acento) · Manrope (texto). */

@property --dib { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --sp { syntax: '<number>'; inherits: true; initial-value: 1; }

.lt {
	--claro: #FBFAF6;
	--claro-2: #F1EFE8;
	--azul: #2E4BD8;
	--acc: #2E4BD8;
	--script-c: #2E4BD8;
	--banda-1: #15151A;
	--banda-1b: #0B0B0E;
	--banda-2: #2438B8;
	--banda-2b: #1A2A8C;
	--banda-txt: #FBFAF6;
	--acc-banda: #A9B9FF;
	--mota: rgb(160 180 255);
	--sobre-papel: #FBFAF6;
	--sobre-solapa: #F1EFE8;
	--sello-1: #2E4BD8;
	--sello-2: #1A2A8C;
	--sello-txt: #FBFAF6;
	--cielo-base: #FBFAF6;
	font-weight: 500;
}
.lt .jd-pintura { background: radial-gradient(40% 30% at 90% 10%, rgb(46 75 216 / .06), transparent 70%), linear-gradient(180deg, #FBFAF6, #F4F2EC); }
.lt .jd-pintura::after { display: none; }
.lt .jd-titulo-sec { font-weight: 800; font-size: clamp(2.8rem, 1.4rem + 4.4vw, 6.2rem); letter-spacing: -0.045em; line-height: .9; }
.lt .jd-titulo-sec i { font-size: .9em; letter-spacing: 0; }
.lt .jd-lugar-nombre, .lt .jd-grande, .lt .jd-momento-hora, .lt .jd-cierre-nombres, .lt .respuesta-texto { font-family: var(--titulos); font-weight: 800; letter-spacing: -0.035em; }
.lt .jd-grande { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1.12; font-weight: 700; }
.lt .jd-sub, .lt .jd-kicker, .lt .jd-lugar-tipo, .lt .boton, .lt .jd-cierre-fecha { font-weight: 700; }
.lt .boton { border-radius: 0; }

/* La línea que baja por toda la invitación: un trazo SVG por sección, dibujado con el avance de cada acto. */
.lt-trazo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; clip-path: inset(-2px -2px calc((1 - var(--dibuja, 1)) * 100%) -2px); }
.lt-trazo path { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; }

/* ---------- Portada ---------- */
.lt-cielo .c1 { background: radial-gradient(closest-side, rgb(46 75 216 / .16), rgb(46 75 216 / 0)); }
.lt-cielo .c2 { background: radial-gradient(closest-side, rgb(21 21 26 / .07), rgb(21 21 26 / 0)); }
.lt-cielo .c3 { background: radial-gradient(closest-side, rgb(46 75 216 / .11), rgb(46 75 216 / 0)); }
.lt-cielo .c4 { display: none; }
.lt-pareja-p { width: min(36vw, 480px); right: 9vw; top: 9svh; -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--dib) * 100%), transparent calc(var(--dib) * 100% + 6%)); mask-image: linear-gradient(180deg, #000 calc(var(--dib) * 100%), transparent calc(var(--dib) * 100% + 6%)); transition: --dib 2800ms cubic-bezier(.65, 0, .35, 1) 1400ms; transform: translate3d(calc(var(--e) * 6vw), calc(var(--e) * -14svh), 0) scale(calc(1 + var(--e) * .12)); }
html.cerrado .lt-pareja-p { --dib: 0; transition: none; }
.lt-tinta-p { width: min(9vw, 120px); left: 6vw; top: 12svh; opacity: .9; rotate: -20deg; transform: translate3d(calc(var(--e) * -4vw), calc(var(--e) * -20svh), 0) scale(calc(1 + var(--e) * .5)); }
.lt-trazo-portada { --dibuja: calc(.62 + var(--e) * .38); }
.lt-portada-texto { position: absolute; z-index: 3; inset: auto 0 0; display: grid; justify-items: start; gap: clamp(.6rem, 2svh, 1.2rem); padding: 0 max(var(--margen), calc(50vw - 42rem)) clamp(3.4rem, 10svh, 6rem); text-align: left; }
.lt-kicker { color: var(--azul); padding-left: 0; }
.lt .lt-nombres { grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .18em; font-weight: 800; font-size: clamp(3.6rem, 1rem + 8vw, 10.4rem); line-height: .9; letter-spacing: -0.05em; color: var(--tinta); max-width: none; opacity: calc(1 - var(--e) * 1.2); translate: 0 calc(var(--e) * -8svh); }
.lt .lt-nombres .jd-y { position: relative; z-index: 0; font-weight: 700; font-size: .78em; letter-spacing: 0; color: var(--azul); padding: 0 .12em; transition: color 900ms var(--salida) 600ms; }
/* Cuando los nombres terminan de llegar, cae un punto de tinta detrás del «&» y el «&» queda blanco sobre él. */
.lt .lt-nombres .jd-y::before { content: ""; position: absolute; z-index: -1; inset: -42% -48% -30%; background: url("img/tinta.webp") 50% 50% / contain no-repeat; transform: scale(var(--sp)) rotate(-14deg); transition: --sp 900ms cubic-bezier(.34, 1.5, .64, 1); }
.lt .lt-nombres:not(.lt-mancha-lista) .jd-y::before { --sp: 0; }
.lt .lt-nombres.lt-mancha-lista .jd-y { color: #FFFFFF; }
.lt-fecha-corta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font: 700 .82rem/1.3 var(--texto); letter-spacing: .26em; text-transform: uppercase; color: var(--txt-suave); opacity: calc(1 - var(--e) * 1.8); }
.lt-fecha-corta span + span::before { content: ""; display: inline-block; width: 2rem; height: 2px; margin-right: 1.4rem; vertical-align: middle; background: var(--tinta); }

/* ---------- La frase ---------- */
.lt-intro { overflow: clip; --dibuja: clamp(0, calc((var(--sc-p, 0) - .04) * 1.7), 1); }
.lt-intro-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.6rem clamp(1rem, 3vw, 3rem); }
.lt-frase { grid-column: 5 / span 8; font: 700 clamp(1.8rem, 1.2rem + 2.1vw, 3.3rem)/1.12 var(--titulos); letter-spacing: -0.03em; color: var(--tinta); text-wrap: balance; }
.lt-firma { grid-column: 5 / span 8; font: 700 .82rem/1.2 var(--texto); letter-spacing: .26em; text-transform: uppercase; color: var(--tinta); }
.lt-firma i { font: 700 2.4em/0 var(--script); letter-spacing: 0; text-transform: none; color: var(--azul); padding: 0 .15em; vertical-align: -.12em; }
.lt-detalle { grid-column: 1 / -1; height: 18rem; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }

/* ---------- La fecha: la línea baja, cae el punto, el punto se vuelve mancha y la mancha banda ---------- */
.lt-fecha { --dibuja: clamp(0, calc(var(--sc-p, 0) / .14), 1); --t: clamp(0, calc((var(--m2) - .55) * 2.4), 1); }
.lt-fecha-escena { height: 100svh; overflow: hidden; isolation: isolate; background: var(--claro); }
.lt-trazo-fecha { z-index: 1; }
/* La caja tiene la proporción del vector de la mancha. La forma del código (clip-path generado desde la silueta real)
   y el vector crecen desde el mismo centro: el punto se abre exactamente en la mancha de ChatGPT, el vector le da
   el brillo y las gotas, y después la misma mancha se estira hasta cubrir la pantalla. */
.lt-mancha { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(58vw, 700px, 72svh * 1.13); aspect-ratio: 549.39 / 486; translate: -50% -50%; pointer-events: none; transform: rotate(calc(var(--m1) * (1 - var(--m2)) * -6deg)); }
.lt-morph { position: absolute; inset: -200%; opacity: clamp(0, calc((var(--sc-p, 0) - .12) * 30), 1); background: radial-gradient(18% 20% at 49.8% 50.7%, #2141EC 55%, #1A36DD 100%); }
.lt-tinta-f { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: calc(clamp(0, calc(var(--m1) * 4), 1) * clamp(0, calc(1 - var(--m2) * 3), 1)); transform: scale(calc(var(--m1) + var(--m2) * .35)); }
.lt-fecha-texto { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; justify-items: center; gap: .35rem; padding: var(--margen); text-align: center; opacity: var(--t); translate: 0 calc((1 - var(--t)) * 20px); --txt: #FFFFFF; --txt-suave: rgb(255 255 255 / .86); color: #FFFFFF; }
.lt-sem { font: 700 .82rem/1 var(--texto); letter-spacing: .4em; text-transform: uppercase; color: #D4DCFF; padding-left: .4em; }
.lt-num { font: 800 clamp(7rem, 4rem + 12vw, 15rem)/.84 var(--titulos); letter-spacing: -0.06em; color: #FFFFFF; }
.lt-mes { font: 700 clamp(1rem, .85rem + .6vw, 1.35rem)/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; }
.lt-hora { font: 600 .82rem/1 var(--texto); letter-spacing: .26em; text-transform: uppercase; color: #D4DCFF; margin-bottom: .4rem; }
.lt .lt-faltan { margin: .3rem auto 1rem; border-color: rgb(255 255 255 / .3); }
.lt .lt-faltan div { justify-items: center; }
.lt .lt-faltan div + div { border-color: rgb(255 255 255 / .3); }
.lt .lt-faltan strong { font-family: var(--titulos); font-weight: 800; color: #FFFFFF; }
.lt .lt-faltan span { color: rgb(255 255 255 / .86); }
.lt .lt-fecha-texto .boton { background: #FFFFFF; border-color: #FFFFFF; color: var(--azul); }

/* ---------- Dónde: la línea baja y termina en el pin de cada lugar ---------- */
.lt-titulo { color: var(--tinta); }
.lt .jd-lugar + .jd-lugar { border-left: 0; }
.lt-pin { position: relative; width: 60px; height: 9rem; margin-bottom: .4rem; }
.lt-trazo-pin { left: 50%; width: 4px; margin-left: -2px; height: 6.4rem; --dibuja: 0; }
.lt-trazo-pin { transition: clip-path 1300ms var(--transito) 200ms; }
.lt-pin img { position: absolute; left: 50%; bottom: 0; width: 46px; translate: -50% -40px; opacity: 0; transition: translate 900ms cubic-bezier(.34, 1.5, .64, 1) 1300ms, opacity 400ms var(--salida) 1300ms; filter: drop-shadow(0 10px 10px rgb(46 75 216 / .3)); }
.lt-lugar.visto .lt-trazo-pin { --dibuja: 1; }
.lt-lugar.visto .lt-pin img { translate: -50% 0; opacity: 1; }
.lt .jd-lugar-tipo { color: var(--azul); }

/* ---------- El gran día: horas en contorno que se llenan de tinta ---------- */
.lt-dia { overflow: hidden; }
.lt-pareja-d { position: absolute; z-index: 0; left: 4vw; bottom: 8%; width: min(22vw, 280px); filter: invert(1); opacity: .35; pointer-events: none; }
.lt-dia .jd-dia-grid { position: relative; z-index: 1; }
.lt .lt-dia .jd-momento-hora { color: transparent; -webkit-text-stroke: 1.5px var(--banda-txt); transition: color 1200ms var(--salida) 400ms; }
.lt .lt-dia .jd-momento.visto .jd-momento-hora { color: var(--banda-txt); }
.lt .lt-dia .jd-momento-hora small { -webkit-text-stroke: 0; color: var(--acc-banda); }
.lt .lt-momento::before { background: var(--azul); }
.lt .lt-momento.visto::before { background: var(--azul); box-shadow: 0 0 0 6px rgb(46 75 216 / .25); }
.lt .lt-dia .jd-ruta-avance { background: linear-gradient(180deg, transparent, var(--acc-banda) 30%); }

/* ---------- Detalles, confirmar y cierre ---------- */
.lt-detalles { position: relative; overflow: clip; }
.lt-tinta-d { position: absolute; z-index: 0; right: 5vw; top: 10%; width: min(12vw, 160px); rotate: 24deg; pointer-events: none; }
.lt-detalles .jd-detalles-grid { position: relative; z-index: 1; }
.lt .jd-paleta li { border-radius: 50%; }
.lt .jd-hoja-papel { border-radius: 0; background: #FFFFFF; }
.lt .jd-hoja-papel .boton { background: var(--azul); border-color: var(--azul); color: #FFFFFF; }
.lt .opcion span { border-radius: 0; }
.lt-cierre { grid-template-rows: auto auto; align-content: center; --rv: clamp(0, calc((var(--sc-p, 0) - .04) / .34), 1); }
.lt-pareja-c { position: relative; z-index: 1; display: block; width: min(52vw, 260px); margin: 0 auto -1rem; filter: invert(1); -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--rv) * 100%), transparent calc(var(--rv) * 100% + 8%)); mask-image: linear-gradient(180deg, #000 calc(var(--rv) * 100%), transparent calc(var(--rv) * 100% + 8%)); }
.lt .lt-cierre .jd-cierre-nombres { font-size: clamp(3rem, 1.4rem + 5.4vw, 7.4rem); letter-spacing: -0.05em; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.lt-pareja-p { width: 70vw; right: 4vw; top: 8svh; }
	.lt-tinta-p { width: 16vw; left: 6vw; top: 9svh; }
	.lt .lt-nombres { flex-direction: column; align-items: flex-start; font-size: clamp(3.4rem, 1rem + 12vw, 5.4rem); }
	.lt .lt-nombres .jd-y { margin-left: .2em; }
	.lt-frase, .lt-firma { grid-column: 1 / -1; }
	.lt-num { font-size: clamp(5.6rem, 3rem + 14vw, 7.4rem); }
	.lt-pareja-d, .lt-trazo-intro { display: none; }
	.lt-tinta-d { width: 22vw; top: 3%; }
	.lt-mancha { width: min(86vw, 60svh * 1.13); }
}

/* ---------- Movimiento reducido ---------- */
.quieto .lt-fecha { --dibuja: 1; --t: 1; }
.quieto .lt-intro, .quieto .lt-trazo-portada { --dibuja: 1; }
.quieto .lt-morph { opacity: 1; }
.quieto .lt-pareja-p, html.quieto.cerrado .lt-pareja-p { --dib: 1; transition: none; }
.quieto .lt-trazo-pin { --dibuja: 1; }
.quieto .lt-pin img { translate: -50% 0; opacity: 1; transition: none; }
.quieto .lt-cierre { --rv: 1; }
.quieto .lt .lt-dia .jd-momento-hora { color: var(--banda-txt); }
.sin-js .lt-fecha { --dibuja: 1; --t: 1; --m1: 1; --m2: 1; }
.sin-js .lt-morph { opacity: 1; }