/* ==========================================================
   INTRO — logo animato → simbolo → apertura della home
   (ricostruito dal progetto Claude Design "Sonitech Logo Animato")
   ========================================================== */

#intro { display: none; }
.has-intro #intro, .intro-opening #intro { display: block; }

#intro {
  position: fixed; inset: 0; z-index: 90;
  background: #100F1E;
  overflow: hidden;
  --r: 0px;
}
/* il foro circolare si apre via JS aggiornando --r (maschera attiva solo in apertura) */
.intro-opening #intro {
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
}

/* palco 1920×1080 come nel progetto originale, scalato via JS */
.intro-stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
}
.intro-stage .drift { position: absolute; inset: 0; transform-origin: 50% 50%; }
.intro-stage .it-letter { position: absolute; overflow: hidden; }
.intro-stage .it-letter > div { position: absolute; background-size: 100% 100%; will-change: transform; }
.intro-stage .it-ring { position: absolute; box-sizing: border-box; border-style: solid; border-color: #F2F2F5; display: none; }
.intro-stage .it-accent { position: absolute; background: #00A8DD; will-change: transform; }

.intro-skip {
  position: absolute; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #6c7090; padding: 10px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.09);
  background: none; cursor: pointer; transition: color .3s, border-color .3s, opacity .4s;
}
.intro-skip:hover { color: #f2f3f8; border-color: rgba(255,255,255,.3); }

/* simbolo che vola dal centro alla posizione del logo nella barra */
.intro-flier {
  position: fixed; z-index: 95; pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
  --u: calc(var(--sz) / 116);
}
.intro-flier i { position: absolute; display: block; box-sizing: border-box; transition: none; }

/* durante l'intro: home ferma e leggermente "lontana", logo della barra nascosto */
.has-intro .slide.is-active .reveal { animation-play-state: paused; }
.has-intro .brand-symbol, .intro-opening .brand-symbol { opacity: 0; }
.deck { transition: transform 1.3s cubic-bezier(.16, 1, .3, 1); }
.has-intro .deck { transform: scale(1.08); }
.intro-opening .deck { transform: none; }