/* Full-screen first paint (see #app-loading-splash in index.html) + React Suspense loader */

#app-loading-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f1ea;
  transition: opacity 0.38s ease, visibility 0.38s ease;
}

html[data-theme='dark'] #app-loading-splash {
  background: #0f172a;
}

#app-loading-splash.app-loading-splash--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#app-loading-splash .app-loading-splash__logo {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  object-fit: contain;
  box-shadow:
    0 16px 48px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  animation: app-brand-spring 1.4s cubic-bezier(0.34, 1.45, 0.64, 1) infinite;
  will-change: transform;
}

html[data-theme='dark'] #app-loading-splash .app-loading-splash__logo {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(148, 163, 184, 0.12);
}

/* Lazy-route / Suspense: centered branded mark */
.branded-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.branded-loader--inline {
  padding: 0.5rem;
  min-height: 24px;
}

.branded-loader--suspense {
  min-height: 48vh;
  width: 100%;
  padding: 2rem;
}

.branded-loader__logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: contain;
  box-shadow:
    0 12px 36px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(15, 23, 42, 0.05);
  animation: app-brand-spring 1.4s cubic-bezier(0.34, 1.45, 0.64, 1) infinite;
  will-change: transform;
}

html[data-theme='dark'] .branded-loader__logo {
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(148, 163, 184, 0.1);
}

.branded-loader--inline .branded-loader__logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

@keyframes app-brand-spring {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }
  18% {
    transform: scale(1.1) translateY(-10px);
  }
  36% {
    transform: scale(0.93) translateY(4px);
  }
  54% {
    transform: scale(1.06) translateY(-5px);
  }
  72% {
    transform: scale(0.97) translateY(2px);
  }
  86% {
    transform: scale(1.02) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-loading-splash .app-loading-splash__logo,
  .branded-loader__logo {
    animation: none;
  }

  #app-loading-splash.app-loading-splash--out {
    transition: none;
  }
}