/* Splash di pre-lancio: stessi token e font del sito (theme.css), una sola schermata. */

/* Manrope ospitato sul dominio: niente richiesta a Google, quindi nessun IP trasmesso
   e nessuna dichiarazione da aggiungere all'informativa. Se il file manca, system-ui. */
@font-face {
  font-family: 'Manrope';
  src: url('assets/font/Manrope-VariableFont_wght.woff2') format('woff2-variations'), url('assets/font/Manrope-VariableFont_wght.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

html { scroll-behavior: auto; }
.splash { min-height: 100dvh; position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: clip; }
.splash::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%);
}

.splash-top { display: flex; justify-content: space-between; align-items: center; padding: 26px clamp(20px, 4.8vw, 84px) 0; }
.splash-status { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.splash-status i { width: 8px; height: 8px; border-radius: 2px; background: var(--signal); animation: blink 1.1s steps(1) infinite; }
.splash-actions { display: flex; gap: 5px; }
.splash-actions .ctl {
  min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--nav-bg); color: var(--nav-ink-soft); border: 1px solid transparent; font: 600 12px/1 var(--mono); letter-spacing: .06em; cursor: pointer;
  transition: color .2s;
}
.splash-actions .ctl:hover { color: var(--nav-ink); }
.splash-actions svg { width: 17px; height: 17px; display: block; }

.splash-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(36px, 6vh, 80px) clamp(20px, 4.8vw, 84px); position: relative; }
.splash-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.logo { margin: 0; width: clamp(128px, 11vw, 190px); aspect-ratio: 606 / 170; color: var(--ink); }
.logo span { display: block; width: 100%; height: 100%; background: url('assets/logo/bimshift_logo_alpha.png') center / contain no-repeat; image-rendering: pixelated; }
:root[data-theme="dark"] .logo span { filter: invert(1); }
.splash-claim { margin: clamp(26px, 4.5vh, 48px) 0 0; font-size: clamp(3.3rem, 9.8vw, 11.5rem); line-height: 1.02; font-weight: 790; letter-spacing: -.085em; max-width: 13ch; text-wrap: balance; }
.splash-claim.long { font-size: clamp(2.8rem, 7.8vw, 9.4rem); max-width: 15ch; }
.splash-claim em { font-style: normal; color: var(--signal-ink); }
.splash-lede { margin: clamp(26px, 4vh, 40px) 0 0; max-width: 46ch; font-size: clamp(1.02rem, 1.4vw, 1.25rem); line-height: 1.45; letter-spacing: -.02em; color: var(--ink-soft); }
.splash-mail { margin-top: 30px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }

.splash-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 clamp(20px, 4.8vw, 84px) 26px; font: 500 11px/1.4 var(--mono); color: var(--muted); }
.made-in { display: inline-flex; align-items: center; gap: 10px; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; }
.flag { display: inline-grid; grid-template-columns: repeat(3, 9px); height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.flag i:nth-child(1) { background: #009246; } .flag i:nth-child(2) { background: #f4f3ee; } .flag i:nth-child(3) { background: #ce2b37; }

/* tessere del sito, qui con una lenta deriva in CSS (nessuno script) */
.splash .orb { display: grid; z-index: 0; animation: drift var(--t, 9s) ease-in-out infinite alternate; }
.splash .o1 { --orb-top: 14%; --orb-left: 4%; --orb-rot: -12deg; --t: 8s; }
.splash .o2 { --orb-top: 20%; --orb-right: 4%; --orb-rot: 9deg; --t: 10s; }
.splash .o3 { --orb-bottom: 20%; --orb-left: 6%; --orb-rot: 8deg; --t: 11s; }
.splash .o4 { --orb-bottom: 16%; --orb-right: 6%; --orb-rot: -7deg; --t: 9s; }
@keyframes drift { from { transform: translateY(-9px) rotate(var(--orb-rot, 0deg)); } to { transform: translateY(11px) rotate(calc(var(--orb-rot, 0deg) + 4deg)); } }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 820px) {
  .splash .orb { width: 44px; font-size: 9px; box-shadow: 4px 5px 0 var(--orb-shadow); }
  .splash-main { justify-content: center; }
  .splash .o1, .splash .o2 { display: none; }
  .splash .o3, .splash .o4 { bottom: 12%; }
  .splash-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .splash .orb, .splash-status i { animation: none; } }

/* pagina 404 */
.splash-404 .splash-claim { font-size: clamp(3rem, 9vw, 8rem); }