/* ===== Message Section ===== */
.under-construction {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(20vh - 120px); 
    padding: 40px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

/* ===== Text ===== */
.dev-msg {
    color: #1a3c5a;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 50px;
    max-width: 600px;
}


/* ===== Coffee Animation ===== */
.coffee-animation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 35vh;
  overflow: visible;
}

.moka-pot {
  position: relative;
  top: -25px;   /* moves it up */
  left: 100px;   /* moves it right */
  width: 120px;
  animation: tiltPot 3s ease-in-out infinite;
  transform-origin: bottom right;
}


.coffee-cup {
  width: 100px;
  margin-top: 60px;
  z-index: 1;
}

.coffee-stream {
  position: absolute;
  top: 100px;
  left: 75px;   /* moves it right */
  width: 6px;
  height: 0;
  background: linear-gradient(to bottom, #5c3a1b, #3b2611);
  border-radius: 3px;
  animation: pourCoffee 3s ease-in-out infinite;
  z-index: 0;
}

/* --- Animations --- */
@keyframes tiltPot {
  0%, 100% {
    transform: rotate(0deg);
  }
  25%, 75% {
    transform: rotate(-25deg);
  }
}

@keyframes pourCoffee {
  0%, 15% {
    height: 0;
    opacity: 0;
  }
  25%, 65% {
    height: 125px;
    opacity: 1;
  }
  75%, 100% {
    height: 0;
    opacity: 0;
  }
}

/* @media (max-width: 768px) {
  .coffee-animation {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 30vh;
    overflow: visible;
  }
} */