/* ============================================================
   PERLA NERA — base.css
   Variabili, reset, tipografia e componenti condivisi.
   Palette rigorosa: nero + perla/argento, zero saturazione.
   ============================================================ */

/* ---------- 1. Variabili ---------- */
:root {
  /* Colori */
  --nero: #050505;
  --nero-surface: #0E0E0E;
  --perla: #F4F1EA;
  --argento: #C9C6C0;
  --grigio-muto: #7E7B77;
  --metallo: linear-gradient(100deg, #EDE9E0 0%, #A8A49C 50%, #EDE9E0 100%);
  --linea: rgba(201, 198, 192, 0.12);

  /* Tipografia */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-ui: "Jost", "Inter", system-ui, sans-serif;

  /* Ritmo */
  --header-h: 88px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1560px;
  --radius: 2px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.35s;
  --dur-med: 0.7s;
  --dur-slow: 1.1s;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attributo hidden vale display:none, ma solo nel foglio del browser:
   qualunque display dichiarato qui lo batte per specificita'. Un
   elemento con display:grid resta quindi visibile anche con hidden, ed
   e' un difetto silenzioso — capitato sul pannello di accesso all'area
   riservata, che restava a schermo dopo il login. Con !important
   l'attributo torna ad avere l'effetto che chiunque si aspetta. */
[hidden] { display: none !important; }

html { scroll-behavior: auto; } /* lo smooth scroll è di Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--nero);
  color: var(--perla);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
fieldset { border: 0; }
address { font-style: normal; }
::selection { background: var(--argento); color: var(--nero); }

/* Focus visibile: outline argento 1px (accessibilità) */
:focus-visible {
  outline: 1px solid var(--argento);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- 2b. Accessibilità ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Tipografia ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--perla);
}

.hero-title {
  font-size: clamp(3rem, 12vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.h-xl { font-size: clamp(2.4rem, 6vw, 5.5rem); }
.h-l  { font-size: clamp(1.9rem, 4vw, 3.4rem); }
.h-m  { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }

/* Label maiuscole spaziate */
.label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--argento);
}

/* Testo secondario/terziario */
.text-argento { color: var(--argento); }
.text-muto    { color: var(--grigio-muto); } /* solo decorativo o ingrandito */

/* Riga argento 1px */
.rule { border: 0; height: 1px; background: var(--linea); }

/* Numerazione editoriale 01 — … */
.indexed {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--font-ui); font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--argento);
}
.indexed::before { content: ""; width: 3rem; height: 1px; background: var(--linea); align-self: center; }

/* ---------- 4. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(5rem, 12vh, 10rem); }
.section--tight { padding-block: clamp(3rem, 7vh, 5.5rem); }

/* Componenti condivisi da piu pagine.
   Stanno qui e non in un foglio di pagina perche ogni template carica
   solo il proprio: definirli altrove li lascia senza stile ovunque
   tranne che sulla pagina che possiede quel foglio. */

/* Breadcrumb: usato da 10 template su 13, dove segue sempre .page-hero.
   Si allinea da solo alla griglia di .wrap. Nessun offset per l'header
   fisso: lo scavalca gia .page-hero, e sommarne un secondo apriva una
   banda vuota di ~88px sotto il titolo. L'offset torna solo nel caso in
   cui il breadcrumb apra davvero il documento. */
.breadcrumb {
  padding-inline: var(--gutter);
  max-width: var(--maxw); margin-inline: auto;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grigio-muto);
}
main > .breadcrumb:first-child {
  padding-top: calc(var(--header-h) + 1.2rem);
}
.breadcrumb a { color: var(--grigio-muto); transition: color var(--dur-fast); }
.breadcrumb a:hover { color: var(--perla); }
.breadcrumb [aria-current] { color: var(--argento); }

/* Testata di sezione: home, eventi, experience, info. */
.section-head { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.section-head .indexed { margin-bottom: 1.2rem; }
.section-head__more { margin-top: 2.5rem; }

/* CTA finale: home, eventi, experience, prive-occasioni. */
.final-cta__inner {
  display: grid; gap: 1.6rem;
  justify-items: start;
}
.final-cta .h-xl { max-width: 14ch; }

/* Skip link */
.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 300;
  padding: 0.6rem 1.2rem;
  background: var(--nero-surface); color: var(--perla);
  border: 1px solid var(--linea);
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-out-expo);
}
.skip-link:focus-visible { top: 1rem; }

/* ---------- 5. Pulsanti ---------- */
.btn {
  --btn-pad-y: 1.05em;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8em;
  padding: var(--btn-pad-y) 2.4em;
  border: 1px solid var(--argento);
  border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--perla); background: transparent;
  overflow: hidden; isolation: isolate;
  transition: color var(--dur-med) var(--ease-out-expo);
}
/* Riempimento metallico in hover */
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--metallo);
  transform: translateY(101%);
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--nero); }

.btn--solid {
  background: var(--metallo); color: var(--nero); border-color: transparent;
}
.btn--solid::before { background: var(--nero); transform: translateY(101%); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--perla); }
.btn--solid:hover::before, .btn--solid:focus-visible::before { transform: translateY(0); }

.btn--ghost { border-color: var(--linea); color: var(--argento); }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: transform var(--dur-med) var(--ease-out-expo),
              background-color var(--dur-med) linear;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--gutter);
  max-width: var(--maxw); margin-inline: auto;
}
.site-header--hidden { transform: translateY(-100%); }
.site-header--solid {
  background: linear-gradient(to bottom, rgba(5,5,5,0.92), rgba(5,5,5,0.75) 70%, transparent);
}
.site-header__logo img { height: 26px; width: auto; opacity: 0.9; }
.site-header__right { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); }

.site-header__phone-label {
  font-size: 0.78rem; letter-spacing: 0.14em; color: var(--argento);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
}
.site-header__phone:hover .site-header__phone-label { border-color: var(--argento); }
@media (max-width: 720px) { .site-header__phone { display: none; } }

/* Switch lingua */
.lang-switch {
  display: flex; align-items: center; gap: 0.5em;
  font-size: 0.72rem; letter-spacing: 0.18em; color: var(--grigio-muto);
}
.lang-switch a {
  color: var(--grigio-muto);
  transition: color var(--dur-fast);
  padding: 0.2em 0;
}
.lang-switch a:hover { color: var(--perla); }
.lang-switch a.is-active { color: var(--perla); border-bottom: 1px solid var(--argento); }

/* Burger */
.burger {
  position: relative; width: 44px; height: 44px;
  display: grid; place-items: center; gap: 0;
}
.burger__line {
  display: block; width: 26px; height: 1px; background: var(--perla);
  transition: transform var(--dur-fast) var(--ease-out-expo),
              opacity var(--dur-fast);
}
.burger__line + .burger__line { margin-top: -18px; }
.burger[aria-expanded="true"] .burger__line:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- 7. Menu overlay ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--nero);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  /* apertura gestita da main.js (clip-path, mai height) */
  visibility: hidden;
}
.menu-overlay.is-open { visibility: visible; }

.menu-overlay__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  display: flex; flex-direction: column; gap: clamp(2rem, 6vh, 4rem);
}

.menu-overlay__link {
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.35em;
  position: relative;
}
.menu-overlay__num {
  font-size: 0.72rem; letter-spacing: 0.22em; color: var(--grigio-muto);
  font-family: var(--font-ui);
}
.menu-overlay__label {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.2rem, 7.5vh, 5rem);
  line-height: 1; letter-spacing: -0.01em;
  color: var(--argento);
  transition: color var(--dur-fast);
}
.menu-overlay__link:hover .menu-overlay__label,
.menu-overlay__link[aria-current="page"] .menu-overlay__label { color: var(--perla); }

/* Riga argento che si estende in hover */
.menu-overlay__rule {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--metallo);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.menu-overlay__link:hover .menu-overlay__rule,
.menu-overlay__link[aria-current="page"] .menu-overlay__rule { transform: scaleX(1); }

.menu-overlay__foot {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 5rem);
  align-items: flex-end;
  padding-top: 2rem; border-top: 1px solid var(--linea);
  font-size: 0.82rem; letter-spacing: 0.1em;
}
.menu-overlay__secondary { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.menu-overlay__secondary a,
.menu-overlay__contacts a { color: var(--argento); transition: color var(--dur-fast); }
.menu-overlay__secondary a:hover,
.menu-overlay__contacts a:hover { color: var(--perla); }
.menu-overlay__contacts { display: flex; flex-direction: column; gap: 0.3rem; }
.menu-overlay__social { display: flex; gap: 1rem; color: var(--argento); }

/* ---------- 8. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--linea);
  padding: clamp(4rem, 10vh, 8rem) var(--gutter) 2rem;
  max-width: var(--maxw); margin-inline: auto;
}

.site-footer__mark {
  overflow: hidden;
  padding-bottom: clamp(2rem, 6vh, 4rem);
}
.site-footer__mark span {
  display: block;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(4rem, 14vw, 15rem);
  line-height: 0.9; letter-spacing: 0.02em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 198, 192, 0.35);
  user-select: none;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: 3rem;
  border-top: 1px solid var(--linea);
}
.site-footer__heading {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grigio-muto); margin-bottom: 1.2rem;
}
.site-footer__col ul { display: grid; gap: 0.55rem; }
.site-footer__col a {
  color: var(--argento); font-size: 0.92rem;
  transition: color var(--dur-fast);
}
.site-footer__col a:hover { color: var(--perla); }
.site-footer__address { line-height: 2; font-size: 0.92rem; }
.lang-switch--footer { margin-top: 1.2rem; }

.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  padding-top: 1.5rem; border-top: 1px solid var(--linea);
  font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--grigio-muto);
}
.site-footer__legal a:hover { color: var(--argento); }
.site-footer__legal-links { display: flex; gap: 1.5rem; }
.site-footer__legal-btn {
  color: var(--grigio-muto); font-size: inherit; letter-spacing: inherit;
  transition: color var(--dur-fast);
}
.site-footer__legal-btn:hover { color: var(--argento); }

/* ---------- 9. WhatsApp flottante (solo mobile) ---------- */
.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--nero);
  border: 1px solid var(--argento);
  color: var(--perla);
}
@media (max-width: 720px) { .wa-float { display: grid; } }

/* ---------- 10. Cookie banner ---------- */
.cookie {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 200;
  background: var(--nero-surface);
  border-top: 1px solid var(--linea);
  padding: 1.25rem var(--gutter);
}
.cookie__bar {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin-inline: auto;
}
.cookie__text { font-size: 0.82rem; color: var(--argento); max-width: 60ch; }
.cookie__text a { color: var(--perla); border-bottom: 1px solid var(--linea); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie__btn {
  padding: 0.65em 1.4em;
  border: 1px solid var(--linea); border-radius: var(--radius);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--argento);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.cookie__btn:hover { color: var(--perla); border-color: var(--argento); }
/* "Rifiuta tutti" e "Accetta tutti" condividono questa classe e quindi
   hanno identico peso visivo. Rendere l'accettazione piu' evidente del
   rifiuto e' un dark pattern contestato dall'EDPB: se qualcuno volesse
   dare risalto a uno dei due, il posto giusto dove dire di no e' qui. */
.cookie__btn--equal {
  border-color: var(--argento);
  color: var(--perla);
}
.cookie__btn--equal:hover { background: var(--perla); color: var(--nero); }

/* "Personalizza" non e' una delle due scelte: e' la via per approfondire,
   quindi pesa meno senza per questo essere nascosta. */
.cookie__btn--link {
  border-color: transparent;
  padding-inline: 0.6em;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.cookie__btn--link:hover { border-color: transparent; color: var(--perla); }

.cookie__intro { max-width: 62ch; }
.cookie__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.15rem; line-height: 1.2;
  margin-bottom: 0.35rem;
}

.cookie__prefs {
  max-width: var(--maxw); margin: 1.4rem auto 0;
  padding-top: 1.2rem; border-top: 1px solid var(--linea);
}
.cookie__note {
  font-size: 0.75rem; color: var(--grigio-muto);
  max-width: 70ch; margin-top: 0.4rem;
}
/* Il salvataggio non deve occupare tutta la riga: resta un pulsante. */
.cookie__group > .cookie__btn { justify-self: start; }
.cookie__group { display: grid; gap: 0.9rem; }
.cookie__group legend {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--grigio-muto); margin-bottom: 0.6rem;
}
.cookie__opt { display: flex; gap: 0.8rem; align-items: flex-start; cursor: pointer; }
.cookie__opt input {
  margin-top: 0.35em;
  /* Senza color-scheme la casella nativa si disegna chiara su fondo scuro
     e da spenta sembra accesa: su un banner di consenso e' fuorviante. */
  color-scheme: dark;
  accent-color: var(--argento);
}
.cookie__opt small { display: block; color: var(--grigio-muto); font-size: 0.75rem; }

/* ---------- 11. Cursore custom (solo desktop) ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 400;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--argento);
  pointer-events: none;
  display: none; place-items: center;
  transition: width var(--dur-fast) var(--ease-out-expo),
              height var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast);
  will-change: transform;
}
.cursor__label {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--nero); opacity: 0;
  transition: opacity var(--dur-fast);
}
.cursor.is-active {
  width: 48px; height: 48px;
  background: var(--perla);
}
.cursor.is-active .cursor__label { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: grid; }
  body { cursor: none; }
  a, button, [data-cursor] { cursor: none; }
}

/* ---------- 12. Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 500;
  background: var(--nero);
  display: grid; place-items: center;
}
.preloader__count {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3rem, 10vw, 7rem);
  color: var(--argento);
  font-variant-numeric: tabular-nums;
}
/* Due tendine che si aprono verticalmente */
.preloader__curtain {
  position: absolute; inset-inline: 0; height: 50%;
  background: var(--nero);
  transform: scaleY(1);
}
.preloader__curtain--top { top: 0; transform-origin: top; }
.preloader__curtain--bottom { bottom: 0; transform-origin: bottom; }

/* ---------- 13. Velo di transizione pagine ---------- */
.veil {
  position: fixed; inset: 0; z-index: 450;
  background: var(--nero);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
}
.veil.is-covering { pointer-events: all; }

/* ---------- 14. Grain pellicola ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 60;
  width: 200%; height: 200%;
  pointer-events: none;
  opacity: 0.04;
}

/* ---------- 14.5 Scroll-video condiviso (Home + Experience) ---------- */
.sv {
  position: relative;
  /* Altezza da config via JS; questo è il fallback senza JS */
  height: 300vh;
}
.sv__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--nero);
}
.sv__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Vignettatura radiale nera ai bordi */
.sv__vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%,
      transparent 55%, rgba(5, 5, 5, 0.75) 100%);
}

/* Contatore di caricamento */
.sv__loader {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--nero);
  z-index: 3;
  transition: opacity var(--dur-med) var(--ease-out-expo);
}
.sv__loader.is-done { opacity: 0; pointer-events: none; }
.sv__loader span {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--argento);
  font-variant-numeric: tabular-nums;
}

/* Blocchi di testo sovrapposti al video */
.sv__captions {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  pointer-events: none;
  text-align: center;
  padding-inline: var(--gutter);
}
.sv__caption {
  grid-area: 1 / 1; /* tutte sovrapposte: visibilità via JS */
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1.05; letter-spacing: -0.01em;
  color: var(--perla);
  opacity: 0;
  filter: blur(12px);
  transform: translateY(2rem);
  will-change: opacity, filter, transform;
}
.sv__caption-brand { display: block; }
.sv__caption-city {
  display: block;
  font-family: var(--font-ui); font-size: 0.16em;
  font-weight: 400; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--argento);
  margin-top: 1.6em;
}

/* Invito allo scroll */
.sv__hint {
  position: absolute; left: 50%; bottom: 2.5rem; z-index: 2;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.8rem;
  transition: opacity var(--dur-med);
}
.sv__hint.is-hidden { opacity: 0; }
.sv__hint-line {
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, var(--argento), transparent);
}

/* Poster statico (fallback saveData / reduced-motion / rete lenta) */
/* Modalità background: il video accompagna l'intera pagina.
   .sv__sticky passa da sticky a fixed, così resta dietro al documento
   anche dopo l'hero, mentre il contenuto gli scorre sopra. La sezione
   .sv prende z-index 0 e diventa il piano di fondo. */
.sv--bg { position: relative; z-index: 0; }
.sv--bg .sv__sticky { position: fixed; inset: 0; z-index: 0; }

/* Velatura sopra il video, pilotata da scroll-video.js: nulla sull'hero,
   a regime sul contenuto. Senza, il testo bianco cadrebbe sulla figura
   in controluce e diventerebbe illeggibile. */
.sv__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: var(--nero);
  opacity: 0;
  pointer-events: none;
}
/* Nel fallback statico non c'è scroll a pilotarla: valore fisso. */
.sv--static.sv--bg .sv__scrim { opacity: 0.6; }

/* Contenuto e footer sopra il piano di fondo.
   Il selettore guarda la presenza di .sv--bg invece di elencare le pagine:
   la classe la mette scroll-video.js quando config dichiara background,
   quindi attivarla su una nuova pagina non richiede di tornare qui. */
body:has(.sv--bg) main > *:not(.sv),
body:has(.sv--bg) .site-footer {
  position: relative;
  z-index: 1;
}

.sv--static .sv__canvas { display: none; }
.sv--static .sv__sticky::before {
  content: "";
  position: absolute; inset: 0;
  /* Velatura sopra il poster: qui le tre frasi restano tutte visibili
     insieme e cadrebbero sull'alone in controluce, illeggibili. */
  background:
    linear-gradient(rgba(5, 5, 5, 0.55), rgba(5, 5, 5, 0.55)),
    var(--poster-url, none) center / cover no-repeat;
  animation: sv-kenburns 40s ease-in-out infinite alternate;
}
/* Impilate servono tre frasi in un solo schermo: alla misura dell'hero
   l'ultima finirebbe fuori. */
.sv--static .sv__caption { font-size: clamp(1.5rem, 3.4vw, 2.8rem); }
@keyframes sv-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08) translateY(-1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .sv--static .sv__sticky::before { animation: none; }
}

/* ---------- 14a. Hero tipografico delle pagine interne ---------- */
.page-hero {
  padding: calc(var(--header-h) + clamp(4rem, 12vh, 8rem)) 0
           clamp(2rem, 5vh, 4rem);
}
.page-hero .indexed { margin-bottom: 1.6rem; }
.page-hero__sub {
  margin-top: 1.6rem; max-width: 52ch;
  font-size: 1.05rem;
}
.hero-title--page { font-size: clamp(2.6rem, 9vw, 8rem); }

/* ---------- 14b. Barra suggerimento lingua ---------- */
.lang-hint {
  position: fixed; top: 0; inset-inline: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  padding: 0.6rem var(--gutter);
  background: var(--nero-surface);
  border-bottom: 1px solid var(--linea);
  font-size: 0.78rem; letter-spacing: 0.08em; color: var(--argento);
}
.lang-hint a {
  color: var(--perla); border-bottom: 1px solid var(--argento);
  letter-spacing: 0.16em;
}
.lang-hint button { color: var(--grigio-muto); font-size: 1.1rem; line-height: 1; }
.lang-hint button:hover { color: var(--perla); }

/* ---------- 15. CTA doppia riutilizzabile ---------- */
.cta-duo {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center;
}

/* ---------- 16. Placeholder immagini (in attesa degli asset reali) ----------
   Rettangoli neri con etichetta, mai stock. */
.ph {
  position: relative;
  background: var(--nero-surface);
  border: 1px solid var(--linea);
  overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--grigio-muto);
}
/* z-index: l'etichetta ::after è l'ultimo figlio di .ph, quindi senza
   questo si disegnerebbe SOPRA la foto. Con i segnaposto non si notava,
   con le foto vere si leggeva "EXPERIENCE" stampato in mezzo all'immagine.
   L'etichetta resta visibile solo se l'immagine manca davvero. */
.ph img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}

/* ---------- 17. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grain, .cursor { display: none !important; }
}


/* ---------- Mappa: richiesta di caricamento ----------
   Sostituisce la mappa finche' l'utente non acconsente: nessuna
   risorsa esterna viene contattata prima del click. */
.map__consent {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: 1.2rem; padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.map__consent-text {
  max-width: 46ch;
  font-size: 0.85rem; color: var(--argento);
}

/* Honeypot antispam: fuori dallo schermo, non display:none — alcuni bot
   ignorano i campi nascosti con display, pochi ignorano questo. */
.hp {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* Pulsanti magnetici: seguono il puntatore di poco (js/main.js).
   Senza transizione il movimento scattava a ogni pixel del mouse; con una
   transizione lunga inseguirebbe in ritardo. Breve mentre insegue, lunga
   al ritorno, dove lo scatto secco era la parte piu' visibile.
   Sta dopo le regole .btn per vincere sulla loro transition. */
[data-magnet] {
  transition: color var(--dur-med) var(--ease-out-expo),
              transform 0.12s ease-out;
}
[data-magnet].is-magnet-ritorno {
  transition: color var(--dur-med) var(--ease-out-expo),
              transform 0.45s var(--ease-out-expo);
}
@media (prefers-reduced-motion: reduce) {
  [data-magnet] { transition: color var(--dur-med) var(--ease-out-expo); }
}