:root {
  color-scheme: light;
}

.ucsf-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(218, 239, 246, 0.82), transparent 34rem),
    linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
  color: #052b4f;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.ucsf-loader-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.ucsf-loader-content {
  width: min(100%, 430px);
  text-align: center;
}

.ucsf-loader-scene {
  position: relative;
  width: min(82vw, 360px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 41%;
  isolation: isolate;
}

.ucsf-loader-halo {
  position: absolute;
  inset: 17%;
  z-index: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 70px rgba(5, 43, 79, 0.13);
  animation: ucsf-halo-breathe 3.6s ease-in-out infinite;
}

.ucsf-loader-logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: ucsf-logo-float 3.6s ease-in-out infinite;
}

.ucsf-loader-beacon {
  position: absolute;
  top: 25.5%;
  z-index: 3;
  width: 9px;
  height: 9px;
  border: 2px solid white;
  border-radius: 50%;
  background: #ff3b0a;
  box-shadow: 0 0 0 0 rgba(255, 59, 10, 0.45);
  animation: ucsf-beacon 2.2s ease-in-out infinite;
}

.ucsf-loader-beacon--left {
  left: 16.7%;
}

.ucsf-loader-beacon--right {
  right: 16.7%;
  animation-delay: -1.1s;
}

.ucsf-loader-fog {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 45% 0);
  pointer-events: none;
}

.ucsf-loader-fog--back {
  z-index: 1;
  opacity: 0.74;
}

.ucsf-loader-fog--front {
  z-index: 4;
}

.ucsf-loader-cloud {
  position: absolute;
  left: -52%;
  display: block;
  width: 46%;
  height: 10%;
  border-radius: 999px;
  background: #e8f1f5;
  box-shadow: inset 0 -5px 0 rgba(183, 207, 217, 0.22), 0 8px 20px rgba(74, 109, 126, 0.09);
  opacity: 0;
  animation: ucsf-fog-drift 6.8s linear infinite;
}

.ucsf-loader-cloud::before,
.ucsf-loader-cloud::after {
  content: '';
  position: absolute;
  bottom: 38%;
  border-radius: 50%;
  background: inherit;
}

.ucsf-loader-cloud::before {
  left: 17%;
  width: 31%;
  aspect-ratio: 1;
}

.ucsf-loader-cloud::after {
  right: 16%;
  width: 40%;
  aspect-ratio: 1;
}

.ucsf-loader-fog--back .ucsf-loader-cloud:nth-child(1) {
  top: 18%;
  width: 40%;
  animation-duration: 8.4s;
  animation-delay: -2.8s;
}

.ucsf-loader-fog--back .ucsf-loader-cloud:nth-child(2) {
  top: 35%;
  width: 52%;
  animation-duration: 9.2s;
  animation-delay: -7.4s;
}

.ucsf-loader-fog--front .ucsf-loader-cloud:nth-child(1) {
  top: 29%;
  animation-delay: -1.2s;
}

.ucsf-loader-fog--front .ucsf-loader-cloud:nth-child(2) {
  top: 39%;
  width: 58%;
  animation-duration: 7.8s;
  animation-delay: -5.6s;
}

.ucsf-loader-message {
  margin: 8px 0 0;
  color: #052b4f;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.05rem, 3.5vw, 1.3rem);
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.ucsf-loader-subtitle {
  margin: 7px 0 0;
  color: #63758a;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.86rem;
  line-height: 1.5;
}

.ucsf-loader-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  height: 16px;
  margin-top: 15px;
}

.ucsf-loader-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b0a;
  animation: ucsf-dot-hop 1.15s ease-in-out infinite;
}

.ucsf-loader-dot:nth-child(2) {
  background: #052b4f;
  animation-delay: 0.16s;
}

.ucsf-loader-dot:nth-child(3) {
  animation-delay: 0.32s;
}

.ucsf-loader-continue {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  border: 1px solid #ccdae2;
  border-radius: 999px;
  padding: 8px 17px;
  background: rgba(255, 255, 255, 0.84);
  color: #052b4f;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.ucsf-loader-continue:hover {
  border-color: #8ba9b8;
  background: white;
  transform: translateY(-1px);
}

@keyframes ucsf-logo-float {
  0%, 100% { transform: translateY(2px) scale(0.985); }
  50% { transform: translateY(-5px) scale(1); }
}

@keyframes ucsf-halo-breathe {
  0%, 100% { opacity: 0.58; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes ucsf-beacon {
  0%, 42%, 100% { opacity: 0.42; box-shadow: 0 0 0 0 rgba(255, 59, 10, 0); }
  16% { opacity: 1; box-shadow: 0 0 0 8px rgba(255, 59, 10, 0.13); }
}

@keyframes ucsf-fog-drift {
  0% { opacity: 0; transform: translateX(-20%) scale(0.88); }
  14% { opacity: 0.88; }
  54% { opacity: 0.78; }
  82% { opacity: 0.18; }
  100% { opacity: 0; transform: translateX(430%) scale(1.08); }
}

@keyframes ucsf-dot-hop {
  0%, 62%, 100% { opacity: 0.38; transform: translateY(4px) scale(0.78); }
  30% { opacity: 1; transform: translateY(-2px) scale(1); }
}

@media (max-height: 620px) {
  .ucsf-loader-scene {
    width: min(62vh, 310px);
  }

  .ucsf-loader-message {
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ucsf-loader-overlay {
    transition-duration: 1ms;
  }

  .ucsf-loader-logo,
  .ucsf-loader-halo,
  .ucsf-loader-beacon,
  .ucsf-loader-cloud,
  .ucsf-loader-dot {
    animation: none !important;
  }

  .ucsf-loader-cloud {
    opacity: 0.46;
    transform: translateX(170%);
  }
}