.hero-balloon {
  position: absolute;
  z-index: 6;
  top: 32%;
  right: 3%;
  width: 92px;
  height: 146px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 82%;
  filter: drop-shadow(0 12px 14px rgba(23, 53, 103, .18));
  animation: balloon-float 3.6s ease-in-out infinite;
}

.hero-balloon:focus-visible { outline: 4px solid #fff; outline-offset: 5px; border-radius: 50%; }
.hero-balloon:hover { animation-play-state: paused; transform: translateY(-8px) rotate(3deg) scale(1.06); }
.balloon-shape { position: absolute; inset: 0 auto auto 13px; width: 66px; height: 80px; border-radius: 50% 50% 46% 46%; background: linear-gradient(135deg, #ffe460 8%, #ffc928 52%, #f2a600); box-shadow: inset -9px -10px 14px rgba(192, 110, 0, .16); }
.balloon-shape::before { content: ""; position: absolute; top: 13px; left: 14px; width: 16px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.58); transform: rotate(28deg); }
.balloon-shape::after { content: ""; position: absolute; bottom: -9px; left: 27px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #e9a800; }
.balloon-string { position: absolute; top: 87px; left: 46px; width: 26px; height: 54px; border-left: 2px solid rgba(23,53,103,.6); border-radius: 50%; transform: rotate(-7deg); }
.pop-particle { position: absolute; z-index: -1; top: 34px; left: 43px; width: 12px; height: 5px; border-radius: 99px; background: #ffc928; opacity: 0; }

.balloon-instruction { position:absolute; z-index:7; top:52%; right:1%; display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:11px; background:#fff; box-shadow:0 8px 20px rgba(23,53,103,.15); color:#173567; font-size:.68rem; font-weight:850; line-height:1.15; pointer-events:none; animation:instruction-nudge 2s ease-in-out infinite; }
.balloon-instruction strong { color:#e43f5a; font-size:1.1rem; }
.balloon-pin { --pin-x:0px; --pin-y:0px; position:absolute; z-index:9; top:61%; right:12%; width:70px; height:42px; padding:0; border:0; background:transparent; cursor:grab; touch-action:none; transform:translate(var(--pin-x),var(--pin-y)) rotate(-24deg); filter:drop-shadow(0 6px 7px rgba(23,53,103,.18)); }
.balloon-pin.is-dragging { cursor:grabbing; filter:drop-shadow(0 10px 9px rgba(23,53,103,.25)); }
.balloon-pin.is-returning { transition:transform .32s cubic-bezier(.2,.9,.35,1.2); }
.pin-head { position:absolute; left:2px; top:8px; width:26px; height:26px; border:4px solid #fff; border-radius:50%; background:#e43f5a; box-shadow:0 0 0 2px #173567; }
.pin-needle { position:absolute; left:27px; top:19px; width:39px; height:3px; border-radius:3px; background:linear-gradient(90deg,#8a96a8,#eef5ff 72%,#173567 73%); }
.pin-needle::after { content:""; position:absolute; right:-7px; top:-2px; width:0; height:0; border-top:3px solid transparent; border-bottom:3px solid transparent; border-left:8px solid #173567; }

.balloon-popped .balloon-shape,
.balloon-popped .balloon-string { animation: balloon-pop .34s cubic-bezier(.2,.8,.25,1) forwards; }
.balloon-popped .pop-particle { animation: particle-burst .55s ease-out forwards; }
.balloon-popped .pop-particle--1 { --x: 64px; --y: -40px; transform: rotate(25deg); }
.balloon-popped .pop-particle--2 { --x: -62px; --y: -30px; transform: rotate(-22deg); }
.balloon-popped .pop-particle--3 { --x: 58px; --y: 45px; transform: rotate(-35deg); }
.balloon-popped .pop-particle--4 { --x: -55px; --y: 48px; transform: rotate(35deg); }
.mascot-running #hero-mascot { animation: mascot-run-away 1.55s .14s cubic-bezier(.5,.05,.85,.28) forwards; }
.mascot-running .mascot--hero img { animation: mascot-run-bob .18s linear 8; }
.hero-visual:not(.mascot-running) .mascot--hero img { animation: mascot-idle-wave 8s ease-in-out infinite; transform-origin:35% 45%; }
.balloon-popped .balloon-instruction, .balloon-popped .balloon-pin { opacity:0; pointer-events:none; }

@keyframes balloon-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-13px) rotate(4deg); } }
@keyframes balloon-pop { 0% { opacity: 1; transform: scale(1); } 45% { opacity: 1; transform: scale(1.22); } 100% { opacity: 0; transform: scale(.04); } }
@keyframes particle-burst { 0% { opacity: 1; translate: 0 0; scale: .5; } 100% { opacity: 0; translate: var(--x) var(--y); scale: 1.3; } }
@keyframes mascot-run-away { 0% { transform: translateX(0) rotate(0); } 16% { transform: translateX(-22px) rotate(-4deg); } 100% { transform: translateX(125vw) rotate(8deg); } }
@keyframes mascot-run-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes mascot-idle-wave { 0%,64%,100% { transform:rotate(0); } 68% { transform:rotate(-2deg) translateY(-2px); } 71% { transform:rotate(2deg); } 74% { transform:rotate(-2deg); } 77% { transform:rotate(1.5deg); } 80% { transform:rotate(0); } }
@keyframes instruction-nudge { 0%,100% { transform:translate(0,0); } 50% { transform:translate(5px,-5px); } }

@media (max-width: 700px) {
  .hero-balloon { top: 27%; right: 0; width: 72px; height: 120px; }
  .balloon-shape { left: 10px; width: 54px; height: 66px; }
  .balloon-shape::after { left: 21px; }
  .balloon-string { top: 72px; left: 37px; height: 44px; }
  .balloon-instruction { top:49%; right:0; max-width:100px; }
  .balloon-pin { top:61%; right:17%; transform:translate(var(--pin-x),var(--pin-y)) rotate(-27deg) scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-balloon { animation: none; }
  .mascot-running #hero-mascot { animation: mascot-leave-gently .45s ease forwards; }
  .mascot-running .mascot--hero img, .hero-visual:not(.mascot-running) .mascot--hero img, .balloon-instruction { animation: none; }
  @keyframes mascot-leave-gently { to { opacity: 0; transform: translateX(40px); } }
}