@use "../../../../../styles" as *;

.container {
  width: 100%;
  height: calc(100dvh - #{$header-height} - #{$menu-bar-height});
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  .cup-container {
    width: fit-content;
    height: fit-content;
    position: relative;
    scale: 0.6;
    .steam {
      position: relative;
      width: 1.25em;
      height: 0.5em;
      top: -60px;
      left: 80%;
      background-color: #fbeebf;
      box-shadow: -6.25em -4.37em #fbeebf;
      border-radius: 0.3em;
      &::before {
        content: "";
        position: absolute;
        display: block;
        bottom: 12px;
        left: -3.12em;
        width: 5em;
        height: 0.75em;
        background: #fbeebf;
        border-radius: 0.5em;
        box-shadow: 1.25em -1.85em #fbeebf, -1.03em -2.67em #fbeebf;
      }
      &::after {
        content: "";
        position: absolute;
        display: block;
        left: -8.75em;
        bottom: 1.66em;
        width: 180px;
        height: 0.75em;
        background-color: #fbeebf;
        border-radius: 0.5em;
      }
    }
    .lid {
      position: relative;
      width: 13.75em;
      height: 24px;
      background: linear-gradient(to right, #592c10 53%, #4e2919 53%);
      border-radius: 0.3em;
      &::before {
        content: "";
        position: relative;
        display: block;
        left: 50%;
        bottom: 80%;
        width: 11.25em;
        height: 20px;
        background: linear-gradient(to right, #592c10 54%, #4e2919 54%);
        transform: translateX(-50%);
        border-radius: 0.3em 0 0 0;
      }
      &::after {
        content: "";
        position: relative;
        display: block;
        left: 6em;
        bottom: calc(100% + 44px);
        width: 1.53em;
        height: 0;
        border-bottom: 1.87em solid #4e2919;
        border-left: 5em solid transparent;
        z-index: -1;
      }
    }
    .cup {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 11.87em;
      height: 15.62em;
      background: linear-gradient(
        to top,
        #8c5b33 30%,
        #b5a581 30%,
        #b5a581 80%,
        #8c5b33 80%
      );
      clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
      overflow: hidden;
      &::after {
        content: "";
        position: absolute;
        width: 6.25em;
        height: 17.5em;
        background-color: rgba(255, 255, 255, 0.1);
      }
      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        fill: #592c10;
      }
    }
    .low-line {
      width: 100%;
      height: 12px;
      margin-top: 15 px;
      background-color: #592c10;
      border-radius: $rad-10;
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 500px;
    p {
      color: white;
      font-size: 14px;
      margin: 10px 0;
    }
    button {
      padding: 16px 70px;
      border-radius: $rad-25;
      text-transform: capitalize;
    }
  }
}

.back-img {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  svg {
    fill: $col-lightBlack;
    position: absolute;
    opacity: 0.3;
    z-index: -1;
    &:nth-child(1) {
      transform: translate(-120px, -60px) rotate(175deg);
    }
    &:nth-child(2) {
      width: 250px;
      height: 250px;
      transform: translate(180px, 10px) rotate(35deg);
    }
    &:nth-child(3) {
      transform: translate(110px, 220px) rotate(-135deg) scale(0.9);
    }
    &:nth-child(4) {
      transform: translate(10px, 530px) rotate(-145deg) scale(-1.8);
    }
    &:nth-child(5) {
      width: 200px;
      height: 200px;
      transform: translate(-160px, 250px) rotate(-55deg);
    }
  }
}
