/* Applicazioni fatte da noi (home.app) — bozza E, giro 4, 22/10/2026. Mobile first.
   Due lavori veri. Il telefono fa il giro dell'app (la schermata vera che scorre, le notifiche coi testi veri dell'app)
   mentre accanto si accende la riga di quel momento. Sul computer: telefono e testo affiancati, a lati alterni.
   Si anima solo transform e opacity. Con «riduci movimento» o html.fermo tutto resta fermo e completo. */

/* ── Il telefono (uguale in parti/siti.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);
}
.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 ─────────────────────────────── */
.lapp { position: relative; padding: 96px 0 96px; isolation: isolate; overflow-x: clip; }
.la-testa { padding: 0 var(--g); }
.la-testa p { max-width: 30em; }

.la-app {
  position: relative; margin-top: 72px; padding: 0 var(--g);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "testa" "vista" "fine"; gap: 28px;
}
.la-app + .la-app { margin-top: 96px; }
.la-app__testa { grid-area: testa; }
.la-app__vista { grid-area: vista; position: relative; display: grid; justify-items: center; gap: 14px; }
.la-app__fine { grid-area: fine; max-width: 32em; }

.la-app__tipo { font-size: 14.5px; font-weight: 650; color: var(--lilla); letter-spacing: 0; }
.la-app__nome { margin-top: 10px; font-size: clamp(36px, 10vw, 64px); line-height: 1.02; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; }
.la-app__dove { margin-top: 8px; font-size: 15.5px; color: var(--sec); }
.la-app__frase { margin-top: 18px; max-width: 30em; font-size: 18px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; }

.la-app__vista::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 48%; width: 170%; aspect-ratio: 1.2; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(139, 111, 184, 0.3), rgba(139, 111, 184, 0.07) 55%, rgba(139, 111, 184, 0));
}
.lapp .la-tel { --w: max(190px, min(64vw, 252px, calc((100svh - 300px) * 0.457))); }
.la-nota { font-size: 13.5px; line-height: 1.4; color: var(--sec); text-align: center; }

/* the steps, lit together with the phone; a tap takes the phone to that point */
.la-tappe { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.la-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;
}
.la-tappe button::before, .la-tappe__riga { content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 2px; border-radius: 2px; }
.la-tappe button::before { background: var(--riga-2); }
.la-tappe__riga { display: block; background: var(--lilla); transform: scaleY(0); transform-origin: 50% 0; }
.la-tappe li.attiva button { color: var(--testo); }
.la-app--statico .la-tappe button, html:not(.js) .la-tappe button { color: var(--testo); }
.la-tappe button:active { color: var(--lilla-chiaro); }
@media (hover: hover) and (pointer: fine) { .la-tappe button:hover { color: var(--testo); } }

.la-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;
}
.la-apri svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms var(--curva); }
.la-apri:active { color: var(--lilla); }
@media (hover: hover) and (pointer: fine) {
  .la-apri:hover { color: var(--lilla); }
  .la-apri:hover svg { transform: translate(2px, -2px); }
}

.la-fondo { margin-top: 64px; 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); } }

/* ══ Dentro il telefono ═══════════════════════════════════════
   1 pt del telefono vero (390 pt di larghezza) = --pt. Le scritte delle notifiche sono un po' più grandi del vero, per leggerle. */
.la-vista { --pt: calc(var(--w) * 0.932 / 390); color: #111; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
.la-pagina { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; transform: translate3d(0, 0, 0); will-change: transform; }
.la-pagina.salta { transition: transform 600ms var(--curva); }

/* (screenshot rows: the bar is 1131-1212, the half line hidden under it starts at 1105) */

/* the lock screen of the restaurant's phone */
.la-blocco {
  position: absolute; inset: 0; z-index: 3; color: #fff; text-align: center;
  background: radial-gradient(130% 70% at 50% 0%, #1f55a8 0%, #0c2d68 42%, #060c20 100%);
  opacity: 0; transition: opacity 380ms ease-out;
}
.la-blocco.mostra { opacity: 1; }
.la-blocco__lucchetto { position: absolute; left: 50%; top: calc(var(--pt) * 14); width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); margin-left: calc(var(--pt) * -8.5); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; }
.la-blocco__data { position: absolute; left: 0; right: 0; top: calc(var(--pt) * 44); font-size: calc(var(--pt) * 21); font-weight: 600; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.86); }
.la-blocco__data::first-letter { text-transform: uppercase; }
.la-blocco__ora { position: absolute; left: 0; right: 0; top: calc(var(--pt) * 68); font-size: calc(var(--pt) * 92); line-height: 1; font-weight: 650; letter-spacing: -0.035em; color: rgba(255, 255, 255, 0.94); font-variant-numeric: tabular-nums; }
.la-blocco__tasto { position: absolute; bottom: calc(var(--pt) * 46); width: calc(var(--pt) * 50); height: calc(var(--pt) * 50); border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); }
.la-blocco__tasto--sx { left: calc(var(--pt) * 46); }
.la-blocco__tasto--dx { right: calc(var(--pt) * 46); }
.la-blocco__tasto svg { width: 46%; height: 46%; fill: #fff; }
.la-blocco::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--pt) * 9); width: calc(var(--pt) * 136); height: calc(var(--pt) * 5); margin-left: calc(var(--pt) * -68); border-radius: 999px; background: rgba(255, 255, 255, 0.86); }

/* a notification, the way the phone shows it */
.la-notifica {
  position: absolute; left: calc(var(--pt) * 9); right: calc(var(--pt) * 9);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: calc(var(--pt) * 11);
  padding: calc(var(--pt) * 13) calc(var(--pt) * 14) calc(var(--pt) * 14) calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 22); text-align: left;
  font-size: calc(var(--pt) * 16.5); line-height: 1.3; letter-spacing: -0.012em;
}
.la-notifica__corpo { display: grid; gap: calc(var(--pt) * 2); min-width: 0; }
.la-notifica__riga { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--pt) * 8); }
.la-notifica__riga b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-notifica__riga small { flex: none; font-size: calc(var(--pt) * 14); opacity: 0.6; }
.la-notifica__testo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.la-icona { flex: none; width: calc(var(--pt) * 40); height: calc(var(--pt) * 40); border-radius: calc(var(--pt) * 10); overflow: hidden; display: grid; place-items: center; }

.la-notifica--sala {
  top: calc(var(--pt) * 196); color: #fff;
  background: rgba(54, 60, 78, 0.72); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(calc(var(--pt) * 26)) scale(0.96);
  transition: opacity 260ms ease-out, transform 520ms var(--curva);
}
.la-notifica--sala.mostra { opacity: 1; transform: none; }
.la-icona--sala {
  /* the shiba of the room app, taken from the restaurant's own page */
  background-color: #023B83; background-repeat: no-repeat; background-size: 186.67% auto; background-position: 34.6% 17.19%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
html:not(.js) .la-icona--sala, .la-app.vicino .la-icona--sala { background-image: url('../lavori/fu-ramen.webp'); }

.la-notifica--wa {
  z-index: 4; top: calc(var(--pt) * 8); color: #111;
  background: rgba(246, 246, 248, 0.95); box-shadow: 0 calc(var(--pt) * 10) calc(var(--pt) * 30) rgba(0, 0, 0, 0.32), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  opacity: 0; transform: translateY(-120%);
  transition: opacity 200ms ease-out, transform 240ms var(--curva-esce);
}
.la-notifica--wa.mostra { opacity: 1; transform: none; transition: opacity 240ms ease-out, transform 560ms var(--curva); }
.la-notifica--wa .la-notifica__riga small { opacity: 0.5; }
.la-notifica--wa .la-notifica__testo { -webkit-line-clamp: 4; }
.la-icona--wa { background: #25D366; color: #fff; }
.la-icona--wa svg { width: 70%; height: 70%; fill: #fff; }

/* on the phone the steps take turns under the phone, in time with it (a list again when everything is still) */
@media (max-width: 1023px) {
  .la-app--vivo .la-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; }
  .la-app--vivo .la-tappe li.attiva { opacity: 1; visibility: visible; transform: none; transition: opacity 380ms ease-out 80ms, transform 520ms var(--curva) 80ms, visibility 0s; }
  .la-app--vivo .la-app__fine { margin-top: -6px; }
}
@media (max-width: 374px) {
  .la-tappe button { font-size: 15px; }
  .la-app__frase { font-size: 17px; }
}
@media (min-width: 560px) {
  .lapp .la-tel { --w: max(190px, min(268px, calc((100svh - 300px) * 0.457))); }
}

/* ── Computer: telefono e testo affiancati, a lati alterni ── */
@media (min-width: 1024px) {
  .lapp { padding: 120px 0 140px; }
  .la-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; }
  .la-testa p { margin-top: 0; padding-bottom: 8px; }
  .la-app {
    max-width: calc(1296px + var(--g) * 2); margin: 104px auto 0;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
    grid-template-areas: "vista testa" "vista fine"; column-gap: 72px; row-gap: 32px; align-items: start;
  }
  .la-app + .la-app { margin-top: 136px; }
  .la-app--specchio { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "testa vista" "fine vista"; }
  .la-app__testa { align-self: end; max-width: 36em; }
  .la-app--specchio .la-app__testa, .la-app--specchio .la-app__fine { justify-self: end; width: min(100%, 36em); }
  .la-app__fine { max-width: 36em; }
  .la-app__vista { align-self: center; }
  .lapp .la-tel { --w: clamp(250px, min(21vw, calc((100svh - 200px) * 0.457)), 312px); }
  .la-app__frase { font-size: 20px; }
  .la-tappe { gap: 8px; }
  .la-tappe button { font-size: 17px; padding: 12px 0 12px 24px; }
  .la-fondo { max-width: calc(1296px + var(--g) * 2); margin: 104px auto 0; }
}

/* ── Fermo: niente si muove, tutto è già al suo posto ── */
@media (prefers-reduced-motion: reduce) {
  .la-blocco, .la-notifica--sala, .la-notifica--wa, .la-notifica--wa.mostra, .la-pagina.salta, .la-tappe button { transition: none; }
}
html.fermo .la-blocco, html.fermo .la-notifica--sala, html.fermo .la-notifica--wa, html.fermo .la-notifica--wa.mostra, html.fermo .la-pagina.salta { transition: none; }