/* ============================================================================
   HERO → AMBIENTE 3D  (PROVA sess.73)
   ----------------------------------------------------------------------------
   Due pezzi:
   1. `.ds3d-chip` — il pulsante «Esplora in 3D» appoggiato sullo stage dell'hero.
      Famiglia glass/outline: bordo che diventa oro allo hover, stessa lingua dei
      comandi del rig 3D (.viewer3d-rig in hero-gallery.css). Nessun one-off.
   2. `.ds3d` — l'ambiente full-bleed che si apre dal chip. Fondo "studio": scuro
      di default (il sito è dark-first), chiaro quando il tema è chiaro.

   I comandi del rig (alette / TILT / PAN / FUOCO) NON sono ridefiniti qui: sono
   quelli di hero-gallery.css, che si posizionano in assoluto dentro il contenitore
   relativo che gli passiamo (`.ds3d-stage`). Un solo posto dove stanno scritti.

   Token: solo var(--ds-c-*) / var(--ds-brand-*). Colori grezzi solo dove servono
   trasparenze di vetro (come nel resto dei componenti overlay).
   ============================================================================ */

/* ══ 1. CHIP SULL'HERO ═══════════════════════════════════════════════════ */
/* sess.73 HERO v2: il chip vive in un hud con il bottone «Schermo intero»
   (visibile solo nel modo A). L'hud prende il posizionamento assoluto che
   prima era del chip. */
.hero .hero-stage .ds3d-hud{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 7;                       /* sopra il media, sotto il dock */
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero .hero-stage .ds3d-hud[hidden]{ display: none; }

.hero .hero-stage .ds3d-chip,
.hero .hero-stage .ds3d-expand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  font: 600 11px/1 Oswald, system-ui, sans-serif;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #f3f3f3;
  background: rgba(22,22,26,.74);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.hero .hero-stage .ds3d-chip svg,
.hero .hero-stage .ds3d-expand svg{ opacity: .9; }

/* Toggle a due stati: entrambe le etichette nel DOM (i18n), il CSS mostra
   quella del modo corrente. data-mode lo scrive hero-3d-stage.js. */
.hero .hero-stage .ds3d-chip[data-mode="media"] .ds3d-lbl-back,
.hero .hero-stage .ds3d-chip[data-mode="media"] .ds3d-ico-back,
.hero .hero-stage .ds3d-chip[data-mode="3d"] .ds3d-lbl-go,
.hero .hero-stage .ds3d-chip[data-mode="3d"] .ds3d-ico-go{ display: none; }

/* Nel modo A il chip è "acceso": bordo oro fisso, si capisce che è un toggle. */
.hero .hero-stage .ds3d-chip[data-mode="3d"]{
  border-color: var(--ds-c-accent-border, rgba(244,181,50,.55));
}

/* gate :hover — su iOS lo stato resta appiccicato (feedback_sticky_hover_ios) */
@media (hover: hover){
  .hero .hero-stage .ds3d-chip:hover,
  .hero .hero-stage .ds3d-expand:hover{
    border-color: var(--ds-c-accent-border, rgba(244,181,50,.55));
    background: rgba(22,22,26,.86);
    transform: translateY(-1px);
  }
}
.hero .hero-stage .ds3d-chip:focus-visible,
.hero .hero-stage .ds3d-expand:focus-visible{
  outline: 2px solid var(--ds-c-focus, #F4B532);
  outline-offset: 2px;
}
.hero .hero-stage .ds3d-expand[hidden]{ display: none; }

/* Mobile app: tap target pieno; «Schermo intero» resta solo icona (spazio). */
body.ds-vp-app .hero .hero-stage .ds3d-hud{
  left: 12px;
  bottom: 12px;
}
body.ds-vp-app .hero .hero-stage .ds3d-chip,
body.ds-vp-app .hero .hero-stage .ds3d-expand{
  height: 40px;
  font-size: 11px;
}
body.ds-vp-app .hero .hero-stage .ds3d-expand .ds3d-chip-lbl{ display: none; }
body.ds-vp-app .hero .hero-stage .ds3d-expand{ padding: 0 12px; }

/* Nel MODO A del riquadro hero il basso-sinistra è del hud (toggle + full
   screen): lo slider PAN del rig, che di suo sta centrato in basso, ci
   finirebbe sotto a 1440/1920. Solo nell'hero lo sposto a destra, impilato
   sopra il FUOCO (due slider orizzontali, una colonna). L'ambiente full-bleed
   non ha il hud e tiene il PAN centrato com'era. */
.hero .hero-stage .viewer3d-pan{
  left: auto;
  right: 18px;
  bottom: 58px;
  transform: none;
}

/* ══ 2. AMBIENTE 3D ══════════════════════════════════════════════════════ */
.ds3d{
  /* fondo studio — DEFAULT dark (il sito è dark-first) */
  --ds3d-studio: radial-gradient(120% 90% at 50% 20%, #23252A 0%, #131417 55%, #08090B 100%);
  --ds3d-ink:    var(--ds-c-text, #E8E6E0);
  --ds3d-ink-2:  var(--ds-c-text-secondary, #9A9590);
  --ds3d-glass:  rgba(22,22,26,.72);
  --ds3d-brd:    rgba(255,255,255,.16);

  position: fixed;
  inset: 0;
  z-index: 9100;                    /* sopra il lightbox (9000) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.ds3d.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 260ms ease, visibility 0s linear 0s;
}
.ds3d.is-closing{
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* Tema chiaro: sistema light (se l'utente non ha forzato dark) … */
@media (prefers-color-scheme: light){
  body:not(.ds-dark) .ds3d{
    --ds3d-studio: radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, #F1F1EF 58%, #DFDFDC 100%);
    --ds3d-glass:  rgba(255,255,255,.80);
    --ds3d-brd:    rgba(0,0,0,.10);
  }
}
/* … e light forzato dal toggle (vince sul media, come nei token). */
body.ds-light .ds3d{
  --ds3d-studio: radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, #F1F1EF 58%, #DFDFDC 100%);
  --ds3d-glass:  rgba(255,255,255,.80);
  --ds3d-brd:    rgba(0,0,0,.10);
}

.ds3d-bg{
  position: absolute;
  inset: 0;
  background: var(--ds3d-studio);
  cursor: pointer;
}

.ds3d-shell{
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(12px, 1.6vw, 22px);
  gap: clamp(8px, 1.2vh, 16px);

  transform: scale(.985);
  transform-origin: center;
  transition: transform 320ms cubic-bezier(.22,1,.36,1);
}
.ds3d.is-open .ds3d-shell{ transform: scale(1); }

/* ── Barra alta: identità · viste · chiudi ─────────────────────────────── */
.ds3d-top{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.ds3d-id{
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.ds3d-code{
  font: 600 20px/1 Oswald, system-ui, sans-serif;
  letter-spacing: .04em;
  color: var(--ds3d-ink);
  padding-left: 10px;
  /* barra titolo del design system: 3px verticali in gradiente brand */
  position: relative;
}
.ds3d-code::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ds-brand-yellow-dark, #F4B532), var(--ds-brand-yellow-light, #F3E955));
}
.ds3d-title{
  font: 500 11px/1 Oswald, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds3d-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Segmented viste — famiglia "pill toggle": off neutro, on ambra */
.ds3d-views{
  justify-self: center;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ds3d-glass);
  border: 1px solid var(--ds3d-brd);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.ds3d-views button{
  all: unset;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 999px;
  font: 600 11px/1 Oswald, system-ui, sans-serif;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ds3d-ink-2);
  transition: background .16s ease, color .16s ease;
}
@media (hover: hover){
  .ds3d-views button:hover{ color: var(--ds3d-ink); }
}
.ds3d-views button[aria-selected="true"]{
  background: var(--ds-brand-yellow, #F4B532);
  color: #000;                       /* Pattern B: nero su giallo brand */
}
.ds3d-views button:focus-visible{
  outline: 2px solid var(--ds-c-focus, #F4B532);
  outline-offset: 2px;
}

.ds3d-close{
  all: unset;
  justify-self: end;
  /* Colonna DICHIARATA, non dedotta dall'ordine: su una pagina senza disegni
     quotati il tablist centrale non viene costruito, e senza questa riga il
     bottone di chiusura scivolava al centro dell'header (sess.73). */
  grid-column: 3;
  cursor: pointer;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--ds3d-ink);
  background: var(--ds3d-glass);
  border: 1px solid var(--ds3d-brd);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: border-color .16s ease;
}
@media (hover: hover){
  .ds3d-close:hover{ border-color: var(--ds-c-accent-border, rgba(244,181,50,.55)); }
}
.ds3d-close:focus-visible{
  outline: 2px solid var(--ds-c-focus, #F4B532);
  outline-offset: 2px;
}

/* ── Stage: qui vive il viewer (e qui si appendono i comandi del rig) ──── */
.ds3d-stage{
  position: relative;               /* ⚠️ i comandi del rig sono position:absolute
                                          e si ancorano a questo contenitore */
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;

  /* Il fondo resta a tutto schermo, la SCENA no: su 1920/4K i comandi del rig
     (ancorati ai bordi dello stage) finirebbero a mezzo metro dall'oggetto.
     Una colonna centrata li tiene a portata di mano senza perdere il respiro. */
  width: min(1600px, 100%);
  justify-self: center;
}
.ds3d-canvas{
  position: absolute;
  inset: 0;
}
.ds3d-canvas[hidden]{ display: none; }

/* Suggerimento comandi — in basso, discreto */
.ds3d-hint{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font: 400 11px/1.2 Oswald, system-ui, sans-serif;
  letter-spacing: .04em;
  color: var(--ds3d-ink-2);
  background: var(--ds3d-glass);
  border: 1px solid var(--ds3d-brd);
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* col PAN slider in basso al centro il suggerimento darebbe fastidio:
   lo sposto a sinistra quando il rig è montato (lo stage prende la classe). */
.ds3d-stage:has(.viewer3d-pan) .ds3d-hint{
  left: 14px;
  transform: none;
}

/* Badge GPU software — non bloccante (memoria reference_3d_webgl_fallback) */
.ds3d-gpu{
  position: absolute;
  right: 12px;
  top: 12px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 8px;
  font: 500 11px/1.2 Oswald, system-ui, sans-serif;
  letter-spacing: .04em;
  color: var(--ds3d-ink);
  background: var(--ds-c-accent-subtle, rgba(244,181,50,.15));
  border: 1px solid var(--ds-c-accent-border, rgba(244,181,50,.40));
}

/* ── Stato di caricamento — SEMPRE visibile, mai un vuoto muto (V-55) ──── */
.ds3d-loader{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: 500 12px/1.3 Oswald, system-ui, sans-serif;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ds3d-ink-2);
  pointer-events: none;
}
.ds3d-loader[hidden]{ display: none; }
.ds3d-spin{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ds3d-brd);
  border-top-color: var(--ds-brand-yellow, #F4B532);
  animation: ds3d-spin 900ms linear infinite;
}
.ds3d-loader-pct{
  font-variant-numeric: tabular-nums;
  color: var(--ds3d-ink);
}
@keyframes ds3d-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ds3d-spin{ animation: none; }
  .ds3d-shell{ transition: none; }
}

/* ── Messaggio (errore / niente WebGL) + via d'uscita ──────────────────── */
.ds3d-msg{
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(560px, calc(100% - 28px));
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ds3d-glass);
  border: 1px solid var(--ds-c-accent-border, rgba(244,181,50,.40));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.ds3d-msg[hidden]{ display: none; }
.ds3d-msg-txt{
  margin: 0;
  font: 400 13px/1.35 Oswald, system-ui, sans-serif;
  color: var(--ds3d-ink);
}
.ds3d-msg-cta{
  all: unset;
  cursor: pointer;
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  font: 600 11px/1 Oswald, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #000;
  background: var(--ds-brand-yellow, #F4B532);
}
.ds3d-msg-cta[hidden]{ display: none; }
.ds3d-msg-cta:focus-visible{
  outline: 2px solid var(--ds-c-focus, #F4B532);
  outline-offset: 2px;
}

/* ── Vista quotata — il disegno del datasheet, su carta ────────────────── */
.ds3d-dim{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
  padding: 8px 8px 12px;
}
.ds3d-dim[hidden]{ display: none; }
.ds3d-dim-paper{
  /* foglio, non muro bianco: la carta si ferma dove finisce il disegno */
  width: min(100%, 820px);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border-radius: 10px;
  /* il quotato è inchiostro su carta: la carta resta bianca in entrambi i temi,
     altrimenti in dark le linee nere sparirebbero. */
  background: #FFFFFF;
  border: 1px solid var(--ds3d-brd);
  /* in tema chiaro carta e fondo sono quasi lo stesso bianco: l'ombra fa
     capire che è un foglio appoggiato, non uno sfondo */
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  padding: 12px;
}
.ds3d-dim-paper img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.ds3d-dim-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ds3d-dim-pills{ display: inline-flex; gap: 6px; }
.ds3d-dim-pill{
  all: unset;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  font: 600 11px/1 Oswald, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds3d-ink-2);
  background: var(--ds3d-glass);
  border: 1px solid var(--ds3d-brd);
  transition: border-color .16s ease, color .16s ease;
}
@media (hover: hover){
  .ds3d-dim-pill:hover{ border-color: var(--ds-c-accent-border, rgba(244,181,50,.55)); }
}
.ds3d-dim-pill[aria-pressed="true"]{
  background: var(--ds-brand-yellow, #F4B532);
  border-color: var(--ds-brand-yellow, #F4B532);
  color: #000;
}
.ds3d-dim-pill:focus-visible{
  outline: 2px solid var(--ds-c-focus, #F4B532);
  outline-offset: 2px;
}
.ds3d-dim-note{
  font: 400 11px/1.2 Oswald, system-ui, sans-serif;
  letter-spacing: .04em;
  color: var(--ds3d-ink-2);
}

/* In vista quotata il 3D resta montato ma non si vede: quindi non devono
   vedersi nemmeno i suoi comandi, né il suo caricamento. Sono figli dello
   stage (li appende viewer3d.js), quindi si spengono da qui. */
.ds3d[data-view="dim"] .viewer3d-rig,
.ds3d[data-view="dim"] .viewer3d-tilt,
.ds3d[data-view="dim"] .viewer3d-pan,
.ds3d[data-view="dim"] .viewer3d-zoom,
.ds3d[data-view="dim"] .ds3d-loader,
.ds3d[data-view="dim"] .ds3d-gpu{ display: none !important; }

/* ── Fasce ─────────────────────────────────────────────────────────────── */
/* compact-narrow (1100-1399): l'ambiente c'è, ma il fiato è meno. */
@media (max-width: 1399.98px){
  .ds3d-title{ display: none; }
  .ds3d-views button{ padding: 7px 12px; }
}
/* mobile app (<1100): l'ambiente NON si apre (il chip porta al lightbox).
   Regola di blindatura contro il bleed: se per qualche via ci finisse, lo
   spegniamo — meglio niente che un contesto WebGL a 390 senza controlli. */
body.ds-vp-app .ds3d{ display: none !important; }