/* background */
body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(to bottom, 
      #C99B28 0%, 
      #C99B28 70%, 
      #b0891f 60%, 
      #b0891f 100%);
}

.title-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.title-image {
    max-width: 800px; /* scala automaticamente in base allo schermo */
    width: 100%;
    height: auto;
}

.container {
    display: flex;
    justify-content: center;
    position: relative;
}

@media (max-width: 600px) {
    .title-image { max-width: 400px; width: 400px; height: 250px; margin-bottom: 60px; }
    .head { width: 250px; height: 250px; }
    .leye, .reye { width: 80px; height: 100px; }
    .lpupil, .rpupil { width: 40px; height: 50px; }
    }

.head {
    width: 400px;
    height: 400px;
    border-radius: 20%;
    border: 14px solid black;
    background: #D6D427;
    position: relative;
    justify-content: center;
    display: flex;
    align-items: baseline;
    margin-bottom: 70px;
}

/* head shadow */
.head::before {
    content: "";
    width: 400px;
    height: 400px;
    border-radius: 15%;
    box-shadow: inset -12px 5px 10px 3px rgba(0,0,0,.2);
}

/* Eyes shape */
.leye, .reye {
    background: white;
    border-radius: 50%;
    width: 100px;
    height: 120px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid black;
}

/* Eyes position */
.leye {
    margin-left: -150px;
    margin-top: 80px;
}
.reye {
    margin-right: -150px;
    margin-top: 80px;
}

/* Pupils shape */
.lpupil, .rpupil {
    background: black;
    border-radius: 50%;
    width: 50px;
    height: 60px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Eyes position */
.lpupil {
    margin-left: 0px;
    margin-top: 0px;
}
.rpupil {
    margin-right: 0px;
    margin-top: 0px;
}


.beak {
    background: #DB8D00;
    width: 140px;
    height: 36px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 220px;
    border: 6px solid black;
    border-radius: 100% 100% 30% 30%;
}

/* Nose */
.beak::before {
    content: "";
    background: #DB8D00;
    width: 80px;
    height: 50px;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: -18px;
    border-radius: 70% 70% 50% 50%;

}

/* mouth */
.beak::after {
    content: "";
    background: #DB8D00;
    width: 80px;
    height: 14px;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 36px;
    border: 6px solid black;
    border-radius: 20% 20% 50% 50%;

}



.beak.open {

    background: #DB8D00;
    width: 140px;
    height: 36px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 220px;
    border: 6px solid black;
    border-radius: 100% 100% 30% 30%;
    z-index: 10;
}

/* Nose */
.beak.open::before {
    content: "";
    background: #DB8D00;
    width: 80px;
    height: 50px;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: -18px;
    border-radius: 70% 70% 50% 50%;

}

/* mouth */
.beak.open::after {
    content: "";
    background: #DB8D00;
    width: 80px;
    height: 40px;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 36px;
    border: 6px solid black;
    border-radius: 20% 20% 50% 50%;
    transition: all 0.1s ease;

}

/* tongue */
.beak.open .tongue {
    background: red;
    width: 40px;
    height: 50px;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 40px;
    border: 6px solid black;
    border-radius: 20% 20% 50% 50%;
    z-index: 5;
    border-top: none;
}


/* Nose position */
.lnose {
    margin-left: 10px;
    margin-top: -44px;
}
.rnose {
    margin-right: 10px;
    margin-top: -44px;
}

/* Nose shape and size */
.lnose, .rnose {
    background: black;
    border-radius: 50%;
    width: 4px;
    height: 8px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

}


/* Shake animation */
@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

.shake {
  animation: shakeAnim 0.3s;
}

/* Eyes squeeze/close */
.squeezeeyes .leye,
.squeezeeyes .reye {
  height: 80px; /* flatten the eyes */
  transition: height 0.3s;
  overflow: hidden;
}

.squeezeeyes .lpupil,
.squeezeeyes .rpupil {
  display: none; /* hide pupils when eyes close */
}

/* Optional: add lines for squeezed eyes */
.squeezeeyes .lesqueeze,
.squeezeeyes .resqueeze {
  width: 80px;
  height: 6px;
  background: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
}