/* ══════════════════════════════════════════════════════════════════
   HERO "ESPERIENZA" — 22/09/2026
   Adattamento del pacchetto di Dario (Codex, VRE) dentro il tema. Sorgente
   originale: esperienza/style.css (9 righe, minificato). Qui riscritto
   leggibile e con OGNI selettore sotto #hero-esperienza — il file di
   partenza aveva regole su tag nudi (body, header, h1, h2, nav, footer,
   button, a, *) che avrebbero riscritto lo stesso tag ovunque sul sito
   (il vero <nav id="nav">, il vero <footer>, gli h2 di Manifesto/Servizi
   più sotto nella stessa pagina): con la sezione #hero-esperienza vera,
   dentro la home, quella collisione sarebbe stata reale, non teorica.

   Tolto (motivo):
   - *{box-sizing}, html{scrollbar-color}, body{...}, a{...}, button{font,
     cursor:pointer}, focus-visible — il tema li ha già, identici o
     equivalenti (compreso cursor:none: il sito ha un cursore personalizzato,
     i bottoni di questa sezione lo seguono come tutti gli altri, invece di
     tornare al cursore di sistema).
   - header/.brand/.signature — l'intestazione fissa propria del pacchetto
     (logo + tagline + bottone play) è stata tolta: il sito ha già una sua
     barra di navigazione fissa in cima a OGNI pagina, comprese due
     intestazioni sovrapposte sarebbe stato un doppione. Il bottone "play"
     resta (vedi #play qui sotto), spostato dentro .stage.

   Colori: --he-cream/--he-gold sono gli originali del pacchetto (nomi
   prefissati apposta per non confondersi con --ivory/--gold del tema,
   leggermente diversi — l'esperienza ha una sua palette approvata da
   conservare così com'è, non da far combaciare col resto del sito).
════════════════════════════════════════════════════════════════════ */
#hero-esperienza {
  --he-cream: #f1e9dc;
  --he-gold: #d9bd8e;
  position: relative;
  background: #181611;
  color: var(--he-cream);
}
#hero-esperienza button,
#hero-esperienza a { -webkit-tap-highlight-color: transparent; }

/* Skip link: stesso pattern di accessibilità dell'originale, ma il punto
   dove "atterra" da tastiera è spostato sotto la barra di navigazione vera
   (var(--nav-h)) — nell'originale (senza nav sopra) copriva 10px dall'alto,
   qui ci finirebbe sotto la nav del sito e sarebbe invisibile. */
#hero-esperienza .skip {
  position: fixed; z-index: 100; top: -90px; left: 20px;
  background: #181611; padding: 15px; color: var(--he-cream);
}
#hero-esperienza .skip:focus { top: calc(var(--nav-h, 72px) + 10px); }

/* 🔴 trovato SOLO provando lo scroll per davvero (mai a schermo restando
   fermi su un fotogramma): main.css ha una regola globale "section {
   overflow: hidden }" (riga ~1714, UI/UX Pro Max). #hero-esperienza e
   .journey sono entrambi <section> — con l'overflow tagliato,
   .stage{position:sticky} smette di "restare incollata": l'ancestor che
   dovrebbe scorrere non ha più un vero scroll da seguire, e .stage scorre
   via come un elemento qualsiasi invece di restare fissa per tutta la
   sequenza. Qui si ripristina SOLO per queste due, non si tocca la regola
   globale (serve altrove, per motivi che non riguardano questa sezione). */
#hero-esperienza,
#hero-esperienza .journey { overflow: visible; }

#hero-esperienza .journey { height: 850svh; }
#hero-esperienza .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
#hero-esperienza .visual { position: absolute; inset: 0; overflow: hidden; background: #211e17; }
#hero-esperienza .room { position: absolute; width: 100%; height: 100%; will-change: transform; }
#hero-esperienza .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#hero-esperienza .plate:not(:first-child) { opacity: 0; will-change: opacity; }
#hero-esperienza .furniture { mask-size: cover; mask-position: center; mask-repeat: no-repeat; }
#hero-esperienza .kitchen { mask-image: url(../esperienza/kitchen.svg); }
#hero-esperienza .sofa { mask-image: url(../esperienza/sofa.svg); }
#hero-esperienza .living { mask-image: url(../esperienza/living.svg); }
#hero-esperienza .art { mask-image: url(../esperienza/art.svg); }
#hero-esperienza .console { mask-image: url(../esperienza/console.svg); }
#hero-esperienza .floor { mix-blend-mode: screen; }
#hero-esperienza .cove { mask-image: linear-gradient(#000 0%, #000 13%, #000b 23%, transparent 50%); }
#hero-esperienza .artwork { mask-image: radial-gradient(ellipse 15% 34% at 55.5% 34%, #000 38%, transparent 100%); }
#hero-esperienza .objects { mask-image: radial-gradient(ellipse 14% 48% at 92% 39%, #000 35%, transparent 100%); }
/* Override approvato dal pacchetto originale: cucina/divano/living restano
   senza maschera propria (l'effetto finale li usa diversamente) — l'ordine
   con le regole sopra conta, non è un duplicato da "ripulire". */
#hero-esperienza .kitchen,
#hero-esperienza .sofa,
#hero-esperienza .living { mask-image: none; }

#hero-esperienza .shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #0b0b0a60, transparent 45%),
    linear-gradient(0deg, #0c0c0aa8, transparent 24%);
}
/* max-width 620px e non 410 come nel pacchetto (23/09/2026): col titolo
   scelto da Dario, «La luce si progetta», a 410px l'<h1> andava a capo in
   3 righe a 1280px e in 4 a 1920px («La luce si / progetta / a stanza /
   vuota.»); e già col pacchetto «La casa si racconta.» (atto 3) andava a
   capo da 1600px in su. Il disegno è di due righe, una dritta e una in
   corsivo: 620px le tengono intere fino a 72px di carattere (il massimo
   del clamp). Le frasi sotto hanno i loro a-capo scritti, non si allargano. */
#hero-esperienza .copy {
  position: absolute; left: 4%; top: 26%; max-width: 620px;
  text-shadow: 0 2px 30px #0005; pointer-events: none;
  opacity: 0; transform: translateY(15px);
}
#hero-esperienza #copy0 { opacity: 1; transform: none; }
#hero-esperienza .eyebrow { font-size: 9px; letter-spacing: 2.2px; font-weight: 600; margin: 0 0 25px; }
#hero-esperienza h1, #hero-esperienza h2 {
  font: clamp(38px, 4.5vw, 72px) / 1.06 Georgia, serif;
  font-weight: 400; letter-spacing: -2.5px; margin: 0 0 25px;
}
#hero-esperienza h1 em, #hero-esperienza h2 em { color: #ead2ab; font-weight: 400; }
#hero-esperienza .description { font-size: 13px; line-height: 1.9; color: #f1e7d6; margin: 0; }
#hero-esperienza .moment {
  position: absolute; left: 4%; bottom: 16%; display: flex; align-items: center; gap: 9px;
  font-size: 9px; letter-spacing: 1.4px; color: #e6d4b7; text-shadow: 0 1px 8px #000;
}
#hero-esperienza .dot { width: 4px; height: 4px; background: var(--he-gold); border-radius: 50%; box-shadow: 0 0 9px #e4be76; }
#hero-esperienza .enter {
  position: absolute; left: 4%; bottom: 25%; background: none; border: 0; color: var(--he-cream);
  padding: 0; display: flex; align-items: center; gap: 25px; font-size: 11px;
}
#hero-esperienza .enter span {
  border: 1px solid #ffffff50; border-radius: 50%; width: 42px; height: 42px;
  display: grid; place-items: center; font-size: 22px;
}

/* Il bottone "play" (guida automatica): nell'originale viveva nell'header
   fisso dell'intero pacchetto; qui è dentro .stage (sticky) così resta
   visibile per tutta la sequenza — sparisce naturalmente all'epilogo, dove
   c'è già il suo equivalente ("Rivivi la trasformazione"). Sotto la nav
   vera del sito (var(--nav-h)), non sopra: niente due barre in cima. */
#hero-esperienza #play {
  position: absolute; z-index: 5; top: calc(var(--nav-h, 72px) + 20px); right: 4%;
  border: 1px solid #fff5; border-radius: 30px; background: #1d1a1440; color: var(--he-cream);
  font-size: 11px; padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  backdrop-filter: blur(12px);
}
#hero-esperienza #play-icon { font-size: 17px; }

/* right: max(4%, 96px) e non 4% (23/09/2026) — il pulsante verde di WhatsApp
   del sito (#wa-float: fisso, 52px, a 24px dal bordo) copriva "03 La luce"
   sui portatili: misurato a 1280px, 32px di sovrapposizione; a 1440 e 1536
   ancora 15-18px. Solo dai ~2400px in su il 4% basta da solo. */
#hero-esperienza .bottom {
  position: absolute; bottom: 30px; left: 4%; right: max(4%, 96px); display: flex; gap: 30px; align-items: center;
}
#hero-esperienza .small { font-size: 8px; letter-spacing: 1px; white-space: nowrap; }
#hero-esperienza .track { flex: 1; height: 1px; background: #ffffff38; }
#hero-esperienza .track i { display: block; width: 0; height: 1px; background: var(--he-gold); }
/* 🔴 trovato SUL SITO VERO (non nell'anteprima locale — lì la mia prova di
   "fuga" controllava solo font/colore, non posizione): main.css ha anche
   "nav { position:fixed; top:0; height:var(--nav-h); z-index:500; ... }"
   SENZA #, riga ~100 — vale per QUALSIASI <nav>, compreso questo (i tre
   pulsanti "01/02/03" in fondo alla scena). La mia regola sopra
   ("display:flex;gap:22px", copiata dal pacchetto originale) toccava solo
   due proprietà: tutte le altre (position/top/height/z-index/padding/
   align-items/justify-content) restavano quelle del vero <nav> del sito —
   il risultato: una SECONDA barra fissa in cima allo schermo, sopra il
   logo. Qui si azzerano ESPLICITAMENTE tutte, non solo le due che il
   pacchetto originale nominava. */
#hero-esperienza nav {
  position: static; top: auto; left: auto; right: auto; height: auto; z-index: auto;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0; transition: none; gap: 22px;
}
#hero-esperienza nav button { background: none; border: 0; color: #b9ad9a; font-size: 10px; padding: 7px 0; white-space: nowrap; }
#hero-esperienza nav button span { font-size: 8px; opacity: .6; margin-right: 5px; }
#hero-esperienza nav button[aria-current=step] { color: #f6dfb9; }

#hero-esperienza .loader {
  position: absolute; inset: 0; background: #181611dd; place-items: center; font: 25px Georgia; z-index: 30;
}
#hero-esperienza .loader:not([hidden]) { display: grid; }

/* Senza min-height (23/09/2026). Il pacchetto aveva min-height:85svh: era
   l'ultima schermata di una pagina a sé. In home, sotto, continua il sito, e
   il testo è più corto dello schermo: restava un vuoto sotto «Torna a inizio
   pagina» (misurato: 363px a 988×1145, 259px a 1920×1080). Dario: «come mai
   appare tutto questo spazio vuoto». Ora è alto quanto il suo contenuto. */
#hero-esperienza .epilogue { padding: 130px 8% 35px; background: #181611; }
#hero-esperienza .epilogue h2 { font-size: clamp(40px, 5.6vw, 78px); max-width: 900px; }
#hero-esperienza .epilogue p { font-size: 15px; color: #afa592; line-height: 1.85; }
/* 23/09/2026: il pulsante verso i contatti (scelta di Dario) accanto a
   «Rivivi la trasformazione», tutti e due dentro .epi-azioni. Stesso disegno
   del pulsante originale (testo, freccia staccata, filo sotto), ma in oro:
   è l'azione principale. Sul telefono vanno a capo, uno sotto l'altro. */
#hero-esperienza .epi-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 44px; margin-top: 27px; }
#hero-esperienza .epi-azioni button,
#hero-esperienza .epi-azioni a {
  background: none; color: var(--he-cream); padding: 14px 0; border: 0;
  border-bottom: 1px solid #756449; font-size: 12px;
}
#hero-esperienza .epi-azioni a { color: var(--he-gold); border-bottom-color: var(--he-gold); }
#hero-esperienza .epi-azioni span { margin-left: 44px; }
/* Stessa famiglia di bug del <nav> qui sopra: main.css ha anche
   "footer { background:var(--smoke); border-top:...; padding:clamp(...) }"
   senza # (riga ~1122) — vale per QUALSIASI <footer>, compreso il piccolo
   footer-credito dentro l'epilogo. Azzerati esplicitamente background e
   padding, non solo padding-top. */
#hero-esperienza footer {
  background: none; padding: 0;
  display: flex; gap: 25px; align-items: center; justify-content: space-between;
  margin-top: 110px; padding-top: 26px; border-top: 1px solid #ffffff18; font-size: 9px; color: #b0a38f;
}
#hero-esperienza footer a { font-size: 11px; }

@media (min-aspect-ratio: 2/1) {
  #hero-esperienza .copy { top: 21%; }
  #hero-esperienza h1, #hero-esperienza h2 { font-size: 50px; }
  #hero-esperienza .enter { bottom: 21%; }
  #hero-esperienza .moment { bottom: 13%; }
}
@media (max-width: 760px) {
  #hero-esperienza .journey { height: 720svh; }
  /* 🔑 A SCHERMO PIENO, versione "leggera" — per tutti dalla 1181.
     Dario, 23/09: «sul cellulare appare cosi non a schermo pieno come il
     desktop» (il pacchetto qui metteva la stanza in una fascia). La stanza
     è alta quanto lo schermo (e circa tre volte più larga): .visual taglia
     i lati, e quale parte si vede la muove esperienza-hero.js con --he-f
     (la "telecamera": cucina a sinistra, quadro al centro, consolle a
     destra — vedi lì).
     La stanza resta UNA scatola con le proporzioni esatte della foto
     (1672×941), come nella fascia: foto, maschere, incassi e binario stanno
     tutti dentro e restano allineati fra loro. Si sposta con "translate" e
     il clamp non lascia mai scoperto un bordo dello schermo. Il .24 di
     riserva è la prima inquadratura (camera[0] nel JS): niente salto quando
     le foto finiscono di caricarsi.
     🔴 "Leggera", e non come nella 1179: con la 1179 (12 foto sempre strati
     grafici a sé, will-change:opacity fisso, e lo zoom lento ricalcolato a
     ogni passo) l'iPhone di Dario, scorrendo, chiudeva la pagina
     («Impossibile aprire questa pagina»: memoria). Qui le foto NON sono
     strati fissi (will-change:auto): il JS dà lo strato solo alla foto che
     sta sfumando, nasconde quelle a zero e quelle coperte da una foto intera
     già piena, e non fa lo zoom. Provata da lui sull'iPhone con la 1180
     (indirizzo di prova ?pieno=1): «scorre regolarmente». */
  #hero-esperienza .room {
    width: max(100%, calc(100svh * 1672 / 941));
    height: auto; aspect-ratio: 1672 / 941;
    top: 50%; left: 50%;
    translate: clamp(calc(50vw - 100%), calc(var(--he-f, .24) * -100%), -50vw) -50%;
  }
  #hero-esperienza .plate { object-fit: fill; }
  #hero-esperienza .plate:not(:first-child) { will-change: auto; }
  #hero-esperienza .furniture { mask-size: 100% 100%; }
  /* Velo scuro in alto (per il logo e il menu del sito) e in basso (per i
     testi, qui sopra la foto invece che sul fondo scuro). */
  #hero-esperienza .shade {
    background:
      linear-gradient(#181611b3 0%, #18161100 22%),
      linear-gradient(0deg, #181611f2 0%, #181611cc 30%, #18161173 50%, #18161100 64%);
  }
  /* I testi in basso, sopra "Scorri per abitare lo spazio": la parte alta
     dello schermo resta libera per quello che succede nella stanza. Il
     secondo e il terzo testo arrivano quando "Scorri…" è già sparito
     (render(): via entro .085): scendono al suo posto. */
  #hero-esperienza .copy { left: 6%; top: auto; bottom: calc(23% + 58px); max-width: 88%; }
  #hero-esperienza #copy1,
  #hero-esperienza #copy2 { bottom: calc(16% + 44px); }

  #hero-esperienza .eyebrow { margin-bottom: 15px; font-size: 8px; letter-spacing: 1.7px; }
  /* clamp e non 40px fissi (23/09/2026): sui telefoni larghi 360px «La casa
     si racconta.» andava a capo in tre righe («…si / racconta.»). Da 381px
     in su resta 40px come nel pacchetto. */
  #hero-esperienza h1, #hero-esperienza h2 { font-size: clamp(34px, 10.5vw, 40px); letter-spacing: -1.7px; margin-bottom: 17px; }
  #hero-esperienza .description { font-size: 11px; line-height: 1.65; }
  #hero-esperienza .moment { left: 6%; bottom: 16%; font-size: 8px; max-width: 85%; line-height: 1.6; }
  #hero-esperienza .enter { left: 6%; bottom: 23%; font-size: 10px; }
  #hero-esperienza #play { top: calc(var(--nav-h, 72px) + 12px); right: 6%; font-size: 10px; padding: 8px 12px; }
  /* right: 88px e non 6% — il pulsante verde di WhatsApp del sito (#wa-float,
     fisso, 52px a 24px dal bordo) copriva "03 La luce" (screenshot di Dario
     del 23/09). */
  #hero-esperienza .bottom { left: 6%; right: 88px; bottom: 25px; flex-wrap: wrap; gap: 15px; }
  #hero-esperienza .bottom .small { display: none; }
  #hero-esperienza .track { flex-basis: 100%; }
  #hero-esperienza nav { width: 100%; justify-content: space-between; gap: 12px; }
  #hero-esperienza nav button { font-size: 10px; }
  #hero-esperienza .epilogue { padding: 95px 6% 30px; }
  #hero-esperienza .epilogue h2 { font-size: 40px; }
  #hero-esperienza .epilogue p { font-size: 13px; }
  #hero-esperienza footer { margin-top: 75px; flex-wrap: wrap; }
  #hero-esperienza footer > span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #hero-esperienza .journey { height: 100svh; }
  #hero-esperienza .enter, #hero-esperienza #play { display: none; }
  #hero-esperienza .room { will-change: auto; }
  #hero-esperienza .plate { will-change: auto; }
}

/* Hardware (incassi/lenti) e microbinario — geometria approvata, vedi
   VINCOLI-APPROVATI.md: non spostare, non ridimensionare, non ruotare. */
#hero-esperienza .hardware { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 1; }
#hero-esperienza .lens-on { opacity: 0; }
@media (max-width: 760px) { #hero-esperienza .hardware { object-fit: fill; } }

#hero-esperienza .track-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#hero-esperienza .track-patch { position: absolute; inset: 0; mask: url(../esperienza/binario-mask.svg) center/cover no-repeat; pointer-events: none; }
#hero-esperienza .track-dusk,
#hero-esperienza .track-evening,
#hero-esperienza .island-light { opacity: 0; }
#hero-esperienza .island-light { mask: url(../esperienza/isola-mask.svg) center/cover no-repeat; }
@media (max-width: 760px) {
  #hero-esperienza .track-plate { object-fit: fill; }
  #hero-esperienza .track-patch,
  #hero-esperienza .island-light { mask-size: 100% 100%; }
}
#hero-esperienza .art-lens-on { opacity: 0; }