/* loader: the first screen of a visit, as rejouice.com opens: a white curtain over the page, a sentence word by word,
   then the curtain slides down off the screen, the title rises out of its lines (.rise, written by loader.js) and the
   bar's items drop in. Shown only while <html> has .loading (loader.js decides); without JavaScript it never shows.
   Needs ../base/base.css. */
.loader{display:none}
html.loading .loader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:oklch(98.3% .005 255);color:oklch(20% .05 262);pointer-events:none}
html.loading:not(.lifting){overflow:hidden}
.loader p{padding:0 24px;font-family:var(--serif);font-size:clamp(28px,2.8vw,44px);line-height:1.05;letter-spacing:-.02em;text-align:center}
.loader p span{display:inline-block;opacity:0}
.loader.go p span{animation:loader-word .35s var(--e-ui) forwards}
.loader.fade p{opacity:0;transition:opacity .25s var(--e-ui)}
html.lifting .loader{transform:translateY(100%);transition:transform .9s var(--e-esce)}
html.lifting .loader p{transform:translateY(-100vh);transition:opacity .25s var(--e-ui),transform .9s var(--e-esce)}
@keyframes loader-word{to{opacity:1}}

/* what waits under the curtain: the page's entrances hold until it lifts */
html.loading .pagina-in{animation-play-state:paused}
html.lifting .pagina-in{animation-play-state:running}
/* the title, word by word out of its lines (the mask is a little larger than the word, for the serif's tails) */
.rise{display:inline-block;overflow:clip;vertical-align:top;padding:.08em .06em .16em;margin:-.08em -.06em -.16em}
.rise>span{display:inline-block;transition:transform .9s var(--e-esce) calc(var(--i,0) * .05s)}
html.loading:not(.lifting) .rise>span{transform:translateY(115%)}
/* the bar's items, dropping in one after the other */
html.loading:not(.lifting) .barra .giro{visibility:hidden}
html.lifting .barra .marchio,html.lifting .barra nav>*{animation:loader-drop .9s var(--e-esce) calc(var(--i,0) * .05s) backwards}
@keyframes loader-drop{from{transform:translateY(-120%);opacity:0}to{transform:none;opacity:1}}