/* Single, minimal web startup composition. Login/profile cards remain unchanged. */

.auth-gate.is-loading {
  background:
    radial-gradient(circle at 50% 108%, rgba(174, 77, 232, .72), transparent 48%),
    linear-gradient(0deg, #721fc0 0%, #5712a8 48%, #3f0b83 100%);
}

.auth-gate.is-loading .auth-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}

.auth-gate.is-loading .auth-shell::before {
  position: absolute;
  z-index: -1;
  inset: 18% -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211, 94, 255, .08), transparent 66%);
  content: "";
  pointer-events: none;
}

.auth-gate.is-loading .auth-brand {
  display: none;
}

.auth-gate.is-loading .auth-card {
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.auth-gate.is-loading .auth-card::before,
.auth-gate.is-loading .auth-card::after {
  display: none;
}

.auth-gate.is-loading .auth-loading {
  display: grid;
  min-height: 285px;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.auth-loader-stage {
  position: relative;
  width: min(240px, calc(100vw - 72px));
  height: 136px;
  margin-bottom: 22px;
}

.auth-loader-stage::before,
.auth-loader-stage::after {
  position: absolute;
  content: "";
}

.auth-loader-stage::before {
  top: 50%;
  left: 50%;
  width: 220px;
  height: 112px;
  padding: 0;
  background: url("./assets/custodio-logo-white-hq-v1.png") center / contain no-repeat;
  filter: drop-shadow(0 8px 20px rgba(29, 0, 66, .24));
  transform: translate(-50%, -50%);
  content: "";
}

.auth-loader-stage::after {
  display: none;
}

.auth-gate.is-loading .auth-loader {
  display: none;
}

.auth-gate.is-loading .auth-loader-kicker,
.auth-gate.is-loading .auth-loader-meta {
  display: none;
}

.auth-gate.is-loading .auth-loading h1,
.auth-gate.is-loading .auth-loading > p {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-loader-progress {
  display: block;
  width: 190px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .19);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.auth-loader-progress i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, .98);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .7));
  transform: translateX(-125%);
  animation: startup-progress-sweep 1.05s cubic-bezier(.55, 0, .2, 1) infinite;
}

@keyframes startup-progress-sweep {
  to { transform: translateX(340%); }
}

@media (max-height: 700px) {
  .auth-gate.is-loading .auth-loading { min-height: 242px; }
  .auth-loader-stage { width: min(220px, calc(100vw - 72px)); height: 120px; margin-bottom: 18px; }
  .auth-loader-stage::before { width: 204px; height: 101px; }
  .auth-loader-progress { width: 174px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-loader-progress i {
    width: 100%;
    animation: none;
    transform: none;
  }
}