/*
 * HERO BUBBLE TRIAL
 * Trial-only styles. Remove this stylesheet link and the marked HTML/JS to roll back.
 */

.hero-boy-bubble-trigger {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hero-boy-bubble-trigger:focus-visible {
  outline: 3px solid rgba(7, 91, 170, 0.48);
  outline-offset: 5px;
  border-radius: 42% 42% 18% 18%;
}

.hero-boy-bubble-anchor {
  position: absolute;
  top: var(--hero-boy-top);
  right: var(--hero-boy-right);
  width: var(--hero-boy-width);
  aspect-ratio: 720 / 790;
  pointer-events: none;
}

.hero-boy-speech {
  position: absolute;
  top: 17.3%;
  right: 48.3%;
  width: 76.1%;
  height: 20%;
  color: #003b7a;
  font-family: Inter, "Noto Sans Thai", Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
  pointer-events: none;
  opacity: 0;
  transform: translate(12px, 8px) scale(0.9);
  transform-origin: right center;
  transition: opacity 600ms ease, transform 900ms cubic-bezier(0.16, 0.76, 0.24, 1);
}

.hero-boy-speech-cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-boy-speech-text {
  position: absolute;
  z-index: 1;
  inset: 16% 14% 13% 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

html[lang="en"] .hero-boy-speech {
  font-size: 12.75px;
}

.hero-boy-bubble-trigger.is-open .hero-boy-speech,
.hero-boy-bubble-trigger:focus-visible .hero-boy-speech {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .hero-boy-bubble-trigger:hover .hero-boy-speech {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@media (max-width: 800px) {
  .hero-boy-speech {
    font-size: clamp(11.8px, 3.46vw, 13.5px);
  }

  html[lang="en"] .hero-boy-speech {
    font-size: clamp(11.2px, 3.27vw, 12.75px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-boy-speech {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-boy-bubble-anchor {
    animation: hero-bubble-anchor-float 5.5s ease-in-out infinite;
  }
}

@keyframes hero-bubble-anchor-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}