.coffee-chat {
  position: relative;
  overflow: visible;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 36px 24px;
  background: #4e342e;
  color: #ffffff;
}

.coffee-chat::before,
.coffee-chat::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.coffee-chat::before {
  background:
    linear-gradient(90deg, rgba(78, 52, 46, 0.72) 0%, rgba(78, 52, 46, 0.6) 24%, rgba(78, 52, 46, 0.4) 52%, rgba(78, 52, 46, 0.22) 74%, rgba(78, 52, 46, 0.14) 100%),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.07), transparent 28%);
  z-index: 0;
}

.coffee-chat::after {
  background:
    linear-gradient(rgba(78, 52, 46, 0.28), rgba(78, 52, 46, 0.28)),
    url("./img/coffee-background.png") center center / cover repeat;
  opacity: 0.8;
  z-index: 0;
}

.coffee-chat__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(230px, 330px) minmax(0, 660px);
  align-items: center;
  justify-content: center;
  gap: clamp(68px, 8vw, 128px);
  width: min(1120px, 100%);
  margin: 0 auto;
}

.coffee-chat__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 390px;
  overflow: visible;
}

.coffee-chat__content {
  max-width: 660px;
  margin-left: 12px;
}

.coffee-chat__eyebrow {
  margin: 0 0 10px;
  color: #ba9e76;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.coffee-chat__content h2 {
  margin: 0 0 34px;
  max-width: none;
  font-size: clamp(1.95rem, 3vw, 3.2rem);
  line-height: 0.96;
  font-weight: 700;
  text-transform: uppercase;
}

.coffee-chat__points {
  display: grid;
  gap: 22px;
  max-width: 34rem;
}

.coffee-chat__point h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.15;
  font-weight: 700;
}

.coffee-chat__point p {
  margin: 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(0.94rem, 1vw, 1.02rem);
  line-height: 1.42;
  font-weight: 400;
}

.coffee-chat__location {
  margin: 40px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.88rem, 0.92vw, 0.98rem);
  line-height: 1.45;
  font-style: italic;
}

.coffee-chat #plate {
  width: min(26vw, 300px);
  height: min(26vw, 300px);
  min-width: 210px;
  min-height: 210px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow:
    -1.5vmin 1.8vmin 4.5vmin 1.2vmin rgba(0, 0, 0, 0.18),
    inset 0 0 0 0.2vmin #cccccc,
    inset 0 0 0 0.5vmin #fafafa,
    inset 0 0 8vmin 0.1vmin rgba(0, 0, 0, 0.18);
}

.coffee-chat #handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  top: 65%;
  transform: rotate(-43deg);
  border-radius: 1vmin;
  box-shadow:
    -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1),
    0 0 0 0.1vmin rgba(102, 102, 102, 0.1),
    inset -1vmin 0 2vmin 0.1vmin #ffffff,
    inset 0 0 0.5vmin 0.5vmin #bbbbbb,
    inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

.coffee-chat #cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5),
    inset 0 0 0.5vmin 0.2vmin #cccccc,
    inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

.coffee-chat #coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

.coffee-chat #cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow:
    0 0 0.3vmin 0 #000,
    0 0 0.5vmin 2.5vmin #dedede,
    inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

.coffee-chat #foamWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  filter: url("#goo") drop-shadow(0 0 3px #b37a3c);
}

.coffee-chat .foam {
  position: absolute;
  top: 22%;
  left: -3%;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  background-color: #f8c99d;
  transform: rotate(21deg);
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

.coffee-chat #foam2 {
  top: -7%;
  left: 14%;
  width: 6%;
  transform: rotate(53deg);
}

.coffee-chat #foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

.coffee-chat #foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

.coffee-chat #foam5 {
  top: -9%;
  left: 70%;
  height: 30%;
  transform: rotate(122deg);
}

.coffee-chat #foam6 {
  top: 8%;
  left: 98%;
  width: 5%;
  height: 60%;
  transform: rotate(152deg);
}

.coffee-chat #foam7 {
  top: 20%;
  left: 97%;
  width: 5%;
  height: 60%;
  transform: rotate(181deg);
}

.coffee-chat #foam8 {
  top: 51%;
  left: 96%;
  width: 5%;
  height: 40%;
  transform: rotate(211deg);
}

.coffee-chat #foam9 {
  top: 62%;
  left: 70%;
  width: 5%;
  height: 80%;
  transform: rotate(224deg);
}

.coffee-chat #foam10 {
  top: 72%;
  left: 62%;
  width: 5%;
  height: 50%;
  transform: rotate(74deg);
}

.coffee-chat #foam11 {
  top: 59%;
  left: 51%;
  width: 4%;
  height: 80%;
  transform: rotate(104deg);
}

.coffee-chat #foam12 {
  top: 44%;
  left: 9%;
  width: 4%;
  height: 80%;
  transform: rotate(124deg);
}

.coffee-chat #foam13 {
  top: 7%;
  left: -6%;
  width: 4%;
  height: 80%;
  transform: rotate(-26deg);
}

@keyframes coffee-foam-middle-animation {
  0%,
  10% {
    transform: translate(0, 0);
  }

  50%,
  90%,
  100% {
    transform: translate(45%, 20%);
  }
}

.coffee-chat #foamMiddleWrapper {
  position: absolute;
  inset: 0;
  animation: coffee-foam-middle-animation 10s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes coffee-foam-middle-rotate {
  0% {
    transform: rotate(0);
  }

  55%,
  90% {
    transform: rotate(30deg);
  }

  100% {
    opacity: 0;
  }
}

.coffee-chat #foamMiddleContainer {
  position: absolute;
  inset: 0;
  animation: coffee-foam-middle-rotate 10s ease-in-out infinite;
  will-change: transform, opacity;
}

.coffee-chat .foamMiddle {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  background-color: #f8c99d;
  transform: rotate(21deg);
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

.coffee-chat #foamMiddle2 {
  left: 47%;
  width: 10%;
  transform: rotate(-49deg);
}

@keyframes coffee-bubble-middle-1 {
  0% {
    transform: scale(1) translate(0, 0);
  }

  35% {
    transform: scale(1) translate(60%, 40%);
  }

  45%,
  100% {
    transform: scale(0) translate(60%, 40%);
  }
}

.coffee-chat #bubbleMiddle1 {
  top: 48%;
  left: 50%;
  width: 7%;
  height: 7%;
  animation: coffee-bubble-middle-1 10s ease-in-out infinite;
  will-change: transform;
}

@keyframes coffee-bubble-middle-2 {
  0% {
    transform: scale(1) translate(0, 0);
  }

  39% {
    transform: scale(1) translate(10%, 10%);
  }

  49%,
  100% {
    transform: scale(0) translate(10%, 10%);
  }
}

.coffee-chat #bubbleMiddle2 {
  top: 40%;
  left: 44%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation: coffee-bubble-middle-2 10s ease-in-out infinite;
  will-change: transform;
}

@keyframes coffee-bubble-middle-3 {
  0%,
  45% {
    transform: scale(1) translate(0, 0);
  }

  55% {
    transform: scale(0) translate(0, 0);
  }

  100% {
    transform: scale(0) translate(50%, -40%);
  }
}

.coffee-chat #bubbleMiddle3 {
  top: 49%;
  left: 41%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation: coffee-bubble-middle-3 10s ease-in-out infinite;
  will-change: transform;
}

.coffee-chat #bubbleMiddle4 {
  top: 45%;
  left: 51%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.coffee-chat .bubble,
.coffee-chat .bubbleSmall {
  position: absolute;
  border-radius: 50%;
  background-color: #35210d;
  box-shadow:
    0 0 0.1vmin 0 #35210d,
    inset 0 0 0.5vmin 0.2vmin #662e22;
}

.coffee-chat .bubble::after,
.coffee-chat .bubbleSmall::after {
  content: "";
  position: absolute;
  top: 12%;
  right: 23%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  transform: rotate(-20deg);
  box-shadow: 0 0 0.3vmin 0 #ffffff;
}

.coffee-chat .bubble {
  top: 40%;
  left: 2%;
  width: 5%;
  height: 7%;
}

.coffee-chat .bubbleSmall {
  top: 48%;
  left: 1%;
  width: 1%;
  height: 2%;
}

.coffee-chat .bubbleSmall::after {
  opacity: 0.8;
}

.coffee-chat #bubble2 { left: 5%; top: 30%; transform: rotate(25deg); }
.coffee-chat #bubble3 { left: 8%; top: 23%; width: 3%; height: 5%; transform: rotate(39deg); }
.coffee-chat #bubble4 { left: 94%; top: 43%; transform: rotate(-10deg); }
.coffee-chat #bubble5 { left: 95%; top: 37%; width: 3%; height: 4%; transform: rotate(-17deg); }
.coffee-chat #bubble6 { left: 39%; top: 0; width: 6%; height: 9%; transform: rotate(76deg); }
.coffee-chat #bubble7 { left: 60%; top: 1%; width: 4%; height: 7%; transform: rotate(106deg); }
.coffee-chat #bubble8 { left: 35%; top: 91%; width: 4%; height: 7%; transform: rotate(106deg); }
.coffee-chat #bubble9 { left: 4%; top: 63%; transform: rotate(-23deg); }
.coffee-chat #bubble10 { left: 2%; top: 58%; width: 3%; height: 4%; transform: rotate(-18deg); }
.coffee-chat #bubble11 { left: 63%; top: 91%; width: 4%; height: 6%; transform: rotate(72deg); }
.coffee-chat #bubble12 { left: 31%; top: 3%; width: 4%; height: 6%; transform: rotate(68deg); }
.coffee-chat #bubble13 { left: 21%; top: 85%; width: 4%; height: 6%; transform: rotate(118deg); }
.coffee-chat #bubble14 { left: 95%; top: 53%; width: 4%; height: 6%; transform: rotate(373deg); }
.coffee-chat #bubble15 { left: 50%; top: 0; width: 3%; height: 5%; transform: rotate(96deg); }

.coffee-chat #bubbleSmall2 { left: 3%; top: 37%; height: 1%; }
.coffee-chat #bubbleSmall3 { left: 6%; top: 28%; height: 1%; }
.coffee-chat #bubbleSmall4 { left: 96%; top: 35%; height: 1%; }
.coffee-chat #bubbleSmall5 { left: 60%; top: 96%; height: 1%; }
.coffee-chat #bubbleSmall6 { left: 8%; top: 72%; height: 1%; }

.coffee-chat #innerShadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

.coffee-chat #glow {
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  z-index: 10;
}

@keyframes coffee-steam-animation {
  0% {
    transform: translate(30%, -70%);
    opacity: 0;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    transform: translate(60%, -90%);
    opacity: 0;
  }
}

.coffee-chat #steamWrapper {
  position: absolute;
  top: -12%;
  left: 6%;
  width: min(460px, 40vw);
  height: min(460px, 40vw);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: none;
  z-index: 4;
  pointer-events: none;
}

.coffee-chat #steam {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 300px;
  border-radius: 50%;
  box-shadow: -66px 210px 80px -132px rgba(255, 255, 255, 0.78);
  filter: url("#fog");
  animation: coffee-steam-animation 4s ease-in-out infinite;
  will-change: transform, opacity;
  opacity: 0.85;
}

@media (max-width: 1100px) {
  .coffee-chat {
    padding: 34px 20px;
  }

  .coffee-chat__inner {
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    gap: 20px 56px;
  }

  .coffee-chat__content h2 {
    max-width: none;
    margin-bottom: 28px;
    font-size: clamp(1.65rem, 2.7vw, 2.45rem);
  }

  .coffee-chat__content {
    margin-left: 10px;
  }

  .coffee-chat__points {
    gap: 20px;
  }

  .coffee-chat__point h3 {
    font-size: clamp(0.96rem, 1.1vw, 1.1rem);
  }

  .coffee-chat__point p {
    font-size: clamp(0.88rem, 0.9vw, 0.96rem);
  }

  .coffee-chat__location {
    margin-top: 34px;
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .coffee-chat #plate {
    width: min(24vw, 250px);
    height: min(24vw, 250px);
    min-width: 190px;
    min-height: 190px;
  }

  .coffee-chat #steamWrapper {
    top: -12%;
    left: 4%;
    width: min(360px, 32vw);
    height: min(360px, 32vw);
  }

  .coffee-chat #steam {
    min-width: 260px;
    min-height: 260px;
  }
}

@media (max-width: 820px) {
  .coffee-chat {
    min-height: auto;
    display: block;
    padding: 56px 18px;
  }

  .coffee-chat::after {
    background:
      linear-gradient(rgba(78, 52, 46, 0.3), rgba(78, 52, 46, 0.3)),
      url("./img/coffee-background.png") center center / cover repeat;
    opacity: 0.76;
  }

  .coffee-chat__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .coffee-chat__visual {
    order: -1;
    min-height: 300px;
    width: 100%;
  }

  .coffee-chat__content {
    max-width: 680px;
    margin-left: 0;
    text-align: center;
  }

  .coffee-chat__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.24em;
  }

  .coffee-chat__content h2 {
    max-width: none;
    margin-bottom: 24px;
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .coffee-chat__points {
    gap: 20px;
  }

  .coffee-chat__point p {
    max-width: none;
    font-size: 1rem;
  }

  .coffee-chat__location {
    margin-top: 30px;
    font-size: 0.92rem;
    line-height: 1.38;
  }

  .coffee-chat #plate {
    width: min(62vw, 280px);
    height: min(62vw, 280px);
    min-width: 220px;
    min-height: 220px;
  }

  .coffee-chat #steamWrapper {
    top: -2%;
    left: 50%;
    width: min(380px, 92vw);
    height: min(380px, 92vw);
    transform: translateX(-50%);
  }

  .coffee-chat #steam {
    min-width: 300px;
    min-height: 300px;
    box-shadow: -78px 236px 82px -150px rgba(255, 255, 255, 0.82);
  }
}