.hero-character {
  /* Seated 1402×1122 art: tail tip meets the scalp at roughly (900, 325). */
  --bubble-head-x: 64.2%;
  --bubble-head-y: 29%;
  isolation: isolate;
  transform: translate(var(--look-x, 0px), var(--look-y, 0px)) rotate(calc(-2deg + var(--look-rotate, 0deg)));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  transform-origin: 50% 90%;
}
.coin-scene > .coin-interaction { left: -7%; top: 140px; }
.hero-pink {
  transform: none;
  pointer-events: none;
}
.hero-touch {
  position: absolute;
  left: 35%;
  top: 10%;
  z-index: 4;
  width: 59%;
  height: 63%;
  border: 0;
  background: none;
  border-radius: 48%;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hero-touch:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.hero-bubble {
  position: absolute;
  left: var(--bubble-head-x);
  top: var(--bubble-head-y);
  width: 136px;
  aspect-ratio: 160 / 106;
  display: grid;
  place-items: center;
  padding: 11px 17px 27px;
  isolation: isolate;
  color: var(--ink);
  font: 650 17px/1.15 var(--ui);
  letter-spacing: -.03em;
  transform: translate(-18.125%, -94.34%) rotate(7deg);
  transform-origin: 18.125% 94.34%;
  z-index: 6;
  pointer-events: none;
  text-align: center;
}
.hero-bubble:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 106'%3E%3Cpath d='M79 4C121 4 156 17 156 44C156 69 127 82 88 82C75 82 63 81 53 78L29 100L33 72C15 65 4 57 4 43C4 18 34 4 79 4Z' fill='%23fffcec' stroke='%2317345f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero-character.is-poked { animation: comic-guard .55s cubic-bezier(.2, .8, .2, 1); }
.hero-character.is-poked .hero-bubble { animation: bubble-pop .4s cubic-bezier(.2, .8, .2, 1); }
.title-letter {
  display: inline-block;
  transform-origin: 50% 85%;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1);
  animation: letter-wiggle 8s ease-in-out infinite;
  animation-delay: calc(var(--letter) * 55ms);
}
.title-space { display: inline-block; width: .18em; }
.title-letter:hover { transform: translateY(-9px) rotate(-8deg) scale(1.09); animation-play-state: paused; }
.title-underline path { stroke-dasharray: 300; stroke-dashoffset: 0; animation: underline-in .9s ease-out both; }
@keyframes letter-wiggle {
  0%, 76%, 100% { translate: 0 0; rotate: 0deg; }
  80% { translate: 0 -5px; rotate: -3deg; }
  84% { translate: 0 1px; rotate: 2deg; }
  88% { translate: 0 0; rotate: 0deg; }
}
@keyframes underline-in { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes comic-guard {
  0%, 100% { transform: translate(var(--look-x, 0px), var(--look-y, 0px)) rotate(calc(-2deg + var(--look-rotate, 0deg))); }
  28% { transform: translate(calc(var(--look-x, 0px) - 7px), calc(var(--look-y, 0px) - 13px)) rotate(calc(-5deg + var(--look-rotate, 0deg))) scale(1.025, .98); }
  64% { transform: translate(calc(var(--look-x, 0px) + 3px), calc(var(--look-y, 0px) - 2px)) rotate(var(--look-rotate, 0deg)); }
}
@keyframes bubble-pop { 0% { scale: .85; } 60% { scale: 1.06; } 100% { scale: 1; } }
html[data-motion=paused] .hero-character { transition: none; }
html[data-motion=paused] .title-letter, .intro[data-inview=false] .title-letter { animation-play-state: paused; }
html[data-motion=paused] .title-underline path { animation: none; }
@media (max-width: 1100px) {
  .coin-scene > .coin-interaction { left: -5%; top: 110px; }
  .hero-bubble { width: 116px; font-size: 14px; padding: 10px 15px 23px; }
}
@media (max-width: 760px) {
  .coin-scene > .coin-interaction { left: 2%; top: 25px; }
  .scene-note { display: none; }
  .hero-bubble { width: 105px; font-size: 13px; padding: 8px 13px 21px; }
  .title-letter { animation-duration: 10s; }
}
@media (max-width: 360px) { .coin-scene > .coin-interaction { top: 15px; } }