/* OWNS LOGIN <-> HOME TRANSITION. ANIMATION ONLY. */

:root {
  /* Fade out duration. */
  --login-fade-out-duration: 600ms;
  /* Delay before logo. */
  --login-logo-delay: 0ms;
  /* Logo duration. */
  --login-logo-duration: 2000ms;
  /* Delay before home. */
  --login-home-delay: 1850ms;
  /* Easing. */
  --login-transition-ease: cubic-bezier(0.2, 0, 0.2, 1);
  /* Logo size. */
  --login-logo-inline-size: min(40%, 14rem);
  /* Logo glow. */
  --login-logo-glow-size: min(75%, 19rem);
}

html.login-transition-active {
  overflow: hidden;
  scrollbar-gutter: auto;
}

html.login-transition-active body {
  overflow: hidden;
}

.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
  background: var(--background-app);
}

.transition-overlay.is-rising {
  opacity: 0;
  animation: overlay-rise var(--login-fade-out-duration) var(--login-transition-ease) both;
}

.transition-overlay.is-leaving {
  background: var(--background-app);
  animation: overlay-away calc(var(--login-home-delay) + var(--login-fade-out-duration) - 80ms) var(--login-transition-ease) forwards;
}

.transition-overlay.is-leaving::before {
  content: "";
  position: absolute;
  inline-size: var(--login-logo-glow-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(199, 154, 107, 0.2) 0, rgba(199, 154, 107, 0.1) 36%, transparent 70%);
  filter: blur(0.75rem);
  opacity: 0;
  animation: logo-glow var(--login-logo-duration) var(--login-transition-ease) var(--login-logo-delay) forwards;
}

.transition-logo {
  position: relative;
  z-index: 1;
  inline-size: var(--login-logo-inline-size);
  block-size: auto;
  opacity: 0;
  filter: drop-shadow(0 1.375rem 2.875rem rgba(0, 0, 0, 0.42));
  animation: logo-pulse var(--login-logo-duration) var(--login-transition-ease) var(--login-logo-delay) forwards;
}

.login-screen.leaving {
  animation: login-out var(--login-fade-out-duration) var(--login-transition-ease) both;
  will-change: opacity;
}

.landing-shell.entering {
  opacity: 0;
  animation: landing-in var(--login-fade-out-duration) ease var(--login-home-delay) forwards;
}

@keyframes overlay-rise {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes login-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes logo-pulse {
  0% { opacity: 0.04; transform: scale(0.94); }
  22% { opacity: 1; transform: scale(1); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes logo-glow {
  0% { opacity: 0.04; transform: scale(0.94); }
  22% { opacity: 0.28; transform: scale(1); }
  48% { opacity: 0.38; transform: scale(1.04); }
  72% { opacity: 0.24; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes overlay-away {
  0% { opacity: 1; visibility: visible; }
  82% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes landing-in {
  0% { opacity: 0; transform: translateY(0.5rem); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .transition-overlay.is-rising,
  .transition-overlay.is-leaving,
  .transition-overlay.is-leaving::before,
  .transition-logo,
  .login-screen.leaving,
  .landing-shell.entering {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}