@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(--background-color);
    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 .card-header {
    text-align: center;
    flex-direction: column;
  }

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

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

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

  .login .card-footer {
    justify-content: center;
  }
}::view-transition-group(auth-card){animation-duration:.5s}::view-transition-old(auth-card){animation:flip-out .5s ease-in-out both}::view-transition-new(auth-card){animation:flip-in .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(0);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(0);opacity:1}}