/* ============================================================
   OBIA — cinematic startup styles (step 3a)
   Loaded after styles.css. Additive only.
   ============================================================ */

.startup { overflow: hidden; }

.startup-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* keep the checks/phase/skip block above the canvas */
.startup-inner { position: relative; z-index: 2; }

.startup-sound-hint {
  margin-top: 4px;
  padding: 6px 14px;
  border: 1px solid rgba(126, 170, 208, .28);
  border-radius: 100px;
  background: rgba(7, 13, 21, .7);
  color: #8fa5b9;
  font-size: 11px; letter-spacing: .08em;
  cursor: pointer;
  animation: hint-breathe 2.2s ease-in-out infinite;
}
.startup-sound-hint:hover { color: #dfe9f3; border-color: rgba(92, 200, 240, .5); }

@keyframes hint-breathe { 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  .startup-canvas { display: none; }
  .startup-sound-hint { animation: none; }
}