/* 49 · Constelación — atlas celeste con líneas finas de plata: medianoche, plata y lila.
   Guion: cielo negro; las estrellas se encienden y dibujan el birrete detrás del nombre. Al bajar, la constelación
   crece y se desvanece, la luna acompaña desde un lado y el telescopio apunta. En la fecha la constelación gira y
   se vuelve un anillo de estrellas alrededor del día. */

.c-constelacion { --display-peso: 900; --nombre-color: #FFFFFF; --titulo-letra: "Unbounded"; --titulo-peso: 700; --titulo-espacio: -.02em; --dia-color: #FFFFFF; --radio: 18px; --vj: 64px;
	--nombre-tam: clamp(2.6rem, 7.6vw, 6.4rem); --display-espacio: -.03em; --sombra: 0 0 26px rgb(196 181 253 / .35); }
.c-constelacion .e-nombre { text-shadow: 0 0 28px rgb(196 181 253 / .5); }
.c-constelacion .e-evento { color: #C4B5FD; }

.co-const { --w: min(70vmin, 640px); left: calc(50% - min(35vmin, 320px)); top: calc(50% - min(30vmin, 274px)); --ds: .5; --dy: -6vh; --ey: 0px; --ed: .2s; --fd: 14s; --fa: 4px; --fr: .4deg; opacity: calc(.55 - var(--p, 0) * .4); }
html:not(.e-abierto) .co-const { scale: .9; }
.co-const { transition: opacity 2s ease var(--ed), scale 2.4s cubic-bezier(.16,1,.3,1) var(--ed), translate 1.6s ease var(--ed); }
.co-estrella { --w: min(10vmin, 90px); left: 18vw; top: 14vh; --dy: -20vh; --dr: 45deg; --ey: 0px; --ed: .8s; --fd: 3s; }
.co-luna { --w: min(26vmin, 240px); right: 6vw; top: 8vh; --dy: 18vh; --dx: -4vw; --dr: 12deg; --ex: 20vw; --ey: 0px; --ed: .5s; --fd: 9s; }
.co-telescopio { --w: min(22vmin, 210px); left: 5vw; bottom: 4vh; --dy: 10vh; --dr: -6deg; --ex: -24vw; --ey: 0px; --ed: 1s; --fd: 0s; }
.co-telescopio .e-img { animation: none; }

/* entrada */
.c-constelacion .xv-entrada { background: radial-gradient(70% 60% at 50% 40%, #16204F, #070B1C 72%); }
.co-entrada-luna { position: absolute; right: 10%; top: 10%; width: min(22vmin, 180px); opacity: .9; }
.c-constelacion .xv-entrada .xv-evento { color: #C4B5FD; }

/* bienvenida */
.c-constelacion .e-ornamento { width: min(70%, 260px); }
.c-constelacion .e-firma { color: #C4B5FD; font-size: clamp(2.6rem, 5vw, 3.6rem); }

/* fecha: la constelación gira y se vuelve un anillo de estrellas */
.co-m-const { left: 4%; top: 10%; width: 92%; transform: rotate(calc(var(--m) * 140deg)) scale(calc(1 - var(--t1) * .35)); opacity: clamp(0, calc(.9 - var(--t2) * 1.4), .9); }
.co-m-anillo { inset: 5%; border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, #FFFFFF 0 1.2deg, transparent 1.2deg 10deg); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67% 68.5%, transparent 69.5%); mask: radial-gradient(circle, transparent 66%, #000 67% 68.5%, transparent 69.5%);
	opacity: var(--t2); transform: rotate(calc(var(--m) * -90deg)) scale(calc(.7 + var(--t2) * .3)); filter: drop-shadow(0 0 6px #C4B5FD); }
.co-m-anillo::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 1px solid rgb(201 209 227 / .4); }
.c-constelacion .e-dia { font-weight: 900; font-size: clamp(4.6rem, 13vw, 8rem); text-shadow: 0 0 30px rgb(196 181 253 / .55); }
.c-constelacion .e-mes { color: #C4B5FD; font-size: clamp(2.4rem, 6vw, 3.8rem); }

/* secciones */
.c-constelacion .xv-superficie { background: color-mix(in srgb, #121A3A 86%, transparent); border-color: rgb(201 209 227 / .22); box-shadow: 0 30px 60px -36px #000; }
.c-constelacion .e-itinerario { background: linear-gradient(180deg, #0B1026, #1C1650 50%, #0B1026); }
.c-constelacion .xv-momento time { color: #C4B5FD; }
.c-constelacion .xv-momento::before { content: "✦"; position: absolute; margin-left: -1.6em; color: #C4B5FD; }
.c-constelacion .xv-momento { position: relative; }

/* cierre: luna llena detrás del nombre */
.co-cierre-luna { position: absolute; left: 50%; top: 50%; width: min(60vmin, 480px); translate: -50% -50%; opacity: .18; }

@media (max-width: 760px) {
	.co-const { --w: 96vw; left: 2vw; top: 30vh; }
	.co-luna { --w: 30vw; right: 2vw; top: 5vh; }
	.co-telescopio { --w: 30vw; left: 0; }
	.co-estrella { left: 8vw; top: 9vh; }
	.c-constelacion .xv-momento::before { display: none; }
}
.c-constelacion .xv-titulo .xv-script { font-size: 1.7em; }