/* ==========================================================================================
   servizio-sviluppo-software.css — firma e scena di /servizi/sviluppo-software/ (BRIEF §15).
   Firma: il codice vero di questo sito (surebet.js, core.js) che scorre ai lati; servizio.js
   accende qualche riga come se venisse eseguita.
   Scena del metodo: pezzi sparsi → architettura collegata (is-1) → dati che corrono (is-2) →
   moduli verificati e nuova versione (is-3).
   ========================================================================================== */

/* ---------------------------------------------------------------- firma: il codice -------- */
.sx-codice {
  display: flex;
  justify-content: space-between;
  gap: 4vw;
  padding: 0 var(--margine);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.sx-codice__col { width: min(38vw, 600px); overflow: hidden; text-align: left; }
.sx-codice__col--sx { -webkit-mask-image: linear-gradient(to right, #000 45%, transparent); mask-image: linear-gradient(to right, #000 45%, transparent); }
.sx-codice__col--dx { -webkit-mask-image: linear-gradient(to left, #000 45%, transparent); mask-image: linear-gradient(to left, #000 45%, transparent); }
.sx-codice__nastro { display: flex; flex-direction: column; animation: sx-codice-sale 90s linear infinite; }
.sx-codice__col--dx .sx-codice__nastro { animation-duration: 120s; animation-direction: reverse; }
.sx-codice__riga {
  display: block;
  white-space: pre;
  font: 400 clamp(11px, .92vw, 14px)/2.05 var(--font-mono);
  color: rgba(169, 139, 255, .34);
  transition: color 1.2s, text-shadow 1.2s;
}
.sx-codice__riga b { display: inline-block; width: 4.2em; font-weight: 400; color: rgba(239, 233, 225, .16); }
.sx-codice__riga.is-accesa { color: var(--carta); text-shadow: 0 0 18px var(--viola-luce); transition-duration: .08s; }
.sx-codice__luce {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22vh;
  background: linear-gradient(to bottom, transparent, rgba(169, 139, 255, .08) 70%, rgba(169, 139, 255, .22) 98%, transparent);
  animation: sx-codice-scan 7s linear infinite;
}
@keyframes sx-codice-sale { to { transform: translateY(-50%); } }
@keyframes sx-codice-scan { from { transform: translateY(-25vh); } to { transform: translateY(105vh); } }
@media (max-width: 819px) { .sx-codice__col { width: 60vw; } .sx-codice__col--dx { display: none; } .sx-codice { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .sx-codice__nastro, .sx-codice__luce { animation: none; } .sx-codice__luce { display: none; } }

/* ---------------------------------------------------------------- scena: il sistema ------- */
.sc-sw {
  position: absolute;
  inset: 0;
  container-type: size;
  border-radius: 14px;
  background:
    linear-gradient(rgba(169, 139, 255, .06) 1px, transparent 1px) 0 0 / 5% 8.33%,
    linear-gradient(90deg, rgba(169, 139, 255, .06) 1px, transparent 1px) 0 0 / 5% 8.33%,
    radial-gradient(ellipse at 50% 50%, rgba(65, 37, 108, .45), rgba(13, 10, 26, .95) 75%);
  box-shadow: 0 0 0 1px rgba(169, 139, 255, .26), 0 60px 140px -50px rgba(121, 64, 224, .6);
  overflow: hidden;
}
.sc-sw__linee { position: absolute; inset: 0; width: 100%; height: 100%; }
/* niente tratteggio animato: con vector-effect il pathLength non vale; le linee si accendono */
.sc-sw__linee path { fill: none; stroke: rgba(169, 139, 255, .6); stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .9s, stroke .6s; }
.sc-sw__linee path:nth-of-type(2n) { transition-delay: .25s; }
.sc-sw__linee path:nth-of-type(3n) { transition-delay: .5s; }
.sc-sw__dato { fill: var(--carta); opacity: 0; transition: opacity .5s; }
.is-1 .sc-sw__linee path { opacity: 1; }
.is-2 .sc-sw__dato { opacity: 1; }
.is-2 .sc-sw__linee path { stroke: rgba(206, 105, 227, .55); }

.sc-sw__mod {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 1.6cqh 1.8cqw;
  border-radius: 12px;
  white-space: nowrap;
  font: 500 clamp(11px, 3.1cqh, 17px)/1 var(--font-sans);
  color: var(--carta);
  background: rgba(13, 10, 26, .94);
  outline: 1px dashed rgba(206, 105, 227, .6);
  outline-offset: -1px;
  transform: translate(calc(var(--sx) * 1cqw), calc(var(--sy) * 1cqh)) translate(-50%, -50%) rotate(var(--rot));
  transition: transform 1.1s var(--curva-expo), outline-color .5s, box-shadow .6s;
  transition-delay: calc(var(--i) * 60ms);
}
.sc-sw__mod b { font: 500 clamp(9px, 2.2cqh, 12px)/1 var(--font-mono); color: var(--viola-luce); }
.is-1 .sc-sw__mod { transform: translate(calc(var(--gx) * 1cqw), calc(var(--gy) * 1cqh)) translate(-50%, -50%); outline-color: transparent; box-shadow: inset 0 0 0 1px rgba(169, 139, 255, .45); }
.is-2 .sc-sw__mod { box-shadow: inset 0 0 0 1px var(--viola-luce), 0 0 34px -8px var(--viola-luce); }
.is-2 .sc-sw__mod b { color: var(--neon); }
.sc-sw__ok { width: 0; height: 2.6cqh; overflow: hidden; display: inline-grid; place-items: center; border-radius: 50%; transition: width .5s var(--curva-expo); }
.sc-sw__ok::before { content: "✓"; font: 600 clamp(9px, 2cqh, 12px)/1 var(--font-sans); color: var(--nero); }
.is-3 .sc-sw__ok { width: 2.6cqh; background: var(--viola-luce); }
.sc-sw__versione {
  position: absolute;
  right: 3cqw;
  top: 4cqh;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .06em;
  color: var(--carta);
  background: rgba(121, 64, 224, .25);
  box-shadow: inset 0 0 0 1px var(--viola-luce);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .5s .3s, transform .7s .3s var(--curva-expo);
}
.sc-sw__versione i { width: 22px; height: 1px; background: var(--carta); position: relative; }
.sc-sw__versione i::after { content: ""; position: absolute; right: 0; top: -3px; border: 3.5px solid transparent; border-left: 5px solid var(--carta); border-right: 0; }
.is-3 .sc-sw__versione { opacity: 1; transform: none; }