/* ---- La coda: dopo il racconto (le pagine progetto non hanno piede), continuando a scorrere, arriva il progetto che segue (da Pensatori Irrazionali, /work).
   Il palco ripete la prima schermata della pagina che segue, sulla stessa griglia (.progetto): la copertina cresce
   fino al posto che avrà là, il filo si riempie, a filo pieno si cambia pagina e la pagina nuova si apre identica.
   Senza script o con prefers-reduced-motion resta ferma: un link, con la copertina già grande. */
@view-transition{navigation:auto}
.coda{position:relative;background:var(--crema);padding-top:clamp(40px,5vw,80px)}
.coda__link{padding-bottom:var(--sezione)}
.coda__fianco{position:static}                       /* qui a stare fermo è il palco, non il fianco */
.coda__nome{display:block}
.coda__n{display:grid}
.coda__n>span{grid-area:1/1}
.coda__dopo{visibility:hidden}
.coda__fondo{position:relative}
.coda__invito{display:flex;justify-content:flex-end;padding-bottom:14px;color:var(--grigio)}
.coda__invito span:first-child{display:none}
.coda__filo{display:none}
.coda__copertina .riquadro__f{cursor:pointer}
/* l'attacco della pagina che segue, invisibile: serve solo a dare alla copertina la stessa altezza che avrà là */
.coda__attacco{display:none}
.coda--viva .coda__attacco{display:block;visibility:hidden}
@media (hover:hover){.coda__link:hover .coda__invito span:last-child{color:var(--arancio)}}
.coda__invito span:last-child{transition:color .4s cubic-bezier(.16,1,.3,1)}
.coda__link:focus-visible .coda__invito span:last-child{color:var(--arancio)}

/* viva: il palco sta fermo per 130svh di scorrimento, e la prima schermata si compone sotto il dito */
.coda--viva{height:calc(100lvh + 130svh)}
.coda--viva .coda__palco{position:sticky;top:0;height:100lvh;overflow:clip}
.coda--viva .coda__link{padding-bottom:0}
.coda--viva .coda__dopo{visibility:visible;opacity:0}
.coda--viva .coda__invito{position:absolute;left:0;right:0;bottom:100%;justify-content:space-between}
.coda--viva .coda__invito span:first-child{display:inline}
.coda--viva .coda__filo{display:block;position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--arancio);transform-origin:left center;transform:scaleX(0)}
.coda--viva .coda__copertina{transform-origin:left top}