/* ============================================================
   TINY WORLD — WhatsApp hot-air balloon (sticky contact)
   ============================================================ */

.wa {
  --wa: #25D366; --wa-2: #12A150; --wa-3: #7CF0A8;
  position: fixed; z-index: 115;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 76px; height: 112px;
  display: block;
  -webkit-tap-highlight-color: transparent;
  transition: bottom .6s var(--spring), transform .5s var(--spring), opacity .4s;
}
.wa:focus { outline: none; }
.wa:focus-visible .wa__balloon { outline: 3px dashed var(--violet); outline-offset: 6px; border-radius: 20px; }

/* lift above the product page's mobile buy bar */
body:has(.buybar.on) .wa { bottom: 96px; }

/* the balloon floats: bob + sway on separate layers */
.wa__float { position: absolute; inset: 0; animation: wa-bob 4.2s ease-in-out infinite; }
.wa__balloon {
  position: absolute; inset: 0;
  transform-origin: 50% 95%;
  animation: wa-sway 6.5s ease-in-out infinite;
  transition: transform .5s var(--spring);
}
.wa__balloon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 0 rgba(26,16,51,.16)); }
@keyframes wa-bob { 50% { transform: translateY(-9px); } }
@keyframes wa-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* ground shadow breathes with the bob */
.wa__shadow {
  position: absolute; left: 50%; bottom: -8px;
  width: 40px; height: 8px; margin-left: -20px; border-radius: 50%;
  background: rgba(26,16,51,.22);
  animation: wa-shadow 4.2s ease-in-out infinite;
}
@keyframes wa-shadow { 50% { transform: scale(.72); opacity: .55; } }

/* burner flame: lights up on hover */
.wa__flame { transform-origin: 40px 84px; transform: scale(0); transition: transform .3s var(--spring); }
.wa__flame ellipse:last-child { animation: wa-flick .18s ease-in-out infinite alternate; transform-origin: 40px 84px; }
@keyframes wa-flick { to { transform: scaleY(1.25) scaleX(.85); } }

/* notification badge */
.wa__badge {
  position: absolute; top: 2px; left: 2px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--tomato); color: #fff;
  font: 800 13px/22px var(--f); text-align: center;
  box-shadow: 0 3px 0 #C93A30, 0 0 0 3px #fff;
  animation: wa-pop 2.6s var(--spring) infinite;
}
@keyframes wa-pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25) rotate(-8deg); } 90% { transform: scale(.95); } }

/* drifting cloud puffs */
.wa__cloud {
  position: absolute; z-index: -1; pointer-events: none;
  width: 34px; height: 14px; border-radius: 14px; background: #fff;
  box-shadow: 0 3px 0 rgba(26,16,51,.08);
  opacity: .95;
}
.wa__cloud::before, .wa__cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.wa__cloud::before { width: 16px; height: 16px; top: -8px; left: 5px; }
.wa__cloud::after { width: 12px; height: 12px; top: -5px; left: 17px; }
.wa__cloud--a { top: 26px; left: -22px; animation: wa-drift 7s ease-in-out infinite; }
.wa__cloud--b { top: 64px; right: -16px; transform: scale(.7); animation: wa-drift 9s ease-in-out -3s infinite reverse; }
@keyframes wa-drift { 50% { translate: 8px -3px; } }

/* speech bubble: "talk to us" */
.wa__talk {
  position: absolute; right: calc(100% + 10px); top: 22px;
  display: grid; gap: 0; text-align: right;
  padding: 10px 16px 9px; border-radius: 20px 20px 6px 20px;
  background: #fff; color: var(--ink);
  font-family: var(--f); white-space: nowrap;
  box-shadow: 0 5px 0 rgba(26,16,51,.14), 0 16px 28px -10px rgba(26,16,51,.35);
  transform-origin: 100% 100%;
  transform: scale(.4) translateX(12px); opacity: 0; pointer-events: none;
  transition: transform .55s var(--spring), opacity .25s;
}
.wa__talk::after {
  content: ''; position: absolute; right: -7px; bottom: 6px;
  width: 14px; height: 14px; background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.wa__talk b { font-size: 16px; font-weight: 800; line-height: 1.3; }
.wa__talk small { font-size: 13px; font-weight: 600; color: var(--wa-2); line-height: 1.3; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.wa__talk small i { width: 8px; height: 8px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 0 var(--wa); animation: wa-live 1.8s ease-out infinite; }
@keyframes wa-live { to { box-shadow: 0 0 0 7px rgba(37,211,102,0); } }

.wa.is-talking .wa__talk,
.wa:hover .wa__talk,
.wa:focus-visible .wa__talk { transform: none; opacity: 1; }

/* hover: burner fires, balloon climbs */
.wa:hover .wa__balloon, .wa:focus-visible .wa__balloon { transform: translateY(-8px) rotate(0deg); animation-play-state: paused; }
.wa:hover .wa__flame, .wa:focus-visible .wa__flame { transform: scale(1); }
.wa:active .wa__balloon { transform: translateY(-2px) scale(.94, .9); transition-duration: .12s; }

/* click: lift-off */
.wa.is-flying .wa__balloon { transform: translateY(-140vh) rotate(-6deg); transition: transform 1.1s cubic-bezier(.55, 0, .7, .2); }
.wa.is-flying .wa__flame { transform: scale(1.3); }
.wa.is-flying .wa__talk, .wa.is-flying .wa__shadow { opacity: 0; }
.wa.is-back .wa__balloon { animation: wa-land .9s var(--spring); }
@keyframes wa-land { from { transform: translateY(60px) scale(.6); opacity: 0; } }

/* entrance */
.wa { animation: wa-in 1s var(--spring) .6s both; }
@keyframes wa-in { from { transform: translateY(140%) scale(.6); opacity: 0; } }

@media (max-width: 640px) {
  .wa { width: 62px; height: 92px; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .wa__talk { top: 14px; padding: 8px 13px 7px; }
  .wa__talk b { font-size: 14px; }
  .wa__talk small { font-size: 12px; }
  .wa__badge { min-width: 20px; height: 20px; font-size: 12px; line-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa, .wa__float, .wa__balloon, .wa__shadow, .wa__badge, .wa__cloud, .wa__flame ellipse, .wa__talk small i { animation: none !important; }
  .wa.is-flying .wa__balloon { transform: none; }
}