/* ============================================================
   Chi siamo — il finale "la famiglia" (scelto tra le prove di chi-siamo-finali.html, 21 ott 2026; regia in assets/js/famiglia.js).
   Scena fissata: piano di vetro coi cinque fondatori, il logo vero (barre.svg) che si compone, i promoter come chip in rilievo
   (gli stessi della bacheca di Lavora con noi), poi in primo piano fino a #wearevibra con la chiamata alle serate.
   Regole 3D del sito: contenitori preserve-3d trasparenti con pointer-events: none (solo link e bottoni li prendono);
   mai opacità su un elemento preserve-3d o su un suo antenato dentro la scena: va sugli oggetti finali.
   ============================================================ */
.fz { position: relative; }
.fz-pin { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
.fz-track { height: calc(var(--len, 300) * 1svh); }
.fz-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 4.6rem); line-height: 1; letter-spacing: -.02em; margin: 0; }
.fz-big em { font-style: normal; color: var(--viola-chiaro); }
.fz-text { display: grid; gap: 14px; margin-top: 22px; color: var(--grigio); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; }
.fz-text p { margin: 0; }
.fz-card { text-align: center; }
.fz-card h2 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); margin: 0 0 12px; }
.fz-card p { color: rgba(255,255,255,.82); font-size: 1.1rem; max-width: 40ch; margin: 0 auto; }
.fz-card .btn { margin-top: 26px; }

.fz-b__glass { position: absolute; inset: 0; border-radius: 28px; background: linear-gradient(160deg, rgba(36,16,62,.9), rgba(16,7,28,.94));
  border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.fz-b__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(1px); }
.fz-b__links path { fill: none; stroke: #c4a1ff; stroke-width: 2; stroke-linecap: round; opacity: 0; will-change: opacity; }
.fz-b__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) translateZ(2px); padding: 10px 16px; border-radius: 999px;
  background: #1f0e35; border: 1px solid rgba(196,161,255,.5); font: 800 1rem/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 0 22px -4px rgba(155,92,240,.6); will-change: transform, opacity; }

/* ---------- E. la famiglia (B + D): piano di vetro, i cinque coi nomi, il logo vero che nasce da loro ---------- */
.fz-e .fz-pin { background: radial-gradient(90% 60% at 50% 110%, rgba(85,26,142,.4), transparent 65%); }
.fz-e__copy { position: absolute; z-index: 3; left: var(--gutter); top: clamp(92px, 13vh, 130px); width: min(36vw, 560px); pointer-events: none; will-change: opacity; }
.fz-e__copy .fz-big { font-size: clamp(2.2rem, 3.8vw, 4rem); }
.fz-e__copy .fz-text { max-width: 40ch; font-size: 1rem; }
.fz-e__copy .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.fz-e__copy .w > span { display: inline-block; will-change: transform; }
.fz-e__stage { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 50% 32%; pointer-events: none; }
.fz-e__world { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
/* il piano largo 1,6 volte l'altezza: sotto il logo c'è posto per tutte le file di nomi */
/* larga al più 900px, il 58% della larghezza e il 90% dell'altezza dello schermo: sugli schermi bassi le ultime file di nomi uscivano dal fondo */
.fz-e__floor { --fw: min(900px, 58vw, 90vh); position: absolute; left: 63%; top: 52%; width: var(--fw); aspect-ratio: 1.6 / 1; margin-left: calc(var(--fw) / -2);
  transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; transform: translateY(-50%) rotateX(62deg); }
/* il logo sta in piedi sul vetro e ruota al contrario del piano: resta dritto davanti a chi guarda (famiglia.js) */
.fz-e__logo { position: absolute; left: 6%; width: 88%; bottom: 53%; aspect-ratio: 947 / 180; transform-origin: 50% 100%; transform-style: preserve-3d; will-change: transform; }   /* un filo sopra la metà: sotto ci stanno tutte le file di nomi anche sugli schermi bassi (1280×720) */
/* i due strati sono piani (niente preserve-3d): i 75 pezzi si disegnano dentro il loro strato invece di essere 75 livelli 3D
   che il telefono ordina e compone a ogni fotogramma (era la causa dei microscatti). Lo spessore resta: è lo strato davanti a stare 16px più avanti */
.fz-e__layer { position: absolute; inset: 0; }
.fz-e__layer--front { transform: translateZ(16px); }   /* le pillole davanti alle barre piene: il logo ha spessore */
.fz-e__logo svg { position: absolute; overflow: visible; }
/* i colori del logo vero: barre piene nere, pillole bianche (niente aloni: "fanno molto IA") */
.fz-e__layer--back path { fill: #000; }
.fz-e__layer--front path { fill: #fff; }
/* i nomi sul vetro senza bagliore viola; i promoter che si aggiungono un filo più piccoli dei cinque */
/* i nomi sono tessere in rilievo sopra il vetro, come i chip della bacheca di Lavora con noi: stesso fondo, bordo, angoli e ombra
   portata (il rilievo lo dà famiglia.js con translateZ, 44px come là; il 3D lo dà il piano girato come il pannello della bacheca).
   Stesso carattere (Sora) e lo stesso quadratino davanti al nome: pieno lilla per i cinque fondatori, vuoto per i promoter */
.fz-e .fz-b__node { display: flex; align-items: center; gap: 9px; padding: 11px 15px 11px 13px; border-radius: 14px;
  font: 800 clamp(.8rem, .95vw, .92rem)/1.15 "Sora", var(--font-display); letter-spacing: -.02em;
  background: #1f0e35; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 22px 34px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.fz-e .fz-b__node::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; background: #9b5cf0; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.fz-e .fz-e__promo { padding: 9px 13px 9px 11px; font-size: clamp(.76rem, .88vw, .86rem); }
.fz-e .fz-e__promo::before { background: var(--paper); }
/* i puntini: ci sono altre persone; e in fondo la riga che chiude, nel viola del brand (senza quadratino) */
.fz-e .fz-e__more { letter-spacing: .12em; color: rgba(247,243,255,.7); }
.fz-e .fz-e__more::before, .fz-e .fz-e__family::before { display: none; }
.fz-e .fz-e__family { padding: 11px 18px; background: var(--viola); border-color: rgba(196,161,255,.5); }
.fz-e__cta { position: absolute; left: 50%; top: 50%; width: min(620px, 88vw); margin-left: calc(min(620px, 88vw) / -2);
  padding: 34px 30px 36px; border-radius: 26px; background: linear-gradient(160deg, var(--viola) 0%, var(--viola-scuro) 100%);
  box-shadow: 0 60px 110px -40px rgba(0,0,0,.95); pointer-events: auto; will-change: transform, opacity; container-type: inline-size; }
/* #wearevibra è largo circa 8 volte la sua altezza: al più l'11% della scheda, così resta dentro anche dove 4,2rem non ci stava */
.fz-e__cta h2 { font-size: min(clamp(2.2rem, 4.4vw, 4.2rem), 11cqi); }

/* ---------- telefono (scala --m-*) ---------- */
@media (max-width: 860px) {
  .fz-big { font-size: var(--m-display); letter-spacing: var(--m-track); }
  .fz-text { font-size: var(--m-body); margin-top: 16px; text-wrap: pretty; }
  .fz-card h2 { font-size: var(--m-h2); letter-spacing: var(--m-track); }
  .fz-card p { font-size: var(--m-body); }
  .fz-e__copy { top: 84px; left: 16px; right: 16px; width: auto; }
  .fz-e__copy .fz-text p:first-child { display: none; }   /* sul telefono la frase corta: la lunga copriva il piano */
  .fz-e__floor { --fw: min(100vw, 560px, 58vh); left: 50%; top: 58%; width: var(--fw); margin-left: calc(var(--fw) / -2); aspect-ratio: .82 / 1; }   /* il logo (88% del piano) resta dentro lo schermo; più alto che largo: c'è posto per le file di nomi */
  .fz-e .fz-b__node { font-size: var(--m-label); padding: 6px 9px 6px 8px; gap: 6px; border-radius: 10px; }
  .fz-e .fz-b__node::before { width: 7px; height: 7px; border-radius: 2px; }   /* tanti nomi sul piano: alla misura più piccola del sito (12px) */
  .fz-e__logo { bottom: 54%; }   /* il logo un po' più su: sotto ci stanno le file dei nomi */
  .fz-e__cta { padding: 24px 18px 26px; }
}

/* senza animazioni: tutto fermo e leggibile */
.fz-static .fz-track { display: none; }
.fz-static .fz-pin { position: relative; }