/* 108 · Anuario — graduación de colegio. Sobre kraft, forro de hoja de cuaderno y una estrella dorada de premio.
   Portada: la pizarra verde con polvo de tiza que flota; el nombre va escrito con tiza.
   Orden: páginas de anuario — hojas de cuaderno pegadas con cinta, un poco giradas, con firmas de los compañeros.
   Fecha: el avión de papel cruza, se desdobla y queda la hoja con el día. */
.c-anuario { --display-peso: 400; --nombre-color: #F1F1EA; --titulo-letra: "Archivo Black"; --titulo-peso: 400; --titulo-espacio: -.01em; --dia-letra: "Archivo Black"; --dia-color: #24312B;
	--radio: 3px; --vj: 64px; --sombra: 0 16px 20px rgb(0 0 0 / .25); --nombre-tam: clamp(4rem, 10vw, 8.6rem); }
.c-anuario .xv-cielo { display: none; }
.c-anuario main { background: #2F4A3E radial-gradient(70% 50% at 30% 20%, rgb(255 255 255 / .05), transparent 70%); }
.c-anuario main > .xv-sec:not(#portada) { background: transparent; }
.c-anuario .v-velo { background: none; }

html[data-largo] .c-anuario .e-nombre { --n: 1; }

/* portada: escrito con tiza */
.c-anuario .e-nombre { white-space: normal; text-wrap: balance; max-width: 10ch; line-height: .95; text-shadow: 0 0 1px rgb(255 255 255 / .8), 0 0 10px rgb(255 255 255 / .2); opacity: .96; }
.c-anuario .e-evento { color: #F4C430; letter-spacing: .36em; font-weight: 700; font-size: .74rem; }
.c-anuario .e-grado-t { color: #F1F1EA; font-family: "Caveat Brush", cursive; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; letter-spacing: 0; }
.c-anuario .e-grado-i { color: #CFD8CF; }
.c-anuario .e-fecha { color: #F1F1EA; font-family: "Caveat Brush", cursive; font-size: 1.3rem; }
.c-anuario .e-pista { color: #F1F1EA; }
.an-avion { --w: min(22vmin, 200px); right: 6vw; top: 12vh; --r: -14deg; --dx: 30vw; --dy: -20vh; --dr: -10deg; --ex: -60vw; --ey: 10vh; --ed: .4s; --fd: 3.4s; --fa: 10px; --fr: 3deg; }
.an-cuaderno { --w: min(24vmin, 220px); left: 3vw; bottom: 4vh; --r: -8deg; --dx: -8vw; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .6s; --fd: 6s; --fa: 4px; --fr: 1deg; }
.an-birrete { --w: min(20vmin, 180px); right: 5vw; bottom: 6vh; --r: 14deg; --dx: 8vw; --dy: 10vh; --dr: 20deg; --ex: 30vw; --ey: 0px; --ed: .8s; --fd: 4s; --fa: 8px; --fr: 4deg; }

/* páginas de cuaderno pegadas con cinta */
.c-anuario main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; color: #24312B; --tinta: #24312B; --tinta-2: #4C5C53; --acento: #D7443E;
	padding: clamp(34px, 4.6vw, 58px) clamp(26px, 4.6vw, 58px) clamp(40px, 5vw, 64px) clamp(40px, 6vw, 80px);
	background: linear-gradient(90deg, transparent 0 clamp(24px, 4vw, 54px), rgb(215 68 62 / .45) clamp(24px, 4vw, 54px) calc(clamp(24px, 4vw, 54px) + 2px), transparent 0),
		repeating-linear-gradient(180deg, transparent 0 31px, rgb(58 110 165 / .22) 31px 32px), #FBFAF4;
	box-shadow: 0 30px 40px -24px rgb(0 0 0 / .55); }
.c-anuario .xv-kicker { color: #D7443E; letter-spacing: .3em; }
.c-anuario .xv-titulo { color: #24312B; }
.c-anuario .xv-titulo .xv-script { font-family: "Caveat Brush", cursive; color: #3A6EA5; font-size: 1.15em; }
.c-anuario .xv-superficie { background: rgb(255 255 255 / .7); border: 1px solid rgb(58 110 165 / .2); }
.c-anuario .xv-momento time { color: #D7443E; font-weight: 700; }
.c-anuario .e-firma { color: #3A6EA5; }
.c-anuario .xv-boton:not(.xv-boton-suave) { background: #C33530; color: #FFFFFF; border-color: #C33530; }
.c-anuario .e-ornamento { width: min(66%, 240px); }
.c-anuario #fecha, .c-anuario #cierre { color: #F1F1EA; --tinta: #F1F1EA; --tinta-2: #CFD8CF; }

/* fecha: el avión se desdobla en la hoja con el día */
.c-anuario .e-fecha-k { color: #F4C430; }
.an-m-avion { left: 26%; top: 30%; width: 48%; transform: translateX(calc((1 - var(--t1)) * -140%)) translateY(calc((1 - var(--t1)) * 40%)) rotate(calc((1 - var(--t1)) * 20deg)); opacity: clamp(0, calc((1 - var(--t2)) * 3), 1); }
.an-m-hoja { inset: 10%; background: repeating-linear-gradient(180deg, transparent 0 23px, rgb(58 110 165 / .25) 23px 24px), #FBFAF4; box-shadow: 0 24px 40px -16px rgb(0 0 0 / .5);
	transform-origin: 50% 50%; opacity: var(--t2); transform: scaleY(calc(.05 + var(--t2) * .95)) rotate(calc((1 - var(--t2)) * 12deg - 2deg)); }
.an-m-hoja::before { content: ""; position: absolute; top: 0; bottom: 0; left: 14%; border-left: 2px solid rgb(215 68 62 / .45); }
.c-anuario .e-dia { font-size: clamp(4rem, 12vw, 6.4rem); }
.c-anuario .e-mes { font-family: "Caveat Brush", cursive; color: #D7443E; font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.c-anuario .e-anio { color: #4C5C53; }

/* cierre: birretes al aire */
.an-cierre-b { position: absolute; top: 6%; width: min(16vmin, 120px); animation: an-sube 3.4s ease-in-out infinite alternate; }
.an-cb-1 { left: 22%; rotate: -18deg; } .an-cb-2 { left: 46%; top: 2%; animation-delay: .4s; } .an-cb-3 { left: 68%; rotate: 16deg; animation-delay: .8s; }
@keyframes an-sube { to { transform: translateY(-16px) rotate(8deg); } }
.c-anuario .e-cierre { padding-top: clamp(190px, 28vh, 260px); }
.c-anuario .e-nombre-fin { font-family: "Caveat Brush", cursive; font-size: clamp(3rem, 9vw, 6rem); }

@media (max-width: 760px) {
	.c-anuario { --nombre-tam: clamp(3.2rem, 15vw, 5rem); }
	.an-avion { --w: 30vw; right: 2vw; top: 8vh; }
	.an-cuaderno { --w: 30vw; left: -4vw; bottom: 2vh; }
	.an-birrete { --w: 26vw; right: -2vw; bottom: 3vh; }
	.c-anuario main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { margin-inline: 6px; }
}