/* What the loading screen waits for (splash.js need/have; 25 Oct, Chris): a bar under the yacht and a lamp for each thing,
   lit as it arrives. Its own file: style.css is past its ceiling. Motion is on the compositor only (transform, opacity). */
.splash-bar {
  position: relative; width: 220px; height: 3px; margin: 6px 0 2px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--faint) 28%, transparent);
}
.splash-bar i {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; border-radius: 2px;
  background: linear-gradient(90deg, #c9a227, #ffd47a); box-shadow: 0 0 10px rgba(255, 212, 122, 0.7);
}
.splash-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); }
.splash-steps li { display: inline-flex; align-items: center; gap: 6px; transition: color 0.3s ease; }
.splash-steps li.on { color: var(--muted); }
.splash-steps .lamp { width: 7px; height: 7px; border-radius: 50%; background: #35506b; }
.splash-steps li.on .lamp { background: #ffd47a; box-shadow: 0 0 8px rgba(255, 212, 122, 0.9); }
.splash-steps li:not(.on) .lamp { animation: splash-wait 1.4s ease-in-out infinite; }
@keyframes splash-wait { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .splash-bar i { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .splash-steps li.on .lamp { animation: splash-lit 0.7s ease-out; }
}
@keyframes splash-lit { 0% { transform: scale(2.2); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .splash-steps li:not(.on) .lamp { animation: none; } }