/* hero: the first screen over the glass (glass-field), as adrcenter.com opens: the title in Favorit, one word in
   the script (Ed Nimpkish), a line in numbers under it (its figures in bold), two buttons. Its glass fades into the night below, so the
   page runs on without an edge (Tommi, 2026-10-01: "qualcosa di un po' più seamless"). Under it a film
   peeks from the bottom of the screen (any 16:9 frame in #in-film; on the landing /clip's); once the page moves it grows
   to the middle of the screen, stays pinned over the stretch of .in-pin, then leaves with the page (hero.js). Needs
   ../base/base.css and ../glass-field/ for the background. */
.inizio{--peek:0px;position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding-bottom:clamp(64px,8vw,128px)}
.in-screen{min-height:calc(100vh - var(--peek));min-height:calc(100svh - var(--peek));display:grid;align-content:center;padding:calc(var(--barra-h) + 24px) 0 clamp(28px,4vh,48px);transition:opacity .6s var(--e-ui),filter .6s var(--e-ui),transform .9s var(--e-esce)}
.in-testo{display:grid;justify-items:center;text-align:center}
.in-t{font-family:var(--serif);font-size:clamp(44px,8.6vw,132px);font-weight:300;line-height:.98;letter-spacing:-.05em;max-width:13ch;text-wrap:balance}
.in-t em{font-style:normal}
@media (min-width:900px){.in-t{font-size:clamp(70px,7.6vw,132px);max-width:15ch}.in-sotto{font-size:calc(20 * var(--px))}}
.in-sotto{margin-top:28px;max-width:46em;font-size:calc(17 * var(--px));line-height:1.45;color:var(--ink-2);text-align:center;text-wrap:pretty}
.in-sotto b{font-weight:600;color:var(--ink)}
.in-azioni{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:40px}
.in-azioni .btn{min-height:54px;padding:0 28px;font-size:calc(16.5 * var(--px))}
.inizio>.glass-field{--sfuma:min(720px,55%);-webkit-mask-image:linear-gradient(to top,transparent,rgb(0 0 0/.12) calc(var(--sfuma) * .25),rgb(0 0 0/.45) calc(var(--sfuma) * .5),rgb(0 0 0/.82) calc(var(--sfuma) * .78),#000 var(--sfuma));mask-image:linear-gradient(to top,transparent,rgb(0 0 0/.12) calc(var(--sfuma) * .25),rgb(0 0 0/.45) calc(var(--sfuma) * .5),rgb(0 0 0/.82) calc(var(--sfuma) * .78),#000 var(--sfuma))}
/* the film: at rest it waits just under the fold (it peeked from the bottom until Tommi, 2026-10-05: "i want the first hero to take
   up the whole page, not to have that little piece of video stick up": --peek is 0, the property kept for a page that wants it); grown, it sits in the middle of the screen and the words behind it fade. Its box is
   sticky where it rests, from the first pixel of scroll (hero.js sets its top); .in-pin is how long it stays
   (overflow:clip above, not hidden, or sticky has nothing to stick to) */
.in-film{position:sticky;top:75vh;z-index:2}
.in-pin{height:80vh;height:80svh}
@media (prefers-reduced-motion:reduce){.in-film{position:relative;top:auto}.in-pin{display:none}}
.in-film .cl-film{width:min(1100px,100% - 2 * var(--gutter));margin:0 auto;transform-origin:50% 50%;will-change:transform;box-shadow:0 40px 120px -50px oklch(5% 0 262/.9);border-radius:24px}
.in-film .cl-frame{aspect-ratio:16/9}
.inizio.grown .in-screen{opacity:.1;transform:scale(.97)}
/* no film (the home since 2026-10-06, Tommi: "for now remove the video"): the room it sat in goes too, so the next section starts
   right under the first screen */
.inizio:not(:has(.in-film)){padding-bottom:0}