/*
 * style.css — stile del sito Il Sarcofago Tebanianus.
 * Le sezioni seguono l'ordine visivo della pagina dall'alto in basso.
 * Alcune variabili (--hero-parallax, --footer-parallax, --gallery-x, --len)
 * vengono aggiornate da site.js durante lo scroll.
 */


/* ─── 1. TOKEN E RESET ──────────────────────────────────────────── */

:root {
  --bg: #050505;
  --ink: #f5efe5;
  --muted: rgba(245, 239, 229, 0.68);
  --faint: rgba(245, 239, 229, 0.38);
  --line: rgba(245, 239, 229, 0.16);
  --gold: #d7b46a;
  --font-display: "Cinzel Decorative", serif;
  --font-body: "Montserrat", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
::selection { background: var(--gold); color: #000; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  /* overflow-x: clip evita scroll laterale dovuto a transform/margini
     negativi (es. quando il modello 3D sfora dalla sua colonna). */
  overflow-x: clip;
}
img, svg, canvas { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }


/* ─── 2. SPLASH DI INTRODUZIONE ─────────────────────────────────────
   overlay nero con SVG animato + barra di progresso; JS lo rimuove dopo ~4 s */

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
.intro-overlay.is-done { opacity: 0; visibility: hidden; }
.intro-inner {
  display: grid;
  gap: 28px;
  justify-items: center;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.intro-art {
  width: min(640px, 92vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0.92;
}
.intro-art svg, .brand-mark svg, .ornament svg, .card-svg svg {
  width: 100%;
  height: 100%;
}
/* draw-on: dasharray = lunghezza totale del path, dashoffset scende a 0 via animazione */
.intro-art path, .brand-mark path {
  fill: none !important;
  stroke: var(--gold) !important;
  stroke-width: 1.2px !important;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: drawPath 4.6s ease-in-out forwards;
  filter: drop-shadow(0 0 6px rgba(215, 180, 106, 0.4));
}
.intro-progress {
  position: absolute;
  left: 12vw;
  right: 12vw;
  bottom: 9vh;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.intro-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  animation: progress 4.6s var(--ease) forwards;
}
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes progress { to { width: 100%; } }


/* ─── 3. HEADER FISSO ───────────────────────────────────────────────
   pointer-events:none sul wrapper così non blocca il modello 3D sotto */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 4vw, 54px);
  background: linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0));
  pointer-events: none;
}
.brand, .site-header nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
}
.brand {
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.brand-mark { width: 26px; height: 26px; opacity: 0.86; }
.site-header nav { gap: clamp(12px, 2vw, 28px); }
.site-header nav a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 239, 229, 0.74);
}


/* ─── 4. HERO ───────────────────────────────────────────────────────
   350vh con sticky a 100vh: lo scroll diventa transizione
   fase A (testo) → fase B (modello 3D), gestita da site.js */

.hero-scroll {
  height: 350vh;
  position: relative;
  background: #000;
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 55%,
    rgba(215, 180, 106, 0.07), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Fase A: blocco testo del titolo, centrato e animato in fade-up. */
.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(22px, 8vw, 120px);
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.hero-copy.phase-out { opacity: 0; transform: translateY(-32px); }
.hero-copy .eyebrow { opacity: 0; animation: heroFadeUp 1s ease 0.4s both; }
.hero-copy h1 {
  margin: 16px 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 80px);
  line-height: 1.1;
  letter-spacing: 0.06em;
  opacity: 0;
  animation: heroFadeUp 1.1s ease 0.7s both;
}
.hero-copy h1 em { font-style: italic; color: var(--gold); font-weight: 400; }
.hero-sub {
  margin: 0 0 40px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  animation: heroFadeUp 1s ease 1.1s both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Fase B: lo slot 3D è invisibile finché JS non aggiunge .phase-in */
.hero-viewer-home {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.hero-viewer-home.phase-in { opacity: 1; }

/* Ornamenti d'angolo: 5 slot in cui JS ruota gli SVG. */
.hero-ornaments {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.ornament {
  position: absolute;
  color: var(--gold);
  filter: drop-shadow(0 0 14px rgba(232, 201, 122, 0.3));
  opacity: 0;
  transition: opacity 1s ease;
  overflow: hidden;
}
.ornament svg { display: block; width: 100%; height: 100%; }
.ornament.is-visible { opacity: 1; }
.orn-tl { top: 4vh;    left: 2vw;   width: clamp(90px,10vw,150px); height: clamp(90px,10vw,150px); }
.orn-tr { top: 4vh;    right: 2vw;  width: clamp(80px,8vw,130px);  height: clamp(80px,8vw,130px); }
.orn-bl { bottom: 5vh; left: 2vw;   width: clamp(70px,8vw,120px);  height: clamp(70px,8vw,120px); }
.orn-br { bottom: 5vh; right: 2vw;  width: clamp(90px,10vw,160px); height: clamp(90px,10vw,160px); }
.orn-bc { bottom: 3vh; left: 50%;   width: clamp(60px,6vw,100px);  height: clamp(60px,6vw,100px); transform: translateX(-50%); }

/* i <use> nei SVG a volte duplicano path con fill bianco hardcoded, li nascondo */
.ornament svg use,
.card-svg svg use { display: none !important; }

/* Tratteggio "draw-on" sugli ornamenti e nelle illustrazioni card. */
.ornament svg path,
.ornament svg line,
.ornament svg polyline,
.ornament svg polygon,
.ornament svg rect,
.ornament svg circle,
.ornament svg ellipse {
  stroke: #e8c97a !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
}

/* draw: parte quando l'ornamento diventa visibile, così coincide col fade-in */
.ornament.is-visible svg path,
.ornament.is-visible svg line,
.ornament.is-visible svg polyline,
.ornament.is-visible svg polygon,
.ornament.is-visible svg rect,
.ornament.is-visible svg circle,
.ornament.is-visible svg ellipse {
  animation: drawOrnament 3s ease-out forwards;
}
@keyframes drawOrnament  { to   { stroke-dashoffset: 0; } }

/* erase: parte quando viene aggiunta .is-leaving, coincide col fade-out */
.ornament.is-leaving svg path,
.ornament.is-leaving svg line,
.ornament.is-leaving svg polyline,
.ornament.is-leaving svg polygon,
.ornament.is-leaving svg rect,
.ornament.is-leaving svg circle,
.ornament.is-leaving svg ellipse {
  animation: eraseOrnament 0.6s ease-in forwards;
}
@keyframes eraseOrnament { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--len, 400); } }

.card-svg svg path,
.card-svg svg line,
.card-svg svg polyline,
.card-svg svg polygon,
.card-svg svg rect,
.card-svg svg circle,
.card-svg svg ellipse {
  stroke: #e8c97a !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
}
.story-card.svg-draw .card-svg svg path,
.story-card.svg-draw .card-svg svg line,
.story-card.svg-draw .card-svg svg polyline,
.story-card.svg-draw .card-svg svg polygon,
.story-card.svg-draw .card-svg svg rect,
.story-card.svg-draw .card-svg svg circle,
.story-card.svg-draw .card-svg svg ellipse {
  animation: drawOrnament 2.4s ease-out forwards;
}

/* Etichette decorative (eyebrow/kicker). */
.eyebrow, .section-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Parallasse hero: i tre livelli si muovono a velocità diverse,
   pilotati dalla variabile --hero-parallax aggiornata via JS. */
.hero-copy      { transform: translateY(calc(var(--hero-parallax, 0) * -80px)); }
.hero-ornaments { transform: translateY(calc(var(--hero-parallax, 0) *  40px)); }
.hero-bg        { transform: scale(calc(1 + var(--hero-parallax, 0) * 0.15)); }


/* ─── 5. BLOCCO MOBILE ──────────────────────────────────────────────
   avviso a schermo intero per chi apre su mobile (< 900px) */

.mobile-block {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
@media (max-width: 900px) {
  .mobile-block { display: flex; flex-direction: column; gap: 20px; }
}
.mobile-block-brand {
  font-family: var(--font-display, serif);
  font-size: 20px;
  color: #e8c97a;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.mobile-block-body { color: rgba(245,239,229,0.7); font-size: 15px; line-height: 1.6; }
.mobile-block-meta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,239,229,0.3);
}


/* ─── 6. GALLERIA FOTOGRAFICA ORIZZONTALE ───────────────────────────
   230vh di altezza; il track scorre via --gallery-x aggiornata da JS */

.photo-gallery { height: 230vh; background: #050505; }
.gallery-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 44px;
  overflow: hidden;
  padding: 90px 0 80px clamp(22px, 8vw, 120px);
}
.gallery-head h2 {
  margin: 12px 0 0;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 500;
  line-height: 1;
}
.gallery-track {
  display: flex;
  gap: 18px;
  width: max-content;
  transform: translateX(var(--gallery-x, 0px));
  will-change: transform;
}
.gallery-track figure { width: min(58vw, 560px); margin: 0; }
.gallery-track img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04);
}
figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ─── 7. SEZIONI DI TESTO E "MODELLO" ───────────────────────────────
   .model-story = griglia 2 col: viewer sticky a sinistra, story-card a destra */

.intro-text, .place-section, .free-section {
  padding: clamp(90px, 14vw, 180px) clamp(22px, 8vw, 120px);
}
.intro-text {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr);
  gap: clamp(34px, 8vw, 120px);
  align-items: start;
  background: linear-gradient(180deg, #050505 0%, #100d0a 100%);
}
.text-column {
  max-width: 920px;
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1.6;
}
.text-column p { margin: 0 0 1.15em; color: rgba(245, 239, 229, 0.84); }

/* Blocco iscrizione CIL XI, 1430 in stile epigrafico. */
.inscription-quote {
  margin: 40px 0 0;
  padding: 22px 26px;
  border-left: 2px solid var(--gold);
  background: rgba(215, 180, 106, 0.05);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--gold);
}
.inscription-quote .inscription-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(215, 180, 106, 0.6);
}

/* Sezione "Modello": griglia 2 col, alta 360vh per ospitare 6 story-card.
   overflow:visible permette al canvas 3D di sfondare i suoi bordi. */
.model-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 34vw);
  gap: clamp(24px, 5vw, 78px);
  min-height: 360vh;
  padding: 0 clamp(22px, 6vw, 86px);
  background: #080706;
  overflow: visible;
}
.model-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-items: center;
  padding-top: 70px;
  overflow: visible;
}

/* margin-right molto negativo: il modello sfora sotto le card (effetto "passa sotto il vetro")
   e translateX(-11%) sposta il viewer a sinistra per non farlo uscire dal bordo */
.viewer-slot, .free-viewer-slot {
  position: relative;
  min-height: 620px;
  background: transparent;
}
.viewer-slot {
  overflow: visible;
  margin-left: clamp(-240px, -13vw, -80px);
  margin-right: clamp(-520px, -38vw, -240px);
  pointer-events: none; /* nelle story-card il modello non è interattivo */
}
.viewer-slot .viewer-shell {
  transform: translateX(-11%);
  transform-origin: left center;
}
.free-viewer-slot {
  overflow: hidden;
  border: 1px solid rgba(215, 180, 106, 0.4);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  margin-top: 18px;
  min-height: 680px;
}
.viewer-shell { position: relative; width: 100%; height: 100%; min-height: inherit; }

/* forzo 3DHOP a riempire il contenitore e nascondo la sua toolbar interna */
#3dhop, #draw-canvas { width: 100% !important; height: 100% !important; background: transparent !important; }
#tdhlg, #toolbar { display: none !important; }

.viewer-slot .viewer-shell,
.free-viewer-slot .viewer-shell,
.hero-viewer-home .viewer-shell { min-height: inherit; }
.viewer-slot canvas,
.free-viewer-slot canvas,
.hero-viewer-home canvas { width: 100%; height: 100%; min-height: inherit; }

/* Story-card a destra del modello: vetro scuro semitrasparente,
   bordo sinistro oro più marcato quando attive. z-index > canvas
   per coprirlo. */
.story-cards {
  padding: 60vh 0 60vh;
  display: grid;
  gap: 40vh;
  position: relative;
  z-index: 3;
}
.story-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 18, 14, 0.55), rgba(8, 7, 6, 0.45));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(215, 180, 106, 0.18);
  border-left: 2px solid rgba(215, 180, 106, 0.42);
  border-radius: 10px;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(245, 239, 229, 0.04);
  padding: clamp(22px, 3vw, 36px);
  opacity: 0.32;
  transform: translateX(44px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease),
              border-color 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.story-card.is-active {
  opacity: 1;
  transform: translateX(0);
  border-color: rgba(215, 180, 106, 0.32);
  border-left-color: var(--gold);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(215, 180, 106, 0.08),
    inset 0 1px 0 rgba(245, 239, 229, 0.06);
}
.card-count {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.22em;
}
.story-card h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.story-card > p:not(.card-count) {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.card-svg { width: 100%; height: 220px; margin-top: 14px; color: var(--gold); opacity: 0.95; overflow: hidden; }


/* ─── 8. SEZIONE "DOVE SI TROVA" — Gaussian Splat ───────────────────
   in dev-mode (tasto d) l'iframe diventa interattivo per posizionare la camera */

.place-section { background: linear-gradient(180deg, #080706 0%, #11100d 100%); }
.place-copy {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
  gap: clamp(28px, 7vw, 90px);
  align-items: end;
  margin-bottom: 44px;
}
.place-copy h2, .free-copy h2 {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.gaussian-card {
  max-width: 980px;
  margin-left: auto;
  background: #050505;
}
.gaussian-frame {
  position: relative;
  aspect-ratio: 16 / 8;
  max-width: 860px;
  min-height: 240px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.72)),
    url("../resources/img/1.jpg") center / cover;
}
.gaussian-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* in dev-mode l'iframe accetta input così posso scegliere startPos/endPos manualmente */
body.dev-mode .gaussian-frame iframe { pointer-events: auto !important; }
body.dev-mode .gaussian-frame {
  outline: 1px dashed rgba(215, 180, 106, 0.6);
  outline-offset: 4px;
}

.gaussian-credit {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,239,229,0.5);
  pointer-events: none;
}
.gaussian-credit strong { color: rgba(232, 201, 122, 0.8); }

/* Pin oro che compare al termine della pan automatica della camera. */
.map-pin {
  position: absolute;
  left: 64%;
  top: 55%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -100%);
  color: var(--gold);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(215,180,106,0.6));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.map-pin.is-visible { opacity: 1; }
.map-pin::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.map-pin span {
  position: absolute;
  top: 7px; left: 7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
}

/* Credit del visualizzatore 3DHOP, sovrapposto al canvas del playground. */
.viewer-3dhop-credit {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,239,229,0.55);
  white-space: nowrap;
  pointer-events: none;
  padding: 6px 14px;
  background: rgba(8,7,6,0.7);
  border: 1px solid rgba(215,180,106,0.25);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.viewer-3dhop-credit strong { color: rgba(232,201,122,0.5); }

/* allineato al bordo sinistro del frame (860px dentro il contenitore 980px) */
.place-text { max-width: 980px; margin-top: 32px; margin-left: auto; }
.place-text p {
  max-width: 860px;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.65;
  color: rgba(245, 239, 229, 0.6);
}


/* ─── 9. SEZIONE "ESPLORA" — playground ─────────────────────────────
   griglia 2 col: viewer libero a sinistra, toolbar sticky a destra */

.free-section {
  position: relative;
  background: #050505;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 28px;
  align-items: start;
}
.free-copy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr);
  gap: clamp(28px, 7vw, 90px);
  align-items: end;
  margin-bottom: 28px;
}
.free-copy p:last-child {
  grid-column: 2;
  max-width: 760px;
  color: var(--muted);
  font-size: 22px;
}
.tool-sidebar { position: sticky; top: 90px; display: grid; gap: 12px; }

/* sezioni della sidebar con label */
.sb-section { display: grid; gap: 8px; }
.sb-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(215, 180, 106, 0.45);
}

/* cornice del pan cross — pannello centrale della sidebar */
.pan-section { align-items: center; }
.pan-frame {
  display: flex;
  justify-content: center;
  padding: 14px;
  border: 1px solid rgba(215, 180, 106, 0.14);
  background: rgba(8, 7, 6, 0.5);
}
.pan-cross {
  display: grid;
  grid-template-areas:
    ".    up    ."
    "left mid   right"
    ".    down  .";
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px);
  gap: 4px;
}
.pan-btn {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(245, 239, 229, 0.04);
  color: rgba(245, 239, 229, 0.5);
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s;
}
.pan-btn:hover {
  background: rgba(215, 180, 106, 0.14);
  border-color: rgba(215, 180, 106, 0.55);
  color: var(--gold);
}
.pan-btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.pan-center {
  grid-area: mid;
  border-color: rgba(215, 180, 106, 0.3);
  background: rgba(215, 180, 106, 0.07);
  color: rgba(215, 180, 106, 0.7);
}
.pan-center:hover {
  background: rgba(215, 180, 106, 0.18);
  border-color: rgba(215, 180, 106, 0.7);
  color: var(--gold);
}
.pan-up    { grid-area: up; }
.pan-left  { grid-area: left; }
.pan-right { grid-area: right; }
.pan-down  { grid-area: down; }


.tool-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(52px, 1fr));
  gap: 10px;
}
.tool-panel button {
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(245, 239, 229, 0.06);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.tool-panel button:hover, .tool-panel button.is-active {
  background: rgba(215, 180, 106, 0.16);
  border-color: rgba(215, 180, 106, 0.58);
  transform: translateY(-1px);
}
.tool-panel svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Visibilità condizionata dalla dev-mode (toggle con tasto 'd'). */
.dev-mode-only { display: none !important; }
body.dev-mode .dev-mode-only { display: flex !important; }
button.dev-mode-only { display: none !important; }
body.dev-mode button.dev-mode-only { display: grid !important; }

/* Toolbar di test dei movimenti dell'iframe Luma in dev-mode. */
.luma-dev-tools {
  margin-top: 14px;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.luma-dev-tools button {
  background: rgba(215, 180, 106, 0.08);
  border: 1px solid rgba(215, 180, 106, 0.3);
  color: var(--gold);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.luma-dev-tools button:hover { background: var(--gold); color: #000; }

/* box di output per misura, pick-point e copia camera; nascosti finché non servono */
.viewer-readouts { display: grid; gap: 10px; }
.output-box {
  position: static !important;
  display: none !important;
  border: 1px solid rgba(215, 180, 106, 0.4);
  background: rgba(13, 12, 10, 0.85);
  backdrop-filter: blur(12px);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  gap: 4px;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.5;
}
.output-box.is-open { display: flex !important; flex-direction: column; }
.output-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(215, 180, 106, 0.55);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(215, 180, 106, 0.2);
}
.output-text {
  color: var(--gold);
  user-select: text;
  font-size: 11px;
  line-height: 1.5;
  word-break: break-all;
}
/* "Copia camera" lampeggia visibile dopo la copia negli appunti. */
body[data-copied="true"] #copy-box { display: block !important; }


/* ─── 10. FOOTER ────────────────────────────────────────────────────
   ::before = immagine con parallasse, ::after = gradiente scuro sopra */

.site-footer {
  position: relative;
  min-height: 520px;
  display: grid;
  align-content: end;
  padding: 80px clamp(22px, 8vw, 120px);
  background: #050505;
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: -10% 0;
  z-index: -2;
  background: url("../resources/img/footer.jpg") center / cover no-repeat;
  transform: translate3d(0, var(--footer-parallax, 0px), 0) scale(1.08);
  will-change: transform;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,0.94), rgba(0,0,0,0.42));
  pointer-events: none;
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 5vw, 76px);
}
.footer-eyebrow {
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(245,239,229,0.12);
  padding-bottom: 8px;
}
.footer-col span, .footer-col p { margin: 0; color: var(--muted); }
.footer-col strong { font-weight: 500; text-align: right; }


/* ─── 11. UI FLUTTUANTI ─────────────────────────────────────────────
   scroll-hint (pillola in basso al centro) e go-to-top (cerchio in basso a destra) */

/* Pillola fissa in basso al centro che guida l'utente:
   - "Continua a scorrere" nelle sezioni narrative;
   - "Interagisci liberamente" sopra il playground.
   Il pulsante non è cliccabile (pointer-events:none): è solo un indicatore. */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 55;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 26px;
  border: 1px solid rgba(215, 180, 106, 0.45);
  background: rgba(8, 7, 6, 0.72);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease), background 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.scroll-hint.is-visible { opacity: 1; }
.scroll-hint-arrow {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  animation: scrollHintBob 1.6s ease-in-out infinite;
}
.scroll-hint-arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Variante "interagisci": pieno oro e l'icona diventa un dot pulsante. */
.scroll-hint.is-interact {
  background: rgba(215, 180, 106, 0.16);
  border-color: var(--gold);
  color: #fff;
}
.scroll-hint.is-interact .scroll-hint-arrow {
  animation: scrollHintPulse 1.8s ease-in-out infinite;
}
.scroll-hint.is-interact .scroll-hint-arrow svg { display: none; }
.scroll-hint.is-interact .scroll-hint-arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(215, 180, 106, 0.25);
}
@keyframes scrollHintBob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@keyframes scrollHintPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.85; }
}

/* nudge: compare quando l'utente clicca il modello in hero/story.
   solo il pill pulsa e si riempie, l'icona freccia resta invariata. */
.scroll-hint.is-nudge {
  background: rgba(215, 180, 106, 0.16);
  border-color: rgba(215, 180, 106, 0.85);
  animation: nudgePulse 1s ease-in-out 3;
}
@keyframes nudgePulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.04); }
}

/* Pulsante "torna in cima" in basso a destra; compare oltre il 60% di vh. */
.go-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 60;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215, 180, 106, 0.45);
  background: rgba(8, 7, 6, 0.78);
  color: var(--gold);
  cursor: pointer;
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
              visibility 0.35s, background 0.2s;
  border-radius: 50%;
}
.go-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.go-to-top:hover { background: rgba(215, 180, 106, 0.18); border-color: var(--gold); }
.go-to-top svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ─── 12. TOOLTIP ───────────────────────────────────────────────────
   tooltip custom per i pulsanti della toolbar, appare a sinistra */

.tool-tip {
  position: fixed;
  z-index: 9999;
  padding: 5px 10px;
  background: rgba(8, 7, 6, 0.88);
  border: 1px solid rgba(215, 180, 106, 0.28);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(215, 180, 106, 0.9);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tool-tip.is-visible {
  opacity: 1;
  transform: translateX(0);
}


/* ─── 13. MEDIA QUERY ───────────────────────────────────────────────
   sotto i 900px interviene comunque il blocco mobile */

@media (max-width: 980px) {
  .site-header nav { display: none; }
  .intro-text, .place-copy, .free-copy, .model-story, .free-section, .footer-grid {
    grid-template-columns: 1fr;
  }
  .model-story  { min-height: auto; padding-bottom: 80px; }
  .model-sticky { position: relative; height: auto; min-height: auto; }
  .viewer-slot, .free-viewer-slot { min-height: 480px; }
  .story-cards  { padding: 44px 0 0; gap: 22px; }
  .free-copy p:last-child { grid-column: auto; }
  .tool-sidebar { position: relative; top: auto; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero-copy h1 { font-size: clamp(42px, 12vw, 64px); }
  .intro-text, .place-section, .free-section { padding-inline: 18px; }
  .text-column { font-size: 23px; }
  .gallery-track figure { width: 82vw; }
  .tool-panel { grid-template-columns: repeat(2, 1fr); }
}