/* Chi siamo, «Come nasce la nostra mozzarella»: il racconto in quattro passi (25/10/2026, PIANO § 5.2.3).
   Da computer: il video fermo a sinistra che cambia col passo, i passi sul filo verticale a destra; il latte
   (blu, perché siamo sul bianco) scende lungo il filo e accende i dischi di porcellana mentre si legge.
   Da telefono: una riga di quattro schede-passo che scorre col dito, col filo dentro la riga e i dischi a cavallo
   del bordo alto; va solo il video della scheda in vista.
   Senza JavaScript e con «riduci animazioni»: tutto visibile, dischi accesi, filo pieno, niente spostamenti. */

.nasce {
  --disco: 48px;
  --raggio-n: 28px;
}
.nasce__testa { max-width: 640px; }
.nasce__testa .intro {
  margin-top: clamp(16px, 12px + 1vw, 24px); max-width: 44ch;
  font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); line-height: 1.5; color: var(--testo);
}

/* ---------- I dischi di porcellana (gli stessi del filo della home, sul chiaro) ---------- */
.nasce__disco {
  position: relative; z-index: 3;
  width: var(--disco); height: var(--disco); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--blu-notte);
  background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F8FAFC 40%, #E9EEF4 80%, #DCE3EC 100%);
  box-shadow: 0 10px 20px -10px rgba(10, 35, 95, .45), inset 0 -3px 6px rgba(10, 35, 95, .08), inset 0 2px 2px rgba(255, 255, 255, .95), 0 0 0 1px var(--filo);
  transition: transform 500ms var(--ease-out), color 300ms ease;
  isolation: isolate;
}
.nasce__disco::before {                  /* il fondo blu dello stato acceso */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #0D62AF, #054A9A);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .25), inset 0 -4px 8px rgba(2, 20, 70, .35);
  opacity: 0; transition: opacity 450ms var(--ease-out);
}
.nasce__disco::after {                   /* l'anello che si allarga una volta per accensione */
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--blu-medio);
  opacity: 0; pointer-events: none;
}
/* acceso: senza JavaScript e con «riduci animazioni» i dischi sono accesi */
.nasce:not(.nasce--vivo) .nasce__disco, .nasce__passo.acceso .nasce__disco { color: var(--bianco); }
.nasce:not(.nasce--vivo) .nasce__disco::before, .nasce__passo.acceso .nasce__disco::before { opacity: 1; }
.nasce--vivo .nasce__passo:not(.acceso) .nasce__disco { transform: scale(.94); }
.nasce--vivo .nasce__passo.acceso .nasce__disco::after { animation: nasce-anello 700ms var(--ease-out) both; }
@keyframes nasce-anello {
  from { opacity: .8; transform: scale(1); }
  to { opacity: 0; transform: scale(1.35); }
}

/* ---------- I video (le stesse cornici delle finestre della home) ---------- */
.nasce__vetro, .nasce__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--raggio-n);
  background: var(--latte-azzurro);
  box-shadow: var(--ombra-2);
  transform: translateZ(0);              /* Safari: il raggio taglia anche il video */
}
.nasce__vetro video, .nasce__media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.nasce__passo p {
  font-family: var(--serif); font-weight: 500; color: var(--blu-titolo);
  text-wrap: pretty;
}

/* ---------- Il link e le stazioni ---------- */
.nasce__azioni { margin-top: clamp(28px, 20px + 2vw, 48px); }
.nasce__stazioni { display: none; }

/* =================== Computer: il video fermo e il filo verticale =================== */
@media (min-width: 1024px) {
  .nasce__griglia {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(56px, 7vw, 120px); align-items: start;
  }
  .nasce__schermo {
    grid-column: 1; grid-row: 1 / span 2;
    position: sticky; top: max(calc(var(--header-h) + 28px), calc(50vh - 290px));
    width: 100%; max-width: 440px;
  }
  .nasce__testa { grid-column: 2; grid-row: 1; }
  .nasce__corpo { grid-column: 2; grid-row: 2; margin-top: clamp(40px, 4vw, 64px); }

  /* i quattro segmenti sopra il video: il passo a cui si è */
  .nasce__barre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
  .nasce__barre i { display: block; height: 3px; border-radius: 3px; background: var(--latte-azzurro); position: relative; overflow: hidden; }
  .nasce__barre i::after {
    content: ""; position: absolute; inset: 0; background: var(--blu);
    transform: scaleX(1); transform-origin: 0 50%;
    transition: transform 450ms var(--ease-out);
  }
  .nasce--vivo .nasce__barre i:not(.fatto)::after { transform: scaleX(0); }

  /* i video sovrapposti: si scambiano in dissolvenza */
  .nasce__vetro video { opacity: 0; transition: opacity 400ms var(--ease-in-out); }
  .nasce__vetro video.attivo { opacity: 1; }

  /* il filo verticale */
  .nasce__riga { position: relative; }
  .nasce__svg, .nasce__media, .nasce__stazioni { display: none; }
  .nasce__linea {
    position: absolute; z-index: 1; left: calc(var(--disco) / 2 - 3px); top: calc(var(--disco) / 2); height: 0;
    width: 6px; border-radius: 6px; background: var(--latte-azzurro);
  }
  .nasce__latte {
    position: absolute; left: 2px; top: 0; bottom: 0; width: 2px; border-radius: 2px;
    background: linear-gradient(var(--blu-medio), var(--blu));
    transform-origin: 50% 0;
  }
  .nasce__punta {                        /* la goccia in testa al latte */
    position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: var(--bianco); box-shadow: 0 0 0 3px var(--blu), 0 4px 10px rgba(5, 74, 154, .35);
    opacity: 0; transition: opacity 300ms ease;
  }
  .nasce--vivo .nasce__punta.vista { opacity: 1; }
  .nasce__passi { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
  .nasce__passo {
    display: grid; grid-template-columns: var(--disco) minmax(0, 1fr); column-gap: 32px; align-items: start;
    min-height: max(260px, 38vh);
  }
  .nasce__passo:last-child { min-height: 0; }
  .nasce__disco { grid-column: 1; grid-row: 1; }
  .nasce__passo p {
    grid-column: 2; grid-row: 1; max-width: 28ch; padding-top: 4px;
    font-size: clamp(1.375rem, .9rem + .75vw, 1.625rem); line-height: 1.32;
    transition: opacity 300ms ease;
  }
  .nasce--vivo .nasce__passo:not(.attivo) p { opacity: .35; }
  .nasce__azioni { margin-top: clamp(40px, 4vw, 64px); padding-left: calc(var(--disco) + 32px); }

  /* l'entrata del video: si svela dal basso, come le foto del sito */
  .nasce--vivo .nasce__vetro {
    clip-path: inset(100% 0 0 0 round var(--raggio-n));
    transition: clip-path 900ms var(--ease-in-out);
  }
  .nasce--vivo.in .nasce__vetro { clip-path: inset(0 0 0 0 round var(--raggio-n)); }
}

/* =================== Telefono e tablet: la riga che scorre col dito =================== */
@media (max-width: 1023px) {
  .nasce { --disco: 48px; --raggio-n: 20px; }
  .nasce__schermo, .nasce__linea { display: none; }
  .nasce__corpo { margin-top: 6px; }
  .nasce__riga {
    position: relative;
    margin: 0 calc(-1 * var(--gutter-d)) 0 calc(-1 * var(--gutter));
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nasce__riga::-webkit-scrollbar { display: none; }
  .nasce__svg {
    position: absolute; z-index: 1; left: 0; top: 0; height: 90px; width: 100%;
    overflow: visible; pointer-events: none;
  }
  .nasce__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .nasce__alone { stroke: var(--latte-azzurro); stroke-width: 8; }
  .nasce__traccia { stroke: var(--blu); stroke-width: 2; }
  .nasce__goccia { opacity: 0; transition: opacity .3s ease; }
  .nasce__goccia circle { fill: var(--bianco); stroke: var(--blu); stroke-width: 2.5; }
  .nasce__goccia circle + circle { fill: var(--blu); stroke: none; }
  .nasce--vivo .nasce__traccia { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .nasce--vivo .nasce__goccia.vista { opacity: 1; }

  .nasce__passi {
    list-style: none; margin: 0; position: relative; z-index: 2;
    display: flex; gap: 12px; width: max-content;
    padding: 52px var(--gutter-d) 8px var(--gutter);
  }
  .nasce__passo { position: relative; flex: 0 0 min(84vw, 340px); scroll-snap-align: start; }
  .nasce__disco { position: absolute; top: calc(var(--disco) / -2 - 12px); left: 16px; }
  .nasce__passo p {
    margin-top: 16px; padding: 0 6px 0 4px;
    font-size: clamp(1.0625rem, .9rem + .7vw, 1.1875rem); line-height: 1.38;
  }
  .nasce__stazioni { display: flex; justify-content: center; margin-top: 6px; }
  .nasce__stazioni button {
    width: 44px; height: 44px; padding: 0; border: 0; background: none; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-tocco) var(--ease-out);
  }
  .nasce__stazioni button:active { transform: scale(.9); }
  .nasce__stazioni span {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--latte-azzurro); box-shadow: inset 0 0 0 1px var(--filo);
    transition: background-color 200ms ease, transform 200ms var(--ease-out);
  }
  .nasce__stazioni button[aria-current="true"] span { background: var(--blu); box-shadow: none; transform: scale(1.15); }
  .nasce__stazioni button:focus-visible { outline: 3px solid var(--blu); outline-offset: -4px; }
  .nasce__azioni { margin-top: 18px; }

  /* l'entrata: le schede si svelano dall'alto, come latte versato */
  .nasce--vivo .nasce__media {
    clip-path: inset(0 0 100% 0 round var(--raggio-n));
    transition: clip-path 900ms var(--ease-in-out) calc(var(--i) * 90ms);
  }
  .nasce--vivo .nasce__media video { transform: scale(1.06); }
  .nasce--vivo.in .nasce__media { clip-path: inset(0 0 0 0 round var(--raggio-n)); }
  .nasce--vivo.in .nasce__media video { transform: none; transition: transform 1100ms var(--ease-out) calc(var(--i) * 90ms); }
  .nasce--vivo .nasce__passo p { opacity: 0; transform: translateY(12px); }
  .nasce--vivo.in .nasce__passo p {
    opacity: 1; transform: none;
    transition: opacity 600ms ease calc(var(--i) * 90ms + 250ms), transform 700ms var(--ease-out) calc(var(--i) * 90ms + 250ms);
  }
  .nasce--vivo .nasce__disco { opacity: 0; }
  .nasce--vivo.in .nasce__disco {
    opacity: 1;
    transition: opacity 500ms ease calc(var(--i) * 90ms + 350ms), transform 500ms var(--ease-out), color 300ms ease;
  }
  .nasce--vivo.in .nasce__passo:not(.acceso) .nasce__disco { transform: scale(.94); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .nasce__passo { flex-basis: 44vw; }
  .nasce__passo p { font-size: 1.125rem; }
}
@media (max-width: 359px) {
  .nasce__passo { flex-basis: 86vw; }
  .nasce__passo p { font-size: 1rem; padding: 0 2px; }
}

/* ---------- Meno movimento: tutto visibile, niente spostamenti ---------- */
@media (prefers-reduced-motion: reduce) {
  .nasce__disco, .nasce__disco::before, .nasce__passo p, .nasce__vetro video, .nasce__barre i::after { transition: none; }
  .nasce__disco::after { display: none; }
  .nasce__riga { scroll-behavior: auto; }
}

/* Testata di Chi siamo: la foto del locale va fino al bordo dello schermo, così il suo lato destro non si vede (team,
   25/10/2026: «non mi piace che sia tagliato così», poi «così è troppo tondo», poi «non mi piace così»). Da computer
   sfuma solo a sinistra, largo, nel blu dietro il testo, e in alto sotto l'onda; il fondo sta nel latte. Da telefono
   va da un bordo all'altro e sfuma solo in alto. Vale più delle regole del palco in style.css. */
@media (min-width: 861px) {
  .fascia--foto { --palco-w: 56vw; --palco-destra: 0px; --palco-giu: 0px; }
  .fascia--foto .palco { top: 0; right: 0; bottom: 0; width: 56vw; }
  .fascia--foto .palco__foto { position: absolute; inset: 0; aspect-ratio: auto; }
  .fascia--foto .palco__foto img { object-position: 42% 38%; }
  .fascia--foto .palco--foto { --pelo: 90%; }
}
.palco .palco__foto {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 6%, rgba(0,0,0,.13) 12%, rgba(0,0,0,.27) 18%, rgba(0,0,0,.44) 24%, rgba(0,0,0,.62) 30%, rgba(0,0,0,.78) 36%, rgba(0,0,0,.9) 42%, rgba(0,0,0,.97) 48%, #000 54%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,.7) 20%, #000 30%);
          mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 6%, rgba(0,0,0,.13) 12%, rgba(0,0,0,.27) 18%, rgba(0,0,0,.44) 24%, rgba(0,0,0,.62) 30%, rgba(0,0,0,.78) 36%, rgba(0,0,0,.9) 42%, rgba(0,0,0,.97) 48%, #000 54%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,.7) 20%, #000 30%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 860px) {
  .fascia--foto .palco { width: 100%; margin: 24px 0 var(--palco-sotto); }
  .palco .palco__foto {
    aspect-ratio: 4 / 5;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.6) 17%, #000 27%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.6) 17%, #000 27%);
  }
}