/* Onboarding walkthrough (src/intro.js) — lives inside #startScreen. */

#intro {
  position: relative; max-width: 480px; height: 100%; margin: 0 auto;
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* Splash: an SVG around the photo; slice = the old background-size:cover +
   center top, so a reticle in SVG coordinates always lands exactly on the stud. */
#introBg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#introBgShade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 48%, rgba(10,10,10,0.7) 68%, #0a0a0a 88%);
}

#introTop {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 12px 0;
}
#introBars { flex: 1; display: flex; gap: 4px; }
.introBar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.22); overflow: hidden; }
.introBar i { display: block; width: 100%; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
#introClose {
  display: none; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,0.12); color: #eee; font-size: 15px; cursor: pointer;
}
#startScreen.help #introClose { display: block; }

#introStage { position: relative; z-index: 2; flex: 1; min-height: 0; touch-action: none; cursor: pointer; }
.introScene {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  visibility: hidden; opacity: 0;
}
.introVisual {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 14px 16px 0;
}
.introVisual svg { width: 100%; height: 100%; max-height: 460px; display: block; overflow: visible; }
.introVisual svg text { font-family: -apple-system, system-ui, sans-serif; }
.introCaption { padding: 10px 24px 2px; text-align: center; }
.introKicker { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #facc15; }
.introCaption h2 { font-size: 22px; line-height: 1.2; margin: 6px 0 8px; color: #f2f2f2; }
.introCaption p { font-size: 14.5px; line-height: 1.5; color: #a3a3a3; margin: 0 auto; max-width: 360px; }
.introCaption p b { color: #e5e5e5; font-weight: 600; }
.introCaption .introGestures { font-size: 12px; color: #6b6b6b; margin-top: 10px; }
.introCaption .c-ref { color: #38bdf8; }
.introCaption .c-pass { color: #4ade80; }
.introCaption .c-fail { color: #f87171; }

#introFooter {
  position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 24px max(24px, calc(env(safe-area-inset-bottom) + 16px));
}
#introFooter #startBtn { width: 100%; max-width: 320px; }
#startBtn.introPulse { animation: introPulse 1.2s ease-in-out infinite; }
@keyframes introPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.6); }
  50% { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
}

@media (max-height: 640px) {
  .introCaption h2 { font-size: 18px; margin: 4px 0 6px; }
  .introCaption p { font-size: 13px; line-height: 1.4; }
  .introCaption .introGestures { display: none; }
  #introFooter { padding-top: 10px; }
}