@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.step-enter {
  animation: fadeIn 0.35s ease-out;
}
.upload-box {
  border: 2px dashed rgba(255,255,255,0.25);
  transition: border-color 0.2s, background-color 0.2s;
}
.upload-box:hover {
  border-color: rgba(232,232,232,0.8);
  background-color: rgba(255,255,255,0.06);
}
.progress-dot {
  transition: all 0.25s ease;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

body {
  background-color: #0A0A0A;
}

/* ── Fact screens (pure-black diagnostic sequence) ── */
@keyframes factFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.fact-fade {
  opacity: 0;
  animation: factFade 0.7s ease forwards;
}
.fact-screen {
  /* covers the gold body texture with a flat black field */
  position: relative;
}
.fact-next {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fact-next.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* 0.7s keeps the NOW -> OPTIMISED change smooth but deliberate; width and
   colour share a duration so the bar doesn't recolour ahead of its own fill.
   Kept in sync with TRANSITION_MS in the Potential Gap fact screen. */
.fact-bar-fill {
  width: 0%;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.7s ease;
}