@layer pages{.login {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    place-content: center;
    gap: 2rem;
    background-color: var(--login-bg);
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
      linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: scroll 180s linear infinite;
    view-transition-name: login-page;
  }

  .login-logo {
    height: 3.5rem;
    filter: brightness(0) invert(1);
    view-transition-name: login-logo;
  }

  @keyframes scroll {
    0% { background-position: 0 0; }
    100% { background-position: 100% 300%; }
  }

  
  .login .card {
    width: min(420px, 90vw);
    min-height: 340px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-3);
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.15),
      0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    padding: 2rem;
    view-transition-name: auth-card;
  }

  .login .header {
    text-align: center;
    flex-direction: column;
  }

  .login .body form {
    gap: var(--size-4);
  }


  .login-title {
    color: var(--text-primary);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-6);
    margin: 0;
  }

  
  .login .btn[data-variant="cta"] {
    width: 100%;
    margin-block-start: var(--size-3);
    padding: var(--size-3);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-6);
  }

  .login .footer {
    justify-content: center;
  }
}@layer pages{::view-transition-group(auth-card) {
  animation-duration: 0.5s;
}

::view-transition-old(auth-card) {
  animation: flip-out 0.5s ease-in-out both;
}

::view-transition-new(auth-card) {
  animation: flip-in 0.5s ease-in-out both;
}


::view-transition-old(login-page),
::view-transition-new(login-page),
::view-transition-old(login-logo),
::view-transition-new(login-logo) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes flip-out {
  0% {
    transform: perspective(1200px) rotateY(0deg);
    opacity: 1;
  }
  50% {
    transform: perspective(1200px) rotateY(-90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1200px) rotateY(-90deg);
    opacity: 0;
  }
}

@keyframes flip-in {
  0% {
    transform: perspective(1200px) rotateY(90deg);
    opacity: 0;
  }
  50% {
    transform: perspective(1200px) rotateY(90deg);
    opacity: 0;
  }
  85% {
    transform: perspective(1200px) rotateY(-5deg);
    opacity: 1;
  }
  100% {
    transform: perspective(1200px) rotateY(0deg);
    opacity: 1;
  }
}
}@layer components{.password-requirements {
  margin-block-start: 1rem;
  padding: 1rem;
  background-color: var(--sand-100);
  border-radius: 0.5rem;
  border: 1px solid var(--border-default);
}

.password-requirements-title {
  font-size: var(--font-size-0);
  font-weight: 600;
  margin-block-end: 0.75rem;
  color: var(--text-primary);
}

.password-requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.password-requirement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-0);
  transition: color var(--duration-normal) ease;
}

.password-requirement.met {
  color: var(--feedback-success-text);
}

.password-requirement.unmet {
  color: var(--feedback-danger-text);
}

.password-requirement-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.password-requirement-text {
  font-size: var(--font-size-0);
}
}