/* Initial / bootstrap splash — shared by index.html + InitialBootstrapOverlay.
 * Tokens:
 *   --initial-loader-bg (surface)
 *   --initial-loader-color (Vuetify primary, jasmine gold in light theme)
 *   --initial-loader-aquamarine (Vuetify aquamarine accent) */

html,
body {
  margin: 0;
  background-color: var(--initial-loader-bg, #fcfceb);
}

body {
  min-height: 100dvh;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

.loading-bg {
  position: relative;
  display: flex;
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 1.5rem;
  /* Tint surface toward primary so light mode reads less stark white (#fff surfaces) */
  background-color: color-mix(
    in srgb,
    var(--initial-loader-bg, #fcfceb) 72%,
    var(--initial-loader-color, #fadf7f) 28%
  );
  background-image:
    radial-gradient(
      ellipse 125% 88% at 48% -22%,
      color-mix(in srgb, var(--initial-loader-color, #fadf7f) 72%, transparent),
      transparent 68%
    ),
    radial-gradient(
      ellipse 100% 82% at 104% 46%,
      color-mix(in srgb, var(--initial-loader-aquamarine, #0befc5) 30%, transparent),
      transparent 58%
    ),
    radial-gradient(
      ellipse 92% 78% at 0% 88%,
      color-mix(in srgb, var(--initial-loader-color, #fadf7f) 48%, transparent),
      transparent 58%
    ),
    radial-gradient(
      ellipse 130% 90% at 52% 108%,
      color-mix(in srgb, var(--initial-loader-color, #fadf7f) 40%, transparent),
      transparent 62%
    );
  color: var(--initial-loader-aquamarine, #067a63);
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .loading-bg {
    background-color: #faf6e8;
    background-image:
      radial-gradient(ellipse 125% 88% at 48% -22%, rgba(250, 223, 127, 0.68), transparent 68%),
      radial-gradient(ellipse 100% 82% at 104% 46%, rgba(11, 239, 197, 0.24), transparent 58%),
      radial-gradient(ellipse 92% 78% at 0% 88%, rgba(250, 223, 127, 0.45), transparent 58%),
      radial-gradient(ellipse 130% 90% at 52% 108%, rgba(250, 223, 127, 0.38), transparent 62%);
  }
}

.loading-mark-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.loading-ring {
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.loading-ring--outer {
  inset: 0;
  border: 5px solid color-mix(in srgb, var(--initial-loader-color, #fadf7f) 42%, transparent);
  border-top-color: var(--initial-loader-color, #fadf7f);
  border-right-color: color-mix(in srgb, var(--initial-loader-color, #fadf7f) 58%, transparent);
  animation: sf-loader-spin 1.05s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

.loading-ring--inner {
  inset: 17px;
  border: 3px solid color-mix(in srgb, var(--initial-loader-color, #fadf7f) 32%, transparent);
  border-bottom-color: var(--initial-loader-color, #fadf7f);
  border-left-color: color-mix(in srgb, var(--initial-loader-color, #fadf7f) 52%, transparent);
  animation: sf-loader-spin-reverse 1.35s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .loading-ring--outer {
    border: 5px solid rgba(250, 223, 127, 0.42);
    border-top-color: #fadf7f;
    border-right-color: rgba(250, 223, 127, 0.58);
  }

  .loading-ring--inner {
    border: 3px solid rgba(250, 223, 127, 0.32);
    border-bottom-color: #fadf7f;
    border-left-color: rgba(250, 223, 127, 0.52);
  }
}

.loading-logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  filter:
    drop-shadow(0 2px 8px rgba(255, 255, 255, 0.45))
    drop-shadow(0 10px 28px color-mix(in srgb, var(--initial-loader-aquamarine, #0befc5) 25%, transparent));
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .loading-logo {
    filter:
      drop-shadow(0 2px 6px rgba(255, 255, 255, 0.45))
      drop-shadow(0 10px 28px rgba(11, 239, 197, 0.2));
  }
}

.loading-logo img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  display: block;
  animation: sf-logo-breathe 2.8s ease-in-out infinite;
}

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

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

@keyframes sf-loader-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes sf-logo-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.97);
    opacity: 0.94;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-ring--outer,
  .loading-ring--inner {
    animation: none;
    opacity: 0.55;
  }

  .loading-logo img {
    animation: sf-logo-breathe-soft 3s ease-in-out infinite;
  }

  @keyframes sf-logo-breathe-soft {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.88;
    }
  }
}

/* Vue overlay: fixed layer + fade out */
.initial-bootstrap-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.28s ease;
}

.initial-bootstrap-overlay.is-exiting {
  opacity: 0;
}

.initial-bootstrap-overlay .loading-bg {
  min-height: 100%;
}