/* 52 · Brindis de Fin de Año — póster navideño reinterpretado: verde pino, rojo, oro y crema.
   Guion: un gran lazo rojo cubre la invitación y se desata; ramas de pino con esferas en las esquinas, copas que
   brindan al centro y la botella al lado. En la fecha sube una burbuja de champaña que crece hasta contener el día.
   El programa son etiquetas de regalo. */

.c-brindis { --display-peso: 400; --nombre-color: #FFF6E5; --titulo-letra: "Anton"; --titulo-peso: 400; --titulo-mayus: uppercase; --titulo-espacio: .01em;
	--display-espacio: .01em; --dia-letra: "Anton"; --dia-color: #FFF6E5; --radio: 14px; --vj: 70px; --nombre-tam: clamp(3rem, 8.6vw, 7.4rem); --sombra: 0 24px 30px rgb(0 0 0 / .4); }
.c-brindis .e-nombre { text-transform: uppercase; white-space: normal; max-width: 13ch; line-height: .95; text-shadow: 0 6px 0 #8E1822; }
.c-brindis .e-evento { font-family: "Yellowtail", cursive; text-transform: none; letter-spacing: 0; font-size: clamp(2rem, 4vw, 3rem); color: #E9C46A; }
.c-brindis .e-titulos { align-self: start; margin-top: 10vh; }
.c-brindis .e-logo { border-color: rgb(233 196 106 / .5); color: #E9C46A; }

.br-pino { --w: min(36vmin, 340px); left: -4vw; top: -6vh; --r: 20deg; --dx: -8vw; --dy: -10vh; --ex: -24vw; --ey: -10vh; --ed: .2s; --fd: 8s; --fa: 4px; }
.br-pino-2 { --w: min(36vmin, 340px); right: -4vw; top: -6vh; --r: -20deg; --dx: 8vw; --dy: -10vh; --ex: 24vw; --ey: -10vh; --ed: .3s; --fd: 8.6s; --fa: 4px; }
.br-pino-2 .e-img { scale: -1 1; }
.br-copas { --w: min(34vmin, 320px); left: calc(50% - min(17vmin, 160px)); bottom: 2vh; --dy: 8vh; --ds: .1; --ey: 40vh; --ed: .8s; --fd: 5s; }
.br-botella { --w: min(9vmin, 86px); right: 12vw; bottom: 5vh; --r: 10deg; --dr: -16deg; --dy: -8vh; --ex: 20vw; --ey: 0px; --ed: 1.1s; --fd: 6s; }

/* entrada: el lazo se desata */
.c-brindis .xv-entrada { background: radial-gradient(70% 60% at 50% 40%, #A52230, #7A131C 72%); }
.br-entrada-lazo { position: absolute; left: 50%; top: 50%; width: min(70vmin, 600px); translate: -50% -50%; opacity: .32; }
.c-brindis .xv-entrada-nombre { text-transform: uppercase; white-space: normal; font-size: clamp(2.4rem, 8vw, 4.6rem); }
.c-brindis .xv-entrada .xv-evento { font-family: "Yellowtail", cursive; text-transform: none; letter-spacing: 0; font-size: 2rem; color: #F3D9C2; }
.c-brindis .xv-entrada .xv-boton:not(.xv-boton-suave) { background: #E9C46A; border-color: #E9C46A; color: #5A0E15; }

/* bienvenida */
.c-brindis .e-ornamento { width: min(64%, 240px); }
.c-brindis .e-firma { font-family: "Yellowtail", cursive; color: #E9C46A; }

/* fecha: las copas y una burbuja que sube y crece hasta contener el día */
.br-m-copas { left: 20%; top: 30%; width: 60%; transform: translateY(calc(var(--t1) * 30%)) scale(calc(1 - var(--t2) * .3)); opacity: clamp(0, calc((1 - var(--t2)) * 2), 1); }
.br-m-burbuja { left: 50%; top: 50%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .55), transparent 18%), radial-gradient(circle at 50% 50%, rgb(255 246 229 / .08), rgb(233 196 106 / .18) 70%, rgb(233 196 106 / .45) 100%);
	box-shadow: inset 0 0 0 2px rgb(255 246 229 / .45), 0 0 40px rgb(233 196 106 / .25);
	transform: translateY(calc((1 - var(--t1)) * 70%)) scale(calc(.08 + var(--t1) * .3 + var(--t2) * .62)); opacity: clamp(0, calc(var(--t1) * 3), 1); }
.c-brindis .e-dia { font-size: clamp(5rem, 15vw, 8.6rem); text-shadow: 0 4px 0 #8E1822; }
.c-brindis .e-mes { font-family: "Yellowtail", cursive; color: #E9C46A; }

/* etiquetas de regalo */
.c-brindis .e-itinerario { background: #8E1822; --linea: rgba(255,246,229,.2); }
.c-brindis .xv-itinerario { gap: 12px; }
.c-brindis .xv-momento { position: relative; border: 0; background: #FFF6E5; color: #0F3D2E; border-radius: 10px 10px 10px 10px; padding: 16px 20px 16px 40px; clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%); }
.c-brindis .xv-momento::before { content: ""; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #8E1822; }
.c-brindis .xv-momento:last-child { border: 0; }
.c-brindis .xv-momento time { color: #8E1822; }
.c-brindis .xv-superficie { background: #14493A; border-color: rgb(233 196 106 / .35); }

/* cierre */
.br-cierre-pino { position: absolute; left: -6vw; bottom: -4vh; width: min(34vmin, 300px); rotate: -20deg; opacity: .8; }
.br-cierre-pino-2 { left: auto; right: -6vw; rotate: 20deg; scale: -1 1; }

@media (max-width: 760px) {
	.br-pino, .br-pino-2 { --w: 46vw; }
	.br-copas { --w: 54vw; left: 23vw; }
	.br-botella { --w: 13vw; right: 4vw; }
}