html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ─── COMPLEX BACKGROUNDS & ANIMATIONS ───────────────────── */
.bg-cosmic {
  background-image: radial-gradient(circle at top right, rgba(181, 242, 219, 0.05), transparent 40%),
    radial-gradient(circle at bottom left, rgba(22, 35, 43, 0.8), transparent 60%);
}

.glow-mint {
  position: absolute;
  width: 400px;
  height: 400px;
  background: #B5F2DB;
  opacity: 0.1;
  filter: blur(100px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(181, 242, 219, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(181, 242, 219, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(181, 242, 219, 0);
  }
}

.animate-pulse-dot {
  animation: pulse-dot 2s infinite;
}

/* ─── ANIMATED HERO TEXT ─────────────────────────────────── */
.animated-word {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  /* Transição elástica (spring) ajustada para não subir demais e cortar a ponta das letras */
  transition: all 1.2s cubic-bezier(0.25, 1.3, 0.25, 1);
}

.word-entering {
  opacity: 0;
  transform: translateY(100px);
  /* Override para teleportar para baixo sem animar */
  transition: none;
}

.word-active {
  opacity: 1;
  transform: translateY(0);
}

.word-exiting {
  opacity: 0;
  transform: translateY(-100px);
}