/* Ingroovers pre-Flutter web splash — sync copies to each SPA web/ folder. */

html,
body {
  margin: 0;
  padding: 0;
}

html[data-theme='light'] {
  color-scheme: light;
}

html[data-theme='dark'] {
  color-scheme: dark;
}

.app-splash {
  --splash-background: #ffffff;
  --splash-foreground: #09090b;
  --splash-primary: #007a55;
  --splash-muted-foreground: #71717b;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--splash-background);
  color: var(--splash-foreground);
  font-family: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  opacity: 1;
  transition: opacity 200ms ease-out;
}

html[data-theme='dark'] .app-splash {
  --splash-background: #09090b;
  --splash-foreground: #fafafa;
  --splash-primary: #006045;
  --splash-muted-foreground: #9f9fa9;
}

.app-splash.fade-out {
  opacity: 0;
  pointer-events: none;
}

.app-splash__logo {
  width: 56px;
  height: 56px;
  animation: splash-logo-pulse 2s ease-in-out infinite;
}

.app-splash__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--splash-muted-foreground);
}

.app-splash__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid color-mix(in srgb, var(--splash-primary) 25%, transparent);
  border-top-color: var(--splash-primary);
  border-radius: 50%;
  animation: splash-spin 1s linear infinite;
}

@keyframes splash-logo-pulse {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes splash-spin {
  to {
    transform: rotate(360deg);
  }
}