/* ==========================================================================================
   servizio-sviluppo-siti-web.css — firma e scena di /servizi/sviluppo-siti-web/ (BRIEF §15).
   Firma: muro inclinato di siti veri che scorrono (si inclina col mouse: --mx, --my).
   Scena del metodo: un sito che si costruisce. is-1 design, is-2 codice, is-3 il sito vero online.
   ========================================================================================== */

/* ---------------------------------------------------------------- firma: il muro ---------- */
.sx-muro { perspective: 1500px; }
.sx-muro__piano {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(150vw, 1500px);
  height: 190vh;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.6vw;
  transform: translate(-50%, -50%) rotateX(calc(30deg - var(--my, 0) * 4deg)) rotateZ(calc(-13deg + var(--mx, 0) * 3deg));
  transform-style: preserve-3d;
  opacity: .62;
}
.sx-muro__col { min-width: 0; }
.sx-muro__nastro { display: flex; flex-direction: column; animation: sx-muro-sale 70s linear infinite; }
.sx-muro__col:nth-child(2) .sx-muro__nastro { animation-duration: 54s; animation-direction: reverse; }
.sx-muro__col:nth-child(3) .sx-muro__nastro { animation-duration: 82s; }
.sx-muro__sito {
  display: block;
  margin-bottom: 2.6vw;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, .32), 0 30px 80px -30px rgba(121, 64, 224, .7);
}
.sx-muro__sito img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(.75) brightness(.8); }
@keyframes sx-muro-sale { to { transform: translateY(-50%); } }
@media (max-width: 819px) { .sx-muro__piano { width: 260vw; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .sx-muro__nastro { animation: none; } }

/* ---------------------------------------------------------------- scena: il cantiere ------ */
.sc-sito { position: absolute; inset: 0; }
.sc-br {
  position: absolute;
  inset: 0 0 52px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0918;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, .3), 0 60px 140px -50px rgba(121, 64, 224, .65);
}
.sc-br__barra { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: rgba(255, 255, 255, .035); border-bottom: 1px solid var(--linea); flex: none; }
.sc-br__barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(239, 233, 225, .18); }
.sc-br__barra span { margin: 0 auto; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--carta-2); }
.sc-br__schermo { position: relative; flex: 1; overflow: hidden; container-type: size; }

/* la struttura: blocchi tratteggiati con il loro nome */
.sc-wf { position: absolute; inset: 5% 5%; display: grid; grid-template-rows: 10% 42% 1fr 13%; gap: 4%; }
.sc-wf__riga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4%; }
.sc-wf__b {
  position: relative;
  border-radius: 8px;
  outline: 1px dashed rgba(169, 139, 255, .6);
  outline-offset: -1px;
  background: rgba(169, 139, 255, .02);
  transition: background .9s var(--curva-expo), outline-color .6s, box-shadow .9s;
}
.sc-wf__b > em { position: absolute; left: 10px; top: 8px; font: 500 10px/1 var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--viola-luce); transition: opacity .4s; }
.sc-wf__nav { display: flex; align-items: center; justify-content: space-between; padding: 0 3%; }
.sc-wf__logo { width: 5cqw; height: 2.4cqh; border-radius: 3px; background: var(--carta); }
.sc-wf__menu { display: flex; gap: 1.6cqw; }
.sc-wf__menu i { width: 4cqw; height: 1cqh; border-radius: 2px; background: rgba(239, 233, 225, .4); }
.sc-wf__hero { display: grid; align-content: center; justify-items: start; gap: 2.6cqh; padding: 0 6%; }
.sc-wf__h { font: 300 7cqh/1 var(--font-display); letter-spacing: -.04em; color: var(--carta); }
.sc-wf__sub { width: 42%; height: 1.6cqh; border-radius: 3px; background: rgba(239, 233, 225, .35); }
.sc-wf__btn { padding: 1.4cqh 2.4cqw; border-radius: 999px; font: 500 2.2cqh/1 var(--font-sans); color: var(--carta); background: var(--viola); }
.sc-wf__card::after { content: ""; position: absolute; left: 12%; top: 26%; width: 7cqh; height: 7cqh; border-radius: 50%; background: rgba(169, 139, 255, .35); opacity: 0; transition: opacity .6s; }
.sc-wf__logo, .sc-wf__menu, .sc-wf__h, .sc-wf__sub, .sc-wf__btn { opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .8s var(--curva-expo); }

/* 1. design: i blocchi si riempiono, i nomi spariscono */
.is-1 .sc-wf__b { outline-color: transparent; }
.is-1 .sc-wf__b > em { opacity: 0; }
.is-1 .sc-wf__nav { background: rgba(255, 255, 255, .04); }
.is-1 .sc-wf__hero { background: radial-gradient(120% 140% at 85% 20%, #7940e0 0%, #41256c 38%, #150d2c 72%); }
.is-1 .sc-wf__card { background: linear-gradient(180deg, rgba(169, 139, 255, .14), rgba(169, 139, 255, .04)); }
.is-1 .sc-wf__card::after { opacity: 1; }
.is-1 .sc-wf__piede { background: #120e22; }
.is-1 :is(.sc-wf__logo, .sc-wf__menu, .sc-wf__h, .sc-wf__sub, .sc-wf__btn) { opacity: 1; transform: none; }
.is-1 .sc-wf__h { transition-delay: .15s; }
.is-1 .sc-wf__btn { transition-delay: .3s; }

/* 2. codice: il pannello entra e scrive */
.sc-codice {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
  display: grid;
  align-content: center;
  gap: 1.3cqh;
  padding: 0 4%;
  background: rgba(8, 6, 16, .95);
  box-shadow: -1px 0 0 var(--linea-forte), -40px 0 80px -20px rgba(6, 5, 12, .9);
  font: 400 clamp(10px, 2.6cqh, 15px)/1.3 var(--font-mono);
  color: var(--carta-2);
  transform: translateX(105%);
  transition: transform 1s var(--curva-expo);
}
.sc-codice span { padding-left: calc(var(--r) * 1.6em); white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path .5s steps(18, end); transition-delay: calc(var(--i) * 90ms + .3s); }
.sc-codice .k { color: var(--viola-luce); }
.sc-codice .a { color: var(--neon); }
.sc-codice .s { color: var(--carta); }
.is-2 .sc-codice { transform: none; }
.is-2 .sc-codice span { clip-path: inset(0 0 0 0); }
.is-2 .sc-wf__b { box-shadow: inset 0 0 0 1px rgba(206, 105, 227, .5); }
/* 3. il sito vero sale dal basso, il codice esce */
.is-3 .sc-codice { transform: translateX(105%); transition-duration: .7s; }
.sc-vero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--curva-sipario); }
.is-3 .sc-vero { clip-path: inset(0 0 0 0); }

/* le misure sotto la cornice: si accendono una dopo l'altra all'ultimo passo */
.sc-misure { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-misure li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--carta-2);
  box-shadow: inset 0 0 0 1px var(--linea-forte);
  opacity: .35;
  transition: opacity .5s, color .5s, box-shadow .5s, background-color .5s;
}
.sc-misure li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--carta-3); transition: background-color .5s, box-shadow .5s; }
.is-3 .sc-misure li { opacity: 1; color: var(--carta); box-shadow: inset 0 0 0 1px var(--viola-luce); background: rgba(121, 64, 224, .14); }
.is-3 .sc-misure li::before { background: var(--viola-luce); box-shadow: 0 0 10px var(--viola-luce); }
.is-3 .sc-misure li:nth-child(2) { transition-delay: .12s; }
.is-3 .sc-misure li:nth-child(3) { transition-delay: .24s; }
.is-3 .sc-misure li:nth-child(4) { transition-delay: .36s; }
.is-3 .sc-misure li:nth-child(4)::before { background: #6ee7a8; box-shadow: 0 0 10px #6ee7a8; }
@media (max-width: 599px) {
  .sc-br { inset: 0 0 82px; }
  .sc-codice { width: 62%; }
}