/* ================= FLOATING COMMENTS ================= */

.floating-comments-section{
  position:relative;
  height:400px;
  overflow:hidden;
  background:#F3EDE6;
  display:flex;
  align-items:center;
  justify-content:center;
}

.floating-comments-container{
  position:relative;
  width:100%;
  height:100%;
}

/* Comment Bubble */

.floating-comment{
  position:absolute;
  max-width:320px;
  padding:22px;
  border-radius:22px;
  background: linear-gradient(
      180deg,
      rgba(255,255,255,.8),
      rgba(255,255,255,.6)
  );
  border:1px solid rgba(75,47,39,.15);
  box-shadow: 0 30px 90px rgba(75,47,39,.12);
  backdrop-filter: blur(10px);

  opacity:0;
  transform: translateY(40px) scale(.95);
  transition: all .6s ease;
}

/* Speech tail */
.floating-comment::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:30px;
  width:18px;
  height:18px;
  background:rgba(255,255,255,.7);
  border-left:1px solid rgba(75,47,39,.12);
  border-bottom:1px solid rgba(75,47,39,.12);
  transform:rotate(45deg);
}

.floating-comment.active{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Stars */
.stars{
  margin-top:12px;
  color:#F5C045;
  letter-spacing:2px;
  font-size:clamp(1.15rem, 2.4vw, 1.7rem);
  line-height:1;
  font-weight:700;
  text-shadow:
    0 2px 8px rgba(245, 192, 69, 0.45),
    0 0 1px rgba(58, 34, 15, 0.75);
  -webkit-text-stroke: 0.35px rgba(95, 56, 23, 0.55);
}

/* Highlight */
.highlight{
  position:relative;
  font-weight:600;
}

.highlight::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:6px;
  background:#C6A27E;
  opacity:.35;
  border-radius:4px;
  z-index:-1;
}