/* PROVA DI TRASMISSIONE — lo standard di SYNTH-VU™ (synth-vu.z-vu.com), uguale per ogni interfaccia.
   Cambiano solo i gettoni in cima (colori, carattere del nome) e la scena dietro al quadro. */
:root{--ink:#EDEEEA;--paper:#060607;--dim:#8a8882;--green:#39FF14;--kick:var(--dim);--velo:6,6,7;
  --f:"Helvetica Neue",Helvetica,Arial,sans-serif;--fh:var(--f);--wh:700;--mono:"SF Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--ease-star:cubic-bezier(.7,0,.2,1);--righe:7}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--f);-webkit-font-smoothing:antialiased}

/* la scena: l'apertura del sito, che si ferma su un fotogramma solo */
.scena{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--paper);opacity:0;transition:opacity 1.8s var(--ease)}
.on .scena,.scena.subito{opacity:1}
.scena video,.scena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scena .ombra{position:absolute;inset:0}
.scena .fermo{opacity:0;transition:opacity 1.2s var(--ease)}.scena .fermo.su{opacity:1}

/* il blocco unico */
.frame{position:fixed;inset:0;z-index:25;display:grid;place-content:center;justify-items:center;text-align:center;padding:24px 16px calc(96px + env(safe-area-inset-bottom,0px));pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--velo),.8),rgba(var(--velo),.5) 55%,rgba(var(--velo),0))  center/min(760px,120vw) min(560px,90vh) no-repeat}
.mark{width:clamp(76px,13vmin,136px);aspect-ratio:1;margin-bottom:clamp(22px,4vh,38px);transition:transform 1.3s var(--ease-star)}
.star{display:block;width:100%;height:100%;background:var(--ink);-webkit-mask:var(--forma,url("star.svg")) center/contain no-repeat;mask:var(--forma,url("star.svg")) center/contain no-repeat}
.mark img{display:block;width:100%;height:100%;object-fit:contain}
.load .mark.gira .star{animation:carica 1.25s var(--ease-star) infinite}
.load .mark:not(.gira)>*{animation:respiro 2.4s ease-in-out infinite}
.star.respiro{animation:respiro 6s ease-in-out infinite}
@keyframes carica{0%{transform:rotate(0) scale(1)}45%,60%{transform:rotate(90deg) scale(.7)}100%{transform:rotate(90deg) scale(1)}}
@keyframes respiro{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
.l{opacity:0;transform:translateY(10px);filter:blur(6px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.on .l{opacity:1;transform:none;filter:none}
.on .l:nth-child(3){transition-delay:.12s}.on .l:nth-child(4){transition-delay:.26s}.on .l:nth-child(5){transition-delay:.42s}.on .l:nth-child(6){transition-delay:.6s}.on .l:nth-child(7){transition-delay:.72s}
.kick{font:500 12px var(--mono);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:var(--kick)}
h1{font:var(--wh) clamp(46px,9.2vw,128px)/.9 var(--fh);letter-spacing:-.045em;margin:.16em 0 .2em;white-space:nowrap}
h1 sup{font-size:.16em;font-weight:400;letter-spacing:0;vertical-align:2.6em;margin-left:.12em}
.head{font:400 clamp(17px,2vw,22px)/1.35 var(--fb,var(--f));letter-spacing:-.01em;max-width:36ch;text-wrap:balance}
.head>span{display:block}
.tech{margin-top:clamp(26px,4.5vh,44px);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.tech .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.6s steps(1) infinite}
.tech .sep{font-style:normal}.tech .ch{color:var(--dim);letter-spacing:.14em;font-variant-numeric:tabular-nums}
@keyframes blink{50%{opacity:.15}}
.foot{margin-top:clamp(18px,3vh,28px);font:12px var(--mono);letter-spacing:.08em;color:var(--dim);white-space:nowrap}
.foot .eth{color:var(--ink)}
.foot>.extra{display:block;margin-top:6px}
/* il minimo istituzionale: le pagine legali restano sempre raggiungibili */
.legale{margin-top:10px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;pointer-events:auto}
.legale a,.legale button{color:var(--dim);text-decoration:none;background:none;border:0;padding:6px 0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.legale a:hover,.legale button:hover,.legale a:focus-visible,.legale button:focus-visible{color:var(--ink);outline:none}

/* la base: VU a tacchette di z-vu (ZV-C02) e sopra la stella piena, menu di tutte le interfacce */
.dock{position:fixed;z-index:30;left:50%;bottom:calc(clamp(18px,4svh,36px) + env(safe-area-inset-bottom,0px));translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transition:opacity 1s var(--ease) .8s}
.dock{pointer-events:none}.on .dock{opacity:1;pointer-events:auto}
.apri{width:48px;height:48px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.apri i{width:16px;height:16px;display:block;background:currentColor;clip-path:polygon(50% 4%,60.47% 39.53%,96% 50%,60.47% 60.47%,50% 96%,39.53% 60.47%,4% 50%,39.53% 39.53%);transition:transform .9s var(--ease-star)}
.apri:hover i{transform:rotate(90deg) scale(.8)}
.menu-on .apri i{transform:rotate(45deg) scale(1.15)}
.suono{width:64px;height:44px;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:0 0 10px;background:none;border:0;cursor:pointer;color:var(--ink);opacity:.85}
.suono:hover{opacity:1}
.suono i{display:block;width:2px;height:20px;background:currentColor;transform:scaleY(.15);transform-origin:50% 100%}
.suono[aria-pressed="false"]{opacity:.4}
.suono[aria-pressed="false"] i{transform:scaleY(.1)!important}

/* il menu: overlay a quadro unico, dietro scorrono in nastri tutte le interfacce */
.frame{transition:opacity .5s var(--ease)}
.menu-on .frame{opacity:0}
.menu{position:fixed;inset:0;z-index:28;background:#060607;color:#EDEEEA;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.menu-on .menu{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.menu-on .dock .apri,.menu-on .dock .suono{color:#EDEEEA}
.nastri{position:absolute;inset:0;display:grid;grid-template-rows:repeat(var(--righe),1fr);pointer-events:none;
  --m:linear-gradient(#000 4%,rgba(0,0,0,.34) 16%,rgba(0,0,0,.34) 76%,rgba(0,0,0,.2) 90%,rgba(0,0,0,.55));-webkit-mask:var(--m);mask:var(--m)}
@media (min-width:768px){.nastri{--m:radial-gradient(ellipse 52% 42% at 50% 47%,rgba(0,0,0,.1) 45%,rgba(0,0,0,.55) 78%,#000 100%)}}
.riga{container-type:size;display:flex;align-items:center;overflow:hidden;color:rgba(237,238,234,.17);
  opacity:0;translate:calc(var(--lato,1) * 4%) 0;transition:color 1.2s var(--ease),opacity .7s var(--ease) var(--d),translate 1s var(--ease) var(--d)}
.menu-on .riga{opacity:1;translate:0 0}
.riga.viva{color:rgba(237,238,234,.72)}
.nastro{display:flex;flex:none;align-items:baseline;white-space:nowrap;will-change:transform;animation:scorri var(--t,60s) linear infinite}
.riga:nth-child(even) .nastro{animation-direction:reverse}
@keyframes scorri{to{transform:translateX(-50%)}}
.giro{display:flex;align-items:baseline;flex:none;gap:30cqh;padding-right:30cqh}
.n-id{font:500 11cqh var(--mono);letter-spacing:.2em}
.n-cat{font:700 74cqh/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.045em;text-transform:uppercase}
.n-st{width:14cqh;height:14cqh;align-self:center;background:currentColor;clip-path:polygon(50% 4%,60.47% 39.53%,96% 50%,60.47% 60.47%,50% 96%,39.53% 60.47%,4% 50%,39.53% 39.53%)}
.n-a{font:300 34cqh/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.02em}
.n-b{font:500 13cqh var(--mono);letter-spacing:.22em;text-transform:uppercase}
.pannello{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:clamp(12px,2.2svh,22px);
  padding:max(20px,env(safe-area-inset-top)) 16px calc(128px + env(safe-area-inset-bottom,0px));--ink:#EDEEEA;--dim:#8a8882}
.pannello>*{opacity:0;translate:0 10px;transition:opacity .6s var(--ease),translate .8s var(--ease)}
.menu-on .pannello>*{opacity:1;translate:0 0}
.menu-on .pannello>:nth-child(2){transition-delay:.06s}.menu-on .pannello>:nth-child(3){transition-delay:.12s}.menu-on .pannello>:nth-child(4){transition-delay:.18s}.menu-on .pannello>:nth-child(5){transition-delay:.24s}.menu-on .pannello>:nth-child(6){transition-delay:.3s}
.pannello .mark{width:clamp(40px,7vmin,64px);margin:0}
.pannello .star{background:#EDEEEA;-webkit-mask-image:url("star.svg");mask-image:url("star.svg")}
.pannello .testa{display:grid;justify-items:center;gap:6px}
.pannello .kick{color:#8a8882}
.pannello h2{font:var(--wh) clamp(42px,8vw,96px)/.9 var(--fh);letter-spacing:-.045em;white-space:nowrap}
.pannello h2 sup{font-size:.18em;font-weight:400;letter-spacing:0;vertical-align:2.3em;margin-left:.1em}
.pannello .tech,.pannello .foot{margin:0}
.pannello .head{margin-top:-4px}
.porte{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,420px);margin-top:clamp(4px,1.2svh,14px)}
.pad{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;height:64px;padding:9px 11px 11px 13px;border-radius:4px;color:#EDEEEA;text-decoration:none;text-align:left;
  background:#0b0b0d;border:1px solid rgba(237,238,234,.2);overflow:hidden;transition:color .25s var(--ease),border-color .25s var(--ease)}
.pad::before{content:"";position:absolute;inset:0;background:#EDEEEA;transform:scaleY(0);transform-origin:50% 100%;transition:transform .35s var(--ease)}
.pad>*{position:relative}
.pad b{font:500 11px var(--mono);letter-spacing:.14em;color:#8a8882;transition:color .25s}
.pad svg{width:14px;height:14px;color:#8a8882;transition:transform .35s var(--ease),color .25s}
.pad span{grid-column:1/-1;align-self:end;font:700 18px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pad span sup{font-size:.45em;font-weight:400;vertical-align:1.05em;margin-left:.08em}
.pad:hover,.pad:focus-visible{color:#0a0a0b;border-color:#EDEEEA;outline:none}
.pad:hover::before,.pad:focus-visible::before{transform:scaleY(1)}
.pad:hover b,.pad:focus-visible b,.pad:hover svg,.pad:focus-visible svg{color:#0a0a0b}
.pad:hover svg,.pad:focus-visible svg{transform:translate(2px,-2px)}
.pad:active{transform:translateY(1px)}
@media (min-width:768px){
  .porte{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,760px);gap:10px}
  .pad{height:84px;padding:12px 14px 14px 16px}
  .pad span{font-size:clamp(18px,1.9vw,24px)}
}
@media (max-height:720px) and (min-height:561px){.pannello{gap:10px;padding-bottom:112px}.pannello .mark{display:none}.pad{height:54px}.porte{gap:6px}}
@media (max-height:560px){
  .pannello{gap:10px;padding-bottom:96px}
  .pannello .mark,.pannello .kick,.pannello .head,.pannello .foot{display:none}
  .pannello h2{font-size:40px}
  .porte{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,760px)}
  .pad{height:56px}
}
@media (prefers-reduced-motion:reduce){.nastro{animation:none}}

/* CRT leggero, sopra tutto e mai cliccabile */
.crt{position:fixed;inset:0;z-index:40;pointer-events:none}
.crt::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.16) 3px),
    repeating-linear-gradient(90deg,rgba(255,0,60,.018) 0 1px,rgba(0,255,120,.018) 1px 2px,rgba(40,90,255,.018) 2px 3px);
  mix-blend-mode:multiply}
.crt::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,rgba(0,0,0,0) 62%,rgba(0,0,0,.42) 100%);
  animation:crt 6s steps(60) infinite}
@keyframes crt{0%,100%{opacity:1}47%{opacity:.9}50%{opacity:1}53%{opacity:.94}}
@media (prefers-reduced-motion:reduce){.crt::after{animation:none}}

/* la finestra delle note legali (Z-GRVS) */
dialog.nota{max-width:min(560px,calc(100vw - 32px));background:#0b0b0d;color:#EDEEEA;border:1px solid rgba(237,238,234,.2);border-radius:4px;padding:24px;font:14px/1.55 var(--f)}
dialog.nota::backdrop{background:rgba(0,0,0,.7)}
dialog.nota h3{font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
dialog.nota small{display:block;margin-top:14px;font:11px var(--mono);color:#8a8882;letter-spacing:.06em}
dialog.nota button{margin-top:18px;background:none;border:1px solid rgba(237,238,234,.3);color:#EDEEEA;font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:10px 14px;cursor:pointer;border-radius:4px}

@media (max-width:767px){.tech .ch{flex-basis:100%}.tech .sep{display:none}.foot{white-space:normal}.foot>span{display:block}}
@media (prefers-reduced-motion:reduce){.star,.tech .dot{animation:none!important}*{transition-duration:.01s!important}}