/* 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)}
/* la scena entra quando e' pronta (vivo), non prima: il quadro non la aspetta */
.on.vivo .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;pointer-events:none}
.scena .ombra{position:absolute;inset:0}
/* 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}
/* il nome e' gia' dipinto sotto la stellina, in velatura, e si mette a fuoco all'arrivo: LCP misurabile dal primo fotogramma */
.frame h1.l{opacity:.16}.on .frame h1.l{opacity:1}
.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}
@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, che apre il portale */
.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 portale (lavori/trasmissione-v7/portale) si apre dalla stella: il quadro si spegne sotto, niente nastri di scritte */
.frame{transition:opacity .5s var(--ease)}
.menu-on .frame{opacity:0}

/* 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}
.nota.admin form{display:flex;flex-direction:column;gap:12px;min-width:min(300px,calc(100vw - 80px))}
.nota.admin input{font:500 20px var(--mono);letter-spacing:.3em;padding:12px 14px;min-height:48px;background:#000;color:#EDEEEA;border:1px solid rgba(237,238,234,.3);border-radius:4px}
.nota.admin input:focus{outline:1px solid #EDEEEA;outline-offset:2px}
.nota.admin .no{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#FF5A4E}
.nota.admin div{display:flex;gap:10px}.nota.admin button{margin-top:0;min-height:44px;flex:1}
.nota.admin button[type=submit]{background:#EDEEEA;color:#0b0b0d}
.nota{margin:auto}