/* =============================================================
   Home · 3 · SETTORI — carosello riscritto da zero (21/9/2026).
   Motore in assets/js/home-settori.js (spiegato in testa al file).

   Il disegno resta quello che piaceva: scheda grande al centro, le vicine
   piu' piccole e piu' chiare ai lati, frecce in alto a destra, puntini
   sotto. Cambia il contenuto delle schede: al posto delle foto ci sono i
   render dei settori (gli stessi dell'indice /settori/), su un grigio piu'
   scuro del fondo della sezione, cosi' la scheda si stacca dalla pagina.
   I render hanno il fondo bianco: multiply lo fa diventare il grigio
   della scheda, senza giunture.

   22/9, correzioni dell'utente ("troppo asettico, lo sfondo non mi dice
   niente, non mi da' differenza"; "il cavo si taglia a meta'";
   "rimpicciolirei un po' la scheda"):
   - ogni settore ha il suo colore, preso dal suo oggetto (il blu del
     cavo, l'acqua del reattore, il grano della pasta...): un fondo da
     studio fotografico, piu' chiaro dietro l'oggetto e piu' pieno ai
     bordi. Scorrendo cambia il colore: le schede non sono piu' uguali;
   - la scheda e' piu' piccola (780 -> 700 px): le vicine si vedono di
     piu' e titolo + carosello stanno in una schermata;
   - il cavo esce dal bordo della scheda (cavo.webp, generato da
     tools/home-settori/gen.py dal render Blender) invece di sfumare a meta'.

   Due modi:
   - senza JS: una fila che scorre col dito, agganciata alle schede;
   - con JS (.is-live): il palco. Le schede stanno una sull'altra al
     centro e lo script le mette al loro posto con transform/opacity.
   ============================================================= */

.hm-set {
  --hm-set-w: clamp(300px, 62vw, 700px);
  --hm-set-h: clamp(380px, calc(var(--hm-set-w) * 0.72), 504px);
  --hm-set-gap: clamp(18px, 2.2vw, 32px);
  --hm-set-side: 0.86;          /* scala delle schede laterali */
  --hm-set-dim: 0.62;           /* opacita' delle schede laterali */
  --hm-set-tile: #dfe5f0;       /* il blu-grigio delle schede (scarti per settore piu' sotto) */
  --hm-set-tile-2: #ccd6e8;     /* stesso colore, piu' pieno verso il basso */
  --hm-set-glow: #f3f7fc;       /* la luce dietro l'oggetto */
  --hm-set-soft: #4d5c76;       /* la frase sotto il nome */
  --hm-set-ink: #0b1220;
  --hm-set-dwell: 6s;           /* quanto resta ferma ogni scheda in automatico */
  --hm-set-pad: 8px;            /* aria sopra e sotto per l'anello del fuoco */
}

/* ---------- palco e fila ---------- */
.hm-set__stage {
  position: relative;
  padding-block: var(--hm-set-pad);
}

/* senza JS: fila orizzontale con scroll-snap */
.hm-set__track {
  display: flex;
  column-gap: var(--hm-set-gap);
  margin: 0;
  padding: 0 max(16px, calc((100% - var(--hm-set-w)) / 2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}
.hm-set__track::-webkit-scrollbar { display: none; }

.hm-set__slide {
  flex: 0 0 var(--hm-set-w);
  width: var(--hm-set-w);
  height: var(--hm-set-h);
  scroll-snap-align: center;
}

/* con JS: il palco */
.hm-set.is-live .hm-set__stage {
  height: calc(var(--hm-set-h) + 2 * var(--hm-set-pad));
  overflow: hidden;
  overflow: clip;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.hm-set.is-live .hm-set__track {
  display: block;
  position: relative;
  height: 100%;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.hm-set.is-live .hm-set__slide {
  position: absolute;
  top: 0;
  left: calc(50% - var(--hm-set-w) / 2);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
/* senza JS le frecce non farebbero niente */
.hm-set:not(.is-live) .corp-carousel-controls { visibility: hidden; }

.hm-set.is-dragging,
.hm-set.is-dragging * {
  cursor: grabbing !important;
}

/* ---------- la scheda ---------- */
.hm-set__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border-radius: 28px;
  /* il fondo da studio: luce dietro l'oggetto, colore pieno ai bordi */
  background:
    radial-gradient(90% 75% at 58% 72%, var(--hm-set-glow) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(170deg, var(--hm-set-tile) 0%, var(--hm-set-tile-2) 100%);
  /* la scheda si stacca dalla pagina, come prima */
  box-shadow:
    0 34px 60px -42px rgba(12, 24, 48, 0.55),
    0 2px 6px rgba(12, 24, 48, 0.05);
  color: var(--hm-set-ink);
  text-decoration: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
.hm-set.is-live .hm-set__card { -webkit-touch-callout: none; }
.hm-set__card:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.hm-set__text {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 34ch;
}
.hm-set__name {
  display: block;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  font-weight: 790;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.hm-set__line {
  display: block;
  margin-top: 10px;
  color: var(--hm-set-soft, #56627a);
  font-size: var(--fs-body);
  line-height: 1.45;
}
.hm-set__more {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  margin-top: 14px;
  color: #1e3a8a;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.hm-set__more span {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* il render: occupa tutto lo spazio sotto il testo; --k ne regola il peso */
.hm-set__render {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: clamp(10px, 1.6vw, 20px);
}
.hm-set__render img {
  position: absolute;
  top: calc(50% - var(--k, 1) * 50%);
  left: calc(50% - var(--k, 1) * 50%);
  width: calc(var(--k, 1) * 100%);
  height: calc(var(--k, 1) * 100%);
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  -webkit-user-drag: none;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hm-set__slide--cavi { --k: 1; }
.hm-set__slide--packaging { --k: 1.08; }
.hm-set__slide--chimico { --k: 1; }
.hm-set__slide--alimentare { --k: 1.06; }
.hm-set__slide--metalmeccanico { --k: 1.06; }
.hm-set__slide--gomma { --k: 1.12; }

/* Il colore delle schede: UNO SOLO, blu che tende al grigio (22/9:
   "non voglio 20.000 colori, sembra Arlecchino"). Le sei schede variano di
   pochissimo — giusto un grado di temperatura per settore — cosi' la fila
   resta una famiglia sola e riprende il blu del marchio. Il colore vive
   in :root sotto .hm-set (sopra), qui solo gli scarti. */
.hm-set__slide--cavi      { --hm-set-tile: #dee5f1; --hm-set-tile-2: #ccd6e8; }
.hm-set__slide--packaging { --hm-set-tile: #e0e5f0; --hm-set-tile-2: #ced7e7; }
.hm-set__slide--chimico   { --hm-set-tile: #dde6ee; --hm-set-tile-2: #cbd8e5; }
.hm-set__slide--alimentare{ --hm-set-tile: #e2e5ed; --hm-set-tile-2: #d1d8e4; }
.hm-set__slide--metalmeccanico { --hm-set-tile: #dce4ef; --hm-set-tile-2: #cad5e6; }
.hm-set__slide--gomma     { --hm-set-tile: #e1e4ec; --hm-set-tile-2: #d0d6e3; }

/* il reattore (render Blender, verticale) nella scheda orizzontale: grande,
   appoggiato a destra, le gambe finiscono appena fuori dal bordo di sotto */
.hm-set__slide--chimico .hm-set__render { position: static; }
.hm-set__slide--chimico .hm-set__render img {
  top: 1.5%;
  left: auto;
  right: 4%;
  width: auto;
  height: 112%;
  transform-origin: 50% 40%;
}

/* la trafila con gli spaghetti: grande, appoggiata a destra, la testa
   esce appena dal bordo di sopra */
.hm-set__slide--alimentare .hm-set__render { position: static; }
.hm-set__slide--alimentare .hm-set__render img {
  top: 1%;
  left: auto;
  right: -7%;
  width: auto;
  height: 103%;
  transform-origin: 50% 45%;
}

/* il cavo esce dal bordo destro della scheda: l'immagine e' piu' larga
   della scheda e la scheda la taglia (overflow: hidden). Posizione in %
   della scheda: le fibre in basso a sinistra, la guaina esce a destra a
   circa un quarto dell'altezza, sotto il testo. */
.hm-set__slide--cavi .hm-set__render { position: static; }
.hm-set__slide--cavi .hm-set__render img {
  top: -24%;
  left: 14%;
  width: 145%;
  height: auto;
  transform-origin: 14% 86%;
}

/* la scheda al centro risponde al mouse: l'oggetto si avvicina appena */
@media (hover: hover) and (pointer: fine) {
  .hm-set.is-ready:not(.is-dragging) .hm-set__slide.is-active .hm-set__card:hover img {
    transform: scale(1.035);
  }
  .hm-set.is-ready:not(.is-dragging) .hm-set__slide.is-active .hm-set__card:hover .hm-set__more span {
    transform: translateX(3px);
  }
}

/* ---------- puntini + pausa ---------- */
.hm-set__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(18px, 2.6vw, 30px);
  padding-inline: 16px;
}
.hm-set__dots {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}
.hm-set__dots:empty { display: none; }
.hm-set__dot {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 58, 138, 0.2);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    width 0.45s cubic-bezier(0.2, 0, 0, 1),
    background 0.2s ease;
}
/* area di tocco piu' grande del puntino */
.hm-set__dot::before {
  content: "";
  position: absolute;
  inset: -15px -5px;
}
.hm-set__dot:hover { background: rgba(30, 58, 138, 0.34); }
.hm-set__dot.is-active {
  width: 44px;
  background: rgba(30, 58, 138, 0.16);
}
.hm-set__dot:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}
.hm-set__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #1e3a8a;
  transform: scaleX(0);
  transform-origin: left center;
}
.hm-set__dot.is-active .hm-set__fill { transform: scaleX(1); }
/* automatico acceso: il puntino attivo si riempie; pieno = scheda dopo */
.hm-set.is-playing .hm-set__dot.is-active .hm-set__fill {
  animation: hmSetFill var(--hm-set-dwell) linear both;
}
.hm-set.is-playing.is-held .hm-set__dot.is-active .hm-set__fill {
  animation-play-state: paused;
}
@keyframes hmSetFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hm-set__play {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
  color: #1e3a8a;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.hm-set__play[hidden] { display: none; }
.hm-set__play::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
.hm-set__play:hover { background: #ffffff; color: #0b1220; }
.hm-set__play:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}
.hm-set__play svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.hm-set__play[data-state="playing"] .hm-set__icon--play,
.hm-set__play[data-state="paused"] .hm-set__icon--pause {
  display: none;
}

/* ---------- telefono ---------- */
@media (max-width: 760px) {
  .hm-set {
    --hm-set-w: min(calc(100vw - 72px), 440px);
    --hm-set-h: calc(var(--hm-set-w) * 1.32);
    --hm-set-gap: 12px;
    --hm-set-side: 0.9;
    --hm-set-dim: 0.62;
  }
  .hm-set__card {
    padding: 22px;
    border-radius: 22px;
  }
  .hm-set__name { font-size: clamp(1.65rem, 7.6vw, 2.05rem); }
  .hm-set__line { margin-top: 8px; }
  .hm-set__more { margin-top: 12px; }
  .hm-set__slide--chimico .hm-set__render img {
    top: auto;
    bottom: 1%;
    right: 50%;
    height: 66%;
    transform: translateX(50%);
  }
  .hm-set__slide--alimentare .hm-set__render img {
    top: auto;
    bottom: 0;
    right: 50%;
    height: 64%;
    transform: translateX(50%);
  }
  /* scheda in verticale: il cavo passa sotto il testo ed esce a destra
     a meta' altezza */
  .hm-set__slide--cavi .hm-set__render img {
    top: 25%;
    bottom: auto;
    left: 6%;
    width: 155%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-set__render img,
  .hm-set__more span,
  .hm-set__dot { transition: none; }
  .hm-set__play { display: none; }
}