/* Museo 3D — stage, overlays, UI. Tokens come from style.css (:root). */
.m3d{position:relative;height:863vh;height:863lvh;background:#07060a}
/* lvh, non svh: su telefono, quando la barra del browser si ritrae, uno stage più basso lascerebbe una fascia scura in fondo (la pagina sotto) */
.m3d__stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#07060a;isolation:isolate}
.m3d__css{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.m3d__cam{position:absolute;left:0;top:0;transform-style:preserve-3d;pointer-events:none}
.m3d__obj{position:absolute;left:0;top:0;transform-style:flat;pointer-events:none;overflow:hidden;background:#0b0a09}
.m3d__obj iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;pointer-events:none;background:#0b0a09}
.m3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.m3d__vig{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(6,12,24,.62) 0,rgba(6,12,24,.28) 22%,transparent 44%),radial-gradient(120% 90% at 50% 46%,transparent 58%,rgba(5,8,16,.42) 100%)}
.m3d__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;z-index:2;pointer-events:none;background:#07060a}
.m3d__veil{position:absolute;inset:0;z-index:9;background:#07060a;opacity:1;transition:opacity 1.2s ease;pointer-events:none}
.m3d.is-ready .m3d__veil{opacity:0}

/* overlays */
.m3d__ui{position:absolute;inset:0;z-index:5;pointer-events:none;color:var(--ink,#EDE9E3);font-family:var(--mono,monospace);text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:300}
.m3d__beat,.m3d__out{text-align:center;margin:0;opacity:0;transition:opacity .7s var(--ease,ease),transform .9s var(--ease,ease);text-transform:none;letter-spacing:-.01em}
.m3d__beat{position:absolute;left:0;right:0;transform:translateY(14px)}
.m3d__beat.on{opacity:1;transform:none}
.m3d__out.on{opacity:1}
.m3d__beat{bottom:17%;font-family:var(--display,serif);font-size:clamp(34px,5.6vw,84px);line-height:1;text-shadow:0 0 30px rgba(6,14,30,.8),0 2px 40px rgba(0,0,0,.65)}
.m3d__outwrap{position:absolute;inset:0;display:grid;place-items:center}          /* le frasi stanno nella stessa cella: centrate in orizzontale e in verticale dal layout, non da un offset */
.m3d__outwrap::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 40% at 50% 50%,rgba(7,18,44,.55),transparent 78%);opacity:0;transition:opacity .9s ease}
.m3d__outwrap.scrim::before{opacity:1}
.m3d__out{grid-area:1/1;position:relative;width:100%;padding:0 24px;transform:translateY(14px);text-wrap:balance;font-family:var(--display,serif);font-size:clamp(30px,5vw,76px);line-height:1.04;text-shadow:0 0 26px rgba(8,22,52,.92),0 0 70px rgba(8,22,52,.7),0 2px 6px rgba(8,22,52,.55)}
.m3d__out.on{transform:none}
.m3d__out--dark{color:#0c1a30;text-shadow:0 0 28px rgba(255,255,255,.55)}                    /* la domanda finale sta sul cielo chiaro: testo scuro (come l'hero che sale sotto) */
.m3d__cap{position:absolute;left:var(--pad,80px);bottom:calc(34px + env(safe-area-inset-bottom,0px));opacity:0;transition:opacity .6s ease;display:flex;gap:14px;align-items:baseline}
.m3d__cap.on{opacity:1}
.m3d__cap b{font-weight:300;color:var(--ink-3,#8e8a84)}
.m3d__cue{position:absolute;left:50%;bottom:calc(34px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink-2,#b4afa7);transition:opacity .6s ease}
.m3d__cue.off{opacity:0}
.m3d__mouse{width:22px;height:34px;border:1px solid currentColor;border-radius:12px;position:relative;opacity:.8}
.m3d__mouse::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;border-radius:2px;background:currentColor;animation:m3dwheel 1.8s ease-in-out infinite}
@keyframes m3dwheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
.m3d__skip{position:absolute;right:var(--pad,80px);bottom:calc(34px + env(safe-area-inset-bottom,0px));pointer-events:auto;color:var(--ink-3,#8e8a84);padding:6px 0;border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease}
.m3d__skip:hover{color:var(--ink,#EDE9E3);border-color:currentColor}

@media(max-width:1199px){.m3d__cap,.m3d__skip{--pad:40px}}
@media(max-width:809px){
  .m3d__cap{left:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:4px}
  .m3d__skip{right:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .m3d__cue{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .m3d__beat{bottom:24%}
}
@media(prefers-reduced-motion:reduce){.m3d__beat,.m3d__out{transition:none}.m3d__mouse::after{animation:none}}

/* when the 3D museum is unavailable (no WebGL / reduced motion) */
.m3d[hidden]{display:none}

/* didascalia estesa: solo telefono (su desktop c'è il cartellino bianco sul muro) */
.m3d__cap em{display:none;font-style:normal}
@media(max-width:809px){
  .m3d__cap{max-width:calc(100vw - 110px)}
  .m3d__cap{font-size:12px}
  .m3d__cap em{display:block;text-transform:none;letter-spacing:.2px;font-size:12px;line-height:1.35;color:rgba(237,233,227,.82);margin-top:2px}
}

/* Skip intro veil: covers the film while the page jumps to the hero */
.skipveil{position:fixed;inset:0;z-index:9;background:#07060a;opacity:0;pointer-events:none;transition:opacity .36s cubic-bezier(.4,0,.2,1)}
.skipveil.on{opacity:1;pointer-events:auto}
.skipveil.out{transition-duration:.65s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.skipveil{display:none}}