/* /explore — presentazione 3D a scroll. Si appoggia a interior.css per
   header, tipografia e bottoni; qui solo la scena e le didascalie. */

.explore-page main { overflow: visible; }

#x-story { position: relative; margin-top: 1.5rem; }

/* Niente position:sticky: interior.css mette overflow sugli antenati e lo
   romperebbe. La scena viene fissata da explore.js (classi pin / after). */
#x-sticky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(61, 163, 155, 0.10), transparent 70%),
    radial-gradient(40% 35% at 20% 80%, rgba(214, 59, 214, 0.07), transparent 70%),
    var(--ink);
}

#x-sticky.pin { position: fixed; top: 0; z-index: 5; }
#x-sticky.after { top: auto; bottom: 0; }

#x-scene {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 46%;
}

#x-rig {
  --slab: #0A0B0E;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 1180px, 150vh);
  aspect-ratio: 1320 / 554;
  transform-style: preserve-3d;
  will-change: transform;
  font-family: var(--mono);
  letter-spacing: .04em;
  text-transform: none;   /* le scritte del plugin tengono le loro maiuscole */
}

.x-layer, .x-slab, .x-glow {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.x-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.x-layer svg text { font-family: inherit; }

.x-chassis { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10); }
.x-slab { border-radius: 8px; background: var(--slab); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); filter: brightness(.6); }
.x-glow {
  border-radius: 40px;
  background: radial-gradient(closest-side, rgba(61, 163, 155, 0.55), rgba(61, 163, 155, 0) 70%);
  filter: blur(40px);
  opacity: .55;
}
/* tende di luce (livelli leggeri): piani verticali incernierati sul telaio */
.x-curt div { position: absolute; transform-origin: 0 0; transform: rotateX(90deg); pointer-events: none; }

/* ombra degli oggetti sul telaio: la sfocatura la stacca dal piano */
.x-shadow { filter: blur(7px); }
.x-trail, .x-cap3, .x-obj, .x-shadow, .x-beam { will-change: transform, opacity; }
.x-logo { position: absolute; left: 78.64%; top: 77.62%; width: 15.15%; transition: opacity .2s; }

/* didascalie */
#x-caps { position: absolute; inset: 0; pointer-events: none; }
.x-cap {
  position: absolute;
  top: 50%;
  width: min(30rem, 34vw);
  transform: translateY(-40%);
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
  text-shadow: 0 0 24px var(--ink), 0 0 8px var(--ink);
  text-transform: none;   /* INERTIA, XCLUD, DELTΔ: nomi propri dei comandi */
}
.x-cap.on { opacity: 1; transform: translateY(-50%); }
.x-cap.l { left: var(--pad); }
.x-cap.r { right: var(--pad); text-align: right; }
.x-cap .x-n { font-size: .72rem; letter-spacing: .3em; color: #3DA39B; margin: 0 0 .9rem; }
.x-cap h2 { font-size: clamp(1.5rem, 3.1vw, 2.9rem); line-height: 1.1; font-weight: 400; letter-spacing: .02em; color: var(--emph); margin: 0 0 1rem; }
.x-cap p { font-size: clamp(.82rem, 1vw, .98rem); line-height: 1.7; color: var(--text); margin: 0; }
.x-cap p b { color: var(--emph); font-weight: 400; border-bottom: 1px solid #3DA39B; }

.x-cap.hero, .x-cap.end {
  left: 50%;
  width: min(60rem, 90vw);
  text-align: center;
  transform: translate(-50%, -40%);
}
.x-cap.hero { top: 24%; --hy: -50%; --rise: 0vh; transition: none; }
.x-cap.hero, .x-cap.hero.on { transform: translate(-50%, calc(var(--hy) - var(--rise))); }
.x-mark { display: block; width: clamp(9rem, 17vw, 16rem); height: auto; margin: 0 auto .4rem; }
.x-cap.end { top: 30%; }
.x-cap.end.on { transform: translate(-50%, -50%); }
/* Il wordmark del plugin usa il monospazio di default di JUCE: Lucida Console
   su Windows, Menlo su Mac. Font di sistema, non si possono ospitare. */
.x-cap.hero h1 { font-family: "Lucida Console", Menlo, monospace; font-size: clamp(3rem, 9vw, 8rem); font-weight: 400; letter-spacing: .08em; line-height: 1; color: var(--emph); margin: 0 0 1rem; }
.x-cap.hero p, .x-cap.end p { font-size: clamp(.9rem, 1.3vw, 1.15rem); }
.x-cap.end h2 { font-size: clamp(2rem, 5vw, 4.4rem); }
.x-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 2rem; pointer-events: auto; }

#x-hint {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  font-size: .72rem; letter-spacing: .3em; color: var(--mute);
  animation: x-bob 2.2s ease-in-out infinite;
}
@keyframes x-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

#x-dots {
  position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px; pointer-events: auto;
}
#x-dots i { width: 7px; height: 7px; border-radius: 50%; background: #2a2a31; cursor: pointer; transition: .2s; }
#x-dots i.done { background: #1f5d55; }
#x-dots i.on { background: #3DA39B; transform: scale(1.5); }

@media (max-width: 900px) {
  #x-rig { width: 94vw; }
  #x-scene { perspective: 900px; }
  .x-cap, .x-cap.l, .x-cap.r {
    top: auto; bottom: 4.5rem; left: var(--pad); right: var(--pad);
    width: auto; text-align: left; transform: translateY(10%);
  }
  .x-cap.on { transform: none; }
  .x-cap.hero { top: 9%; bottom: auto; left: 50%; right: auto; width: 92vw; text-align: center; --hy: 0%; }
  .x-cap.hero, .x-cap.hero.on { transform: translate(-50%, calc(var(--hy) - var(--rise))); }
  .x-cap.end { top: 50%; bottom: auto; left: 50%; right: auto; width: 92vw; text-align: center; transform: translate(-50%, -50%); }
  #x-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #x-hint { animation: none; }
  .x-cap { transition: opacity .2s; }
}

/* il nome del prodotto tiene la maiuscola anche nel bottone */
.x-cta a { text-transform: none; }

/* Header sempre in primo piano durante lo scroll, sopra la scena fissata
   (z-index 5). Fisso e non sticky: vedi la nota su #x-sticky. La sfumatura
   tiene leggibili i link quando passano sopra le parti chiare della scena. */
.explore-page .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding-bottom: 1.2rem;
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0.88) 55%, rgba(10, 10, 11, 0));
}
.explore-page #x-story { margin-top: 0; }

/* Solo su questa pagina la voce Relate del menu e' turchese. */
.explore-page .site-nav a.nav-ree,
.explore-page .site-nav a.nav-ree:hover { color: #3DA39B; }