/* ============================================
   HERO — Hero Section & Chat Bubbles
   ============================================ */
.hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.hero-text {
  position: absolute;
  top: calc(12% - 15px);
  left: 50%;
  transform: translateX(-50%) skewX(-4deg);
  text-align: center;
  z-index: 1;
  width: 100%;
}

.small-text {
  font-size: 2.5vw;
  letter-spacing: 2px;
  transform: translateY(-10px);
}

.large-text {
  font-size: 9vw;
  letter-spacing: 2px;
  margin-top: -2vw;
  transform: translateY(-5px);
}

/* Chat Bubbles */
.bubble {
  position: absolute;
  width: 31vw;
  transform: translateY(-50%);
  z-index: 15; /* MUST be higher than canvas (10) */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.bubble:hover {
  transform: translateY(-50%) scale(1.1);
}

.left-bubble  { left: 5%; top: 55%; }
.right-bubble { right: 5%; top: 60%; }

.bubble-img {
  width: 100%;
  height: auto;
  display: block;
}

.bubble-text {
  position: absolute;
  transform: translate(-50%, -50%) skewX(-4deg);
  width: 70%;
  text-align: center;
  color: var(--black);
  font-size: 2vw;
  line-height: 1.1;
  letter-spacing: 1px;
}

.left-bubble .bubble-text  { top: 52%; left: 48%; }
.right-bubble .bubble-text { top: 54%; left: 55%; }

.bubble-text span { font-size: 1.2vw; }

.mobile-br { display: none; }

/* ── Tablet ── */
@media (max-width: 1200px) {
  .bubble-text { font-size: 2.2vw; }
  .bubble-text span { font-size: 1.5vw; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .mobile-br { display: block; }
  .hero-text {
    top: 12%; 
  }
  .small-text { font-size: 5vw; }
  .large-text { font-size: 13vw; margin-top: -3vw; line-height: 0.9; }

  .bubble { width: 46vw; min-width: 170px; }
  .left-bubble  { top: 35%; left: 2%; } 
  .right-bubble { top: 45%; right: 2%; } 
  .bubble-text { font-size: 3vw; }
  .bubble-text span { font-size: 2.5vw; }
}

/* ── Small phones ── */
@media (max-width: 480px) {
  .hero-text { top: 12%; }
  .small-text { font-size: 5.5vw; margin-bottom: 1vw; }
  .large-text { font-size: 14vw; line-height: 0.85; }
  .bubble { width: 48vw; }
  .left-bubble  { top: 36%; left: 0%; } 
  .right-bubble { top: 46%; right: 0%; }
  .bubble-text { font-size: 3.2vw; }
  .bubble-text span { font-size: 2.5vw; }
}

/* ── 3D Experience Button ── */
.three-d-btn {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: inline-block;
  padding: 14px 32px;
  background: #000;
  color: #ffe600;
  font-family: 'Bangers', cursive;
  font-size: 18px;
  letter-spacing: 3px;
  text-decoration: none;
  border: 3px solid #ffe600;
  border-radius: 50px;
  box-shadow: 0 4px 25px rgba(255, 230, 0, 0.3);
  transition: all 0.3s ease;
  pointer-events: auto;
  animation: pulseGlow 2s ease-in-out infinite;
}
.three-d-btn:hover {
  background: #ffe600;
  color: #000;
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 6px 35px rgba(255, 230, 0, 0.5);
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 25px rgba(255, 230, 0, 0.3); }
  50% { box-shadow: 0 4px 35px rgba(255, 230, 0, 0.6); }
}
@media (max-width: 768px) {
  .three-d-btn { display: none; }
}