* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Segoe UI;
}

/* Background principal */
.background {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #f83435, #040443);
    display: flex;
    align-items: center;
    justify-content: center;
}

.layer {
    position: absolute;
    width: 140vw; 
    height: 140vh; 
    top: -20vh; 
    left: -30vw; 
    clip-path: polygon(0 0, 50% 0, 30% 100%, 0 100%);
    z-index: 1;
}

/* Diferentes camadas com ajuste de posição */
.layer1 {
    background: #ffffff;
    opacity: 0.15;
    left: -35vw;
    animation: float1 5s infinite ease-in-out alternate;
}

.layer2 {
    background: #070707;
    opacity: 0.35;
    left: -30vw;
    animation: float2 6s infinite ease-in-out alternate;
}

.layer3 {
    background: #040443;
    opacity: 0.55;
    left: -25vw;
    animation: float3 7s infinite ease-in-out alternate;
}

.layer4 {
    background: #f83435;
    opacity: 0.75;
    left: -20vw;
    animation: float4 8s infinite ease-in-out alternate;
}

/* Modal de Login */
.login-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: fadeIn 0.5s ease-in-out;
}

/* Lado esquerdo (Campos de Login) */
.login-content {
    width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.login-content h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

.login-content p {
    font-size: 14px;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 12px;
    margin-bottom: 5px;
}

input {
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    outline: none;
    font-size: 14px;
}

.forgot-password {
    font-size: 12px;
    color: #ff6666;
    text-decoration: none;
    margin-bottom: 15px;
    text-align: right;
}

button {
    padding: 10px;
    background: #f83435;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

button:hover {
    background: #d12c2c;
}

/* Ajustando o lado direito do modal (fundo + elementos geométricos) */
.login-image {
    width: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    background: #010740;
    position: relative;
    overflow: hidden;
}

/* Criando quadrados no fundo */
.login-image::before,
.login-image::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid white;
    opacity: 0.2;
}

/* Primeiro quadrado */
.login-image::before {
    top: 10%;
    left: 20%;
    transform: rotate(15deg);
}

/* Segundo quadrado */
.login-image::after {
    bottom: 15%;
    right: 25%;
    transform: rotate(-10deg);
}

/* Criando mais quadrados */
.login-image .square {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid white;
    opacity: 0.15;
}

/* Posições ajustadas para melhor distribuição */
.square-1 { top: 5%; left: 5%; transform: rotate(10deg); }
.square-2 { bottom: 10%; right: 10%; transform: rotate(-5deg); }
.square-3 { top: 45%; left: 15%; transform: rotate(20deg); }
.square-4 { bottom: 30%; right: 35%; transform: rotate(-15deg); }
.square-5 { top: 60%; left: 50%; transform: rotate(25deg); }
.square-6 { bottom: 50%; right: 5%; transform: rotate(-10deg); }
.square-7 { top: 75%; left: 30%; transform: rotate(5deg); }

/* Ajuste final da imagem (pequena redução no tamanho) */
.login-image img {
    max-width: 95%;
    max-height: auto;
    object-fit: contain;
    position: relative;
    bottom: -10px;
    z-index: 1;
}

/* Animação de entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -55%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Animações para as layers */
@keyframes float1 {
    0% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
    50% { transform: translateY(30px) translateX(10px) scale(1.05) rotate(2deg); }
    100% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
}

@keyframes float2 {
    0% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
    50% { transform: translateY(40px) translateX(-10px) scale(1.06) rotate(-2deg); }
    100% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
}

@keyframes float3 {
    0% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
    50% { transform: translateY(20px) translateX(15px) scale(1.03) rotate(1deg); }
    100% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
}

@keyframes float4 {
    0% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
    50% { transform: translateY(50px) translateX(-15px) scale(1.07) rotate(-1.5deg); }
    100% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
}

/* Mobile (phones) */
@media (max-width: 600px) {
  /* Modal full width, altura automática */
  .login-modal {
    width: 90%;
    height: auto;
    flex-direction: column;
    padding: 20px;
  }

  /* Formulário ocupa 100% */
  .login-content {
    width: 100%;
    padding: 20px;
  }

  /* Esconde o lado de imagem */
  .login-image {
    display: none;
  }

  /* Ajusta fontes */
  .login-content h2 { font-size: 18px; }
  .login-content p,
  label,
  .forgot-password,
  input,
  button { font-size: 12px; }

  /* Inputs e botões cheios */
  input,
  button {
    width: 100%;
    box-sizing: border-box;
  }

  /* Remove layers para performance */
  .layer {
    display: none;
  }

  /* Background simplificado */
  .background {
    background: linear-gradient(to bottom, #f83435, #040443);
    align-items: center;
    padding-top: 20px;
  }
}