/* 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,.scena canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scena canvas{display:block;touch-action:none;cursor:grab}.scena canvas:active{cursor:grabbing}
.scena .ombra{position:absolute;inset:0}
.on .scena canvas{pointer-events:auto}
/* il blocco unico */
.frame{position:fixed;inset:0;z-index:25;display:grid;place-content:center;justify-items:center;text-align:center;padding:max(24px,env(safe-area-inset-top)) 16px calc(112px + 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(980px,140vw) min(880px,110svh) no-repeat}
.mark{width:clamp(76px,13vmin,136px);aspect-ratio:1;margin-bottom:42px;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 .frame .kick{transition-delay:.1s}.on .frame h1{transition-delay:.2s}.on .frame .head{transition-delay:.34s}.on .segnale{transition-delay:.9s}.on .istituto{transition-delay:1.5s}
.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:20px 0 24px;white-space:nowrap}
.frame .mark+h1{margin-top:0}
h1 sup{font-size:max(11px,.16em);font-weight:400;letter-spacing:0;vertical-align:top;line-height:1;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{position:relative;display:flex;align-items:center;justify-content:center;font:500 13px var(--mono);letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;white-space:nowrap}
.tech .dot{position:absolute;right:100%;margin-right:12px;width:8px;height:8px;border-radius:50%;background:var(--green)}
.tech .dot{animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.4}}


/* la stellina preloader, uguale per tutti: al centro, poi lascia il posto al marchio */
.pre{position:fixed;left:50%;top:50%;z-index:26;width:clamp(76px,13vmin,136px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;transition:opacity .7s var(--ease),scale 1s var(--ease-star)}
.load .pre .star{animation:carica 1.25s var(--ease-star) infinite}
.on .pre{opacity:0;scale:.4}
.frame .mark.l{filter:none}

/* il segnale: in onda, canale e tempo, stato */
.segnale{margin-top:clamp(32px,5svh,48px);display:grid;justify-items:center;gap:14px}
.canale,.stato{display:flex;justify-content:center;gap:1.4em;font:500 12px/1 var(--mono);letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;color:var(--ink);opacity:.78;font-variant-numeric:tabular-nums;white-space:nowrap}
.canale{align-items:center}

/* la firma: l'ENS da solo, sotto la filiera e i legali in piccolo */
.istituto{margin-top:clamp(32px,5svh,48px);display:grid;justify-items:center;gap:18px;pointer-events:auto}
.istituto .eth{font:500 14px/1 var(--mono);letter-spacing:.06em;color:var(--ink)}
.istituto .firma{display:grid;justify-items:center;gap:12px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;color:var(--ink);opacity:.72}
.pannello .istituto .firma{opacity:1;color:#8a8882}
@media (min-width:1024px){.tech{font-size:15px}.canale,.stato{font-size:13px}.istituto .eth{font-size:15px}.istituto .firma{font-size:12px}}
.legali{display:flex;justify-content:center;gap:1.6em;margin-top:-2px}
.legali a,.legali button{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--l4,var(--dim));text-decoration:none;background:none;border:0;padding:7px 0;cursor:pointer;opacity:.85}
.legali a:hover,.legali button:hover,.legali a:focus-visible,.legali button:focus-visible{color:var(--ink);opacity:1;outline:none}

/* il timecode e' anche il trasporto: toccato ferma scena, tempo e respiro (WCAG 2.2.2) */
.tempo{display:flex;align-items:center;gap:7px;position:relative;background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;pointer-events:auto}
.tempo:hover,.tempo:focus-visible{color:var(--ink);outline:none}
.tempo::after{content:"";position:absolute;inset:-12px -8px}
.tempo svg{width:8px;height:8px;flex:none;align-self:center}
.tempo .i-play,.pausa .tempo .i-pausa{display:none}.pausa .tempo .i-play{display:block}
.pausa *,.pausa *::before,.pausa *::after{animation-play-state:paused!important}

/* 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)}
.apri.saluto i{animation:quarto .9s var(--ease-star)}
@keyframes quarto{0%{transform:none}50%{transform:rotate(45deg) scale(.8)}100%{transform:rotate(90deg)}}
.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;transform:none!important}
.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:max(11px,.18em);font-weight:400;letter-spacing:0;vertical-align:top;line-height:1;margin-left:.1em}
.pannello .onda{display:grid;justify-items:center;gap:8px}
.pannello .tech{margin:0}
.pannello .unita{display:flex;justify-content:center;flex-wrap:wrap;column-gap:18px;row-gap:4px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8a8882;font-variant-numeric:tabular-nums}
.pannello .unita>span,.pannello .extra{white-space:nowrap}
.pannello .extra{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8a8882;margin-top:-6px}
.pannello .istituto{margin-top:0;--ink:#EDEEEA;color:#8a8882}
.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:max(11px,.45em);font-weight:400;vertical-align:top;line-height:1;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 .extra{display:none}.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 .istituto,.pannello .extra,.pannello .unita{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}

/* altezze basse: il quadro si stringe, la gerarchia resta */
@media (max-height:760px){.frame .mark{width:clamp(56px,10svh,76px);margin-bottom:24px}.segnale{margin-top:22px}.istituto{margin-top:20px;gap:8px}}
@media (max-height:600px){.frame .mark{width:44px!important;margin-bottom:14px}.istituto .firma{display:none}.frame .head{font-size:16px}}
@media (prefers-reduced-motion:reduce){.star,.tech .dot,.apri i,.pre .star{animation:none!important}*{transition-duration:.01s!important;transition-delay:0s!important}}
.istituto .eth+.eth{margin-top:-8px}