/* Esploso impianto -- Green Service */
.esp{--bg:#0B1B2B;--ink:#EAF1F8;--mut:#8FA6BC;--line:rgba(255,255,255,.12);
  --g:#4ADE80;--a:#F5A524;--r:#FF6B6B;
  background:var(--bg);color:var(--ink);padding:56px 0 64px;overflow:hidden}
.esp *{box-sizing:border-box}
.esp-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.esp-kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--a);
  font-weight:700;margin:0 0 12px}
.esp-h{font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.18;margin:0 0 10px;font-weight:700;
  letter-spacing:-.01em}
.esp-sub{color:var(--mut);max-width:62ch;margin:0 0 26px;line-height:1.55;font-size:1rem}

/* Palco. .esp-vis porta il disegno e viene ingrandito e spostato come una
   telecamera; .esp-hud ha lo stesso riquadro ma non viene trasformato, cosi'
   etichette e callout restano leggibili invece di ingrandirsi anche loro. */
.esp-stage{position:relative;width:100%;aspect-ratio:2200/929;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(118% 92% at 50% 44%,#12314A 0%,#0B1B2B 70%)}
.esp-vis{position:relative;flex:0 0 auto;width:100%;aspect-ratio:2200/929;
  transform-origin:0 0}
/* La transizione entra solo DOPO la prima inquadratura: la prima va messa
   secca, altrimenti si vedrebbe uno zoom all'apertura e, su una pagina in
   secondo piano (dove il compositore e' fermo), resterebbe ferma a zoom 1. */
.esp-vis.anim{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.esp-hud{position:absolute;left:0;top:50%;width:100%;aspect-ratio:2200/929;
  transform:translateY(-50%);pointer-events:none}
.esp-lay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  transition:opacity .5s ease,filter .5s ease;will-change:opacity,filter}
.esp-lay.off{filter:grayscale(.88) brightness(.40) contrast(.92)}
.esp-lay.hide{opacity:0}
.esp-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  filter:blur(16px);opacity:0;mix-blend-mode:screen;transition:opacity .5s ease;
  pointer-events:none}
.esp-glow.on{opacity:.6}
.esp-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Ogni classe porta il prefisso esp-. Nomi generici come .note, .tag o .flow
   esistono gia' nel CSS del sito: si dirotterebbero a vicenda in entrambi
   i versi, e il paragrafo .note della sezione batteria diventava una
   targhetta nera illeggibile. */
.esp-flow{fill:none;stroke-linecap:round;stroke-linejoin:round}
.esp-flow-b{stroke:rgba(255,255,255,.085);stroke-width:2.1;transition:opacity .35s ease}
.esp-flow-l{stroke-width:2.8;stroke-dasharray:11 15;opacity:0;transition:opacity .35s ease}
.esp-flow-l.on{opacity:1;animation:espdash 1.05s linear infinite}
.esp-flow-l.rev.on{animation-direction:reverse}
.esp-flow-l.g{stroke:var(--g)}
.esp-flow-l.a{stroke:var(--a)}
@keyframes espdash{to{stroke-dashoffset:-26}}
.esp-cut{opacity:0;transition:opacity .35s ease}
.esp-cut.on{opacity:1}
.esp-cut line{stroke:var(--r);stroke-width:3.6;stroke-linecap:round}

/* etichette dei componenti, sotto il pezzo */
.esp-tag{position:absolute;transform:translate(-50%,0);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut);white-space:nowrap;pointer-events:none;
  transition:color .4s ease,opacity .4s ease}
.esp-tag.hi{color:var(--ink)}
.esp-tag.gone{opacity:0}

/* callout */
.esp-note{position:absolute;width:max-content;max-width:210px;font-size:.78rem;line-height:1.35;
  color:var(--ink);background:rgba(7,18,30,.94);border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;pointer-events:none;opacity:0;transition:opacity .4s ease}
.esp-note.on{opacity:1}
.esp-note.pt{transform:translate(-50%,calc(-100% - 8px));text-align:center}
.esp-note.pr{transform:translate(10px,-50%)}
.esp-note.g{border-color:rgba(74,222,128,.45)}
.esp-note.a{border-color:rgba(245,165,36,.55)}
.esp-note.r{border-color:rgba(255,107,107,.52)}
.esp-note b{display:block;font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:2px}
.esp-note.g b{color:var(--g)} .esp-note.a b{color:var(--a)} .esp-note.r b{color:var(--r)}
.esp-note span{color:#C6D5E4}

.esp-howto{color:var(--mut);font-size:.84rem;line-height:1.5;margin:-14px 0 20px;max-width:66ch}
.esp-howto b{color:var(--ink);font-weight:600}

/* comandi */
.esp-bar{display:flex;align-items:center;gap:8px;margin:15px 0 0}
.esp-ctl{appearance:none;width:38px;height:38px;padding:0;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,color .2s}
.esp-ctl:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26)}
.esp-ctl:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.esp-ctl svg{width:15px;height:15px;fill:currentColor;display:block}
/* Le icone le commuta il CSS leggendo aria-pressed. In JS non si puo' usare
   la proprieta' .hidden su un <svg>: e' definita su HTMLElement, non su
   SVGElement, quindi l'assegnazione non scrive l'attributo e non succede nulla. */
.esp-play .ic-pause{display:none}
.esp-play[aria-pressed="true"] .ic-play{display:none}
.esp-play[aria-pressed="true"] .ic-pause{display:block}
.esp-play{width:46px;background:rgba(245,165,36,.14);border-color:rgba(245,165,36,.42);
  color:var(--a)}
.esp-play:hover{background:rgba(245,165,36,.24);border-color:rgba(245,165,36,.6)}
.esp-play svg{width:17px;height:17px}
.esp-pos{font-size:.78rem;color:var(--mut);font-variant-numeric:tabular-nums;
  margin-left:4px;letter-spacing:.04em}

/* passi */
.esp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0 0}
.esp-step{appearance:none;background:rgba(255,255,255,.035);border:1px solid var(--line);
  color:var(--mut);border-radius:10px;padding:11px 12px;text-align:left;cursor:pointer;
  font:inherit;font-size:.82rem;line-height:1.3;transition:background .25s,color .25s,
  border-color .25s;position:relative;overflow:hidden}
.esp-step:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.esp-step[aria-selected="true"]{background:rgba(255,255,255,.09);color:var(--ink);
  border-color:rgba(255,255,255,.3)}
.esp-step em{display:block;font-style:normal;font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mut);margin-bottom:3px}
.esp-step[aria-selected="true"] em{color:var(--a)}
.esp-step:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.esp-step i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--a);display:block}
.esp-step.run i{width:100%;transition:width var(--dur,6s) linear}

.esp-cap{margin:18px 0 0;padding:17px 19px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.028);min-height:128px}
.esp-cap h4{margin:0 0 7px;font-size:1.04rem;font-weight:700;line-height:1.3}
.esp-cap p{margin:0;color:var(--mut);line-height:1.62;font-size:.94rem;max-width:80ch}
.esp-foot{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;
  justify-content:space-between;margin:16px 0 0;font-size:.76rem;color:var(--mut)}
.esp-foot p{margin:0;opacity:.8}
.esp-by{white-space:nowrap;letter-spacing:.05em;opacity:1}
.esp-by a{color:var(--mut);font-weight:600;text-decoration:none;padding-bottom:1px;
  border-bottom:1px solid rgba(255,255,255,.22);transition:color .2s,border-color .2s}
.esp-by a:hover{color:var(--a);border-color:var(--a)}
.esp-by a:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:2px}

@media (max-width:860px){
  .esp{padding:40px 0 48px}
  .esp-steps{grid-template-columns:repeat(2,1fr)}
  .esp-cap{min-height:0}
}
/* Schermo stretto: il palco si alza e la telecamera inquadra un pezzo per volta.
   Mostrare sette componenti su 375px li ridurrebbe a quaranta pixel d'altezza. */
@media (max-width:760px){
  .esp-stage{aspect-ratio:3/2}
  .esp-tag{font-size:.60rem;letter-spacing:.07em}
  .esp-note{max-width:170px;font-size:.74rem;padding:6px 9px}
  .esp-note b{font-size:.63rem}
  .esp-howto{font-size:.8rem}
}
@media (max-width:420px){
  .esp-note{max-width:152px;font-size:.71rem}
  .esp-steps{gap:6px}
  .esp-step{padding:9px 10px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .esp-flow-l.on{animation:none;stroke-dasharray:none;opacity:.9}
  .esp-lay,.esp-glow,.esp-note,.esp-tag,.esp-vis{transition:none}
  .esp-step.run i{transition:none;width:0}
}