/* MANIFESTO · AVVIO · v0.42 (cantiere AVVIO, 3 ottobre 2026)
   Pelle della schermata d'apertura (#avvio), dell'accensione in corso, dell'offline e delle schede di rifiuto
   (fotocamera negata, bussola negata → modalità guidata). Si carica DOPO viewer.css (ne sostituisce le regole #avvio).
   Token: quelli di viewer.css (--luce, --oro, --notte, --vetro, --f-display, --f-ui, --ease). Un solo bottone d'oro.
   La scena è disegnata da moduli/avvio.js dentro #av-scena: facciate in silhouette, l'Etna, schermi LED veri
   (loop dal dataset Hugging Face) che si accendono con un'onda di luce. Dopo l'accensione, nient'altro si muove
   tranne i video dentro gli schermi. prefers-reduced-motion: tutto già acceso, nessun movimento. */

#avvio{ position:fixed; inset:0; z-index:15; display:flex; flex-direction:column; align-items:stretch; text-align:center; color:#fff; overflow:hidden;
  padding:0; background:var(--notte,#05070D); transition:opacity .55s var(--ease,cubic-bezier(.2,.8,.2,1)), visibility 0s linear .55s; }
#avvio.av-via{ opacity:0; pointer-events:none; visibility:hidden; }
#avvio[data-stato="carico"], #avvio[data-stato="uscita"]{ z-index:30; }

/* ── scena ── */
#av-scena{ position:relative; flex:1 1 auto; min-height:38svh; overflow:hidden; }
#av-scena .av-box{ position:absolute; left:50%; bottom:0; width:max(100%,min(430px,100vw)); aspect-ratio:390/560; transform:translateX(-50%); }
#av-scena svg.av-cielo{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#av-scena::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none; z-index:3; background:linear-gradient(to bottom,rgba(5,7,13,0),var(--notte,#05070D) 94%); }
#av-scena::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(5,7,13,.55)); }

/* finestre: spente di default, si accendono a ondate */
.av-fin{ fill:#0a1124; }
.av-fin.lit{ fill:#ffcf86; opacity:0; transition:opacity .6s var(--ease); } .av-box.on .av-fin.lit{ opacity:.85; transition-delay:var(--d,0s); }
.av-brace{ opacity:0; transition:opacity 1.6s var(--ease) .6s; } .av-box.on .av-brace{ opacity:1; }

/* gli schermi LED: cornice scura sottile, trama a pixel, luce del colore medio che bagna la facciata e il selciato */
.av-led{ position:absolute; left:var(--x); top:var(--y); width:var(--w); aspect-ratio:16/9; margin:0; z-index:1; transform:perspective(520px) rotateY(var(--ry,0deg)); }
.av-led .av-tela{ position:absolute; inset:0; z-index:1; border:3px solid #0A0A0C; border-radius:3px; overflow:hidden; background:#140f08 linear-gradient(160deg,var(--c1,#e8a24a),var(--c2,#7a3b12));
  box-shadow:0 0 0 1px rgba(0,0,0,.6); filter:brightness(.05) saturate(.4); }
.av-led .av-tela img, .av-led .av-tela video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .6s var(--ease); }
.av-led .av-tela img.ok, .av-led .av-tela video.ok{ opacity:1; }
.av-led .av-tela::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.16; background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px); }
.av-led .av-tela::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%); }
.av-led .av-alone{ position:absolute; left:-55%; top:-90%; width:210%; height:280%; z-index:0; pointer-events:none; opacity:0; mix-blend-mode:screen; transition:opacity .9s var(--ease); background:radial-gradient(closest-side,var(--c1,#e8a24a),transparent); }
.av-led .av-pozza{ position:absolute; left:-30%; top:calc(100% + var(--giu,70px)); width:160%; height:34px; pointer-events:none; opacity:0; mix-blend-mode:screen; filter:blur(7px); transition:opacity 1.2s var(--ease); background:radial-gradient(closest-side,var(--c1,#e8a24a),transparent); }
.av-box.on .av-led .av-tela{ animation:avAccendi .55s steps(1,end) var(--acc,.9s) both; }
.av-box.on .av-led .av-alone{ opacity:.5; transition-delay:calc(var(--acc,.9s) + .3s); }
.av-box.on .av-led .av-pozza{ opacity:.55; transition-delay:calc(var(--acc,.9s) + .4s); }
/* sfarfallio d'accensione, come i LED veri: tre scatti poi luce piena */
@keyframes avAccendi{ 0%{ filter:brightness(.05) saturate(.4); } 14%{ filter:brightness(.95) saturate(1); } 28%{ filter:brightness(.12) saturate(.5); } 46%{ filter:brightness(1.05) saturate(1.05); } 62%{ filter:brightness(.5) saturate(.8); } 80%,100%{ filter:brightness(1) saturate(1.05); } }
/* onda di luce che attraversa la scena: una volta sola */
.av-onda{ position:absolute; top:-10%; bottom:-10%; left:0; width:100%; pointer-events:none; z-index:2; mix-blend-mode:screen; opacity:0; filter:blur(3px);
  background:linear-gradient(100deg,transparent 22%,rgba(255,244,214,.07) 34%,rgba(255,236,190,.32) 45%,rgba(255,250,235,.8) 50%,rgba(255,236,190,.32) 55%,rgba(255,244,214,.07) 66%,transparent 78%); }
.av-box.on .av-onda{ animation:avOnda 1.1s cubic-bezier(.35,.05,.25,1) .55s both; }
@keyframes avOnda{ from{ transform:translateX(-62%); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } to{ transform:translateX(62%); opacity:0; } }
/* senza rete: la città resta spenta */
#avvio[data-rete="no"] .av-led .av-tela{ animation:none; filter:brightness(.07) saturate(.4); } #avvio[data-rete="no"] .av-led .av-alone, #avvio[data-rete="no"] .av-led .av-pozza{ opacity:0; }

/* ── testa: marchio e frase ── */
.av-testa{ position:relative; z-index:4; flex:none; padding:0 28px; margin-top:-14px; }
#avvio .av-marchio{ margin:0 auto 12px; width:min(272px,72vw); font:900 44px/1 var(--f-display); letter-spacing:-.02em; color:var(--luce,#FFF4D6); animation:avTesto .8s var(--ease) .15s both; }
.av-marchio svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 0 22px rgba(255,236,190,.3)); } .av-marchio svg path{ fill:var(--luce,#FFF4D6); }
#avvio .claim{ margin:0 auto; max-width:300px; font:700 20px/1.3 var(--f-ui); letter-spacing:-.01em; color:#fff; animation:avTesto .7s var(--ease) .5s both; }
@keyframes avTesto{ from{ opacity:0; transform:translateY(8px); filter:blur(6px); } to{ opacity:1; transform:none; filter:blur(0); } }

/* ── piede: un bottone d'oro, una riga che spiega, due link piccoli ── */
.av-piede{ position:relative; z-index:4; flex:none; display:flex; flex-direction:column; align-items:center; padding:22px 24px calc(var(--safeB,0px) + 14px); animation:avTesto .7s var(--ease) .9s both; }
#avvio .go{ position:relative; overflow:hidden; width:100%; max-width:340px; height:58px; border:0; border-radius:20px; padding:0 18px; font:800 17px var(--f-ui); letter-spacing:-.005em; background:var(--oro,#C9991A); color:var(--oro-ink,#1A1300);
  box-shadow:0 14px 40px rgba(201,153,26,.28), inset 0 1px 0 rgba(255,255,255,.28); transition:transform .12s var(--ease), box-shadow .3s var(--ease), background .3s; }
#avvio .go .av-lampo{ position:absolute; width:260px; height:260px; margin:-130px 0 0 -130px; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(closest-side,rgba(255,244,214,.9),rgba(255,244,214,0)); }
#avvio .go.tocco .av-lampo{ animation:avLampo .42s ease-out both; }
@keyframes avLampo{ from{ opacity:.95; transform:scale(.2); } to{ opacity:0; transform:scale(1.2); } }
#avvio .s{ margin:12px auto 0; max-width:300px; color:var(--muto,#B8BFD0); font:500 13px/1.4 var(--f-ui); }
#avvio .alt{ margin:2px 0 0; padding:14px 16px; border:0; background:none; color:#fff; font:700 14px var(--f-ui); opacity:.78; }
#avvio .piccolo{ position:static; padding:2px 0 0; font:600 12px var(--f-ui); color:var(--muto,#B8BFD0); } #avvio .piccolo a{ display:inline-block; padding:14px 6px; margin:-14px -6px; color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px; }
#avvio .firma{ position:static; margin-top:4px; font:700 11px var(--f-ui); color:rgba(184,191,208,.66); }

/* ── accensione in corso: il bottone diventa una luce che scorre, la riga racconta cosa succede ── */
#avvio[data-stato="carico"] .go{ pointer-events:none; background:#5b460e; color:rgba(255,244,214,.95); box-shadow:none; }
#avvio[data-stato="carico"] .go::before{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 20%,rgba(255,214,120,.8) 50%,transparent 80%); transform:translateX(-100%); animation:avScorre 1.25s ease-in-out infinite; mix-blend-mode:screen; }
#avvio .go span{ position:relative; }
@keyframes avScorre{ to{ transform:translateX(100%); } }
#avvio[data-stato="carico"] .alt, #avvio[data-stato="carico"] .piccolo, #avvio[data-stato="carico"] .firma{ opacity:0; pointer-events:none; transition:opacity .3s; }
#avvio[data-stato="uscita"]{ opacity:0; pointer-events:none; transition-duration:.7s; }

/* ── offline ── */
#avvio[data-rete="no"] .go{ background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px var(--filo,rgba(255,255,255,.12)); }
#avvio[data-rete="no"] .claim{ color:var(--muto,#B8BFD0); }
#avvio .go.scuoti{ animation:avScuoti .32s; } @keyframes avScuoti{ 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }

/* ── schede di vetro: fotocamera negata, bussola negata ── */
.av-scheda{ position:fixed; left:12px; right:12px; bottom:calc(var(--safeB,0px) + var(--dock,66px) + 22px); z-index:35; max-width:420px; margin:0 auto; padding:16px 16px 14px; border-radius:22px; text-align:left; color:#fff;
  background:var(--vetro-forte,rgba(8,12,24,.78)); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:inset 0 0 0 1px var(--filo,rgba(255,255,255,.12)), 0 18px 50px rgba(0,0,0,.45);
  transform:translateY(24px); opacity:0; transition:transform .32s var(--ease), opacity .32s var(--ease); }
.av-scheda.on{ transform:none; opacity:1; }
.av-scheda b{ display:block; font:900 20px/1.2 var(--f-display); margin:0 28px 4px 0; color:var(--luce,#FFF4D6); }
.av-scheda p{ margin:0; font:500 14px/1.4 var(--f-ui); color:var(--muto,#B8BFD0); }
.av-scheda .av-az{ display:flex; gap:8px; margin-top:12px; }
.av-scheda button, .av-scheda a.av-b{ flex:1; height:44px; border:0; border-radius:99px; font:700 14px var(--f-ui); color:#fff; background:var(--vetro-chiaro,rgba(255,255,255,.08)); box-shadow:inset 0 0 0 1px var(--filo,rgba(255,255,255,.12)); display:flex; align-items:center; justify-content:center; text-decoration:none; }
.av-scheda .oro{ background:var(--oro,#C9991A); color:var(--oro-ink,#1A1300); box-shadow:none; }
.av-scheda .av-x{ position:absolute; top:8px; right:8px; flex:none; width:32px; height:32px; padding:0; font-size:15px; }
.av-scheda .av-passo{ display:flex; align-items:center; gap:12px; }
.av-scheda .av-freccia{ flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,244,214,.12); box-shadow:inset 0 0 0 1px rgba(255,244,214,.25); }
.av-scheda .av-freccia svg{ width:22px; height:22px; stroke:var(--luce,#FFF4D6); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

@media (prefers-reduced-motion: reduce){
  .av-box .av-led .av-tela{ animation:none !important; filter:none; } .av-box .av-led .av-alone{ opacity:.5; transition:none; } .av-box .av-led .av-pozza{ opacity:.55; transition:none; }
  .av-fin.lit{ opacity:.85; transition:none; } .av-brace{ opacity:1; transition:none; } .av-onda{ display:none; }
  .av-marchio, #avvio .claim, .av-piede{ animation:none; } #avvio .go::before{ animation:none; }
}
@media (max-height:700px){ #avvio .av-marchio{ width:min(230px,64vw); margin-bottom:8px; } #avvio .claim{ font-size:18px; } .av-piede{ padding-top:14px; } #avvio .firma{ display:none; } }