/* Full-screen loading splash. Linked from index.html so it styles the static
   splash before any JavaScript runs; React's AppSplash reuses the same markup
   and classes as the Suspense fallback, so the hand-over is seamless.
   Kept outside the bundle on purpose: the CSP blocks inline <style> elements. */

.gus-splash {
  --gus-splash-bg: #fbfbfd;
  --gus-splash-text: #111113;
  --gus-splash-track: #e5e5ea;
  --gus-splash-accent: #0071e3;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--gus-splash-bg);
  color: var(--gus-splash-text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Stay invisible for fast loads; fade in only if loading takes a moment. */
  opacity: 0;
  animation: gus-splash-in 240ms ease-out 150ms forwards;
}

[data-theme='dark'] .gus-splash {
  --gus-splash-bg: #000000;
  --gus-splash-text: #f5f5f7;
  --gus-splash-track: #2c2c2e;
  --gus-splash-accent: #0a84ff;
}

.gus-splash-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: url('/goupshop-icon-light-192.png') center / cover no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  animation: gus-splash-breathe 1.8s ease-in-out infinite;
}

[data-theme='dark'] .gus-splash-logo {
  background-image: url('/goupshop-icon-dark-192.png');
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.gus-splash-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.gus-splash-bar {
  position: relative;
  width: 132px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gus-splash-track);
}

.gus-splash-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: inherit;
  background: var(--gus-splash-accent);
  animation: gus-splash-slide 1.1s ease-in-out infinite;
}

.gus-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes gus-splash-in {
  to { opacity: 1; }
}

@keyframes gus-splash-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes gus-splash-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
  .gus-splash { animation-duration: 1ms; }
  .gus-splash-logo { animation: none; }
  .gus-splash-bar::after { animation: none; left: 30%; }
}