/* ==========================================================================================
   home.css — la home (agente home). BRIEF §6.1.
   Mobile-first; le modalità «in pin» (lavori, palco) si accendono da JS con una classe solo da
   1024 px e senza movimento ridotto: senza JS restano sequenze statiche leggibili.
   Prefisso h- per non scontrarsi con i componenti comuni.
   ========================================================================================== */

.pagina-home { --h-pausa: clamp(120px, 22vh, 280px); }

.h-capacita__testa, .h-vetrina__testa { row-gap: 28px; align-items: end; }
.h-capacita__testa .t-titolo, .h-vetrina__testa .t-titolo { max-width: 100%; }
.h-capacita__testa .t-lead, .h-vetrina__testa .t-lead { max-width: 34ch; }

/* ---------------------------------------------------------------- 2. HERO ------------------ */
/* Cinque strati alla stessa misura (object-fit: cover, stesso punto di fuoco), dal fondo:
   foto intera → nome pieno → Marco ritagliato → velo e grana → nome solo contorno, mascherato
   dalla sagoma di Marco. Risultato: il nome passa dietro la figura centrale e sopra di lei resta
   solo il contorno; le lettere a cavallo del bordo sono metà piene e metà filo. */
.h-hero {
  --fuoco: 50% 30%;
  --nome-fs: clamp(64px, min(19.4vw, 31svh), 330px);
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--nero);
}
.h-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; will-change: clip-path; }
.h-hero__scena { position: absolute; inset: 0; will-change: transform; }
.h-hero__foto {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--nero-2) var(--lqip-d) 50% 30% / cover no-repeat;
}
.h-hero__foto img, .h-hero__ritaglio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco);
}
/* raggi X sulle tre figure (isole/raggi-x.js): la tela ricalca la foto (cover + stesso punto di fuoco) */
.h-hero__codice { pointer-events: none; }
.h-raggi { position: absolute; inset: 0; pointer-events: none; }
.h-raggi canvas { display: block; width: 100%; height: 100%; }
.h-hero__maschera {
  -webkit-mask: var(--ritaglio) var(--fuoco) / cover no-repeat;
  mask: var(--ritaglio) var(--fuoco) / cover no-repeat;
}

/* velo: vignetta + sfumatura verso il nero e una grana leggera */
.h-hero__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(6, 5, 12, 0) 48%, rgba(6, 5, 12, .55) 100%),
    linear-gradient(to bottom, rgba(6, 5, 12, .45) 0%, rgba(6, 5, 12, 0) 20%, rgba(6, 5, 12, 0) 70%, rgba(6, 5, 12, .7) 100%);
}
.h-hero__velo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../img/grana.webp") repeat;
  background-size: 96px 96px;
  opacity: .14;
  mix-blend-mode: overlay;
}
@media (min-width: 1500px) { .h-hero__velo::after { opacity: .22; background-size: 112px 112px; } }

/* il nome: due righe enormi, MARCO a sinistra e MERLINA a destra, appoggiate sul busto */
.h-hero__testo { position: absolute; inset: 0; will-change: transform; }
.h-hero__nome {
  position: absolute;
  left: var(--margine);
  right: var(--margine);
  bottom: calc(var(--hud-h) + 2svh);
  margin: 0;
  display: grid;
  font: var(--peso-display) var(--nome-fs)/.8 var(--font-display);
  letter-spacing: -.055em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.h-hero__riga { display: block; overflow-y: clip; overflow-clip-margin: .08em; padding-block: .04em; }
.h-hero__riga--1 { text-align: left; padding-left: .02em; }
.h-hero__riga--2 { text-align: right; margin-top: -.06em; }
.h-hero__l { display: inline-block; will-change: transform; }
.h-hero__nome--pieno { color: var(--carta); }
.h-hero__nome--bordo { color: transparent; -webkit-text-stroke: max(1.4px, .0062em) var(--carta); }

/* senza JS la scena è subito lì; con JS parte scura e si accende (salvagente se il motore non arriva) */
html.mm-anima .h-hero:not(.is-pronto) .h-hero__scena { filter: brightness(.25); animation: h-salva 1.2s 3.2s forwards; }
html.mm-anima .h-hero:not(.is-pronto) .h-hero__l { transform: translateY(105%); animation: h-salva 1.2s 3.2s forwards; }
@keyframes h-salva { to { filter: none; transform: none; } }

.h-hero__hud {
  position: absolute;
  inset: 128px var(--margine) calc(var(--hud-h) + 30px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.h-hero__angolo { margin: 0; display: grid; gap: 6px; align-content: start; }
.h-hero__angolo--2 { justify-self: end; text-align: right; }
.h-hero__angolo--3 { grid-row: 2; align-self: start; }
.h-hero__angolo--4 { grid-row: 2; grid-column: 2; justify-self: end; align-self: start; pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; }
.h-hero__filo { position: relative; width: 1px; height: 34px; background: rgba(239, 233, 225, .25); overflow: hidden; }
.h-hero__filo::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--carta); transform: translateY(-100%); animation: h-filo 2.2s var(--curva-sipario) infinite; }
@keyframes h-filo { to { transform: translateY(250%); } }

@media (max-width: 819px) {
  .h-hero { --fuoco: 52% 30%; --nome-fs: clamp(56px, 21.5vw, 120px); min-height: 600px; }
  /* sul telefono il busto riempie la larghezza: il nome passa all'altezza del collo, dove ai lati
     resta il fondale e le lettere tornano metà piene e metà filo */
  .h-hero__nome { top: 44svh; bottom: auto; }
  .h-hero__hud { inset: 88px var(--margine) calc(var(--hud-h) + 18px); }
  .h-hero__angolo--1 { max-width: 15ch; }
  .h-hero__angolo--3, .h-hero__angolo--4 { grid-row: 3; align-self: end; }
  .h-hero__angolo--3 { display: none; }
}

/* ---------------------------------------------------------------- 3. TESI ------------------ */
/* la sezione è trasparente: dietro c'è il cielo di cielo.js. È più alta dello schermo perché la
   scena ha bisogno di strada per avvicinarsi e poi salire; la frase resta ferma al centro (sticky). */
.h-tesi { position: relative; min-height: 150svh; overflow-x: clip; display: grid; align-items: center; }
/* la frase scorre con la pagina (sale); poi l'onda di fuoco di «chi sono» (onde.js, data-onda-corsa)
   la raggiunge e la copre */
.h-tesi__dentro {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  padding-block: 120px 80px;
}
/* velo scuro dietro le parole, sfumato su tutti i lati: nessun bordo dove inizia la sezione */
.h-tesi__dentro::before {
  content: "";
  position: absolute;
  inset: -20% calc(var(--margine) * -1);
  z-index: -1;
  background:
    radial-gradient(70% 62% at 50% 50%, rgba(6, 5, 12, .78) 0%, rgba(6, 5, 12, .55) 48%, rgba(6, 5, 12, 0) 78%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  pointer-events: none;
}
.h-tesi__frase {
  font: 400 clamp(34px, min(7.2vw, 12.5svh), 112px)/.9 var(--font-display);
  letter-spacing: -.05em;
  text-transform: uppercase;
  text-wrap: initial;
  text-align: center;   /* frase centrata (richiesta di Marco): niente più righe sfalsate */
  text-shadow: 0 2px 6px rgba(6, 5, 12, .55), 0 0 48px rgba(6, 5, 12, .85);
}
.h-tesi__a { display: block; color: var(--carta); }
.h-tesi__b { display: block; margin-top: .14em; color: var(--carta); }
.h-tesi__riga { display: block; }
.h-tesi__b .h-tesi__riga { white-space: nowrap; }
.h-tesi__piede { margin: clamp(40px, 8vh, 96px) auto 0; max-width: 46ch; text-align: center; }
.h-tesi__prova {
  margin: 0;
  font: 400 clamp(16px, 1.2vw, 18px)/1.9 var(--font-sans);
  color: var(--carta);
  text-shadow: 0 1px 12px rgba(6, 5, 12, .9);
}
.h-tesi__prova kbd {
  display: inline-block;
  min-width: 2.1em;
  padding: 1px 8px;
  font: 500 .82em/1.5 var(--font-mono);
  text-align: center;
  color: var(--carta);
  background: rgba(6, 5, 12, .6);
  box-shadow: inset 0 0 0 1px var(--linea-forte), inset 0 -2px 0 rgba(239, 233, 225, .14);
  border-radius: 4px;
}
.h-tesi__cantiere {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 14px;
  border-radius: 999px;
  font: 500 .82em/1.6 var(--font-mono);
  color: var(--carta);
  background: rgba(6, 5, 12, .6);
  box-shadow: inset 0 0 0 1px var(--viola-luce);
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background-color .4s var(--curva-expo), color .4s var(--curva-expo);
}
.h-tesi__cantiere::before { content: ""; width: 7px; height: 7px; box-shadow: inset 0 0 0 1px currentColor; }
.h-tesi__cantiere:hover, .h-tesi__cantiere[aria-pressed="true"] { background: var(--viola-luce); color: var(--nero); }
.h-tesi__cantiere[aria-pressed="true"]::before { background: var(--neon); box-shadow: 0 0 8px var(--neon); }

/* ---------------------------------------------------------------- 3b. CHI SONO ------------- */
/* Il motore «finestra fissa» di inherited.band (stesso di /chi-sono/): ogni scena è ritagliata con
   clip-path e ha la sua cornice in position:fixed al centro; scorrendo, il confine fra due scene passa
   dentro la cornice e il ritratto cambia come una tendina. Su metà schermo un primissimo piano (nella
   prima scena parte a tutto schermo e si ritira a metà), sull'altra il nome enorme. Movimento: home.js → chi().
   Sotto 1024 px: niente fissi, scene impilate con la cornice che morde il primissimo piano. */
.h-chi { position: relative; padding-top: var(--h-pausa); }
.h-tesi + .h-chi { padding-top: 0; }
.h-chi__scena { position: relative; isolation: isolate; }
.h-chi__macro { position: relative; overflow: hidden; background: var(--nero-2); }
/* livello di composizione proprio: la foto ha maschera + filtro ed è grande mezzo schermo; senza, quando entra
   «Cosa sa fare un sito» Chrome la ridisegnava da capo (un fotogramma da ~80 ms, lo scatto nello scroll) */
.h-chi__macro .foto { position: absolute; inset: 0; will-change: transform; }
.h-chi__macro .foto img { filter: brightness(.72) saturate(1.05) contrast(1.06); }
.h-chi__carta { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--nero-2); box-shadow: 0 0 0 1px var(--linea), 0 40px 120px -40px rgba(105, 49, 170, .6); }
.h-chi__carta .foto { position: absolute; inset: 0; }
.h-chi__carta-barra { position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; width: 2px; background: rgba(239, 233, 225, .12); }
.h-chi__carta-barra i { display: block; height: 100%; background: linear-gradient(var(--viola-luce), var(--neon)); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.h-chi__testo { position: relative; z-index: 2; display: grid; gap: clamp(22px, 3.4vh, 36px); justify-items: start; align-content: center; }
.h-chi__nome {
  margin: 0;
  font: 300 clamp(48px, 6.6vw, 120px)/.86 var(--font-display);
  letter-spacing: -.055em;
  text-transform: uppercase;
  color: var(--carta);
  text-shadow: 0 2px 30px rgba(6, 5, 12, .6);
}
.h-chi__nome .serif { text-transform: none; }
.h-chi__riga { display: block; white-space: nowrap; }
.h-chi__riga--r { padding-left: 1em; }
.h-chi__parola { display: inline-block; white-space: nowrap; }
.h-chi__l { display: inline-block; text-align: center; }
.h-chi__ruoli, .h-chi__luogo {
  margin: 0;
  display: grid;
  justify-items: start;
  font: 500 clamp(14px, 1.05vw, 16px)/1.35 var(--font-sans);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--carta);
}
.h-chi__ruoli span:nth-child(2) { padding-left: 2.4em; }
.h-chi__ruoli span:nth-child(3) { padding-left: .8em; }
.h-chi__luogo { color: var(--viola-luce); }
.h-chi__voci { display: grid; gap: .75em; max-width: 36ch; }
.h-chi__voce { margin: 0; font: 300 clamp(18px, 1.35vw, 21px)/1.5 var(--font-voce); color: var(--carta); max-width: 36ch; }
.h-chi__frase {
  margin: 0;
  font: 300 clamp(36px, 4vw, 72px)/.95 var(--font-display);
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--carta);
  max-width: 22ch;
  text-wrap: balance;
}

@media (max-width: 1023px) {
  .h-chi__scena { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 0 var(--margine); margin-bottom: clamp(88px, 16vh, 150px); }
  .h-chi__macro { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 5; max-height: 78svh; margin-inline: calc(var(--margine) * -1); }
  .h-chi__carta { grid-row: 1; align-self: end; width: 100%; margin-bottom: -18%; z-index: 1; }
  .h-chi__scena--macro-sx .h-chi__carta { grid-column: 7 / -1; }
  .h-chi__scena--macro-dx .h-chi__carta { grid-column: 1 / span 6; }
  .h-chi__testo { grid-column: 1 / -1; margin-top: calc(18% + 28px); }
  .h-chi__nome { font-size: clamp(40px, 12.5vw, 96px); }
  .h-chi__riga { white-space: normal; }
  .h-chi__riga--r { padding-left: .6em; }
}

@media (min-width: 1024px) {
  .h-chi__scene { --carta-l: min(24vw, 410px, calc(60svh * .8)); clip-path: inset(0); }
  .h-chi__scena { clip-path: inset(0); min-height: 112svh; display: grid; grid-template-columns: minmax(0, 1fr) var(--carta-l) minmax(0, 1fr); column-gap: calc(var(--gutter) * 2.6); align-items: center; padding: calc(var(--testata-h) + 48px) var(--margine) calc(var(--hud-h) + 64px); }
  .h-chi__macro { position: absolute; top: 0; bottom: 0; width: 50%; z-index: -1; }
  .h-chi__scena--macro-sx .h-chi__macro { left: 0; }
  .h-chi__scena--macro-dx .h-chi__macro { right: 0; }
  .h-chi__scena--macro-sx .h-chi__macro .foto { -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 98%); mask-image: linear-gradient(to right, #000 45%, transparent 98%); }
  .h-chi__scena--macro-dx .h-chi__macro .foto { -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 98%); mask-image: linear-gradient(to left, #000 45%, transparent 98%); }
  /* prima scena: il riquadro parte a tutto schermo (home.js lo ritira a metà), ma la foto sta già nella metà
     sinistra e sfuma nel buio: con una foto verticale, a tutto schermo si vedrebbe solo un dettaglio (l'orecchio) */
  .h-chi__scena--1 .h-chi__macro { width: 100%; }
  .h-chi__scena--1 .h-chi__macro .foto { width: 50%; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 99%); mask-image: linear-gradient(to right, #000 55%, transparent 99%); }

  .h-chi__carta { position: fixed; left: 50%; top: 50%; z-index: 1; width: var(--carta-l); transform: translate(-50%, -46%); }
  /* le cornici fisse sono sempre «in vista» per il caricamento pigro: l'immagine parte solo vicino alla scena */
  html.js .h-chi__scena:not(.is-vicina) .h-chi__carta img { display: none; }

  .h-chi__testo { grid-row: 1; }
  /* il nome sta nella sua colonna: misura sulla parola più lunga di ogni scena */
  .h-chi__nome { font-size: min(5.4vw, 104px); }
  .h-chi__scena--3 .h-chi__nome { font-size: min(3.9vw, 76px); }
  .h-chi__frase { font-size: min(3.4vw, 64px); max-width: 22ch; }
  .h-chi__scena--macro-sx .h-chi__testo { grid-column: 3; }
  .h-chi__scena--macro-dx .h-chi__testo { grid-column: 1; justify-self: end; }
  .h-chi__scena--macro-dx .h-chi__testo .h-chi__nome { text-align: left; }
}

/* ---------------------------------------------------------------- 4. LAVORI ---------------- */
/* il campo trascinabile è quello di /i-miei-lavori/ (lavori.css + lavori.js): qui solo il titolo */
.h-lavori-testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; padding-top: var(--h-pausa); padding-bottom: var(--aria); }
.h-lavori-testa__titolo { margin: 0; }
.pagina-home .lavori { padding-bottom: 0; }

/* ---------------------------------------------------------------- 5. IL MESTIERE ----------- */
/* elenco a righe (dragonfly2 «spotlight»): parola enorme in serif, etichetta piccola accanto, filetti.
   Al passaggio la riga si riempie di viola dal basso e la sua dimostrazione si accende (home.js). */
.h-capacita { position: relative; padding-top: var(--ritmo); padding-bottom: var(--h-pausa); }  /* aria per l'onda del blocco dopo */
.h-capacita__elenco { list-style: none; margin: var(--aria) 0 0; padding: 0; border-top: 1px solid var(--linea); }
.h-cap {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "num nome tag" "num nota nota";
  align-items: baseline;
  column-gap: var(--gutter);
  padding: 22px var(--margine) 20px;
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
  cursor: default;
}
.h-cap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--viola);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .55s var(--curva-sipario);
}
.h-cap.is-attiva::before { clip-path: inset(0 0 0 0); }
.h-cap__num { grid-area: num; color: var(--carta-3); transition: color .4s; }
.h-cap__nome {
  grid-area: nome;
  position: relative;
  margin: 0;
  font: 300 clamp(44px, min(6.8vw, 11svh), 108px)/.92 var(--font-display);
  letter-spacing: -.055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.h-cap__parola { position: relative; display: inline-block; }
.h-cap__tag { grid-area: tag; justify-self: end; color: var(--carta-3); transition: color .4s; }
.h-cap__nota {
  grid-area: nota;
  margin: 10px 0 0;
  max-width: 52ch;
  color: var(--carta-2);
  font-size: 15px;
  line-height: 1.45;
  transition: color .4s;
}
.h-cap.is-attiva .h-cap__num, .h-cap.is-attiva .h-cap__tag, .h-cap.is-attiva .h-cap__nota { color: var(--carta); }
.h-cap__demo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.h-capacita__piede { margin: 22px 0 0; }
@media (max-width: 1023px) {
  .h-cap { grid-template-columns: 1fr auto; grid-template-areas: "num tag" "nome nome" "nota nota"; row-gap: 8px; }
  .h-cap__nome { font-size: clamp(40px, 12vw, 84px); white-space: normal; }
  .h-cap__tag { justify-self: end; }
}
@media (min-width: 1024px) {
  .h-cap { grid-template-columns: 72px minmax(0, 1fr) 210px minmax(0, 30ch); grid-template-areas: "num nome tag nota"; align-items: center; min-height: clamp(120px, 17svh, 170px); }
  .h-cap__tag { justify-self: start; }
  .h-cap__nota { margin: 0; font-size: 15px; }
}

/* lettere singole (tipografia, movimento): le crea home.js */
.h-cap__l { display: inline-block; white-space: pre; will-change: transform; }

/* 01 profondità: la sagoma di Marco segue il cursore; sopra di lei la parola resta solo contorno */
.h-cap__sagoma {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 108%;
  width: auto;
  max-width: none;
  opacity: 0;
  transition: opacity .4s;
  will-change: transform;
}
.h-cap--profondita.is-attiva .h-cap__sagoma { opacity: 1; }
.h-cap__bordo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--carta);
  pointer-events: none;
  opacity: 0;
}
.h-cap--profondita.is-attiva .h-cap__bordo { opacity: 1; }
.h-cap--profondita .h-cap__parola:first-child { z-index: 0; }

/* 04 velocità: la parola si trasforma nel tempo misurato */
.h-cap--velocita .h-cap__parola { font-variant-numeric: tabular-nums; }

/* 05 guida AI: la frase si scrive */
.h-cap__cursore { display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--carta); animation: h-cursore 1s steps(1) infinite; }
@keyframes h-cursore { 50% { opacity: 0; } }

@media (hover: none) {
  .h-cap { cursor: auto; }
}

/* ---------------------------------------------------------------- movimento ridotto -------- */
html.ridotto .h-hero__filo::after { animation: none; }

/* ---------------------------------------------------------------- CIELO (cielo.js) --------- */
/* canvas fisso dietro la pagina: si vede dove le sezioni sono trasparenti */
.cielo {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  /* spento non resta in memoria come strato a tutto schermo: visibility dopo la dissolvenza */
  visibility: hidden;
  transition: opacity .5s linear, visibility 0s linear .5s;
}
.cielo.is-acceso { opacity: 1; visibility: visible; transition: opacity .5s linear, visibility 0s; }
.pagina-home .contenuto { position: relative; z-index: 1; }
.pagina-home .h-hero { background: transparent; }

/* ---------------------------------------------------------------- 6. VETRINA 3D ------------- */
.h-vetrina { position: relative; padding-top: var(--h-pausa); }
.h-vetrina__testa { display: grid; gap: 18px; margin-bottom: var(--aria); }
.h-vetrina__palco {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}
.h-vetrina__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* il bagliore si spegne prima del bordo del palco: niente taglio netto con la sezione dopo */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 66%, transparent 98%);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 66%, transparent 98%);
  background:
    radial-gradient(60% 45% at 50% 58%, rgba(121, 64, 224, .16), rgba(121, 64, 224, 0) 70%),
    linear-gradient(to bottom, rgba(6, 5, 12, 0) 0%, rgba(6, 5, 12, 0) 55%, rgba(21, 17, 42, .55) 100%);
}
/* bagliore che ruota col servizio attivo: un cerchio enorme quasi tutto sotto il bordo (ciaoenergy) */
.h-vetrina__bagliore {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 78vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 17deg, #7940e0, #41256c, #a98bff, #ce69e3, #23143d, #6931aa, #7940e0);
  filter: blur(90px);
  opacity: .75;
  transform: translate(-50%, 92%) rotate(var(--giro, 0deg));
  transition: transform .9s var(--curva-sipario);
}
.h-vetrina__tela { position: absolute; inset: 0; }
.h-vetrina__tela canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.h-vetrina__tela canvas.is-trascina { cursor: grabbing; }

/* senza 3D (niente JS, niente WebGL, movimento ridotto): elenco leggibile */
.h-vetrina__elenco {
  list-style: none;
  margin: 0;
  padding: 0 var(--margine);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px var(--margine);
}
.h-vetrina__voce { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--linea); }
.h-vetrina__nome { margin: 0; font: var(--peso-display) clamp(30px, 3vw, 44px)/.95 var(--font-display); letter-spacing: -.05em; text-transform: uppercase; }
.h-vetrina__descr { margin: 0; color: var(--carta-2); max-width: 36ch; }
.h-vetrina__comandi { display: none; }
.h-vetrina:not(.is-3d) .h-vetrina__palco { height: auto; min-height: 0; padding-block: 24px var(--h-pausa); }

/* con il 3D acceso: palco a tutto schermo, il nome del servizio enorme in alto sopra gli oggetti,
   la frase e il link in basso a sinistra, i comandi in basso al centro */
.h-vetrina.is-3d .h-vetrina__elenco { display: block; position: absolute; inset: 0; padding: 0; pointer-events: none; }
.h-vetrina.is-3d .h-vetrina__voce {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  visibility: hidden;
}
.h-vetrina.is-3d .h-vetrina__voce.is-attiva { visibility: visible; }
.h-vetrina.is-3d .h-vetrina__nome {
  position: absolute;
  left: 50%;
  top: calc(var(--testata-h) + 3svh + 14px);
  z-index: 2;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - var(--margine) * 2);
  text-align: center;
  font-size: clamp(56px, min(9vw, 15svh), 168px);
  line-height: .86;
  letter-spacing: -.055em;
  overflow-y: clip;
  padding-block: .2em .16em;
  text-shadow: 0 4px 40px rgba(6, 5, 12, .7);
}
.h-vetrina__nome-in { display: inline-block; }
.h-vetrina.is-3d .h-vetrina__num { position: absolute; left: 0; right: 0; text-align: center; top: calc(var(--testata-h) + 3svh); font-size: 13px; color: var(--viola-luce); margin: 0; }
.h-vetrina__info { display: grid; gap: 14px; justify-items: start; }
.h-vetrina.is-3d .h-vetrina__info {
  position: absolute;
  left: var(--margine);
  bottom: calc(var(--hud-h) + 34px);
  max-width: min(30ch, 26vw);
  pointer-events: auto;
}
.h-vetrina.is-3d .h-vetrina__descr { font: 300 18px/1.4 var(--font-voce); color: var(--carta); text-shadow: 0 1px 14px rgba(6, 5, 12, .8); }
.h-vetrina.is-3d .h-vetrina__comandi {
  position: absolute;
  left: 50%;
  bottom: calc(var(--hud-h) + 34px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(560px, 84vw);
}
.h-vetrina__barra { flex: 1; min-width: 0; height: 28px; overflow: visible; }
.h-vetrina__freccia {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--carta);
  pointer-events: auto;
  transition: border-color .3s, background-color .3s;
}
.h-vetrina__freccia:hover { border-color: var(--viola-luce); background: rgba(121, 64, 224, .18); }

@media (max-width: 819px) {
  .h-vetrina.is-3d .h-vetrina__palco { min-height: 640px; }
  .h-vetrina.is-3d .h-vetrina__info { bottom: calc(var(--hud-h) + 92px); max-width: calc(100vw - var(--margine) * 2); }
  .h-vetrina.is-3d .h-vetrina__descr { font-size: 15px; }
  /* sul telefono la frase cade sotto gli oggetti: un velo scuro dal basso la tiene leggibile */
  .h-vetrina.is-3d .h-vetrina__palco::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(to bottom, rgba(6, 5, 12, 0), rgba(6, 5, 12, .88) 45%); pointer-events: none; }
  .h-vetrina.is-3d .h-vetrina__elenco, .h-vetrina.is-3d .h-vetrina__comandi { z-index: 1; }
  .h-vetrina.is-3d .h-vetrina__nome { font-size: clamp(44px, 14vw, 80px); }
}