/* hero: the first screen over the glass (glass-field), as adrcenter.com opens: the title in the serif, one word in
   italic, 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); with the scroll 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:clamp(110px,17vh,190px);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)}
.in-testo{display:grid;justify-items:center;text-align:center}
.in-t{font-family:var(--serif);font-size:clamp(60px,9vw,150px);font-weight:400;line-height:.92;letter-spacing:-.025em;max-width:11ch;text-wrap:balance}
.in-t em{font-style:italic}
@media (min-width:900px){.in-t{max-width:none}.in-sotto{font-size:calc(23 * var(--px))}}
.in-sotto{margin-top:28px;max-width:42em;font-size:calc(18.5 * 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))}
.in-azioni .btn .play{width:17px;height:17px}   /* «Provate una call»: the play of /chiamata */
.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 peeks; 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% .05 262/.9);border-radius:24px}
.in-film .cl-frame{aspect-ratio:16/9}
/* the words behind fade as the film grows (hero.js runs it on the scroll; its keyframes for the film carry the
   screen's numbers, so they are written there). No blur: over the moving glass it was redrawn on every frame */
@keyframes in-sfuma{to{opacity:.1;transform:scale(.97)}}

/* the demo under the buttons, as a call you join (2026-10-05, after secondnature.ai and Google Meet): the experiences on
   the left; on the right the avatar full size, your own tile, the captions taking turns, the bar with the button to
   join. It sits where the film peeks; ?hero=film puts the film back. */
.in-try{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:10px;max-width:1100px;margin:0 auto;padding:10px;border:1px solid var(--riga-2);border-radius:28px;background:oklch(16% .05 262/.72);box-shadow:0 40px 120px -50px var(--ombra-forte);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.tr-lista{display:grid;align-content:start;gap:4px}
.tr-lista button{display:grid;gap:3px;padding:14px 16px;border-radius:18px;text-align:left;font-size:calc(16 * var(--px));color:var(--ink-2);transition:background .25s var(--e-ui),color .25s var(--e-ui)}
.tr-lista button:hover{background:var(--piano);color:var(--ink)}
.tr-lista button[aria-selected=true]{background:var(--blu);color:var(--su-blu)}
.tr-tipo{font-size:calc(11.5 * var(--px));font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.tr-palco{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:20px;background:oklch(12% .03 262);color:#fff}
.tr-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tr-palco::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,oklch(8% .03 262/.55),transparent 22%,transparent 55%,oklch(8% .03 262/.85));pointer-events:none}
.tr-testa,.tr-io,.tr-chat,.tr-barra{position:absolute;z-index:1}
.tr-testa{top:18px;left:20px;display:grid;gap:2px}
.tr-t{font-family:var(--serif);font-size:calc(26 * var(--px));font-weight:400;line-height:1.1}
.tr-io{right:18px;bottom:86px;width:24%;aspect-ratio:4/3;overflow:hidden;border-radius:12px;border:2px solid oklch(100% 0 0/.18);transition:border-color .2s,box-shadow .2s}
.tr-io video{width:100%;height:100%;object-fit:cover}
.tr-io span{position:absolute;left:8px;bottom:6px;font-size:calc(12 * var(--px));font-weight:600}
.tr-io.parla{border-color:var(--blu-su);box-shadow:0 0 0 4px var(--blu-velo)}
/* the conversation as a chat that stays: their lines on the left, yours on the right, each one written word by word
   while it is said */
.tr-chat{left:20px;right:calc(24% + 34px);bottom:84px;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.tr-chat li{max-width:78%;padding:9px 13px;border-radius:16px 16px 16px 4px;background:oklch(8% .03 262/.8);font-size:calc(15.5 * var(--px));line-height:1.4;animation:tr-entra .3s var(--e-esce) both}
.tr-chat li.me{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--blu);color:var(--su-blu)}
@keyframes tr-entra{from{opacity:0;transform:translateY(8px)}}
.tr-barra{left:0;right:0;bottom:16px;display:flex;justify-content:center;align-items:center;gap:10px}
.tr-tasto{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:oklch(30% .03 262/.8)}
.tr-tasto svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7}
.tr-barra .btn{min-height:44px;padding:0 22px}
@media (max-width:759px){
  .in-try{grid-template-columns:1fr;border-radius:22px}
  .tr-lista{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none}
  .tr-lista button{padding:10px 14px}
  .tr-palco{aspect-ratio:3/4}
  .tr-chat{right:20px;bottom:76px}
  .tr-chat li{font-size:calc(14.5 * var(--px))}
  .tr-io{width:30%;top:84px;bottom:auto}
  }
@media (prefers-reduced-motion:reduce){.tr-chat li{animation:none}}

/* 2a. the product film in the opening, where the call widget was: a 16:9 frame on the glass, a play button over the
   poster; once it plays the browser's own controls take over */
.in-video{position:relative;z-index:2;max-width:1100px;margin:0 auto;border:1px solid var(--riga-2);border-radius:28px;overflow:hidden;background:#000;box-shadow:0 40px 120px -50px var(--ombra-forte)}
.in-video video{display:block;width:100%;aspect-ratio:16/9;background:#000}
/* dark on the light cover (2026-10-06 evening), so it reads on it */
.in-play{position:absolute;left:clamp(14px,3%,32px);bottom:clamp(14px,4%,32px);display:inline-flex;white-space:nowrap;align-items:center;gap:12px;padding:16px 26px;border:0;border-radius:999px;background:oklch(20% .05 262);color:oklch(98% .004 255);font:inherit;font-weight:600;font-size:1.05rem;cursor:pointer;box-shadow:0 20px 50px -12px oklch(10% .05 262/.7);transition:transform .2s ease}
.in-play:hover{transform:scale(1.04)}
.in-play:focus-visible{outline:3px solid oklch(70% .14 255);outline-offset:4px}
.in-play span{font-weight:500;opacity:.55}
.in-video.playing .in-play{display:none}
/* on a phone the cover's words fill the frame: the button sits under it instead of over it */
@media (max-width:720px){.in-video{border-radius:18px;background:oklch(14% .05 262)}.in-play{position:static;background:oklch(98% .004 255);color:oklch(18% .05 262);display:flex;width:max-content;margin:12px auto;gap:8px;padding:10px 18px;font-size:.9rem}.in-play:hover{transform:none}}