/* =================================================================
   /portraits — Spirale discendente di ritratti
   Sfondo (chiaro o scuro) con griglia sfumata a vignetta, card curve
   su un'elica 3D che scende ruotando. Pagina standalone.
   Tema gestito da variabili su .pt2 → toggle light/dark dall'header.
   ================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Sfondo del ROOT = tema corrente. Senza, durante uno scroll veloce il
   compositor mostra il canvas BIANCO di default sotto lo sfondo scuro di .pt2
   (lampo bianco prima che il nero riempia il viewport). Segue il toggle tema
   via --pt2-bg (scuro su :root.pt2-dark, bianco su :root). */
html { background: var(--pt2-bg, #070707); transition: background-color 0.5s ease; }
/* Reset globale dei link: shared/topbar.css NON toglie la sottolineatura da
   sé, si affida a questo reset per-pagina. Senza, i link della top bar (e
   ogni <a>) restano sottolineati. Allineato a food/portraits/dev/corp. */
a { color: inherit; text-decoration: none; }

/* Variabili tema su :root → raggiungono SIA la top bar (.nav, fratello di
   .pt2) SIA la sezione. Il dark toggle aggiunge .pt2-dark su <html>. */
:root {
  /* --- tema chiaro (default) --- */
  --pt2-bg:   #ffffff;
  --pt2-bg-rgb: 255, 255, 255;       /* per tinte semitrasparenti rgba(...) */
  --pt2-ink:  #161616;
  --pt2-mut:  #a3a3a3;
  --pt2-line: rgba(20, 20, 20, 0.06);
  --pt2-hair: rgba(20, 20, 20, 0.14);   /* righe divisorie FAQ */

  /* --- switch tema (vetro) — palette chiara --- */
  --pt2-sw-track: rgba(20, 20, 20, 0.05);
  --pt2-sw-brd:   rgba(20, 20, 20, 0.12);
  --pt2-sw-thumb: rgba(255, 255, 255, 0.55);
  --pt2-sw-thumb-brd: rgba(20, 20, 20, 0.10);
  --pt2-sw-thumb-hi:  rgba(255, 255, 255, 0.85);
  --pt2-sw-shadow: 0 4px 14px rgba(20, 20, 20, 0.14);

  /* --- contratto della top bar condivisa (partials/topbar.html) --- */
  --tb-sans: "Epilogue", system-ui, sans-serif;
  --tb-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --tb-ease: cubic-bezier(.22, 1, .36, 1);
  --tb-pad: clamp(24px, 4vw, 40px);
  --tb-pill: rgba(10, 10, 10, .06);
  --tb-pill-hover: rgba(10, 10, 10, .10);
  --tb-fg: var(--pt2-ink);
  --tb-fg-dim: rgba(10, 10, 10, .42);
  --tb-cta-bg: #1c1c1c;
  --tb-cta-fg: #ffffff;
  --tb-card: #ffffff;
  --tb-card-fg: var(--pt2-ink);
  --tb-card-muted: rgba(10, 10, 10, .34);
  --tb-link-hover: #1e2bff;
}

.pt2 {
  position: relative;
  width: 100%;
  min-height: 100svh;                /* la pagina ora SCORRE (spirale = sfondo fisso) */
  /* niente background qui: lo sfondo a tema è sul ROOT (html) come base color
     del canvas (non laggia in scroll). Un bg su .pt2 sarebbe un layer ridondante
     — ed era proprio quello che restava indietro nel ripaint. Le sezioni scure
     sono trasparenti (mostrano la spirale), la zona bianca dipinge il suo bianco. */
  color: var(--pt2-ink);
  font-family: 'Epilogue', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: color 0.5s ease;
}

/* --- tema scuro (classe su <html>) --- */
:root.pt2-dark {
  --pt2-bg:   #070707;
  --pt2-bg-rgb: 7, 7, 7;
  --pt2-ink:  #f2f2f2;
  --pt2-mut:  #6d6d6d;
  --pt2-line: rgba(255, 255, 255, 0.07);
  --pt2-hair: rgba(255, 255, 255, 0.14);

  /* --- switch tema (vetro) — palette scura --- */
  --pt2-sw-track: rgba(255, 255, 255, 0.05);
  --pt2-sw-brd:   rgba(255, 255, 255, 0.14);
  --pt2-sw-thumb: rgba(255, 255, 255, 0.12);
  --pt2-sw-thumb-brd: rgba(255, 255, 255, 0.18);
  --pt2-sw-thumb-hi:  rgba(255, 255, 255, 0.28);
  --pt2-sw-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* top bar adattata al fondo nero */
  --tb-pill: rgba(255, 255, 255, .08);
  --tb-pill-hover: rgba(255, 255, 255, .14);
  --tb-fg-dim: rgba(255, 255, 255, .5);
  --tb-cta-bg: #f2f2f2;
  --tb-cta-fg: #0a0a0a;
  --tb-card: #161616;
  --tb-card-muted: rgba(255, 255, 255, .5);
  --tb-link-hover: #6b78ff;
}

/* Top bar sopra la zona bassa: in tema CHIARO quel fondo è bianco, quindi
   ripristina l'aspetto per fondo chiaro. Il JS aggiunge .nav--light in base
   allo scroll; qui la limitiamo al tema chiaro (`:root:not(.pt2-dark)`) perché
   in dark la zona bassa ora è scura e la barra deve restare a tema scuro. */
:root:not(.pt2-dark) .nav.nav--light {
  --tb-pill: rgba(10, 10, 10, .06);
  --tb-pill-hover: rgba(10, 10, 10, .10);
  --tb-fg: #161616;
  --tb-fg-dim: rgba(10, 10, 10, .42);
  --tb-cta-bg: #1c1c1c;
  --tb-cta-fg: #ffffff;
  --tb-card: #ffffff;
  --tb-card-fg: #161616;
  --tb-card-muted: rgba(10, 10, 10, .34);
  --tb-link-hover: #1e2bff;
}

/* ---- Griglia con VIGNETTA: la maschera radiale la fa svanire prima dei
   bordi (rivelando il colore di sfondo). I raggi in % sono relativi al
   viewport → il margine resta proporzionale a qualsiasi dimensione. ---- */
.pt2-grid {
  position: fixed;                   /* sfondo fisso: resta dietro allo scroll */
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--pt2-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pt2-line) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 46% 44% at 50% 47%, #000 26%, transparent 100%);
          mask-image: radial-gradient(ellipse 46% 44% at 50% 47%, #000 26%, transparent 100%);
}

/* ---- Switch light · dark — centrato, SOTTO l'altezza della top bar,
   stesso font mono della top bar. z-index 6: sopra la spirale (z:1) E sopra
   le sezioni/vetro frosted (z:5) → resta visibile e cliccabile scrollando. ---- */
.pt2-head {
  position: fixed;
  top: clamp(76px, 9vh, 100px); left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;            /* solo i bottoni sono cliccabili */
}
/* Switch tema a vetro: track semitrasparente frosted, thumb scorrevole che
   porta l'etichetta del tema attivo. --pt2-sw-cell = larghezza di una metà. */
.pt2-switch {
  --pt2-sw-cell: 64px;
  --pt2-sw-pad: 4px;
  --pt2-sw-h: 30px;
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  padding: var(--pt2-sw-pad);
  border: 1px solid var(--pt2-sw-brd);
  border-radius: 999px;
  background: var(--pt2-sw-track);
  -webkit-backdrop-filter: blur(9px) saturate(1.3);
          backdrop-filter: blur(9px) saturate(1.3);
  cursor: pointer;
  font-family: var(--tb-mono);
  font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: background-color 0.5s ease, border-color 0.5s ease;
  -webkit-tap-highlight-color: transparent;
}
.pt2-switch:focus-visible { outline: 2px solid var(--pt2-link-hover, #6b78ff); outline-offset: 3px; }

/* etichette "ghost" nel track: quella coperta dal thumb è nascosta (il thumb
   porta la sua). Default (dark): a sinistra resta "light", a destra il thumb. */
.pt2-switch-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pt2-sw-cell);
  height: var(--pt2-sw-h);
  color: var(--pt2-mut);
  transition: opacity 0.32s ease;
}
.pt2-switch-label--light { opacity: 1; }
.pt2-switch-label--dark  { opacity: 0; }
.pt2-switch.is-light .pt2-switch-label--light { opacity: 0; }
.pt2-switch.is-light .pt2-switch-label--dark  { opacity: 1; }

/* thumb: vetro scorrevole. Default = destra (dark); .is-light lo porta a sinistra */
.pt2-switch-thumb {
  position: absolute;
  top: var(--pt2-sw-pad);
  left: var(--pt2-sw-pad);
  width: var(--pt2-sw-cell);
  height: var(--pt2-sw-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--pt2-sw-thumb);
  border: 1px solid var(--pt2-sw-thumb-brd);
  box-shadow: var(--pt2-sw-shadow), inset 0 1px 0 var(--pt2-sw-thumb-hi);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
          backdrop-filter: blur(10px) saturate(1.6);
  transform: translateX(var(--pt2-sw-cell));
  transition: transform 0.44s var(--tb-ease),
              background-color 0.5s ease, border-color 0.5s ease;
}
.pt2-switch.is-light .pt2-switch-thumb { transform: translateX(0); }
.pt2-switch-thumb-text {
  color: var(--pt2-ink);
  transition: color 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .pt2-switch-thumb { transition: background-color 0.5s ease, border-color 0.5s ease; }
}

/* ---- Anno verticale (fisso al viewport) ---- */
.pt2-year {
  position: fixed;
  left: 20px; bottom: 26px;
  z-index: 40;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--pt2-mut);
}

/* ---- Palco 3D — SFONDO FISSO (dietro al contenuto scrollabile) ---- */
.pt2-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  perspective: 1600px;
  perspective-origin: 50% 50%;
}
.pt2-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
}

/* ---- Card (anchor al centro del palco) ---- */
.pt2-card {
  position: absolute;
  left: 50%; top: 50%;
  transform-style: preserve-3d;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.pt2-card.is-ready { opacity: 1; }   /* le card restano al 100% (niente fade di profondità) */

/* contenitore della curvatura cilindrica (composta da fette).
   Niente `filter` qui: appiattirebbe il contesto preserve-3d. */
.pt2-curve {
  position: absolute;
  left: 0; top: 0;
  transform-style: preserve-3d;
}
.pt2-slice {
  position: absolute;
  left: 50%; top: 0;
  background-repeat: no-repeat;
  /* il retro DEVE essere visibile: è il lato interno della spirale, che
     mostra l'immagine specchiata */
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* =================================================================
   Contenuto scrollabile sopra la spirale fissa
   ================================================================= */

/* ---- Intro: vetro frosted + titolo (scorre via rivelando la spirale) ----
   L'intro è più alta di un viewport: il vetro resta UNIFORME per tutta la
   prima schermata (stop a 100svh) e inizia a sfumare SOLO oltre il fold. */
.pt2-intro {
  position: relative;
  z-index: 5;
  height: 180svh;
}
/* blur uniforme sul fold, poi sfuma (spirale che riappare). */
.pt2-intro-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 100svh, transparent 178svh);
          mask-image: linear-gradient(to bottom, #000 0, #000 100svh, transparent 178svh);
}
/* Mobile: raggio del blur ridotto → il layer vetro fisso si ri-rasterizza più
   in fretta durante lo scroll (meno "stop" della spirale). L'effetto resta. */
@media (max-width: 720px) {
  .pt2-intro-blur { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .pt2-cr-blur    { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
/* tinta uniforme sul fold, poi sfuma → spirale libera oltre il fold. */
.pt2-intro-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--pt2-bg-rgb), 0.62) 0,
    rgba(var(--pt2-bg-rgb), 0.62) 100svh,
    rgba(var(--pt2-bg-rgb), 0) 178svh);
}
/* copy in basso a sinistra della PRIMA schermata (bottom-leading). */
.pt2-intro-copy {
  position: relative;
  z-index: 2;
  height: 100svh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--tb-pad) clamp(64px, 12vh, 130px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.pt2-intro-title {
  margin: 0;
  font-family: var(--tb-sans);
  font-weight: 600;
  font-size: clamp(40px, 8vw, 118px);
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: var(--pt2-ink);
}
.pt2-intro-sub {
  margin: 0.7em 0 0;
  font-family: var(--tb-mono);
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pt2-mut);
}

/* rivelazione per parole: ogni parola sale dal basso, in overflow-hidden,
   con ritardo progressivo (--wi). Parte da sola al load. */
.pt2-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.26em;
  /* spazio per i discendenti (g, p): l'overflow-hidden altrimenti li taglia,
     il margine negativo mantiene invariata l'interlinea */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.pt2-intro-sub .pt2-w { margin-right: 0.5em; }
.pt2-w-in {
  display: inline-block;
  transform: translateY(115%);
  animation: pt2-word-up 0.9s var(--tb-ease) both;
  animation-delay: calc(var(--wi) * 0.075s + 0.15s);
}
@keyframes pt2-word-up {
  from { transform: translateY(115%); }
  to   { transform: translateY(0); }
}

/* ---- Auto-dismiss dell'intro dopo 2s (classe .is-out aggiunta dal JS) ----
   Titolo/sottotitolo escono con stagger INVERSO all'appear (parole giù, ultima
   apparsa esce per prima); lo sfondo frosted (blur + tinta) sfuma in opacità.
   Nota flicker backdrop-filter+mask: al top del documento la mask del blur è
   interamente opaca sul viewport visibile → il fade opacity NON mostra il
   glitch (il gradiente della mask sta sotto il fold, non a schermo). */
.pt2-intro-blur, .pt2-intro-tint { transition: opacity 0.8s ease; }
.pt2-intro.is-out .pt2-intro-blur,
.pt2-intro.is-out .pt2-intro-tint { opacity: 0; }
.pt2-intro-copy { transition: opacity 0.5s ease; }   /* usato solo in reduced-motion */

.pt2-intro.is-out .pt2-w-in {
  animation: pt2-word-down 0.7s var(--tb-ease) both;
  animation-delay: calc((var(--wn, 5) - 1 - var(--wi)) * 0.06s);
}
@keyframes pt2-word-down {
  from { transform: translateY(0); }
  to   { transform: translateY(150%); }   /* 150% (non 115%): clip pieno, niente frammenti a fine uscita */
}
/* A uscita completata il JS aggiunge .is-gone: l'intro esce dal flow (non
   occupa più scroll) e sparisce ogni frammento residuo. */
.pt2-intro.is-gone { display: none; }

/* Mobile: titolo/sottotitolo centrati verticalmente nel viewport (non in basso).
   DEVE stare DOPO la regola base .pt2-intro-copy (stessa specificità → vince
   l'ordine di sorgente), altrimenti flex-end la sovrascrive. */
@media (max-width: 720px) {
  .pt2-intro-copy { justify-content: center; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* niente slide: le parole svaniscono col fade del copy */
  .pt2-intro.is-out .pt2-w-in { animation: none; }
  .pt2-intro.is-out .pt2-intro-copy { opacity: 0; }
}
/* Scroll BLOCCATO durante l'intro: la classe è aggiunta dal JS al load e
   rimossa a uscita completata. touch-action/overscroll: robusto anche su mobile
   (oltre ai preventDefault su wheel/touchmove/keydown). */
html.pt2-lock, html.pt2-lock body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* Schermata hero: spazio vuoto, si vede solo la spirale. Regola lo scroll
   di spirale limpida prima della sezione "Ritratti creativi". */
.pt2-hero {
  position: relative;
  z-index: 5;
  height: 135svh;
  pointer-events: none;              /* i pointer passano alla spirale */
}

/* ---- Sezione "Ritratti creativi" ---- */
/* ---- Sezione "Ritratti creativi" — PINNATA a tutto viewport, con galleria
   orizzontale guidata dallo scroll verticale. L'altezza dell'outer è
   CONGELATA in px (--app-vh) per non "saltare" al toggle della barra mobile;
   il pin usa 100dvh (riempie il visibile → nessun salto). ---- */
.pt2-cr {
  position: relative;
  z-index: 5;                        /* sopra la spirale (z:1) */
  height: calc(3.2 * var(--app-vh, 100vh));   /* pin (1×) + scroll orizzontale (2.2×) */
}
.pt2-cr-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}

/* Vetro frosted del pin: blur (soft-in dall'alto per un ingresso senza stacco)
   + tinta → la spirale dietro resta appena visibile. */
.pt2-cr-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
}
.pt2-cr-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--pt2-bg-rgb), 0) 0,
    rgba(var(--pt2-bg-rgb), 0.85) 11%,
    rgba(var(--pt2-bg-rgb), 0.85) 100%);
}

/* Track orizzontale: slide "hero" (card + testo) poi gli altri ritratti.
   translateX guidato dallo scroll (impostato dal JS). */
.pt2-cr-track {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
  padding-right: clamp(24px, 6vw, 120px);
  will-change: transform;
}

/* Slide hero: card (sinistra) + testo (destra). */
.pt2-cr-hero { flex: 0 0 100vw; height: 100%; }
.pt2-cr-inner {
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--tb-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}
/* Slot: placeholder invisibile dove atterra la card volante (ne segue il rect). */
.pt2-cr-slot {
  height: min(64vh, 78vw);
  aspect-ratio: 3 / 4;
  margin-left: auto;
}
.pt2-cr-copy { max-width: 46ch; }
.pt2-cr-title {
  margin: 0;
  font-family: var(--tb-sans);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--pt2-ink);
}
.pt2-cr-text {
  margin: 1.1em 0 0;
  font-family: 'Epilogue', system-ui, sans-serif;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.62;
  color: var(--pt2-ink);
  opacity: 0.74;
}

/* Gli altri ritratti creativi che entrano da destra. */
.pt2-cr-shot { flex: 0 0 auto; height: 64vh; margin: 0; }
.pt2-cr-shot img {
  height: 100%; width: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.6);
}

@media (max-width: 720px) {
  .pt2-cr-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(20px, 6vw, 36px);
  }
  .pt2-cr-slot { margin: 0; height: min(52vh, 90vw); }
  .pt2-cr-shot { height: 52vh; }
}

/* ---- Ritratti professionali — PINNATA a tutto viewport + galleria
   orizzontale. Sfondo solido nel pin (niente spirale qui). Stessa meccanica
   dei "creativi" ma senza card volante. ---- */
.pt2-pro {
  position: relative;
  z-index: 5;
  height: calc(3.2 * var(--app-vh, 100vh));   /* pin (1×) + scroll orizzontale (2.2×) */
}
.pt2-pro-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--pt2-bg);          /* solido: chiude la spirale dietro */
}
.pt2-pro-track {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
  padding-right: clamp(24px, 6vw, 120px);
  will-change: transform;
}
.pt2-pro-hero { flex: 0 0 100vw; height: 100%; }
.pt2-pro-inner {
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--tb-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}
.pt2-pro-copy { max-width: 46ch; }
.pt2-pro-title {
  margin: 0;
  font-family: var(--tb-sans);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--pt2-ink);
}
.pt2-pro-text {
  margin: 1.1em 0 0;
  font-family: 'Epilogue', system-ui, sans-serif;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.62;
  color: var(--pt2-ink);
  opacity: 0.74;
}
.pt2-pro-media { margin: 0; height: 100%; display: flex; align-items: center; }
.pt2-pro-media img {
  height: min(66vh, 82vw); width: auto; max-width: 100%; display: block;
  border-radius: 16px;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.6);
}
.pt2-pro-shot { flex: 0 0 auto; height: 64vh; margin: 0; }
.pt2-pro-shot img {
  height: 100%; width: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.6);
}

/* Stesso tilt 3D dell'overlay "My approach" (/dev): il JS aggiorna
   --pt2-tilt-x/y al movimento del mouse, poi torna morbido a piatto. */
.pt2-cr-shot,
.pt2-pro-media,
.pt2-pro-shot {
  --pt2-tilt-x: 0deg;
  --pt2-tilt-y: 0deg;
  transform: perspective(1000px) rotateX(var(--pt2-tilt-x)) rotateY(var(--pt2-tilt-y));
  transform-style: preserve-3d;
  transition: transform .5s var(--tb-ease, ease);
  will-change: transform;
}
.pt2-cr-shot.is-tilting,
.pt2-pro-media.is-tilting,
.pt2-pro-shot.is-tilting {
  transition: transform .1s linear;
}

@media (max-width: 720px) {
  .pt2-pro-inner { grid-template-columns: 1fr; gap: clamp(20px, 6vw, 36px); }
  .pt2-pro-media img { height: min(52vh, 90vw); }
  .pt2-pro-shot { height: 52vh; }
}

/* Mobile: niente sezioni pinnate con scroll orizzontale pilotato. Il telefono
   legge una sequenza verticale stabile; il JS lascia i track senza transform. */
@media (max-width: 720px) {
  .pt2-stage,
  .pt2-grid {
    opacity: 1;
    transition:
      opacity 0.42s var(--tb-ease),
      transform 0.55s var(--tb-ease);
    will-change: opacity, transform;
  }
  html.pt2-mobile-content-mode .pt2-stage {
    opacity: 0;
    transform: translate3d(0, -14vh, 0) scale(0.985);
    pointer-events: none;
  }
  html.pt2-mobile-content-mode .pt2-grid {
    opacity: 0;
    transform: translate3d(0, -9vh, 0);
  }
  .pt2-intro-blur,
  .pt2-cr-blur {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .pt2-cr,
  .pt2-pro {
    height: auto;
    background: var(--pt2-bg);
  }
  .pt2-cr-pin,
  .pt2-pro-pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .pt2-cr-tint {
    background: linear-gradient(to bottom,
      rgba(var(--pt2-bg-rgb), 0.86) 0,
      rgba(var(--pt2-bg-rgb), 0.92) 100%);
  }
  .pt2-cr-track,
  .pt2-pro-track {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: clamp(64px, 15vw, 100px) var(--tb-pad) clamp(58px, 13vw, 86px);
    transform: none !important;
    will-change: auto;
  }
  .pt2-pro-track {
    padding-top: clamp(58px, 14vw, 92px);
  }
  .pt2-cr-hero,
  .pt2-pro-hero {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }
  .pt2-cr-inner,
  .pt2-pro-inner {
    height: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }
  .pt2-cr-slot {
    display: none;
  }
  .pt2-fly {
    display: none;
  }
  .pt2-cr-copy,
  .pt2-pro-copy {
    max-width: 38ch;
  }
  .pt2-pro-media,
  .pt2-cr-shot,
  .pt2-pro-shot {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 14px;
    transform: none;
    transform-style: flat;
    transition: none;
    will-change: auto;
  }
  .pt2-pro-media {
    display: block;
    margin: 0;
  }
  .pt2-cr-shot img,
  .pt2-pro-media img,
  .pt2-pro-shot img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- Layer + card "volante" (sopra il vetro, non sfocata) ---- */
.pt2-fly {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  perspective: 1600px;
  opacity: 0;                        /* mostrata dal JS solo durante la transizione */
}
.pt2-flycard {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.pt2-flycurve {
  position: absolute;
  left: 0; top: 0;
  transform-style: preserve-3d;
}

/* ---- Transizione nero → bianco ANIMATA on scroll ----
   Zona sticky: il layer riempie il viewport (sfondo = tema, nero in dark) e
   un overlay bianco cresce in opacità (0→1) mentre scorri → tutto il viewport
   passa da nero a bianco. In light il tema è già bianco → nessuna differenza. */
.pt2-fade {
  position: relative;
  z-index: 5;
  height: calc(1.35 * var(--app-vh, 100vh));  /* pin (1×) + transizione breve (0.35×) */
}
.pt2-fade-layer {
  position: sticky;
  top: 0;
  height: 100dvh;
  background: var(--pt2-bg);
}
.pt2-fade-white {
  position: absolute;
  inset: 0;
  background: var(--pt2-bg);     /* transizione a tema (bianco in light, nero in dark) → niente flash bianco in dark */
  opacity: 0;                    /* pilotata dal JS con lo scroll */
  will-change: opacity;
}

/* Zona bassa (Featured + FAQ): SEGUE il tema (toggle chiaro/scuro).
   Sfondo opaco a tema → copre la spirale fissa; testo a tema.
   (Prima forzava sempre bianco + testo scuro a prescindere dal toggle.) */
.pt2-light {
  position: relative;
  z-index: 5;
  background: var(--pt2-bg);
  color: var(--pt2-ink);
}

/* ---- FAQ (in fondo alla pagina, sfondo solido) ---- */
.pt2-faq {
  position: relative;
  z-index: 5;
  background: var(--pt2-bg);
  padding: clamp(90px, 14vh, 180px) 0 clamp(80px, 12vh, 140px);
}
.pt2-faq-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--tb-pad);
}
.pt2-faq-title {
  margin: 0 0 clamp(26px, 4vh, 52px);
  font-family: var(--tb-sans);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 56px);
  letter-spacing: -0.015em;
  color: var(--pt2-ink);
}
.pt2-faq-list { border-top: 1px solid var(--pt2-hair); }
.pt2-faq-item { border-bottom: 1px solid var(--pt2-hair); }
.pt2-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-family: var(--tb-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--pt2-ink);
}
.pt2-faq-item summary::-webkit-details-marker { display: none; }
.pt2-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 1.4em;
  line-height: 1;
  color: var(--pt2-mut);
}
.pt2-faq-item[open] summary::after { content: "\2013"; }
.pt2-faq-answer { padding: 0 40px 26px 0; max-width: 720px; }
.pt2-faq-answer p {
  margin: 0 0 1em;
  font-family: 'Epilogue', system-ui, sans-serif;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--pt2-ink);
  opacity: 0.74;
}
.pt2-faq-answer p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .pt2-scene { transition: none; }
  .pt2-w-in { animation: none; transform: none; }
}