/* Fond animé */
.auth-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-1);
  overflow: hidden;
  z-index: 0;
}

.bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  animation: float 20s ease-in-out infinite alternate;
}

.shape-1 {
  width: 40vmax;
  height: 40vmax;
  top: -10vmax;
  left: -10vmax;
  background: var(--color-primary);
  animation-duration: 25s;
}

.shape-2 {
  width: 50vmax;
  height: 50vmax;
  bottom: -15vmax;
  right: -15vmax;
  background: var(--color-accent-purple);
  animation-duration: 30s;
  animation-delay: -5s;
}

.shape-3 {
  width: 30vmax;
  height: 30vmax;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-info);
  animation-duration: 35s;
  animation-delay: -10s;
  opacity: 0.15;
}

@keyframes float {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(5%, -5%) scale(1.1);
  }

  66% {
    transform: translate(-3%, 7%) scale(0.9);
  }

  100% {
    transform: translate(8%, -8%) scale(1.05);
  }
}

.shape-4,
.shape-5 {
  width: 30vmax;
  height: 30vmax;
  top: 0;
  left: 0;
  /* transform: translate(-50%, -50%); */
  background: var(--color-info);
  animation: moving 2.5s ease-in-out infinite;
  /* opacity: 0.15; */
}

.shape-5 {
  animation-duration: 6s;
  animation-delay: -2s;
}

/*
D{-64,56}
minB + ((a - minA)/(maxA - minA) * (maxB - minB))
*/
@keyframes moving {
  0% {
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%) scale(1, 1);
  }

  20% {
    top: 45%;
    left: 73%;
    transform: translate(-50%, -50%) scale(0.86, 1.14);
  }

  40% {
    top: 35%;
    left: 85%;
    transform: translate(-50%, -50%) scale(1.13, 0.87);
  }

  60% {
    top: 85%;
    left: 45%;
    transform: translate(-50%, -50%) scale(1.34, 0.66);
  }

  80% {
    top: 73%;
    left: 35%;
    transform: translate(-50%, -50%) scale(0.87, 1.13);
  }

  100% {
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%) scale(1, 1);
  }
}

.auth-card {
  display: flex;
  flex-direction: column;
  /* width: 100%; */
  max-width: 70rem;
  height: 100%;
  max-height: calc(100vh - var(--space-8));
  background: var(--color-bg-2);
  background: rgba(var(--color-bg-2-rgb, 255, 255, 255), 0.75);
  /* border: none; */
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(8px);
  overflow: hidden;
  z-index: 1;
}

.auth-card:hover,
.auth-card:focus-within {
  border: none;
  box-shadow: var(--shadow-md);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-primary-contrast);
  padding: var(--space-8) var(--space-6);
  gap: var(--space-6);
  text-align: center;
}

.auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.auth-brand .brand {
  color: var(--color-primary-contrast);
}

.auth-brand .app-name,
.auth-brand .app-subtitle {
  color: var(--color-primary-contrast);
}

.auth-brand .app-subtitle {
  opacity: 0.8;
}

/* From Uiverse.io by Creatlydev - Tags: switch, light&dark, toggle switch */
.theme-icon {
  justify-content: center;
  background-color: var(--color-bg-dark-1) !important;
  margin: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-around-xs) var(--color-primary-shadow);
  font-size: 1.25em;
  line-height: 1;
  cursor: pointer;
}

.theme-icon:hover {
  background-color: var(--color-bg-gray-2);
}

.theme-icon .icon {
  position: absolute;
  width: 80%;
  height: 80%;
  margin: auto;
  transition: transform 500ms;
}

.theme-icon .icon svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.theme-icon .icon-moon {
  color: var(--color-accent-purple) !important;
  transition-delay: 200ms;
}

.theme-icon .icon-sun {
  color: var(--color-accent-amber) !important;
  transform: scale(0);
}

.theme-icon input {
  display: none;
}

.theme-icon input:checked ~ .icon-moon {
  transform: rotate(360deg) scale(0);
}

.theme-icon input:checked ~ .icon-sun {
  transition-delay: 200ms;
  transform: scale(1) rotate(360deg);
  animation: fa-spin 3s 1s linear infinite;
}

.auth-message {
  margin: auto;
}

.auth-message h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-primary-contrast);
}

.auth-message p {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  opacity: 0.9;
  max-width: 30ch;
  margin: 0 auto;
  color: var(--color-primary-contrast);
}

.auth-form-wrapper {
  flex: 40%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-bg-2);
  /* padding: var(--space-8) var(--space-6); */
  overflow: auto;
}

.auth-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.auth-form .form-group {
  margin-bottom: var(--space-4);
}

.auth-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-text-2);
  /* margin-top: auto; */
  padding-top: var(--space-4);
  gap: var(--space-2);
  border-top: var(--border-solid-1) var(--color-border-1);
  font-size: 0.85em;
  text-align: center;
}

.version-info {
  opacity: 0.7;
  font-size: 0.8rem;
}

@media (min-width: 481px) {
  .auth-card {
    flex-direction: row;
    min-height: 32rem;
  }

  .auth-brand,
  .auth-form-wrapper {
    flex: 1 0 40%;
  }

  .auth-brand {
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .auth-brand {
    padding: var(--space-6) var(--space-4);
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  .auth-card {
    border-radius: var(--radius-lg);
  }

  .auth-message {
    display: none !important;
  }
}