/* ==========================================================================
   Home · L'esploso — il segno distintivo del sito: il marchio si scompone e ogni pezzo
   diventa un servizio. Frammento: assets/partials/esploso.html
   Script: assets/js/pages/index-esploso.js (prefisso .exp / .exp-).

   Stato base = disegno esploso completo, fermo, con le sei schede: vale senza JS,
   con movimento ridotto e in stampa. Gli stati di partenza (emblema intero, schede
   spente, linee da disegnare) esistono solo con html.js-motion e .exp.is-armed,
   la classe che lo script mette quando prende in mano l'animazione.
   Si animano solo transform, opacity e stroke-dashoffset.
   ========================================================================== */

.exp {
  --exp-col: clamp(236px, 21vw, 300px);   /* colonne delle schede sulla tavola */
  --exp-gap: clamp(16px, 2vw, 28px);
  --exp-ink: #7E888F;                     /* tratto della tavola: richiami, quota */
  background: var(--pozzo);
  overflow: clip;
}
.exp:focus { outline: none; }

.exp__head.section-head { margin-bottom: 0; max-width: 62rem; }

/* ---------- Tavola: griglia appena percettibile e segni di registro ---------- */
.exp__stage {
  position: relative;
  margin-top: clamp(32px, 4.4vw, 56px);
  --reg-inset: -14px;
}
.exp__sheet {
  --line: rgba(195, 202, 208, .055);
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask: radial-gradient(72% 70% at 50% 50%, #000 35%, transparent 100%);
  mask: radial-gradient(72% 70% at 50% 50%, #000 35%, transparent 100%);
}

.exp__figure { position: relative; z-index: 1; margin: 0; }
.exp__draw { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Il disegno ---------- */
.exp-shapes path { vector-effect: non-scaling-stroke; }
.exp-piece { transition: opacity var(--t-ui) var(--ease-out); cursor: pointer; }
.exp-piece__steel { fill: url(#exp-steel); }
.exp-piece__rim {
  fill: none;
  stroke: var(--blu);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease-out);
  pointer-events: none;
}
.exp-piece.is-hot .exp-piece__rim { opacity: .95; }
.exp.has-hot .exp-piece:not(.is-hot) { opacity: .34; }

/* sede del pezzo che è uscito: linea fantasma a tratti, come nei disegni d'assieme */
.exp-ghost {
  fill: rgba(195, 202, 208, .025);
  stroke: #5E676E;
  stroke-width: 1px;
  stroke-dasharray: 5 4;
  pointer-events: none;
}

/* quota: la larghezza vera dell'emblema disegnato */
.exp__dim-ext, .exp__dim-line, .exp__dim-tick {
  fill: none;
  stroke: var(--exp-ink);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.exp__dim-ext { opacity: .55; }
.exp__dim-label {
  font-family: var(--font-mono);
  font-size: 7.2px;
  font-weight: 500;
  letter-spacing: .08em;
  fill: var(--acciaio-testo);
}
/* alone del colore del fondo: interrompe la linea di quota attorno alla misura. È una copia del testo
   disegnata prima, solo contorno: con paint-order WebKit dipinge contorno e riempimento lettera per
   lettera (letter-spacing) e il contorno di ogni cifra copriva quella prima («283,3» illeggibile). */
.exp__dim-label--halo {
  fill: none;
  stroke: var(--pozzo);
  stroke-width: 9px;
  stroke-linejoin: round;
}

/* LED nei fori delle piazzole: accesi nello stato finale */
.exp-led { pointer-events: none; }
.exp-led__dot { fill: var(--blu); transition: fill var(--t-ui) var(--ease-out) var(--d, 0ms); }
.exp-led__halo { fill: var(--blu); opacity: .2; transition: opacity var(--t-obj) var(--ease-out) var(--d, 0ms); }

/* scintille: solo di passaggio, mai nello stato fermo */
.exp-spark {
  fill: none;
  stroke: var(--scintilla);
  stroke-width: 2.4px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: .16 2;
  stroke-dashoffset: .16;
  opacity: 0;
  pointer-events: none;
}
.exp-spark--glow { stroke-width: 9px; }

/* ---------- Linee di richiamo (disegnate dallo script, in pixel della tavola) ---------- */
.exp__leaders { display: none; }
.exp-leader { transition: opacity var(--t-ui) var(--ease-out); }
.exp-leader__line {
  fill: none;
  stroke: var(--exp-ink);
  stroke-width: 1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--t-ui) var(--ease-out);
}
.exp-leader__dot { fill: var(--argento); transition: fill var(--t-ui) var(--ease-out); }
.exp-leader.is-hot .exp-leader__line { stroke: var(--blu); }
.exp-leader.is-hot .exp-leader__dot { fill: var(--blu); }
.exp.has-hot .exp-leader:not(.is-hot) { opacity: .3; }

/* ---------- Indicatore ---------- */
.exp__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fg-3);
}
.exp__ticks { display: inline-flex; gap: 4px; }
.exp__ticks i {
  width: 14px;
  height: 3px;
  border-radius: 1px;
  background: var(--blu);
  box-shadow: 0 0 8px rgba(140, 192, 230, .55);
  transition: background-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}

/* ---------- Schede ---------- */
.exp__cards { list-style: none; margin: 0; padding: 0; }
/* a.plate del core è display:block: qui serve una colonna flessibile (specificità 0,2,1) */
.exp a.exp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 16px 18px 18px;
}
.exp-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.exp-card__head .plate__code { margin: 0; }
.exp-card__led { margin-left: auto; }
/* icona: un "dettaglio" come nelle tavole, finestra tonda ingrandita sul pezzo
   con attorno il resto del marchio montato, spento */
.exp-card__detail {
  display: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #1E2428, #111417 80%);
}
.exp-card__detail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(195, 202, 208, .24);
  transition: box-shadow var(--t-ui) var(--ease-out);
}
.exp-card.is-hot .exp-card__detail::after { box-shadow: inset 0 0 0 1px rgba(140, 192, 230, .75); }
.exp-card__icon { display: block; width: 100%; height: 100%; }
.exp-card__icon-rest { fill: #394146; }
.exp-card__icon-hit { fill: url(#exp-steel); }
.exp-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 1.14rem;
  text-wrap: balance;
}
.exp-card__go { flex: none; width: 16px; height: 16px; color: var(--fg-3); transition: transform var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out); }
.exp-card:hover .exp-card__go, .exp-card:focus-visible .exp-card__go, .exp-card.is-hot .exp-card__go { transform: translateX(3px); color: var(--fg); }
.exp-card__text { margin-top: 6px; font-size: .9rem; line-height: 1.45; text-wrap: pretty; }

/* LED della targa: acceso nello stato finale (il .led del core si accende in opacità) */
.exp-card__led { --led-lit: 1; }
/* il pezzo collegato è in evidenza: filo di luce blu sul bordo */
.exp-card.is-hot {
  box-shadow:
    inset 0 0 0 1px rgba(140, 192, 230, .5),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 0 rgba(0, 0, 0, .5),
    0 28px 50px -30px rgba(0, 0, 0, .75);
}
/* passaggio di luce sull'acciaio quando la targa si accende */
.exp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .11) 50%, transparent 64%);
  transform: translateX(-115%);
}

/* ==========================================================================
   Scrivania (≥ 1080 px): la tavola con le schede ai lati del disegno
   ========================================================================== */
@media (min-width: 1080px) {
  .exp__stage { height: clamp(560px, 46vw, 700px); }
  .exp__figure {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--exp-col) + var(--exp-gap));
    right: calc(var(--exp-col) + var(--exp-gap));
  }
  .exp__draw { height: calc(100% - 34px); }
  .exp__status { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }

  /* le linee compaiono solo quando lo script le ha misurate e disegnate */
  .exp__leaders {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .exp.has-leaders .exp__leaders { display: block; }
  .exp__cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .exp__slot { position: absolute; width: var(--exp-col); pointer-events: auto; }
  .exp__slot[data-slot^="l"] { left: 0; }
  .exp__slot[data-slot^="r"] { right: 0; }
  .exp__slot[data-slot$="1"] { top: 0; }
  .exp__slot[data-slot$="2"] { top: 50%; translate: 0 -50%; }
  .exp__slot[data-slot$="3"] { bottom: 0; }
  /* il LED sta dal lato del disegno, dove arriva la linea */
  .exp__slot[data-slot^="r"] .exp-card__led { order: -1; margin-left: 0; }
  /* senza linee (niente JS) l'icona dice a quale pezzo appartiene la scheda */
  .exp:not(.has-leaders) .exp-card__detail { display: block; width: 36px; height: 36px; }

  /* Sezione fissata con position: sticky, non con il pin di ScrollTrigger: la sezione è alta uno
     schermo più la corsa (--exp-vh e --exp-run li scrive lo script), il contenuto resta incollato
     in cima e lo tiene fermo il compositore. In Safari lo scorrimento gira in un altro thread: il
     pin in JavaScript passava a position: fixed un fotogramma dopo, e la tavola saltava all'aggancio
     e allo sgancio. Testata e tavola stanno al centro dello schermo; la tavola ha la sua altezza
     piena sugli schermi alti e si accorcia su quelli bassi. */
  .exp.exp--pin {
    height: calc(var(--exp-vh, 100vh) + var(--exp-run, 230vh));
    padding-block: 0;
  }
  .exp--pin .exp__inner {
    position: sticky;
    top: 0;
    height: var(--exp-vh, 100vh);
    min-height: 620px;
    padding-block: calc(var(--header-h) + 12px) 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .exp--pin .exp__stage { flex: 0 1 clamp(560px, 46vw, 700px); min-height: 0; height: auto; margin-top: clamp(20px, 3vh, 36px); }
}

/* ==========================================================================
   Tablet e telefono (< 1080 px): la figura esplosa e sotto l'elenco delle schede
   ========================================================================== */
@media (max-width: 1079.98px) {
  .exp__figure { max-width: 620px; margin-inline: auto; }
  .exp__dim-label { font-size: 8px; stroke-width: 10px; }
  .exp__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
  .exp-card__detail { display: block; }
  .exp-card__head { margin-bottom: 12px; }
}
@media (max-width: 640px) {
  .exp__dim-label { font-size: 11.5px; stroke-width: 13px; }
  .exp__cards { grid-template-columns: 1fr; gap: 12px; }
  .exp__status { margin-top: 10px; }
}

/* ==========================================================================
   Stati di partenza: solo con movimento permesso e script attivo
   ========================================================================== */
.js-motion .exp.is-armed .exp-ghost { opacity: 0; }
.js-motion .exp.is-armed .exp-leader__line { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.js-motion .exp.is-armed:not(.is-powered) .exp-led__dot { fill: #1B2226; }
.js-motion .exp.is-armed:not(.is-powered) .exp-led__halo { opacity: 0; }
.js-motion .exp.is-armed .exp__ticks i:not(.is-on) { background: rgba(195, 202, 208, .16); box-shadow: none; }

.js-motion .exp.is-armed .exp-card {
  transition: opacity 520ms var(--ease-out), scale 620ms var(--ease-out), translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.js-motion .exp.is-armed .exp-card:not(.is-lit) { opacity: 0; scale: .98; pointer-events: none; }
.js-motion .exp.is-armed .exp-card:not(.is-lit) .exp-card__led { --led-lit: 0; }
.js-motion .exp.is-armed .exp-card.is-lit .exp-card__led { transition-delay: 140ms; }
.js-motion .exp.is-armed .exp-card.is-lit::after { animation: exp-sheen 1.3s var(--ease-in-out) 120ms both; }
@keyframes exp-sheen { from { transform: translateX(-115%); } to { transform: translateX(115%); } }

.mt-lite .exp-card::after { display: none; }

/* ---------- Stampa: figura ed elenco, inchiostro scuro ---------- */
@media print {
  .exp { overflow: visible; }
  .exp__sheet, .exp__leaders, .exp-spark, .exp-led__halo { display: none !important; }
  .exp__stage, .exp--pin .exp__stage { height: auto !important; }
  .exp__figure { position: static !important; max-width: 120mm; margin: 0 auto; }
  .exp__draw { height: auto !important; }
  .exp__status { position: static !important; margin-top: 4mm; }
  .exp-piece__steel, .exp-card__icon-hit { fill: #6E787F; }
  .exp-card__icon-rest { fill: #D5D9DC; }
  .exp-ghost { stroke: #999; fill: none; }
  .exp__dim-label--halo { stroke: #fff; }
  .exp__cards { position: static !important; display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-top: 6mm; }
  .exp__slot { position: static !important; width: auto !important; translate: none !important; top: auto !important; }
  .exp-card { opacity: 1 !important; scale: 1 !important; }
  .exp-card__detail { display: block !important; background: none; }
  .exp-card::after { display: none; }
}

/* ---------- WebKit (Safari e iOS): il disegno ridipinge da solo ----------
   Durante la corsa fissata i pezzi, le linee di richiamo e le scintille cambiano dentro
   l'SVG a ogni fotogramma, e WebKit lo ridipinge col processore. Con un livello proprio per
   il disegno e uno per il foglio quadrettato, ogni fotogramma ridipinge solo i tratti
   dell'SVG: il foglio, con la sua maschera radiale, resta già disegnato sotto. */
html.is-webkit.js-motion .exp__sheet,
html.is-webkit.js-motion .exp__figure { will-change: transform; }
@media print { html.is-webkit .exp__sheet, html.is-webkit .exp__figure { will-change: auto; } }