/* 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(100% 0 0);color:oklch(0% 0 0);pointer-events:none}
html.loading:not(.lifting){overflow:hidden}
.loader p{padding:0 24px;font-family:var(--serif);font-size:clamp(30px,3.4vw,54px);font-weight:300;line-height:1.05;letter-spacing:-.04em;text-align:center}
.loader p span{display:inline-block;opacity:0}
.loader.go p span{animation:loader-word .5s var(--e-ui) forwards}
.loader.fade p{opacity:0;transition:opacity .4s var(--e-ui)}
html.lifting .loader{transform:translateY(100%);transition:transform 1.6s var(--e-esce)}
html.lifting .loader p{transform:translateY(-100vh);transition:opacity .4s var(--e-ui),transform 1.6s var(--e-esce)}
@keyframes loader-word{to{opacity:1}}
/* the column that rolls (data-roll, loader.js): the choice's layout, the first word in the flow and the others hanging under it,
   the one on the line in black and the rest in light grey; the whole column is lifted --k lines and moves down a line on each
   tick, so the words above come onto the line one by one */
.loader .ld-col{position:relative;display:inline-block;vertical-align:baseline;text-align:left;
  transform:translateY(calc(var(--k,0) * -1.12em));transition:transform .6s var(--e-esce)}
.loader .ld-col>b{display:block;font-weight:inherit;white-space:nowrap;color:oklch(80% 0 0);transition:color .3s var(--e-ui)}
.loader .ld-col>b:not(:first-child){position:absolute;left:0;top:calc(var(--n,0) * 1.12em)}
.loader .ld-col>b.on{color:oklch(0% 0 0)}
/* the choice (data-pick, loader.js): the first on the line, the others hanging under it like an autocomplete's suggestions, all
   light grey; hover darkens one, the pick turns black and takes the line while the others fade. The box takes clicks only then */
html.loading .loader.choose{pointer-events:auto}
.loader .ld-pick{position:relative;display:inline-block;vertical-align:baseline;text-align:left}
.loader .ld-pick button{position:relative;display:block;font:inherit;letter-spacing:inherit;color:oklch(80% 0 0);background:none;border:0;padding:0;margin:0;
  white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s var(--e-ui),opacity .3s var(--e-ui),transform .6s var(--e-esce)}
.loader .ld-pick button::after{content:"";position:absolute;inset:-.12em -.25em}   /* a finger-sized target */
.loader .ld-pick button.alt{position:absolute;left:0;top:calc(var(--n,0) * 1.12em)}
.loader.go .ld-pick button.alt{animation:ld-suggest .45s var(--e-esce) calc(.95s + var(--n,0) * .12s) backwards}
@keyframes ld-suggest{from{opacity:0;transform:translateY(-.25em)}}
@media (hover:hover){.loader .ld-pick button:hover{color:oklch(38% 0 0)}}
.loader .ld-pick.picked button{opacity:0;pointer-events:none}
.loader .ld-pick.picked button.on{opacity:1;color:oklch(0% 0 0)}
/* the reel after a pick (data-reel, loader.js): the curtain turns black and the pictures cut one at a time in a frame with a
   margin and big round corners, under glass: its edges fall into the black, fluted glass over it (the site's glass-field
   ribs, 26 across) with a sheen from the top left and a light rim, and a moving grain over the whole screen (Tommi,
   2026-10-07: "non le mettere a tutto schermo ... un frame un po' faded, blurred, con un corner radius aggressivo", then "lo
   sfondo ovviamente deve essere nero ... il gradiente più verso il nero ... più glassy, più noisy"; the pictures are darkened
   and softened in their files: "non lo fare più chiaro, ma farlo più scuro nelle foto"). It goes down with the curtain */
html.loading .loader.reeling{background:oklch(0% 0 0);overflow:hidden}   /* hidden: the grain stays inside the curtain as it slides */
.loader.reeling p{opacity:0}
.loader .ld-reel{position:absolute;inset:clamp(16px,4.5vw,64px);z-index:1;overflow:hidden;border-radius:clamp(28px,4.2vw,64px);
  background:oklch(12% 0 0);box-shadow:0 0 120px 10px oklch(100% 0 0/.06)}
.loader .ld-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.loader .ld-reel img.on{visibility:visible}
.loader .ld-reel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(90deg,oklch(100% 0 0/.12),oklch(100% 0 0/0) 35%,oklch(0% 0 0/.16) 80%,oklch(100% 0 0/.09)) 0 0/calc(100% / 26) 100%}
.loader .ld-reel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(155deg,oklch(100% 0 0/.07),oklch(100% 0 0/.015) 32%,transparent 55%,oklch(100% 0 0/.02) 90%);
  box-shadow:inset 0 0 clamp(50px,6vw,110px) clamp(16px,2.4vw,40px) oklch(0% 0 0/.85),inset 0 1px 0 oklch(100% 0 0/.28),inset 0 0 0 1px oklch(100% 0 0/.08)}
.loader.reeling::after{content:"";position:absolute;inset:-50%;z-index:3;pointer-events:none;opacity:.38;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:ld-grain .4s steps(1) infinite}
@keyframes ld-grain{0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}60%{transform:translate(-3%,-8%)}80%{transform:translate(8%,3%)}}

/* 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 1.6s var(--e-esce) calc(var(--i,0) * .08s)}
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 1.6s var(--e-esce) calc(var(--i,0) * .07s) both}
@keyframes loader-drop{from{transform:translateY(-120%);opacity:0}to{transform:none;opacity:1}}