/* Intro 3D condivisa (landing, login, dashboard): loader con logo 3D e uscita a portale. */
/* ── Intro: loader 3D ── */
#intro { display: none; }
html.intro { overflow: hidden; background: var(--bg); }
html.intro body { visibility: hidden; }                 /* finche' l'intro non e' montata la pagina non lampeggia */
html.intro.intro-reveal body { visibility: visible; }   /* quando il portale si apre la pagina sotto deve vedersi */
html.intro #intro { visibility: visible; display: block; position: fixed; inset: 0; z-index: 9999; perspective: 1500px; perspective-origin: 50% 100%; }
.intro-sheet { position: absolute; inset: 0; background: var(--bg); overflow: hidden; will-change: mask-image; }
.intro-sheet::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 50% 45%, var(--accent-glow), transparent 65%), linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 64px 64px; opacity: .55; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%); }
.ifloor { position: absolute; left: -30%; right: -30%; bottom: 0; height: 55%; pointer-events: none; opacity: .55; overflow: hidden;
  transform: perspective(520px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 80%); mask-image: linear-gradient(to top, #000 15%, transparent 80%); }
.ifloor-g { position: absolute; left: 0; right: 0; top: -100px; bottom: 0; will-change: transform; animation: ifloor 4s linear infinite;
  background: linear-gradient(rgba(200, 255, 46, .42) 1px, transparent 1px) 0 0 / 100px 100px, linear-gradient(90deg, rgba(200, 255, 46, .42) 1px, transparent 1px) 0 0 / 100px 100px; }
@keyframes ifloor { to { transform: translate3d(0, 100px, 0); } }
.portal-ring { position: absolute; left: 0; width: 100%; height: 2px; background: var(--accent); box-shadow: 0 0 24px 3px rgba(200, 255, 46, .7), 0 -18px 60px 10px rgba(200, 255, 46, .18); pointer-events: none; opacity: 0; top: 0; }
.intro-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 34px; }
#intro.go .intro-word, #intro.go .intro-count, #intro.go .intro-status, #intro.go .intro-meta, #intro.go .intro-bar { opacity: 0; transition: opacity .35s ease; }
.mark-stage { perspective: 900px; width: 150px; height: 198px; }
.mark3d { position: relative; width: 150px; height: 198px; transform-style: flat; will-change: transform; }
.mark3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lg-glow { position: absolute; left: -90px; right: -90px; top: -70px; bottom: -70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 255, 46, .22), transparent 72%); opacity: .45; transition: opacity .6s; pointer-events: none; }
.mark3d.lit .lg-glow { opacity: 1; }
.lg-base { opacity: .13; }
.lg-clip { position: absolute; inset: 0; overflow: hidden; will-change: transform; transform: translate3d(0, 198px, 0); transition: transform .28s linear; }
.lg-clip img { will-change: transform; transform: translate3d(0, -198px, 0); transition: transform .28s linear; }
.lg-scan { position: absolute; left: -14px; right: -14px; top: 0; height: 2px; margin-top: -1px; background: var(--accent); box-shadow: 0 0 16px 2px var(--accent); border-radius: 2px; will-change: transform; transform: translate3d(0, 198px, 0); transition: transform .28s linear, opacity .3s; }
.intro-word { font: 500 13px/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--muted); margin-right: -.42em; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.intro-word.on { opacity: 1; transform: none; }
.intro-count { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(24px, 4vw, 52px); font: 500 clamp(64px, 11vw, 150px)/.85 var(--mono); letter-spacing: -.06em; display: flex; align-items: flex-start; gap: 6px; }
.intro-count small { font-size: .26em; letter-spacing: 0; color: var(--accent); margin-top: .35em; }
.intro-meta { position: absolute; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); top: clamp(20px, 3vw, 36px); display: flex; justify-content: space-between; font: 400 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.intro-status { position: absolute; right: clamp(20px, 4vw, 56px); bottom: clamp(30px, 4vw, 56px); font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.intro-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
@media (max-width: 560px) { .intro-meta span:last-child { display: none; } }
.intro-calm .ifloor-g { animation: none; }