/* The splash while the app loads (a brand moment): the stacked logo on the brand gradient, the CMYK bar running. */
.op-splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: url('/illustrations/wallpaper-on-brand.svg') 0 0 / 256px 256px, radial-gradient(900px 500px at 20% 0%, #0094b8cc, transparent 60%), linear-gradient(160deg, #2f388d 0%, #0471b1 120%); }
.op-splash img { width: min(240px, 60vw); height: auto; }
.op-splash .bar { width: 120px; height: 3px; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / 0.18); }
.op-splash .bar span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #0099ff 0 25%, #ff0099 25% 50%, #ffff00 50% 75%, #ffffff 75%); animation: op-load 1.1s ease-in-out infinite; }
@keyframes op-load { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .op-splash .bar span { animation: none; } }