/* Storia 3D: il morsetto attraversa il processo produttivo durante lo scroll */
.intro-test { min-height: 70vh; display: grid; place-items: center; background: var(--paper); }

.story { position: relative; height: 820vh; background: radial-gradient(ellipse at 60% 45%, #24242b 0%, #111114 60%, #0b0b0d 100%); color: #f2f0eb; }
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* Foglio di carta della fase "disegno a penna": sfuma via quando inizia la stampa 3D */
.story-sticky::before {
  content: ""; position: absolute; inset: 0; opacity: var(--paper, 0);
  background:
    radial-gradient(ellipse at 60% 45%, rgba(255,255,255,.7), transparent 70%),
    #f4f1ea;
}
.story-panel[data-stage="0"] { color: var(--ink); }
.story-panel[data-stage="0"] p { color: var(--muted); }
.story-panel[data-stage="0"] em { color: var(--accent-ink); }
.story.on-paper .story-progress li { background: rgba(20,20,22,.15); }
#story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.story-loading {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  font-size: .9rem; color: #a9a7b0; transition: opacity .6s;
}
.story-loading span { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--accent); animation: spin 1s linear infinite; }
.story-loading.done { opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.story-panels { position: relative; height: 100%; pointer-events: none; }
.story-panel {
  position: absolute; left: 0; top: 50%; width: min(440px, 100%);
  transform: translateY(-40%); opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.story-panel.active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.story-panel h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-bottom: .35em; }
.story-panel p { color: #b9b7bf; font-size: 1.1rem; max-width: 380px; }
.story-panel .num { color: var(--brass); }
.story-panel em { color: var(--accent); }

.finishes { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.finishes li {
  display: flex; align-items: center; gap: 8px; font-size: .85rem; padding: 6px 12px 6px 6px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.12); color: #b9b7bf; transition: border-color .3s, color .3s, background .3s;
}
.finishes li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 6px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.4); }
.finishes li.on { border-color: var(--c); color: #fff; background: rgba(255,255,255,.06); }

.story-progress {
  position: absolute; right: max(16px, calc((100% - 1200px) / 2)); top: 50%; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}
.story-progress li { width: 3px; height: 28px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; position: relative; }
.story-progress li::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(var(--f, 0)); }

@media (max-width: 900px) {
  .story-panel { top: auto; bottom: 28px; transform: translateY(20px); width: 100%; }
  .story-panel.active { transform: none; }
  .story-panel h2 { font-size: 2rem; }
  .story-panel p { font-size: 1rem; }
  .story-panel::before {
    content: ""; position: absolute; inset: -60px -16px -28px; z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(11,11,13,.92) 40%);
  }
  .story-panel[data-stage="0"]::before { background: linear-gradient(180deg, transparent, rgba(244,241,234,.95) 40%); }
  .story-progress { right: 10px; top: 96px; transform: none; }
  .story-progress li { height: 18px; }
}

/* Arabo (destra→sinistra): testi a destra, avanzamento a sinistra */
[dir="rtl"] .story-panel { left: auto; right: 0; }
[dir="rtl"] .story-progress { right: auto; left: max(16px, calc((100% - 1200px) / 2)); }
@media (max-width: 900px) { [dir="rtl"] .story-progress { left: 10px; } }