.confetti {
  width: 100%;
  height: 120px;
  background: transparent;
  position: relative;
  margin: 60px 0;
}

.confetti::after {
  /* content: "🎊"; */
  content: " ";
  font-size: 2rem;
  opacity: 0.15;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* Base style for edge emojis */
.bb-hw-emoji {
  position: fixed;
  z-index: 9999;
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1;
  opacity: 0;
  /* начална лека отместване; ще го override-нем с inline CSS променливи */
  --dx: 0px;
  --dy: 10px;
  transform: translate(var(--dx), var(--dy)) scale(0.95) rotate(var(--rot, 0deg));
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
  user-select: none;
}

.bb-hw-emoji.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(var(--rot, 0deg));
}

@media (prefers-reduced-motion: reduce) {
  .bb-hw-emoji {
    transition: none;
  }
}


/* Контейнерът – за по-лесно позициониране и hover */
.bb-letters {
  display: inline-block;
}

/* Глобални променливи за темпо и наситеност; може да override-неш */
.bb-letters {
  --sat: 90%;
  --light: 55%;
  --delay-step: 45ms; /* стейдж между буквите */
}

/* H3 може да си остане със стила ти; важното е спановете вътре */
.bb-letters h3 {
  font-size: 43px;
  line-height: 1.15;
  letter-spacing: .02em;
  margin: 0; /* по желание */
}

/* Всяка буква */
.bb-letters .bb-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(-6deg);
  filter: drop-shadow(0 0 .2em rgba(0,0,0,.12));
  color: hsl(var(--h, 210) var(--sat) var(--light));
  animation: bb-letter-in .6s cubic-bezier(.2,.7,.2,1.1) forwards;
  animation-delay: calc(var(--i) * var(--delay-step));
  will-change: transform, opacity;
}

/* Когато контейнерът получи .is-animated – стартират анимациите */
.bb-letters:not(.is-animated) .bb-letter {
  animation: none;
  opacity: 0;
  transform: translateY(0.6em) rotate(-6deg);
}

/* Hover “пружина” (по избор) */
.bb-letters.is-animated:hover .bb-letter {
  animation-name: bb-letter-in, bb-wiggle;
  animation-duration: .6s, 600ms;
  animation-timing-function: cubic-bezier(.2,2.7,1.2,1.1), ease;
  animation-fill-mode: forwards, none;
}

/* Теми */
.bb-letters[data-theme="halloween"] { --sat: 100%; --light: 55%; }
.bb-letters[data-theme="christmas"] { --sat: 90%;  --light: 50%; }
.bb-letters[data-theme="neon"]      { --sat: 100%; --light: 60%; }

.bb-letters .bb-word{
  display:inline-block;
  white-space:nowrap; /* пази думата цяла */
}

/* Анимации */
@keyframes bb-letter-in {
  0%   { opacity: 0; transform: translateY(0.6em) rotate(-6deg) scale(.96); }
  60%  { opacity: 1; transform: translateY(-0.05em) rotate(1deg)  scale(1.02); }
  100% { opacity: 1; transform: translateY(0)       rotate(0)     scale(1); }
}

@keyframes bb-wiggle {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-5px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bb-letters .bb-letter { animation: none; opacity: 1; transform: none; }
}