/* Siti fatti da noi (home.siti) — bozza E, giro 4, 22/10/2026. Mobile first.
   Un telefono con le clip vere dei siti; i nomi sopra (col filo che si riempie mentre la clip va), le tre righe sotto
   che si accendono insieme alla clip. Sul computer: nomi a sinistra, telefono al centro, righe a destra.
   Si anima solo transform e opacity. Con «riduci movimento» o html.fermo tutto resta fermo e completo. */

/* ── Il telefono (uguale in parti/app.css: le due sezioni stanno in piedi anche da sole) ── */
.lv-tel {
  --w: 248px;
  position: relative; flex: none; width: var(--w);
  padding: calc(var(--w) * 0.034); border-radius: calc(var(--w) * 0.16);
  background: linear-gradient(165deg, #3a3c43 0%, #17191c 18%, #0c0d0f 58%, #1c1e23 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 44px 80px -30px rgba(0, 0, 0, 0.95);
  font-family: 'Inter', -apple-system, system-ui, sans-serif; letter-spacing: -0.01em;
}
.lv-tel__schermo {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--w) * 0.128);
  background: var(--barra, #fff); transition: background-color 280ms ease-out;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* WebKit: keep the video inside the rounded corners */
}
.lv-tel__stato {
  position: relative; z-index: 3; height: calc(var(--w) * 0.104);
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--w) * 0.012) calc(var(--w) * 0.085) 0 calc(var(--w) * 0.115);
  color: var(--barra-testo, #111); transition: color 280ms ease-out;
}
.lv-tel__stato b { font-size: calc(var(--w) * 0.054); font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.lv-tel__icone { width: calc(var(--w) * 0.2); height: auto; fill: currentColor; }
.lv-tel__vista { position: relative; aspect-ratio: 390 / 844; overflow: hidden; background: var(--barra, #fff); }

/* ── La sezione ─────────────────────────────── */
.lsiti { position: relative; padding: 104px 0 88px; isolation: isolate; overflow-x: clip; }
.ls-testa { padding: 0 var(--g); }
.ls-testa p { max-width: 30em; }

.ls-palco { margin-top: 34px; padding: 0 var(--g); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }

/* the names: three words in a row, the thread under the chosen one fills while its clip plays */
.ls-scelta {
  width: 100%; display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--riga);
}
html:not(.js) .ls-scelta { display: none; }
.ls-scelta__voce {
  position: relative; display: grid; align-content: center; min-height: 48px; padding: 8px 0 12px; margin: 0;
  border: 0; background: none; color: var(--sec); cursor: pointer; text-align: left;
  font: 650 14px/1.2 'Montserrat', 'Inter', system-ui, sans-serif; letter-spacing: -0.01em;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease-out;
}
.ls-scelta__voce[aria-selected="true"] { color: var(--testo); }
.ls-scelta__voce:active { color: var(--lilla-chiaro); }
.ls-scelta__voce:focus-visible { outline-offset: 2px; }
.ls-lungo, .ls-scelta__cosa { display: none; }
.ls-scelta__barra { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; background: transparent; transition: background-color 200ms ease-out; }
.ls-scelta__voce[aria-selected="true"] .ls-scelta__barra { background: rgba(201, 169, 233, 0.22); }
.ls-scelta__barra i { display: block; width: 100%; height: 100%; background: var(--lilla); transform: scaleX(0); transform-origin: 0 50%; }
.lsiti--statico .ls-scelta__voce[aria-selected="true"] .ls-scelta__barra { background: var(--lilla); }

/* the phone, with a soft light under it */
.ls-vista { position: relative; display: grid; justify-items: center; }
.ls-vista::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 56%; width: 170%; aspect-ratio: 1.2; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(139, 111, 184, 0.34), rgba(139, 111, 184, 0.08) 55%, rgba(139, 111, 184, 0));
}
/* on the phone: names, phone and the row of the moment fit in one screen */
.lsiti .ls-tel { --w: max(190px, min(64vw, 252px, calc((100svh - 330px) * 0.457))); touch-action: pan-y; cursor: pointer; -webkit-user-select: none; user-select: none; }
.ls-video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  opacity: 0; transition: opacity 280ms ease-out; pointer-events: none;
}
.ls-video.attivo { opacity: 1; }
html:not(.js) .ls-video:first-child { opacity: 1; }
.ls-gioca {
  position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  white-space: nowrap; width: max-content; max-width: none;
  background: rgba(8, 9, 10, 0.78); color: var(--testo); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 14px 30px -10px rgba(0, 0, 0, 0.8);
  font: 650 14.5px/1 'Montserrat', 'Inter', system-ui, sans-serif;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ls-gioca[hidden] { display: none; }
.ls-gioca svg { width: 18px; height: 18px; fill: var(--lilla); }
.ls-gioca:active { transform: translate(-50%, -50%) scale(0.97); }

/* what each part of the site does: lights up together with the clip */
.ls-pannelli { width: 100%; max-width: 32em; justify-self: center; }
.ls-pannello[hidden] { display: none; }
html:not(.js) .ls-pannello + .ls-pannello { margin-top: 40px; }
.ls-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .ls-nome { position: static; width: auto; height: auto; clip-path: none; font-size: 22px; font-weight: 720; }
.ls-cosa { font-size: 14.5px; font-weight: 600; color: var(--lilla); letter-spacing: 0; }
.ls-tappe { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.ls-tappe button {
  position: relative; display: block; width: 100%; min-height: 44px; margin: 0; padding: 10px 0 10px 20px;
  border: 0; background: none; color: var(--sec); cursor: pointer; text-align: left;
  font: 500 15.5px/1.5 'Montserrat', 'Inter', system-ui, sans-serif; letter-spacing: -0.005em;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 300ms ease-out;
}
.ls-tappe button::before, .ls-tappe__riga { content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 2px; border-radius: 2px; }
.ls-tappe button::before { background: var(--riga-2); }
.ls-tappe__riga { display: block; background: var(--lilla); transform: scaleY(0); transform-origin: 50% 0; }
.ls-tappe li.attiva button { color: var(--testo); }
.lsiti--statico .ls-tappe button { color: var(--testo); }
.ls-tappe button:active { color: var(--lilla-chiaro); }
@media (hover: hover) and (pointer: fine) { .ls-tappe button:hover { color: var(--testo); } }

.ls-apri {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px;
  color: var(--testo); font-weight: 650; font-size: 16px; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 11px) / calc(100% - 26px) 1px no-repeat;
  touch-action: manipulation; transition: color 200ms ease-out;
}
.ls-apri svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms var(--curva); }
.ls-apri:active { color: var(--lilla); }
@media (hover: hover) and (pointer: fine) {
  .ls-apri:hover { color: var(--lilla); }
  .ls-apri:hover svg { transform: translate(2px, -2px); }
}

/* the way to the sites page */
.ls-fondo { margin-top: 44px; padding: 0 var(--g); }
.lv-avanti { gap: 14px; padding: 0 8px 0 24px; }
.lv-avanti .metallo-scritta { gap: 14px; }
.lv-freccia { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.lv-freccia svg { width: 17px; height: 17px; fill: none; stroke: #F7F8F8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--curva); }
.lv-avanti:active .lv-freccia svg { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) { .lv-avanti:hover .lv-freccia svg { transform: translateX(3px); } }

/* on the phone the rows take turns under the phone, in time with the clip (a list again when everything is still) */
@media (max-width: 1023px) {
  .lsiti--vivo .ls-tappe li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms; }
  .lsiti--vivo .ls-tappe li.attiva { opacity: 1; visibility: visible; transform: none; transition: opacity 380ms ease-out 80ms, transform 520ms var(--curva) 80ms, visibility 0s; }
}
@media (max-width: 374px) {
  .ls-scelta { gap: 8px; }
  .ls-scelta__voce { font-size: 13.2px; }
  .ls-tappe button { font-size: 15px; }
}
@media (min-width: 560px) {
  .ls-lungo { display: inline; }
  .ls-scelta { justify-content: flex-start; gap: 28px; }
  .lsiti .ls-tel { --w: max(190px, min(268px, calc((100svh - 330px) * 0.457))); }
}

/* ── Computer: nomi a sinistra, telefono al centro, cosa fa il sito a destra ── */
@media (min-width: 1024px) {
  .lsiti { padding: 160px 0 120px; }
  .ls-testa { max-width: calc(1296px + var(--g) * 2); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; }
  .ls-testa p { margin-top: 0; padding-bottom: 8px; }
  .ls-palco {
    max-width: calc(1296px + var(--g) * 2); margin: 64px auto 0;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 64px;
  }
  .ls-scelta { flex-direction: column; justify-content: center; gap: 0; border-bottom: 0; }
  .ls-scelta__voce { gap: 6px; padding: 22px 0 24px; border-top: 1px solid var(--riga); color: rgba(247, 248, 248, 0.42); }
  .ls-scelta__voce:last-child { border-bottom: 1px solid var(--riga); }
  .ls-scelta__voce[aria-selected="true"] { color: var(--testo); }
  .ls-scelta__nome { font-size: clamp(21px, 1.8vw, 27px); font-weight: 720; letter-spacing: -0.02em; line-height: 1.15; }
  .ls-scelta__cosa { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--sec); }
  .ls-scelta__barra { bottom: -1px; height: 2px; }
  .lsiti .ls-tel { --w: clamp(250px, min(21vw, calc((100svh - 200px) * 0.457)), 312px); }
  .ls-pannelli { max-width: 26em; justify-self: start; }
  .ls-cosa { display: none; }
  .ls-tappe { margin-top: 0; gap: 10px; }
  .ls-tappe button { font-size: 17px; line-height: 1.5; padding: 12px 0 12px 24px; }
  .ls-apri { margin-top: 18px; }
  .ls-fondo { max-width: calc(1296px + var(--g) * 2); margin: 72px auto 0; }
  @media (hover: hover) and (pointer: fine) { .ls-scelta__voce:hover { color: var(--testo); } }
}

/* ── Fermo: niente si muove, tutto è già al suo posto ── */
@media (prefers-reduced-motion: reduce) {
  .lv-tel__schermo, .lv-tel__stato, .ls-video, .ls-tappe button, .ls-scelta__voce { transition: none; }
}
html.fermo .ls-video, html.fermo .lv-tel__schermo, html.fermo .lv-tel__stato { transition: none; }