/* Battaglia Lights – Esperienza 3D Progettazione
   Tutto è confinato dentro .b3d: non tocca gli stili del tema. */

.b3d {
  --b3d-ink: #08070a; --b3d-gold: #d4a843; --b3d-ivory: #f5f0e8; --b3d-sand: #c8bfb0; --b3d-pad: 6vw;
  --b3d-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --b3d-sans: 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --b3d-mono: 'DM Mono', ui-monospace, monospace;
  position: relative; isolation: isolate; box-sizing: border-box;
  /* larghezza piena anche dentro un contenitore del tema */
  /* --b3d-vw = larghezza reale della viewport senza barra di scorrimento (impostata dallo script inline) */
  width: var(--b3d-vw, 100vw); max-width: none;
  margin-left: calc(50% - var(--b3d-vw, 100vw) / 2); margin-right: 0;
  background: var(--b3d-ink); color: var(--b3d-ivory);
  font-family: var(--b3d-sans); font-size: 16px; line-height: 1.5; text-align: left;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* neutralizza eventuali regole del tema su div/section generici */
div.b3d.b3d { padding: 0; border: 0; min-height: 0; height: auto; float: none; }
.b3d *, .b3d *::before, .b3d *::after { box-sizing: border-box; }
/* reset a specificità minima: le regole dei componenti sotto vincono sempre, quelle del tema no */
.b3d :where(h2, h3, p, ol, li) { margin: 0; padding: 0; text-transform: none; letter-spacing: normal; }
.b3d :where(ol) { list-style: none; }
.b3d a { color: inherit; text-decoration: none; }
.b3d a:focus-visible { outline: 1px solid var(--b3d-gold); outline-offset: 4px; }
.b3d svg { max-width: 100%; }
.b3d .b3d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Scena WebGL (fissa, ritagliata sull'area del componente via JS) ---------- */
.b3d-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 1.2s cubic-bezier(.16,1,.3,1); }
.b3d-scene.is-ready { opacity: 1; }
.b3d-scene canvas { display: block; width: 100% !important; height: 100% !important; }
.b3d-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.55) 100%); }
.b3d-fade, .b3d-labels { position: absolute; inset: 0; }
.b3d-label { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; color: rgba(245,240,232,.9); opacity: 0; will-change: transform; }
.b3d-label i { display: block; width: 28px; height: 1px; background: rgba(212,168,67,.7); }
.b3d-label.is-left { flex-direction: row-reverse; }

.b3d-hero, .b3d-anatomy, .b3d-install { position: relative; z-index: 1; }

/* ---------- Titoli e testi ---------- */
.b3d .b3d-hero-title { font-family: var(--b3d-display); font-weight: 300; font-size: clamp(2.4rem, 8.2vw, 9.5rem); line-height: .88; letter-spacing: -.025em; color: var(--b3d-ivory); }
.b3d-line { display: block; overflow: hidden; padding-bottom: .08em; }
.b3d-word { display: inline-block; white-space: nowrap; }
.b3d-ch { display: inline-block; will-change: transform; }
.b3d-ch.is-acc { font-feature-settings: "ccmp" 0; font-kerning: none; }
.b3d .b3d-hero-sub { max-width: 22rem; color: var(--b3d-sand); line-height: 1.65; font-size: 16px; }
.b3d .b3d-intro h2 { font-family: var(--b3d-display); font-weight: 300; font-size: clamp(2.3rem, 4.4vw, 4.6rem); line-height: .95; color: var(--b3d-ivory); }
.b3d .b3d-intro p { margin-top: 18px; max-width: 22rem; font-size: 14px; line-height: 1.65; color: var(--b3d-sand); }

.b3d-card { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(212,168,67,.4); padding-left: 32px; }
.b3d .b3d-card .b3d-meta { margin-bottom: 18px; display: flex; gap: 12px; align-items: baseline; font-size: 14px; color: var(--b3d-sand); }
.b3d .b3d-card .b3d-meta span { font-family: var(--b3d-mono); color: var(--b3d-gold); }
.b3d .b3d-card h3 { font-family: var(--b3d-display); font-weight: 400; font-size: clamp(1.8rem, 2.8vw, 2.9rem); line-height: 1.02; color: var(--b3d-ivory); }
.b3d .b3d-card p:not(.b3d-meta) { margin-top: 18px; max-width: 26rem; font-size: 14px; line-height: 1.65; color: var(--b3d-sand); }
.b3d .b3d-card a { margin-top: 28px; align-self: flex-start; border-bottom: 1px solid rgba(212,168,67,.6); padding-bottom: 4px; font-size: 14px; }
.b3d .b3d-card a:hover { color: var(--b3d-gold); }

/* ---------- Layout statico (base: senza JS, senza WebGL, movimento ridotto) ---------- */
.b3d-hero { padding: 18vh var(--b3d-pad) 10vh; display: grid; gap: 48px; }
.b3d-poster { width: min(60vw, 360px); aspect-ratio: 400 / 480; margin: 0 auto; }
.b3d-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 1600px; }
.b3d-hero-grid > * { min-width: 0; }
.b3d-scroll, .b3d-ticks { display: none; }
.b3d-pin { padding: 12vh var(--b3d-pad); }
.b3d-cards { display: grid; gap: 40px; margin-top: 48px; max-width: 1100px; }
@media (min-width: 900px) { .b3d-cards { grid-template-columns: repeat(2, 1fr); } }
.b3d-install .b3d-sr { position: static; width: auto; height: auto; clip: auto; white-space: normal; font-family: var(--b3d-display); font-weight: 300; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: .95; }

/* ---------- Esperienza immersiva ---------- */
.b3d.is-live .b3d-hero { height: 100vh; height: 100svh; min-height: 560px; padding: 0 var(--b3d-pad) 7vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.b3d.is-live .b3d-poster { position: absolute; left: 62%; top: 40%; width: 50vmin; height: 58vmin; margin: 0; transform: translate(-50%, -50%); transition: opacity 1s; }
.b3d.is-ready .b3d-poster { opacity: 0; }
.b3d.is-live .b3d-hero-grid { grid-template-columns: 1fr minmax(0, 22rem); gap: 40px; align-items: end; width: 100%; margin: 0 auto; }
.b3d.is-live .b3d-hero-sub { margin-bottom: 16px; }
.b3d.is-live .b3d-ch { opacity: 0; }
.b3d.is-live .b3d-scroll { position: absolute; left: 50%; bottom: 3.5vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 12px; color: var(--b3d-sand); }
.b3d-scroll i { position: relative; display: block; width: 1px; height: 52px; background: rgba(200,191,176,.25); overflow: hidden; }
.b3d-scroll i::after { content: ""; position: absolute; left: 0; top: -30%; width: 100%; height: 30%; background: linear-gradient(transparent, var(--b3d-gold)); animation: b3d-drop 2.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes b3d-drop { to { top: 100%; } }

.b3d.is-live .b3d-pin { position: relative; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.b3d.is-live .b3d-intro { position: absolute; left: var(--b3d-pad); top: 15vh; max-width: 28rem; }
.b3d.is-live .b3d-cards { position: absolute; right: var(--b3d-pad); top: 50%; width: min(36vw, 30rem); height: 16rem; margin: 0; transform: translateY(-50%); display: block; }
.b3d.is-live .b3d-card { position: absolute; inset: 0; visibility: hidden; }
.b3d.is-live .b3d-install .b3d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.b3d.is-live .b3d-cards-install::before { content: ""; position: absolute; inset: -25% -18% -25% -14%; background: radial-gradient(closest-side, rgba(8,7,10,.72), rgba(8,7,10,0)); z-index: -1; pointer-events: none; }
.b3d.is-live .b3d-ticks { position: absolute; left: var(--b3d-pad); right: var(--b3d-pad); bottom: 7vh; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; font-size: 12px; }
.b3d-tick { color: rgba(200,191,176,.5); transition: color .5s; }
.b3d-tick::before { content: ""; display: block; height: 1px; margin-bottom: 10px; background: currentColor; transform-origin: left; transform: scaleX(.35); transition: transform .6s cubic-bezier(.16,1,.3,1), background-color .5s; }
.b3d-tick[data-state=done] { color: var(--b3d-sand); }
.b3d-tick[data-state=done]::before { transform: scaleX(1); }
.b3d-tick[data-state=active] { color: var(--b3d-ivory); }
.b3d-tick[data-state=active]::before { transform: scaleX(1); background: var(--b3d-gold); }

/* Telefono / verticale */
@media (max-aspect-ratio: 9/10) {
  .b3d.is-live .b3d-poster { left: 50%; top: 34%; width: 60vmin; height: 70vmin; }
  .b3d.is-live .b3d-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .b3d .b3d-hero-title { font-size: clamp(2.2rem, 10.5vw, 5rem); }
  .b3d.is-live .b3d-scroll { display: none; }
  .b3d.is-live .b3d-intro { top: 12vh; right: var(--b3d-pad); }
  .b3d.is-live .b3d-cards { left: var(--b3d-pad); right: var(--b3d-pad); width: auto; top: auto; bottom: 6vh; height: 15rem; transform: none; z-index: 2; }
  .b3d.is-live .b3d-card { padding-left: 20px; justify-content: flex-end; }
  .b3d .b3d-card h3 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .b3d .b3d-card p:not(.b3d-meta) { font-size: 13px; margin-top: 12px; }
  .b3d .b3d-card .b3d-meta { margin-bottom: 10px; }
  .b3d.is-live .b3d-pin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(transparent, rgba(8,7,10,.92) 45%); pointer-events: none; }
  .b3d.is-live .b3d-ticks { display: none; }
}

@media (prefers-reduced-motion: reduce) { .b3d-scroll i::after { animation: none; } }