/* IL NØTTE — intro Ø: stili. Tutte le regole riguardano solo #gl e #intro-ui (più il blocco dello scroll su html.intro-on). */
:root{
  --intro-bg:#f3f3f4; --intro-fg:#1c1c1f; --intro-fg-soft:rgba(28,28,31,.72); --intro-glass:rgba(0,0,0,.35); --intro-glass-line:rgba(255,255,255,.12);
  --intro-font-ui:'Inter Variable','Helvetica Neue',Arial,sans-serif; --intro-font-mono:'JetBrains Mono Variable','Courier New',monospace;
}
:root.scuro{ --intro-bg:#0b0b0d; --intro-fg:#f2f2f4; --intro-fg-soft:rgba(242,242,244,.7) }
:root.scuro #gl{background:#141416}
html.intro-on,html.intro-on body{overflow:hidden;height:100%}
#gl,#intro-ui,#intro-ui *{box-sizing:border-box}
#intro-ui button{font:inherit;color:inherit}
#intro-ui :focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---- INTRO ---- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:9000;background:#ededef;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
#gl.live{background:transparent}
#gl.dragging{cursor:grabbing}
#gl.breaking{cursor:default;pointer-events:none}
#gl.gone{display:none}
#intro-ui{position:fixed;inset:0;z-index:9001;pointer-events:none;color:var(--intro-fg);font-family:var(--intro-font-ui);line-height:1.5;-webkit-font-smoothing:antialiased}
#intro-ui.gone{display:none}
.wordmark{position:absolute;left:0;right:0;top:max(30px,env(safe-area-inset-top,0px));display:flex;justify-content:center;color:var(--intro-fg);opacity:0;transition:opacity 1.2s}
.wordmark-logo{width:clamp(150px,18vw,260px);height:auto}
.wordmark.on{opacity:.85}
.status{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transition:opacity .5s;font-family:var(--intro-font-mono);font-size:clamp(13px,1.3vw,18px);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.status.on{opacity:1}
.status-sub{font-size:.72em;letter-spacing:.14em;color:var(--intro-fg-soft)}
.hint{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.hint.on{opacity:1}
.hint.dragging .hint-ring,.hint.dragging .hint-handle,.hint.dragging .hint-slash{opacity:0 !important}
.hint-stage{position:absolute;left:50%;top:50%;width:min(40vh,70vw);height:min(40vh,70vw);transform:translate(-50%,-50%)}
.hint-ring{position:absolute;inset:-30%;border-radius:50%;opacity:0;transition:opacity .35s;will-change:transform;background:conic-gradient(from 0deg,var(--intro-fg) 0deg,transparent 5deg,transparent var(--tail,230deg),var(--intro-fg) 360deg);-webkit-mask:radial-gradient(circle closest-side,transparent 58.4%,#000 60.6% 64.4%,transparent 66.6%);mask:radial-gradient(circle closest-side,transparent 58.4%,#000 60.6% 64.4%,transparent 66.6%)}
.hint-ring.on{opacity:.8}
.hint-slash{position:absolute;left:50%;top:50%;width:3px;height:122%;margin-left:-1.5px;transform:translateY(-50%) rotate(30deg);transform-origin:50% 50%;opacity:0;transition:opacity .3s}
.hint-slash.on{opacity:.8}
.hint-slash i{position:absolute;left:0;bottom:0;width:100%;height:0%;background:var(--intro-fg);border-radius:2px}
.hint-handle{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;transition:opacity .35s;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.hint-handle svg{width:100%;height:100%;display:block}
.pill{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));pointer-events:auto;padding:10px 16px;border-radius:999px;border:1px solid var(--intro-glass-line);background:var(--intro-glass);color:rgba(255,255,255,.85);font-family:var(--intro-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity .5s;backdrop-filter:saturate(120%) blur(14px);-webkit-backdrop-filter:saturate(120%) blur(14px)}
.pill.on{opacity:1}
#skip-btn{right:max(16px,env(safe-area-inset-right,0px))}
#audio-btn{left:max(16px,env(safe-area-inset-left,0px));width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}
#audio-btn svg{width:18px;height:18px}
#audio-btn .off{display:none}#audio-btn.muted .off{display:block}#audio-btn.muted .onn{display:none}
.impact{position:absolute;left:0;top:0;width:60vmin;height:60vmin;margin:-30vmin 0 0 -30vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,.4) 25%,rgba(255,255,255,0) 60%);opacity:0;pointer-events:none;mix-blend-mode:screen}
@media (prefers-reduced-motion:reduce){.wordmark{transition:none}}