/* Robolero — la soglia: la pagina d'ingresso prima del hero (soglia.js). Versione definitiva del 20/09/2026: su nero, un drappo di liquido nero si avvolge e diventa la testa del robot (video MiniMax 1440x1440, 2160 sugli schermi grandi), la visiera si accende con la scritta ROBOLERO e sotto appare «PREMI QUI PER ACCEDERE», che pulsa finche' l'utente non preme (nessun avanzamento automatico); in alto a destra lingue, tasto col marchio e, piccola e discreta ma leggibile, la riga legale. Il video sta nella STESSA scatola in cui hero.js mette l'immagine del robot (stessa scala, stesso volto, stesso ondeggiare): la soglia si dissolve su un hero gia' acceso, senza stacco. Niente filtri CSS sul video (object-fit: contain su nero, mai tagliato), will-change solo sulla scatola. Colori: nero #000 (il fondo del video e del hero), bianco, oro #f2c56b. */ html.soglia{background:#000;overflow:hidden} html.soglia body{background:#000} html.soglia .hero-robo{visibility:hidden} html.soglia.soglia-via .hero-robo{visibility:visible} /* body>.soglia, non .soglia: anche porta la classe "soglia" (inline script in ) e queste regole (fixed, cursore, niente selezione) sono solo del velo */ body>.soglia{position:fixed;inset:0;z-index:400;background:#000;overflow:hidden;color:#fff;-webkit-user-select:none;user-select:none;cursor:pointer} /* la scena copre il rettangolo del hero, con la stessa prospettiva di .scene3d (site.css); la scatola e' la copia della .robot del hero: soglia.js le da' le stesse misure e, a ogni frame, la stessa trasformazione, cosi' il fotogramma finale coincide col hero al pixel */ .soglia-scena{position:absolute;left:0;top:0;width:100%;height:100%;perspective:1400px;perspective-origin:50% 38%} .soglia-scatola{position:absolute;left:50%;top:0;width:100vmin;height:100vmin;transform-origin:50% 38.5%;will-change:transform} /* il video e' quadrato su nero: contain nella scatola quadrata, mai tagliato, il letterbox e' invisibile */ .soglia-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:50% 50%;background:#000} /* a fine video il fotogramma finale come immagine (identica) entra sopra il video fermo in 0,3 s (soglia.js finito()) */ .soglia-fermo{opacity:0;transition:opacity .3s linear} .soglia-fermo.su{opacity:1} /* il bordo del quadrato si spegne in morbidezza: il nastro che esce dal fotogramma non incontra uno spigolo */ .soglia-bordo{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 calc(var(--bx,900px)*.08) calc(var(--bx,900px)*.012) #000} /* l'ombra che lascia solo la testa: la stessa ellisse con cui il hero sfuma la sua immagine (site.css, .robot>img mask-image) piu' una sfumatura sulle spalle; entra quando la testa si e' indurita (.testa, ~3,4 s) e resta: al hero si arriva gia' cosi' */ .soglia-ombra{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.6s ease; background:linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.86) 79%,#000 88%),radial-gradient(ellipse 58% 68% at 50% 40%,rgba(0,0,0,0) 50%,#000 100%)} .soglia.testa .soglia-ombra{opacity:1} /* la visiera: il tasto copre il vetro (in % dell'immagine 2048: vetro x 32-68 %, y 17-66 %; la scritta ROBOLERO del video sta a y 39,8-42,8 %) e «premi qui» sta sotto quella scritta, nitida (niente sfocature: solo un alone di text-shadow), oro, con una pulsazione lenta */ .soglia-visiera{position:absolute;left:32%;top:17%;width:36%;height:49%;margin:0;border:0;padding:0;background:transparent;color:#f2c56b;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .7s ease} .soglia.pronta .soglia-visiera{opacity:1;pointer-events:auto} .soglia.presa .soglia-visiera,.soglia.via .soglia-visiera{opacity:0;pointer-events:none;transition:opacity .3s ease} .soglia-visiera .testo{position:absolute;left:5%;right:5%;top:63%;display:block;text-align:center;font-family:"Bricolage Grotesque",-apple-system,sans-serif;font-weight:700;font-size:clamp(12px,calc(var(--bx,900px)*.0175),20px);letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;line-height:1.4;text-shadow:0 0 12px rgba(242,197,107,.5),0 0 30px rgba(242,197,107,.22);animation:visieraPulse 3.6s ease-in-out infinite} .soglia-visiera:hover .testo{animation:none;opacity:1;text-shadow:0 0 14px rgba(242,197,107,.75),0 0 36px rgba(242,197,107,.35)} .soglia-visiera:focus-visible{outline:2px solid #f2c56b;outline-offset:-2px;border-radius:46% 46% 40% 40%} @keyframes visieraPulse{0%,100%{opacity:.78;text-shadow:0 0 10px rgba(242,197,107,.35),0 0 24px rgba(242,197,107,.12)}50%{opacity:1;text-shadow:0 0 14px rgba(242,197,107,.7),0 0 36px rgba(242,197,107,.32)}} /* in alto a destra: lingue, il tasto col marchio e la riga legale, bianchi su nero */ .soglia-alto{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:14px;z-index:2;cursor:default} .soglia-lingue{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .soglia-lingue button{border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.55);color:#fff;border-radius:999px;padding:6px 10px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(6px);transition:border-color .15s,background .15s} .soglia-lingue button:hover{border-color:#fff} .soglia-lingue button.on{background:#fff;color:#0a0a0a;border-color:#fff} .soglia-accedi{position:relative;display:inline-flex;align-items:center;gap:12px;border:0;background:#fff;color:#0a0a0a;border-radius:999px;padding:10px 22px 10px 10px;cursor:pointer;font-family:"Bricolage Grotesque",-apple-system,sans-serif;font-weight:800;font-size:15px;letter-spacing:.02em;box-shadow:0 12px 34px rgba(0,0,0,.55);transition:background .15s} .soglia-accedi .marchio{position:relative;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#0a0a0a} .soglia-accedi .marchio svg{width:34px;height:34px;display:block} .soglia-accedi .marchio::before,.soglia-accedi .marchio::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #f2c56b;opacity:0;animation:anello 2.4s ease-out infinite} .soglia-accedi .marchio::after{animation-delay:1.2s} @keyframes anello{0%{transform:scale(.7);opacity:.9}70%{opacity:.15}100%{transform:scale(2.1);opacity:0}} .soglia-accedi:hover{background:#f2c56b} .soglia-accedi:focus-visible{outline:2px solid #f2c56b;outline-offset:3px} .soglia-accedi .etichetta{white-space:nowrap} /* la riga legale (20/09): sotto il tasto «Accedi», piccola e discreta come vuole il titolare, ma leggibile come vuole la legge (il consenso vale solo se l'informazione si legge): 10,5 px, grigio rgba(255,255,255,.55) = #8c8c8c sul nero, contrasto 6,2:1 (minimo 3:1); il link all'informativa piu' chiaro; «Accedi senza accettare» resta un pulsante (il no deve costare un clic come il si', consenso libero: parere del 19/09 §6.4), piccolo ma a contrasto pieno */ .soglia-legale{margin:-2px 0 0;max-width:300px;text-align:right;font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.45;letter-spacing:.01em;color:rgba(255,255,255,.55)} .soglia-legale[hidden]{display:none} .soglia-legale a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:2px} .soglia-legale a.senza{display:inline-block;margin:5px 0 0 4px;padding:3px 9px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(0,0,0,.6);color:rgba(255,255,255,.88);text-decoration:none;font-size:11px;letter-spacing:.03em;white-space:nowrap;cursor:pointer;backdrop-filter:blur(6px)} .soglia-legale a.senza:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)} .soglia-legale a.senza:focus-visible{outline:2px solid #f2c56b;outline-offset:3px} /* la scritta piccola in basso: nulla da tradurre, solo il marchio */ .soglia-piede{position:absolute;left:22px;bottom:20px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.24em;color:rgba(255,255,255,.45)} /* uscita: la soglia si dissolve e basta (niente zoom, niente spostamenti): sotto c'e' il hero gia' acceso con la testa nello stesso punto (soglia.js lo accende prima di dissolvere) */ .soglia.via{animation:sogliaVia .95s ease-in-out forwards;pointer-events:none} @keyframes sogliaVia{0%{opacity:1}100%{opacity:0}} .soglia.via .soglia-alto,.soglia.via .soglia-piede{opacity:0;transition:opacity .4s ease} @media(max-width:700px){ .soglia-alto{top:12px;right:12px;left:12px;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px} .soglia-accedi{font-size:13px;padding:8px 14px 8px 8px} .soglia-lingue button{padding:5px 8px} .soglia-legale{max-width:none;text-align:left;font-size:10.5px;width:100%;margin:0} .soglia-piede{left:14px;bottom:14px} } @media(prefers-reduced-motion:reduce){ .soglia-visiera .testo,.soglia-accedi .marchio::before,.soglia-accedi .marchio::after{animation:none} .soglia-ombra,.soglia-visiera{transition:none} .soglia.via{animation:none;opacity:0} }