/* The name you can poke. */
#heroName.is-jelly { position: relative; -webkit-user-select: none; user-select: none; }
.jelly-char { display: inline-block; transform-origin: 50% 70%; will-change: transform; }
@media (pointer: fine) { .is-jelly .jelly-char { cursor: grab; } .is-jelly .jelly-char.is-grabbed { cursor: grabbing; } }
.is-jelly:not(.jelly-settled) .jelly-char { animation: jelly-in 0.75s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; animation-delay: calc(var(--i) * 70ms + 100ms); }
@keyframes jelly-in {
  from { opacity: 0; transform: translateY(0.45em) scale(0.6, 1.35); }
  55% { opacity: 1; transform: translateY(-0.06em) scale(1.1, 0.9); }
  to { opacity: 1; transform: none; }
}
.jelly-bubbles { position: absolute; inset: 0; pointer-events: none; }
.jelly-bubble {
  position: absolute; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%; border: 1.5px solid rgba(205, 232, 255, 0.85);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85) 0 18%, rgba(160, 205, 255, 0.18) 45%, transparent 70%);
  animation: bubble-rise 1.1s ease-out forwards;
}
@keyframes bubble-rise { from { opacity: 0.95; transform: translate(0, 0) scale(0.6); } to { opacity: 0; transform: translate(var(--drift), -72px) scale(1.15); } }


#heroName .jelly-bubbles { background: none; background-clip: border-box; -webkit-background-clip: border-box; -webkit-text-fill-color: initial; text-shadow: none; }
#heroName .jelly-bubble { background-clip: border-box; -webkit-background-clip: border-box; -webkit-text-fill-color: initial; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { #heroName .jelly-char, #heroName .jelly-bubble { animation: none !important; } }