/* Soft animated wash behind the sign-in form — no photography. */

.login-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.login-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--login-atmosphere-bg);
  animation: soft-fade 0.9s var(--ease) both;
}

.login-atmosphere__wash {
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  pointer-events: none;
}

.login-atmosphere__wash--sea {
  left: -38%;
  top: -42%;
  background: radial-gradient(
    circle,
    rgba(47, 111, 126, 0.48) 0%,
    rgba(47, 111, 126, 0.22) 34%,
    rgba(215, 232, 236, 0.45) 52%,
    transparent 70%
  );
  animation: login-wash-drift 16s ease-in-out infinite alternate;
}

.login-atmosphere__wash--warm {
  right: -40%;
  bottom: -44%;
  background: radial-gradient(
    circle,
    rgba(196, 92, 38, 0.34) 0%,
    rgba(196, 92, 38, 0.14) 32%,
    rgba(240, 228, 216, 0.55) 50%,
    transparent 72%
  );
  animation: login-wash-drift-alt 20s ease-in-out infinite alternate;
}

.login-atmosphere__wash--mist {
  left: 12%;
  top: 16%;
  width: 62vmax;
  height: 62vmax;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(232, 238, 244, 0.45) 42%,
    transparent 70%
  );
  animation: login-wash-mist 14s ease-in-out infinite alternate;
}

.login-page > .login-shell {
  position: relative;
  z-index: 1;
}

.login-page:has(.login-atmosphere) .login-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(14px);
  box-shadow:
    var(--shadow),
    0 0 0 1px var(--login-panel-ring);
}

.login-page:has(.login-atmosphere) .login-brand__name,
.login-page:has(.login-atmosphere) .login-brand__tag {
  text-shadow: var(--login-brand-shadow);
}

@keyframes login-wash-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(14%, 11%, 0) scale(1.12);
  }
}

@keyframes login-wash-drift-alt {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-12%, -10%, 0) scale(1.14);
  }
}

@keyframes login-wash-mist {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.55;
  }
  to {
    transform: translate3d(-10%, 8%, 0) scale(1.08);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-atmosphere,
  .login-atmosphere__wash--sea,
  .login-atmosphere__wash--warm,
  .login-atmosphere__wash--mist {
    animation: none;
  }

  .login-atmosphere__wash--mist {
    opacity: 0.8;
  }
}