/* 58 · Lluvia de Estrellas — canción de cuna de noche: azul profundo, plata, amarillo luna y lavanda.
   Guion: el cielo se oscurece y caen estrellas fugaces; la luna creciente sostiene el nombre del bebé y las
   estrellas cuelgan arriba; nubes de noche abajo. En la fecha la luna creciente gira y se llena hasta ser luna
   llena con el día adentro. */

.c-lluvia { --display-peso: 900; --nombre-color: #F4F1FA; --titulo-letra: "Unbounded"; --titulo-peso: 700; --titulo-espacio: -.02em; --display-espacio: -.03em;
	--dia-letra: "Unbounded"; --dia-color: #2B2560; --radio: 22px; --vj: 60px; --nombre-tam: clamp(3rem, 9vw, 7.6rem); --sombra: 0 0 30px rgb(246 231 161 / .25); }
.c-lluvia .e-nombre { text-shadow: 0 0 30px rgb(246 231 161 / .45); }
.c-lluvia .e-padres { font-family: "Allura", cursive; color: #F6E7A1; font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.c-lluvia .e-evento { color: #B9A7E8; }

.ll-estrellas { --w: min(28vmin, 270px); left: 8vw; top: -6vh; --dy: -14vh; --ey: -40vh; --ed: .4s; --fd: 4s; --fa: 5px; --fr: 3deg; }
.ll-estrellas .e-img { transform-origin: 50% 0; }
.ll-luna { --w: min(30vmin, 290px); right: 10vw; top: 12vh; --r: -12deg; --dy: 16vh; --dr: 20deg; --ex: 20vw; --ey: 0px; --ed: .7s; --fd: 7s; --fa: 6px; }
.ll-nube-izq, .ll-nube-der { --w: min(42vmin, 400px); bottom: -2vh; --ey: 20vh; --ed: 1s; --fd: 8s; --fa: 5px; }
.ll-nube-izq { left: -6vw; --dx: -10vw; }
.ll-nube-der { right: -6vw; --dx: 10vw; }
.ll-nube-der .e-img { scale: -1 1; }

/* entrada */
.c-lluvia .xv-entrada { background: radial-gradient(70% 60% at 50% 40%, #1E2860, #0C1230 72%); }
.ll-entrada-luna { position: absolute; right: 12%; top: 10%; width: min(22vmin, 190px); }

/* bienvenida */
.c-lluvia .e-ornamento { width: min(60%, 230px); }
.c-lluvia .e-firma { font-family: "Allura", cursive; color: #F6E7A1; font-size: clamp(2.4rem, 4.6vw, 3.4rem); }

/* fecha: la luna creciente gira y se llena */
.ll-m-creciente { left: 10%; top: 6%; width: 80%; transform: rotate(calc(var(--t1) * 160deg)) scale(calc(.8 + var(--t1) * .15)); opacity: clamp(0, calc((1 - var(--t2)) * 2), 1); }
.ll-m-llena { left: 6%; top: 6%; width: 88%; opacity: var(--t2); transform: scale(calc(.7 + var(--t2) * .3)); filter: drop-shadow(0 0 40px rgb(246 231 161 / .45)); }
.c-lluvia .e-dia { font-weight: 900; font-size: clamp(4.2rem, 12vw, 7rem); }
.c-lluvia .e-mes { font-family: "Allura", cursive; color: #5B3F99; font-size: clamp(2.4rem, 6vw, 3.6rem); }
.c-lluvia .e-anio { color: #3D3570; }

/* secciones */
.c-lluvia .xv-superficie { background: color-mix(in srgb, #18224A 88%, transparent); border-color: rgb(215 220 232 / .2); }
.c-lluvia .e-itinerario { background: linear-gradient(180deg, #121A3A, #2B2560 60%, #121A3A); }
.c-lluvia .xv-momento time { color: #F6E7A1; }
.c-lluvia .xv-titulo .xv-script { font-size: 1.5em; }

/* cierre */
.ll-cierre-luna { position: absolute; left: 50%; top: 50%; width: min(52vmin, 420px); translate: -50% -50%; opacity: .2; }

@media (max-width: 760px) {
	.ll-estrellas { --w: 40vw; left: 2vw; }
	.ll-luna { --w: 34vw; right: 3vw; top: 8vh; }
	.ll-nube-izq, .ll-nube-der { --w: 64vw; }
	.ll-nube-izq { left: -18vw; } .ll-nube-der { right: -18vw; }
}