/* ==========================================================================
   SIGMA Automazione — sito DIMOSTRATIVO di GTK Studios.
   Registro: quadro elettrico. Fondo scuro, condensato industriale nei titoli,
   monospace nei dati, ambra da segnalazione. Movimenti secchi, meccanici:
   niente dissolvenze morbide, qui le cose scattano.
   ========================================================================== */

@font-face{ font-family:'BarlowC'; font-weight:600; font-display:swap;
  src:url('../../assets/fonts/barlow-cond-600.woff2') format('woff2'); }
@font-face{ font-family:'BarlowC'; font-weight:700; font-display:swap;
  src:url('../../assets/fonts/barlow-cond-700.woff2') format('woff2'); }
@font-face{ font-family:'Mono'; font-weight:500; font-display:swap;
  src:url('../../assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face{ font-family:'Mono'; font-weight:700; font-display:swap;
  src:url('../../assets/fonts/jetbrains-mono-700.woff2') format('woff2'); }
@font-face{ font-family:'Archivo'; font-weight:400; font-display:swap;
  src:url('../../assets/fonts/archivo-400.woff2') format('woff2'); }

:root{
  --bg:#0E1116; --panel:#161B22; --panel2:#1E252E; --edge:rgba(255,255,255,.10);
  --txt:#E6EDF3; --mut:#8E9BA8; --amber:#FFB020; --led:#35D07F; --alarm:#E5484D;
  --cond:'BarlowC', 'Arial Narrow', sans-serif;
  --mono:'Mono', Consolas, monospace;
  --sans:'Archivo', Arial, sans-serif;
  --pad:clamp(18px,4.5vw,64px);
  --snap:cubic-bezier(.2,.85,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--txt); font-family:var(--sans);
  font-size:16px; line-height:1.6; overflow-x:hidden; }
svg,img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
::selection{ background:var(--amber); color:#0E1116; }

.demobar{ background:var(--amber); color:#0E1116; font-size:12.5px; font-weight:500;
  padding:9px var(--pad); display:flex; gap:14px; flex-wrap:wrap;
  align-items:center; justify-content:space-between; }
.demobar a{ white-space:nowrap; padding:5px 13px; border:1px solid currentColor;
  border-radius:2px; font-weight:700; transition:background .18s, color .18s; }
.demobar a:hover{ background:#0E1116; color:var(--amber); }

/* --- Intestazione ------------------------------------------------------- */
.hdr{ position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:14px var(--pad);
  background:rgba(14,17,22,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--edge); }
.brand{ font-family:var(--cond); font-weight:700; font-size:23px; letter-spacing:.06em; }
.brand span{ color:var(--amber); }
.brand small{ display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--mut); font-weight:500; }
.nav{ display:none; gap:26px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; }
@media(min-width:900px){ .nav{ display:flex; } }
.nav a{ color:var(--mut); padding:5px 0; border-bottom:2px solid transparent; transition:.2s; }
.nav a:hover,.nav a[aria-current]{ color:var(--amber); border-bottom-color:var(--amber); }

/* --- Tipografia --------------------------------------------------------- */
.display{ font-family:var(--cond); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5.4rem); line-height:.94; letter-spacing:.005em; }
.h2{ font-family:var(--cond); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,4.2vw,3.2rem); line-height:1; letter-spacing:.01em; }
.h3{ font-family:var(--cond); font-weight:600; text-transform:uppercase;
  font-size:1.3rem; letter-spacing:.03em; }
.tag{ font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); }
.body{ color:var(--mut); max-width:62ch; }
.sec{ padding:clamp(60px,8vw,110px) var(--pad); border-top:1px solid var(--edge); }
.grid2{ display:grid; gap:32px; }
@media(min-width:880px){ .grid2{ grid-template-columns:1fr 1fr; gap:56px; } }

/* --- Hero + PLC --------------------------------------------------------- */
.hero{ padding:clamp(40px,6vw,72px) var(--pad) clamp(48px,7vw,88px); }
.plcwrap{ margin-top:40px; background:var(--panel); border:1px solid var(--edge);
  padding:clamp(14px,2.5vw,26px); }
.plcwrap svg{ width:100%; height:auto; }

/* Cavi: a riposo staccati, connessi scattano dentro la presa.
   Uno scatto secco, non una dissolvenza: e un innesto meccanico. */
.cab{ cursor:pointer; }
.cab__body{ transition:transform .28s var(--snap); }
.cab.on .cab__body{ transform:translateX(-60px); }
.cab:hover .cab__body{ transform:translateX(-14px); }
.cab.on:hover .cab__body{ transform:translateX(-60px); }
.cab__lbl{ font-family:var(--mono); font-size:15px; fill:var(--mut); font-weight:500; }
.cab:hover .cab__lbl,.cab.on .cab__lbl{ fill:var(--txt); }
.led{ fill:#243040; transition:fill .18s steps(2); }
.cab.on ~ .led{ fill:var(--led); }
.led.on{ fill:var(--led); }
/* L'alone si accende con la spia che lo precede: una spia accesa illumina
   la plastica intorno, spenta non lascia niente. */
.ledg{ opacity:0; transition:opacity .2s; }
.led.on + .ledg{ opacity:1; }
.plc__read{ font-family:var(--mono); font-size:15px; fill:var(--led); font-weight:700; }
.plc__sub{ font-family:var(--mono); font-size:10.5px; fill:var(--mut); font-weight:500; }
.plchint{ margin-top:14px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; color:var(--mut); }

/* --- Fascia scorrevole dei marchi ---------------------------------------
   Il nastro viene allungato da JavaScript finche' non copre due volte il
   contenitore, e scorre esattamente di una copia (--mq-run): cosi quando
   riparte da capo non resta mai un buco sulla destra. */
.mq{ margin-top:36px; overflow:hidden; border-block:1px solid var(--edge);
  padding:22px 0; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.mq__track{ display:flex; gap:22px; width:max-content;
  animation:mqRun 31s linear infinite; }
@keyframes mqRun{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(var(--mq-run,50%) * -1)); }
}
/* Si ferma passandoci sopra o quando un marchio prende il fuoco da tastiera:
   un nastro che scorre mentre provi a cliccarlo e solo una beffa. */
.mq:hover .mq__track, .mq:focus-within .mq__track{ animation-play-state:paused; }
.mq__b{ flex:none; width:240px; padding:0; border:0; background:none; cursor:pointer;
  opacity:.72; transition:opacity .25s, transform .25s var(--snap); }
.mq__b:hover,.mq__b:focus-visible{ opacity:1; transform:translateY(-4px); }
.mq__b svg{ width:100%; height:auto; }

/* --- Certificazioni: finestra da pannello operatore ---------------------- */
.hmi{ margin-top:40px; display:grid; gap:1px; background:var(--edge);
  border:1px solid var(--edge); }
@media(min-width:820px){ .hmi{ grid-template-columns:290px 1fr; } }
.hmi__list{ background:var(--panel); padding:14px; display:flex; flex-direction:column; gap:6px; }
.hmi__b{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--panel2); border:1px solid transparent; border-left:3px solid #2C3542;
  padding:13px 14px; min-height:52px; cursor:pointer; transition:.18s var(--snap);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; }
.hmi__b:hover{ background:#26303B; }
.hmi__b[aria-selected="true"]{ background:#26303B; border-left-color:var(--amber); color:var(--amber); }
.hmi__b i{ width:8px; height:8px; border-radius:50%; background:#3A4552; flex:none; font-style:normal; }
.hmi__b[aria-selected="true"] i{ background:var(--amber); }
.hmi__win{ background:#0B0E13; padding:clamp(20px,3vw,36px); position:relative;
  min-height:340px; display:grid; gap:26px; align-content:start; }
@media(min-width:640px){ .hmi__win{ grid-template-columns:170px 1fr; align-items:start; } }
.hmi__scan{ position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 3px); }
.hmi__seal svg{ width:100%; height:auto; }
/* Ricambio a saracinesca: il vecchio contenuto viene tagliato via, non sfumato */
.hmi__panel{ clip-path:inset(0 0 0 0); }
.hmi__panel.swap{ animation:shutter .34s steps(6) both; }
@keyframes shutter{ 0%{clip-path:inset(0 0 100% 0)} 100%{clip-path:inset(0 0 0 0)} }
.hmi__code{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--amber); }
.hmi__t{ font-family:var(--cond); font-weight:700;
  font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.05; margin:8px 0 12px; }
.hmi__rows{ margin-top:18px; border-top:1px solid var(--edge); }
.hmi__rows div{ display:flex; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--edge);
  font-family:var(--mono); font-size:12.5px; }
.hmi__rows span:first-child{ color:var(--mut); letter-spacing:.1em; }

/* --- Blocchi generici ---------------------------------------------------- */
.cards{ display:grid; gap:1px; background:var(--edge); border:1px solid var(--edge); margin-top:36px; }
@media(min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--panel); padding:30px 24px; transition:background .2s; }
.card:hover{ background:var(--panel2); }
.card__n{ font-family:var(--mono); font-size:11px; color:var(--amber); letter-spacing:.16em; }
.card h3{ margin:12px 0 8px; }
/* --- Storia: le tappe corrono su una barra, come i morsetti sulla guida ---
   La barra si riempie fino all'anno scelto, cosi si vede a colpo d'occhio
   a che punto del racconto si e'. Su schermo stretto la barra scorre. */
.tl{ margin-top:44px; }
.tl__scroll{ overflow-x:auto; overflow-y:hidden; padding-bottom:8px; }
.tl__rail{ position:relative; display:flex; gap:20px; min-width:520px; padding:34px 10px 0; }
.tl__bar{ position:absolute; left:10px; right:10px; top:42px; height:6px;
  background:var(--panel2); border-top:1px solid rgba(255,255,255,.09); }
.tl__fill{ position:absolute; left:10px; top:42px; height:6px; width:0;
  background:var(--amber); transition:width .42s var(--snap); }
.tl__y{ position:relative; flex:1 1 0; background:none; border:0; cursor:pointer;
  padding:0 0 6px; display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:var(--cond); font-weight:700; font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1; color:var(--mut); transition:color .2s var(--snap); }
.tl__y i{ width:22px; height:22px; border-radius:50%; background:var(--panel2);
  border:3px solid #3A4552; display:block;
  transition:background .2s var(--snap), border-color .2s var(--snap),
             transform .2s var(--snap), box-shadow .2s var(--snap); }
.tl__y:hover{ color:var(--txt); }
.tl__y:hover i{ border-color:#5C6875; }
.tl__y[aria-selected="true"]{ color:var(--amber); }
.tl__y[aria-selected="true"] i{ background:var(--amber); border-color:#FFD98A;
  transform:scale(1.22); box-shadow:0 0 0 7px rgba(255,176,32,.15); }
.tl__panel{ margin-top:24px; background:var(--panel); border:1px solid var(--edge);
  border-left:3px solid var(--amber); padding:clamp(20px,3vw,34px); }
.tl__panel.swap{ animation:shutter .34s steps(6) both; }
.tl__code{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--amber); }
.tl__h{ font-family:var(--cond); font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.05; margin:8px 0 12px; }
.tl__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.tl__meta span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut); border:1px solid var(--edge); padding:7px 12px; }

.spec{ margin-top:36px; border-top:1px solid var(--edge); }
.spec div{ display:grid; gap:6px; padding:16px 0; border-bottom:1px solid var(--edge); }
@media(min-width:700px){ .spec div{ grid-template-columns:210px 1fr; gap:24px; align-items:baseline; } }
.spec dt,.spec b{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); font-weight:500; }

.btn{ display:inline-block; background:var(--amber); color:#0E1116; border:0;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:16px 30px; min-height:52px; cursor:pointer;
  transition:background .18s, transform .18s var(--snap); }
.btn:hover{ background:#FFC24D; transform:translateY(-2px); }
.note{ font-family:var(--mono); font-size:11px; color:var(--mut); margin-top:12px; }
.f{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.f label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut); }
.f input,.f textarea{ font:inherit; background:var(--panel2); color:var(--txt);
  border:1px solid var(--edge); padding:12px; min-height:46px; }
.f textarea{ min-height:110px; resize:vertical; }

.ftr{ background:#0A0D11; border-top:1px solid var(--edge); padding:48px var(--pad) 26px;
  font-family:var(--mono); font-size:12.5px; color:var(--mut); }
.ftr__b{ margin-top:28px; padding-top:16px; border-top:1px solid var(--edge);
  display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; }
.ftr a{ color:var(--amber); text-decoration:underline; }

/* --- Ingressi: scatto, non dissolvenza ---------------------------------- */
.js .rv{ opacity:0; transform:translateY(14px);
  transition:opacity .3s steps(4), transform .32s var(--snap);
  transition-delay:calc(var(--i,0)*70ms); }
.js .rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rv{ transform:none; transition-duration:.2s; }
  .cab__body,.cab:hover .cab__body{ transition:none; }
  .hmi__panel.swap,.tl__panel.swap{ animation:none; }
  .tl__fill,.tl__y i,.ledg{ transition:none; }
  /* Il nastro si ferma: resta un elenco statico, i marchi si vedono lo stesso */
  .mq__track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .mq__b:hover{ transform:none; }
  .btn:hover{ transform:none; }
}

/* Rimando a chi ha fatto il sito, in fondo */
.back{ text-align:center; background:var(--panel); }
.back .h2{ margin-bottom:14px; }
.back .body{ margin:0 auto; }
.back .btn{ margin-top:26px; }