*{
box-sizing:border-box;
}

body{

font-family:'Montserrat',sans-serif;

background:
linear-gradient(
180deg,
beige 0%,
rgba(50,142,248) 50%,
black 100%
);

display:flex;
justify-content:center;
align-items:center;

height:100vh;
margin:0;

}


/* CONTENITORE PRINCIPALE */

.container{

background:white;

border-radius:14px;

box-shadow:0 30px 70px rgba(0,0,0);

position:relative;

overflow:hidden;

width:900px;

max-width:100%;

min-height:520px;

}


/* FORM */

form{

background:white;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

padding:0 60px;

height:100%;

text-align:center;

}


form h1{

font-size:32px;

margin-bottom:10px;

}


form p{

font-size:15px;

margin-bottom:25px;

color:#555;

line-height:1.5;

}


/* INPUT */

input{

background:#eee;

border:none;

padding:14px;

margin:10px 0;

width:260px;

border-radius:8px;

font-size:15px;

}

input:focus{
outline:none;
border:2px solid rgb(50,142,248);
}

/* BOTTONI */

button{

border:none;

padding:12px 40px;

background:rgb(50,142,248);

color:white;

font-weight:bold;

border-radius:25px;

cursor:pointer;

margin-top:10px;

transition:0.3s;

}


button:hover{

transform:translateY(-3px);

box-shadow:0 10px 20px rgba(50,142,248,0.5);

}


/* CONTENITORI FORM */

.form-container{

position:absolute;

top:0;

height:100%;

transition:all .6s ease-in-out;

}


.sign-in-container{

left:0;

width:50%;

z-index:2;

}


.sign-up-container{

left:0;

width:50%;

opacity:0;

z-index:1;

}


/* ANIMAZIONE */

.container.right-panel-active .sign-in-container{

transform:translateX(100%);

}


.container.right-panel-active .sign-up-container{

transform:translateX(100%);

opacity:1;

z-index:5;

}


/* OVERLAY */

.overlay-container{

position:absolute;

top:0;

left:50%;

width:50%;

height:100%;

overflow:hidden;

transition:transform .6s ease-in-out;

z-index:100;

}


.overlay{

background:linear-gradient(
135deg,
rgb(50,142,248),
rgb(0,90,200)
);

color:white;

position:relative;

left:-100%;

height:100%;

width:200%;

transform:translateX(0);

transition:transform .6s ease-in-out;

}


.container.right-panel-active .overlay{

transform:translateX(50%);

}


/* PANNELLI */

.overlay-panel{

position:absolute;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

text-align:center;

padding:0 60px;

top:0;

height:100%;

width:50%;

transition: transform 0.6s ease-in-out;

}


.overlay-left{

left:0;

}


.overlay-right{

right:0;

}


/* TESTI OVERLAY */

.overlay-panel h1{

font-size:30px;

margin-bottom:10px;

}


.overlay-panel p{

font-size:15px;

line-height:1.5;

margin-bottom:20px;

}


/* BOTTONI OVERLAY */

.ghost{

background:transparent;

border:2px solid white;

}


.ghost:hover{

background:white;

color:rgb(50,142,248);

}


/* RESPONSIVE */

@media (max-width:900px){

.container{

width:95%;

min-height:600px;

}

input{

width:100%;

}

}

.container.right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay-left{
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left{
    transform: translateX(0);
}

@media (max-width: 768px) and (orientation: portrait) {

  .container {
    flex-direction: column;
    height: auto;
  }

  .form-container {
    position: relative;
    width: 100%;
    transform: none !important;
    opacity: 1 !important;
  }

  .overlay-container {
    display: none; /* 🔥 togliamo casino */
  }

}

@media (max-width: 900px) and (orientation: landscape){

  body{
    height: auto;
    padding: 20px 0;
  }

  .container{
    width: 95%;
    min-height: auto;
    flex-direction: column;
  }

  /* ❌ DISATTIVA ANIMAZIONE */
  .form-container,
  .overlay-container{
    position: relative;
    width: 100%;
    transform: none !important;
  }

  .overlay{
    display: none;
  }

  /* ✅ FORM PIÙ COMPATTI */
  form{
    padding: 30px 20px;
  }

  form h1{
    font-size: 22px;
  }

  form p{
    font-size: 13px;
  }

  input{
    width: 100%;
  }

  button{
    width: 100%;
  }
}