/* ═══════════════════════════════════════════════════
   SIGNALPULSE — intro.css  v2
═══════════════════════════════════════════════════ */

#screen-intro {
  background: var(--bg);
  align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── PARTICLE CANVAS ── */
#particle-canvas {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}

.intro-center {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  animation: iReveal .9s cubic-bezier(.16,1,.3,1) .2s both;
}
@keyframes iReveal { from{opacity:0;transform:translateY(28px) scale(.97);} to{opacity:1;transform:none;} }

/* ── HEX ── */
.hex-wrap {
  position: relative; width: 120px; height: 138px;
  display: flex; align-items: center; justify-content: center;
}
.hex-shape { position: absolute; inset: 0; }
.hex-shape svg { width: 100%; height: 100%; filter: drop-shadow(0 0 18px var(--accent-glow)); animation: hexGlow 3s ease-in-out infinite; }
@keyframes hexGlow { 0%,100%{filter:drop-shadow(0 0 14px var(--accent-glow));} 50%{filter:drop-shadow(0 0 32px rgba(168,85,247,0.7));} }

.hex-ring {
  position: absolute; inset: -18px; border-radius: 50%;
  border: 1px dashed rgba(45,212,255,0.15);
  animation: ringRotate 14s linear infinite;
}
@keyframes ringRotate { to{transform:rotate(360deg);} }
.hex-ring-dot {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}

/* ── TARGET ── */
.target-wrap {
  position: relative; width: 60px; height: 60px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.target-circle { position: absolute; border-radius: 50%; border: 1.5px solid rgba(168,85,247,0.5); }
.target-c1 { width: 48px; height: 48px; animation: tPulse 1.2s ease-in-out infinite; }
.target-c2 { width: 30px; height: 30px; animation: tPulse 1.2s ease-in-out infinite .3s; }
@keyframes tPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(1.1);} }
.target-cross { position: absolute; background: rgba(168,85,247,0.6); }
.target-h { width: 44px; height: 1.5px; }
.target-v { width: 1.5px; height: 44px; }
.target-center {
  width: 8px; height: 8px; border-radius: 50%; z-index: 3;
  background: var(--accent); box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent);
  animation: cBlink .8s ease-in-out infinite;
}
@keyframes cBlink { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.5);} }
.target-sweep {
  position: absolute; width: 50%; height: 1.5px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform-origin: left center; animation: sweep 2s linear infinite; opacity: .6;
}
@keyframes sweep { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* ── TITLE ── */
.intro-title {
  font-family: var(--fh); font-size: 4rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; text-align: center;
  background: var(--accent-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.intro-tagline {
  font-family: var(--fm); font-size: 11px; color: var(--sub);
  letter-spacing: .2em; text-transform: uppercase; text-align: center; margin-top: -12px;
}

/* ── PROGRESS ── */
.intro-progress-wrap { width: 200px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.intro-progress-bar { width: 100%; height: 1px; background: var(--dim); border-radius: 1px; overflow: hidden; }
.intro-progress-fill {
  height: 100%; background: var(--accent-grad); width: 0%;
  animation: progFill 2s cubic-bezier(.4,0,.2,1) .4s forwards;
}
@keyframes progFill { to{width:100%;} }
.intro-status { font-family: var(--fm); font-size: 10px; color: var(--sub); letter-spacing: .1em; }

/* ── EXIT ── */
#screen-intro.fade-out { animation: iOut .6s ease forwards; pointer-events: none; }
@keyframes iOut { to{opacity:0;transform:scale(1.03);} }