/* ========================= */
/* 🔐 LAYOUT LOGIN */
/* ========================= */

.screen {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* FONDO ANIMADO */
.background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.background-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: backgroundScroll 30s linear infinite;
}

.background-slide:nth-child(1) { top: 0%; }
.background-slide:nth-child(2) { top: 100%; }
.background-slide:nth-child(3) { top: 200%; }
.background-slide:nth-child(4) { top: 300%; }

/* OVERLAY */
.background::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.2)),
    linear-gradient(120deg, rgba(16,185,129,0.4), rgba(0,0,0,0.4));
  pointer-events: none;
}

/* LOGO WRAPPER */
.logo-wrapper {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  z-index: 3;
  animation: logoSlide 1s ease-out;
}

/* CARD LOGIN */
.login-card {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  width: min(400px, 90vw);
  padding: 50px 40px;
  z-index: 4;
}

/* CONTENIDO */
.card-content {
  position: relative;
  z-index: 5;
}

/* ANIMACIONES */
@keyframes backgroundScroll {
  100% {
    transform: translateY(-300%);
  }
}

@keyframes logoSlide {
  from {
    left: 15%;
    opacity: 0;
  }
  to {
    left: 60%;
    opacity: 1;
  }
}