/* Presentazione del sistema DPOI per gli studenti (27/10/2026).
   Stessi colori e stesso stile «centro di controllo» della cabina (ologramma.css): contorni azzurri, angoli tagliati,
   bagliori solo su bordi e linee, mai sul testo. Palco fisso 1600 x 900 ridimensionato sullo schermo (proiettore, iPad, Mac).
   Con «riduci movimento» tutto resta fermo. */
:root {
  --fondo: #03070f; --pannello: #081426; --pannello2: #0b1b33;
  --testo: #eaf6ff; --sec: #a3bdd6; --eti: #86a3c2;
  --acc: #5ee0ff; --avviso: #ff9a3d; --ok: #52eab0; --no: #ff6b6b;
  --linea: #1b3d63; --bordo: #24588c;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--testo);
  background:
    radial-gradient(1100px 600px at 50% 35%, rgba(46,140,220,.20), transparent 70%),
    linear-gradient(rgba(94,224,255,.05) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(94,224,255,.05) 1px, transparent 1px) 0 0/40px 40px, var(--fondo);
  -webkit-tap-highlight-color: transparent;
}

/* ---------- sfondo meccanico ---------- */
.sfondo { position: fixed; inset: 0; pointer-events: none; opacity: .22; }
.sfondo svg { position: absolute; fill: none; stroke: var(--acc); stroke-width: 1.5; }
.sf-a { width: 775px; left: -160px; bottom: -200px; } /* stessa scala per le due ruote: 1,55 px per unità */
.sf-c { width: 360px; right: -90px; top: -80px; }
.tratteggio { stroke-dasharray: 3 9; }
.primitiva { stroke-width: .75; stroke-dasharray: 26 6 2 6; } /* linea fine: metà del contorno (1,5) */ /* circonferenze primitive a tratto-punto (pathLength: cicli interi) */
.gira { animation: gira 60s linear infinite; }
.gira-inv { animation: gira 30s linear infinite reverse; }
.gira-lento { animation: gira 90s linear infinite; }
.gira-inv-veloce { animation: gira 7s linear infinite reverse; } /* 14 denti contro 24: 12 s × 14/24 */
.fine-ruote .gira { animation-duration: 12s; }
@keyframes gira { to { transform: rotate(360deg); } }
.scan { position: absolute; left: 0; right: 0; height: 120px; top: 0;
  background: linear-gradient(180deg, transparent, rgba(94,224,255,.10), transparent); animation: scansione 9s linear infinite; }
@keyframes scansione { from { transform: translateY(-15vh); } to { transform: translateY(115vh); } }

/* ---------- palco 1600 x 900 ---------- */
.cornice { position: fixed; inset: 0; overflow: hidden; }
.palco { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: center center; transform: translate(-50%, -50%) scale(var(--scala, 1));
  display: grid; grid-template-rows: 64px 1fr 56px; }
.palco::before, .palco::after { content: ""; position: absolute; width: 34px; height: 34px; border: 2px solid var(--acc); pointer-events: none; opacity: .8; }
.palco::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.palco::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.testa { display: flex; align-items: center; gap: 18px; padding: 0 36px; border-bottom: 1px solid var(--linea); position: relative; }
.testa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent 0 45%, var(--acc) 50%, transparent 55% 100%) 0 0/300% 100% no-repeat; animation: corre 6s linear infinite; }
@keyframes corre { from { background-position: 100% 0; } to { background-position: 0 0; } }
.logo { font-size: 18px; letter-spacing: .16em; color: var(--acc); font-weight: 600; }
.sistemi { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--ok); border: 1px solid rgba(82,234,176,.4); padding: 4px 10px; display: flex; align-items: center; gap: 8px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulsa 1.6s ease-in-out infinite; display: inline-block; }
@keyframes pulsa { 50% { opacity: .35; } }
.spazio { flex: 1; }
.modulo { font-family: var(--mono); font-size: 14px; letter-spacing: .14em; color: var(--eti); }
.scelta-classe { display: flex; border: 1px solid var(--bordo); }
.scelta-classe button { font: 600 16px/1 inherit; font-family: inherit; color: var(--sec); background: transparent; border: 0; padding: 10px 16px; cursor: pointer; }
.scelta-classe button + button { border-left: 1px solid var(--bordo); }
.scelta-classe button[aria-pressed="true"] { background: var(--acc); color: var(--fondo); }

.piede { display: flex; align-items: center; gap: 18px; padding: 0 36px; border-top: 1px solid var(--linea); }
.nav { font: 28px/1 inherit; font-family: inherit; color: var(--acc); background: rgba(94,224,255,.08); border: 1px solid var(--bordo); width: 48px; height: 40px; cursor: pointer; }
.nav.piccolo { font-size: 20px; }
.nav:hover { background: rgba(94,224,255,.2); }
.avanzamento { flex: 1; height: 6px; background: #0f2742; position: relative; overflow: hidden; }
.avanzamento i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc); box-shadow: 0 0 10px var(--acc); transition: width .5s ease; }
.nome-slide { font-family: var(--mono); font-size: 14px; letter-spacing: .14em; color: var(--eti); min-width: 200px; text-align: right; text-transform: uppercase; }

/* ---------- slide ---------- */
.slide-tutte { position: relative; overflow: hidden; }
.slide { position: absolute; inset: 0; padding: 40px 64px 32px; visibility: hidden; opacity: 0; transform: translateX(60px);
  transition: opacity .55s ease, transform .55s ease, visibility 0s .55s; }
.slide.attiva { visibility: visible; opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
.slide.prima { transform: translateX(-60px); }
.titolo { margin: 0 0 30px; font-size: 44px; font-weight: 600; display: flex; align-items: center; gap: 22px; }
.titolo .num { font-family: var(--mono); font-size: 18px; color: var(--fondo); background: var(--acc); padding: 6px 10px; letter-spacing: .1em; }
.eti { font-family: var(--mono); font-size: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--eti); margin: 0 0 12px; }
.acc { color: var(--acc); }
.intro { font-size: 24px; line-height: 1.45; color: var(--sec); max-width: 1200px; margin: 0 0 40px; }
.intro b { color: var(--testo); }
.nota-basso { position: absolute; left: 64px; right: 64px; bottom: 34px; margin: 0; font-size: 20px; color: var(--sec); border-top: 1px solid var(--linea); padding-top: 16px; }

/* pannelli ad angoli tagliati, come nella cabina */
.p { position: relative; background: linear-gradient(180deg, var(--pannello2), var(--pannello)); border: 1px solid var(--bordo); padding: 26px 28px;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow: inset 0 0 0 1px rgba(94,224,255,.08), inset 0 0 40px rgba(94,224,255,.06); }
.p::before { content: ""; position: absolute; left: 18px; right: 40%; top: 0; height: 2px; background: linear-gradient(90deg, var(--acc), transparent); box-shadow: 0 0 12px var(--acc); }

/* comparsa a scaglioni degli elementi della slide attiva */
.slide .entra { opacity: 0; transform: translateY(18px); }
.slide.attiva .entra { animation: entra .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
@keyframes entra { to { opacity: 1; transform: none; } }

/* 01 avvio */
.s-avvio { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.titolo-grande { font-size: 118px; line-height: .95; margin: 0 0 24px; letter-spacing: .04em; font-weight: 700; }
.sotto { font-size: 26px; color: var(--sec); line-height: 1.4; margin: 0 0 36px; max-width: 640px; }
.avvio-log { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 18px; letter-spacing: .08em; max-width: 620px; }
.avvio-log li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--linea); }
.avvio-log li::before { content: "›"; color: var(--acc); margin-right: 12px; }
.avvio-log span { flex: 1; color: var(--sec); }
.avvio-log .ok { color: var(--ok); } .avvio-log .arr { color: var(--avviso); }
.suggerimento { margin: 30px 0 0; font-family: var(--mono); font-size: 15px; letter-spacing: .14em; color: var(--eti); animation: pulsa 2s ease-in-out infinite; }
.col-3d { padding: 0; height: 640px; }
.col-3d .tela { width: 100%; height: 100%; display: block; }
.col-3d .tela[hidden] { display: none; }
.tag-3d { position: absolute; left: 26px; right: 26px; bottom: 20px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 15px; letter-spacing: .14em; color: var(--eti); }
.tag-3d b { color: var(--avviso); }

/* 02 mappa */
.s-mappa .mappa { position: absolute; left: 80px; top: 170px; width: 1440px; height: 600px; }
.filo { fill: none; stroke: var(--acc); stroke-width: 2; opacity: .55; }
.filo.tratt { stroke: var(--avviso); stroke-dasharray: 10 8; }
.impulso { fill: var(--acc); filter: drop-shadow(0 0 6px var(--acc)); }
.impulso.arancio { fill: var(--avviso); filter: drop-shadow(0 0 6px var(--avviso)); }
.nodi { position: absolute; left: 80px; top: 170px; width: 1440px; height: 600px; }
.nodo { position: absolute; width: 300px; padding: 22px 24px; }
.nodo h3 { margin: 0 0 8px; font-size: 28px; }
.nodo p { margin: 0; font-size: 18px; line-height: 1.4; color: var(--sec); }
.nodo b { color: var(--avviso); }
.n-num { position: absolute; right: 22px; top: 18px; font-family: var(--mono); font-size: 32px; color: var(--acc); opacity: .5; }
.nodo-arr { border-color: rgba(255,154,61,.6); }
.nodo-arr::before { background: linear-gradient(90deg, var(--avviso), transparent); box-shadow: 0 0 12px var(--avviso); }

/* 03 in aula */
.aula-scena { display: grid; grid-template-columns: 400px 150px 760px; align-items: center; gap: 20px; }
.ipad { position: relative; }
.ipad-schermo { border: 12px solid #16273f; border-radius: 26px; background: #050d1a; padding: 18px; display: grid; gap: 14px; box-shadow: 0 0 0 1px var(--bordo), 0 0 30px rgba(94,224,255,.15); }
.mini-slide svg { width: 100%; display: block; }
.ipad-comandi { display: flex; gap: 10px; justify-content: center; }
.ipad-comandi i { width: 40px; height: 26px; border: 1px solid var(--bordo); }
.ipad-comandi i.att { background: var(--avviso); border-color: var(--avviso); }
.dida { display: block; margin-top: 12px; text-align: center; font-family: var(--mono); font-size: 15px; letter-spacing: .14em; color: var(--eti); text-transform: uppercase; }
.raggio { display: flex; gap: 14px; justify-content: center; }
.raggio i { width: 18px; height: 18px; border-top: 3px solid var(--acc); border-right: 3px solid var(--acc); transform: rotate(45deg); opacity: .2; animation: freccia 1.4s infinite; }
.raggio i:nth-child(2) { animation-delay: .2s; } .raggio i:nth-child(3) { animation-delay: .4s; }
@keyframes freccia { 40% { opacity: 1; } }
.telo { position: relative; }
.telo-svg { width: 100%; display: block; box-shadow: 0 0 0 1px var(--bordo), 0 0 50px rgba(94,224,255,.25); }
.tratto { fill: none; stroke: #e0482c; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; }
.tratto-testo { fill: #e0482c; font: 600 15px/1 "Bradley Hand", "Segoe Print", cursive; opacity: 0; }
.s-aula.attiva .tratto { animation: disegna 1.4s ease forwards; }
.s-aula.attiva .t1 { animation-delay: .9s; } .s-aula.attiva .t2 { animation-delay: 2.3s; } .s-aula.attiva .t3 { animation-delay: 3.8s; }
.s-aula.attiva .tratto-testo { animation: compare .5s 3.1s forwards; }
@keyframes disegna { to { stroke-dashoffset: 0; } }
@keyframes compare { to { opacity: 1; } }
.passi { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-size: 21px; line-height: 1.4; color: var(--sec); }
.passi b { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 12px; border: 1px solid var(--acc); color: var(--acc); font-family: var(--mono); }

/* 04 proiettore */
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.codice-box p { font-size: 26px; line-height: 1.45; color: var(--sec); }
.codice-box p b { color: var(--testo); }
.codice { display: flex; gap: 18px; margin: 20px 0 30px; }
.codice span { width: 110px; height: 140px; display: grid; place-items: center; font: 600 80px/1 var(--mono); color: var(--acc); border: 1px solid var(--bordo); background: #050d1a; }
.s-proiettore.attiva .codice span { animation: rullo .9s steps(8) both; }
.s-proiettore.attiva .codice span:nth-child(2) { animation-delay: .2s; } .s-proiettore.attiva .codice span:nth-child(3) { animation-delay: .4s; } .s-proiettore.attiva .codice span:nth-child(4) { animation-delay: .6s; }
@keyframes rullo { 0% { color: transparent; text-shadow: 0 -40px var(--acc), 0 40px var(--acc); } 99% { color: transparent; } 100% { color: var(--acc); text-shadow: none; } }
.si-no { list-style: none; margin: 0; padding: 0; font-size: 28px; }
.si-no li { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.si-no li::before { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-weight: 700; border: 2px solid; }
.si-no .si::before { content: "✓"; color: var(--ok); }
.si-no .no { color: var(--sec); }
.si-no .no::before { content: "✕"; color: var(--no); }

/* 05 programma */
.nastro { display: grid; gap: 14px; }
.unita { display: grid; grid-template-columns: 90px 1fr 260px; align-items: center; gap: 20px; padding: 10px 18px; border: 1px solid var(--linea); background: rgba(255,255,255,.02); font-size: 20px; }
.unita .u-id { font-family: var(--mono); font-weight: 600; color: var(--acc); font-size: 22px; }
.unita .u-barra { display: flex; gap: 3px; }
.unita .u-barra i { flex: 1; height: 14px; background: #0f2742; transition: background .25s; }
.unita .u-barra i.fatta { background: var(--acc); box-shadow: 0 0 6px rgba(94,224,255,.6); }
.unita.qui { border-color: var(--avviso); }
.unita.dopo { opacity: .45; }
.nastro.molte { gap: 9px; }
.nastro.molte .unita { padding: 4px 18px; font-size: 18px; }
.segnale { margin-top: 26px; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 16px; letter-spacing: .12em; color: var(--avviso); text-transform: uppercase; }
.segnale .led { background: var(--avviso); box-shadow: 0 0 8px var(--avviso); }

/* 06 canali */
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.canale { min-height: 420px; padding: 36px 32px; }
.canale svg { width: 96px; height: 96px; fill: none; stroke: var(--acc); stroke-width: 2; margin-bottom: 20px; }
.canale h3 { font-size: 32px; margin: 0 0 14px; }
.canale p { font-size: 24px; line-height: 1.45; color: var(--sec); margin: 0; }
.c-num { position: absolute; right: 28px; top: 22px; font: 600 48px/1 var(--mono); color: var(--acc); opacity: .35; }

/* 07 modello */
.modello-scena { display: grid; grid-template-columns: 1fr 520px; gap: 44px; }
.col-3d.grande { height: 680px; }
.modello-testo h3 { font-size: 40px; margin: 0 0 16px; }
.m-desc { font-size: 22px; line-height: 1.45; color: var(--sec); margin: 0 0 26px; }
.m-fasi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m-fasi li { display: flex; gap: 14px; align-items: center; font-size: 20px; padding: 12px 16px; border: 1px solid var(--linea); color: var(--sec); transition: all .3s; }
.m-fasi li b { font-family: var(--mono); color: var(--acc); min-width: 28px; }
.m-fasi li.accesa { border-color: var(--ok); color: var(--testo); background: rgba(82,234,176,.08); }
.m-fasi li.accesa b { color: var(--ok); }

/* 08 portale */
.badge-arr { font-family: var(--mono); font-size: 16px; letter-spacing: .14em; color: var(--avviso); border: 1px solid var(--avviso); padding: 6px 12px; animation: pulsa 2s infinite; }
.finto-schermo { padding: 0; }
.fs-testa { display: flex; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--linea); font-family: var(--mono); letter-spacing: .1em; color: var(--acc); }
.fs-chi { color: var(--eti); }
.fs-corpo { padding: 20px 24px; }
.fs-eti { font-family: var(--mono); font-size: 14px; letter-spacing: .14em; color: var(--eti); text-transform: uppercase; margin: 6px 0 12px; }
.fs-lezioni { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.fs-lezioni li { display: flex; gap: 14px; padding: 10px 14px; border: 1px solid var(--linea); font-size: 18px; }
.fs-lezioni li b { font-family: var(--mono); color: var(--acc); min-width: 56px; }
.fs-lezioni li.chiusa { opacity: .35; border-style: dashed; }
.fs-lezioni li.chiusa::after { content: "non ancora"; margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--eti); }
.fs-schede { display: flex; gap: 14px; }
.fs-schede i { width: 110px; height: 150px; background: #fff; opacity: .9; box-shadow: 0 0 0 1px var(--bordo); position: relative; }
.fs-schede i::before { content: ""; position: absolute; inset: 22px 14px auto; height: 50px; border: 2px solid #1b3d63; }
.fs-schede i::after { content: ""; position: absolute; left: 14px; right: 30px; bottom: 26px; height: 3px; background: #1b3d63; box-shadow: 0 -12px #1b3d63; }
.punti { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; align-content: start; font-size: 24px; line-height: 1.4; color: var(--sec); }
.punti li { padding-left: 30px; position: relative; }
.punti li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border: 2px solid var(--acc); transform: rotate(45deg); }
.punti b { color: var(--testo); }
.punti .piccolo { font-size: 19px; color: var(--avviso); }
.punti .piccolo::before { border-color: var(--avviso); }

/* 09 regole */
.s-regole h3 { font-size: 32px; margin: 0 0 18px; }
.s-regole ul { margin: 0; padding: 0; list-style: none; font-size: 29px; line-height: 1.3; }
.s-regole li { padding: 22px 0; border-bottom: 1px solid var(--linea); }
.colonna-vedi h3 { color: var(--ok); }
.colonna-vedi li::before { content: "✓  "; color: var(--ok); }
.colonna-docente { border-color: rgba(255,154,61,.6); }
.colonna-docente::before { background: linear-gradient(90deg, var(--avviso), transparent); box-shadow: 0 0 12px var(--avviso); }
.colonna-docente h3 { color: var(--avviso); }
.colonna-docente li { color: var(--sec); }
.colonna-docente li::before { content: "■  "; color: var(--avviso); font-size: 16px; vertical-align: 3px; }

/* 10 dietro le quinte */
.quinte { display: grid; grid-template-columns: 720px 1fr; gap: 50px; align-items: center; }
.q-schema svg { width: 100%; display: block; }
.q-box { fill: rgba(11,27,51,.9); stroke: var(--bordo); stroke-width: 2; }
.q-schema text { fill: var(--testo); font: 600 20px/1 var(--mono); letter-spacing: .1em; text-anchor: middle; }
.q-schema .q-sotto { fill: var(--eti); font-size: 15px; font-weight: 400; }
.lucchetto rect, .lucchetto path { fill: var(--fondo); stroke: var(--ok); stroke-width: 2.5; }
.lucchetto { filter: drop-shadow(0 0 6px rgba(82,234,176,.7)); }

/* 11 numeri */
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 40px; }
.numero { text-align: center; padding: 60px 20px; }
.numero b { display: block; font: 600 150px/1 var(--mono); color: var(--acc); }
.numero span { display: block; margin-top: 18px; font-size: 26px; color: var(--sec); }

/* 12 fine */
.s-fine { display: grid; place-items: center; text-align: center; }
.s-fine .sotto { margin: 0 auto; font-size: 32px; }
.fine-ruote { width: 520px; fill: none; stroke: var(--acc); stroke-width: 2; margin-bottom: 20px; }
.fine-ruote .gira { transform-origin: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slide .entra { opacity: 1; transform: none; }
  .tratto { stroke-dashoffset: 0; } .tratto-testo { opacity: 1; }
}