/* =====================================================================
   StarSnow animated icons (see js/anim.js)
   Each keyframe set puts the action in the first ~45% and rests after,
   so the same keyframes work for one-shot (.is-playing) and loops
   (.is-looping) with a natural pause between cycles — like Telegram's
   animated emoji.
   ===================================================================== */
.ai { display: inline-flex; width: 1.3em; height: 1.3em; flex: none; vertical-align: -.28em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .12)); }
.ai svg { width: 100%; height: 100%; overflow: visible; }
.ai svg * { transform-box: fill-box; }
.ai--sm { width: 1.05em; height: 1.05em; vertical-align: -.18em; }
.ai--md { width: 1.55em; height: 1.55em; }
.ai--xl { width: 2.6rem; height: 2.6rem; }
.ai--hero { width: clamp(120px, 32vw, 170px); height: clamp(120px, 32vw, 170px); filter: drop-shadow(0 16px 26px rgba(245, 160, 0, .45)); }
.ai--white { filter: brightness(0) invert(1); }

/* shared defaults for parts that only appear while animating */
.ai .p-spark, .ai .p-rays path, .ai .p-ring { opacity: 0; }
.ai .p-spark { transform-origin: center; }

:is(.ai.is-playing, .ai.is-looping) * { animation-fill-mode: both; animation-timing-function: cubic-bezier(.3, .7, .3, 1); }
.ai.is-playing * { animation-iteration-count: 1; }
.ai.is-looping * { animation-iteration-count: infinite; }

/* ---------- STAR: squash & stretch hop + sparkles ---------- */
.ai-star .p-body { transform-origin: 50% 95%; }
:is(.ai-star.is-playing, .ai-star.is-looping) .p-body { animation: star-hop 2.4s; }
:is(.ai-star.is-playing, .ai-star.is-looping) .p-spark { animation: spark 2.4s; }
:is(.ai-star.is-playing, .ai-star.is-looping) .s2 { animation-delay: .12s; }
:is(.ai-star.is-playing, .ai-star.is-looping) .s3 { animation-delay: .24s; }
@keyframes star-hop {
  0%   { transform: none; }
  6%   { transform: scale(1.18, .78); }
  16%  { transform: translateY(-22%) scale(.86, 1.16) rotate(-10deg); }
  26%  { transform: translateY(-26%) scale(1.04, .98) rotate(8deg); }
  34%  { transform: scale(1.14, .84) rotate(0); }
  40%  { transform: scale(.96, 1.05); }
  46%, 100% { transform: none; }
}
@keyframes spark {
  0%, 12% { opacity: 0; transform: scale(0) rotate(0); }
  22% { opacity: 1; transform: scale(1.25) rotate(45deg); }
  38%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}

/* hero star shows a face and keeps bouncing */
.ai--hero .p-eye { opacity: 1 !important; transform-origin: center; animation: blink 3.2s infinite; }
@keyframes blink { 0%, 90%, 100% { transform: none; } 94% { transform: scaleY(.1); } }

/* ---------- LOCK: key turns, shackle pops open, then relocks ---------- */
.ai-lock .p-shackle { transform-origin: 15% 100%; }
.ai-lock .p-key { transform-origin: 26px 26.5px; transform-box: view-box; }
.ai-lock .p-body { transform-origin: 50% 100%; }
:is(.ai-lock.is-playing, .ai-lock.is-looping) .p-key { animation: lock-key 3.2s; }
:is(.ai-lock.is-playing, .ai-lock.is-looping) .p-shackle { animation: lock-shackle 3.2s; }
:is(.ai-lock.is-playing, .ai-lock.is-looping) .p-body { animation: lock-body 3.2s; }
:is(.ai-lock.is-playing, .ai-lock.is-looping) .p-spark { animation: spark 3.2s .35s; }
@keyframes lock-key {
  0%   { transform: translate(6px, 6px); }
  10%  { transform: translate(-1px, -1px); }
  14%  { transform: none; }
  22%  { transform: rotate(-80deg); }
  56%  { transform: rotate(-80deg); }
  64%  { transform: none; }
  72%, 100% { transform: translate(0, 0); }
}
@keyframes lock-shackle {
  0%, 20% { transform: none; }
  27% { transform: translateY(-26%); }
  33% { transform: translateY(-22%) rotate(-28deg); }
  38%, 56% { transform: translateY(-24%) rotate(-22deg); }
  63% { transform: translateY(2%); }
  68%, 100% { transform: none; }
}
@keyframes lock-body {
  0%, 22% { transform: none; }
  26% { transform: scale(1.06, .94); }
  30% { transform: scale(.98, 1.03); }
  34%, 60% { transform: none; }
  64% { transform: scale(1.05, .95); }
  70%, 100% { transform: none; }
}

/* ---------- BOLT: charge, flash, rays ---------- */
.ai-bolt .p-body { transform-origin: 50% 50%; }
.ai-bolt .p-rays path { transform-origin: center; }
:is(.ai-bolt.is-playing, .ai-bolt.is-looping) .p-body { animation: bolt-flash 2.6s; }
:is(.ai-bolt.is-playing, .ai-bolt.is-looping) .p-rays path { animation: ray 2.6s; }
:is(.ai-bolt.is-playing, .ai-bolt.is-looping) .r2 { animation-delay: .05s; }
:is(.ai-bolt.is-playing, .ai-bolt.is-looping) .r3 { animation-delay: .1s; }
:is(.ai-bolt.is-playing, .ai-bolt.is-looping) .r4 { animation-delay: .15s; }
@keyframes bolt-flash {
  0%   { transform: none; filter: none; }
  8%   { transform: scale(.88) rotate(-6deg); }
  14%  { transform: scale(1.22) rotate(4deg); filter: brightness(1.7) drop-shadow(0 0 6px #7fe3ff); }
  18%  { transform: scale(1) translateX(-3%); filter: none; }
  21%  { transform: scale(1.12) translateX(3%); filter: brightness(1.5) drop-shadow(0 0 4px #7fe3ff); }
  26%  { transform: scale(.97); filter: none; }
  32%, 100% { transform: none; filter: none; }
}
@keyframes ray {
  0%, 12% { opacity: 0; transform: scale(.2); }
  18% { opacity: 1; transform: scale(1.3); }
  30%, 100% { opacity: 0; transform: scale(.6); }
}

/* ---------- CROWN: hop with tilt, gems twinkle ---------- */
.ai-crown .p-body { transform-origin: 50% 100%; }
.ai-crown .p-gem { transform-origin: center; }
:is(.ai-crown.is-playing, .ai-crown.is-looping) .p-body { animation: crown-hop 2.6s; }
:is(.ai-crown.is-playing, .ai-crown.is-looping) .p-gem { animation: gem 2.6s; }
:is(.ai-crown.is-playing, .ai-crown.is-looping) .g2 { animation-delay: .1s; }
:is(.ai-crown.is-playing, .ai-crown.is-looping) .g3 { animation-delay: .2s; }
:is(.ai-crown.is-playing, .ai-crown.is-looping) .p-spark { animation: spark 2.6s .1s; }
:is(.ai-crown.is-playing, .ai-crown.is-looping) .s2 { animation-delay: .2s; }
:is(.ai-crown.is-playing, .ai-crown.is-looping) .s3 { animation-delay: .3s; }
@keyframes crown-hop {
  0% { transform: none; }
  7% { transform: scale(1.12, .86); }
  17% { transform: translateY(-18%) rotate(-12deg); }
  27% { transform: translateY(-8%) rotate(9deg); }
  35% { transform: scale(1.08, .92); }
  42%, 100% { transform: none; }
}
@keyframes gem {
  0%, 14% { transform: none; filter: none; }
  22% { transform: scale(1.7); filter: drop-shadow(0 0 3px #fff); }
  34%, 100% { transform: none; filter: none; }
}

/* ---------- GIFT: shake, lid pops, sparkles fly out ---------- */
.ai-gift .p-box { transform-origin: 50% 100%; }
.ai-gift .p-lid { transform-origin: 50% 100%; }
:is(.ai-gift.is-playing, .ai-gift.is-looping) .p-box { animation: gift-shake 2.8s; }
:is(.ai-gift.is-playing, .ai-gift.is-looping) .p-lid { animation: gift-lid 2.8s; }
:is(.ai-gift.is-playing, .ai-gift.is-looping) .p-spark { animation: gift-spark 2.8s; }
:is(.ai-gift.is-playing, .ai-gift.is-looping) .s2 { animation-delay: .06s; }
:is(.ai-gift.is-playing, .ai-gift.is-looping) .s3 { animation-delay: .12s; }
@keyframes gift-shake {
  0% { transform: none; }
  4% { transform: rotate(-7deg); } 8% { transform: rotate(7deg); }
  12% { transform: rotate(-5deg); } 16% { transform: rotate(4deg); }
  20% { transform: scale(1.08, .9); }
  26% { transform: scale(.97, 1.04); }
  32%, 100% { transform: none; }
}
@keyframes gift-lid {
  0% { transform: none; }
  4% { transform: rotate(-7deg); } 8% { transform: rotate(7deg); }
  12% { transform: rotate(-5deg); } 16% { transform: rotate(4deg); }
  22% { transform: translateY(-85%) rotate(-14deg); }
  32% { transform: translateY(-70%) rotate(8deg); }
  40% { transform: translateY(6%); }
  45%, 100% { transform: none; }
}
@keyframes gift-spark {
  0%, 20% { opacity: 0; transform: translateY(60%) scale(0); }
  28% { opacity: 1; transform: translateY(-20%) scale(1.3) rotate(45deg); }
  42%, 100% { opacity: 0; transform: translateY(-60%) scale(.3) rotate(90deg); }
}

/* ---------- HEART: double beat + ring ---------- */
.ai-heart .p-body, .ai-heart .p-ring { transform-origin: center; }
:is(.ai-heart.is-playing, .ai-heart.is-looping) .p-body { animation: beat 2.2s; }
:is(.ai-heart.is-playing, .ai-heart.is-looping) .p-ring { animation: ring 2.2s .08s; }
@keyframes beat {
  0% { transform: none; }
  8% { transform: scale(1.24); }
  14% { transform: scale(.94); }
  21% { transform: scale(1.16); }
  30%, 100% { transform: none; }
}
@keyframes ring { 0%, 4% { opacity: .9; transform: scale(.6); } 30%, 100% { opacity: 0; transform: scale(1.35); } }

/* ---------- BEAR: tilt, ear wiggle, blink, blush ---------- */
.ai-bear .p-body { transform-origin: 50% 100%; }
.ai-bear .el { transform-origin: 80% 80%; }
.ai-bear .er { transform-origin: 20% 80%; }
.ai-bear .p-eyes { transform-origin: center; }
:is(.ai-bear.is-playing, .ai-bear.is-looping) .p-body { animation: bear-tilt 2.8s; }
:is(.ai-bear.is-playing, .ai-bear.is-looping) .el { animation: ear-l 2.8s; }
:is(.ai-bear.is-playing, .ai-bear.is-looping) .er { animation: ear-r 2.8s; }
:is(.ai-bear.is-playing, .ai-bear.is-looping) .p-eyes { animation: eyes 2.8s; }
:is(.ai-bear.is-playing, .ai-bear.is-looping) .p-blush { animation: blush 2.8s; }
@keyframes bear-tilt { 0% { transform: none; } 10% { transform: rotate(-12deg); } 22% { transform: rotate(10deg); } 32% { transform: rotate(-4deg); } 40%, 100% { transform: none; } }
@keyframes ear-l { 0%, 6% { transform: none; } 12% { transform: rotate(-22deg); } 18% { transform: rotate(8deg); } 26%, 100% { transform: none; } }
@keyframes ear-r { 0%, 16% { transform: none; } 22% { transform: rotate(22deg); } 28% { transform: rotate(-8deg); } 36%, 100% { transform: none; } }
@keyframes eyes { 0%, 34% { transform: none; } 37% { transform: scaleY(.1); } 40%, 100% { transform: none; } }
@keyframes blush { 0%, 8% { opacity: 0; } 18%, 34% { opacity: .85; } 46%, 100% { opacity: 0; } }

/* ---------- ROSE: sway + leaf flutter ---------- */
.ai-rose .p-head { transform-origin: 50% 100%; }
.ai-rose .ll { transform-origin: 100% 80%; }
.ai-rose .lr { transform-origin: 0% 80%; }
:is(.ai-rose.is-playing, .ai-rose.is-looping) .p-head { animation: sway 2.8s; }
:is(.ai-rose.is-playing, .ai-rose.is-looping) .ll { animation: leaf-l 2.8s; }
:is(.ai-rose.is-playing, .ai-rose.is-looping) .lr { animation: leaf-r 2.8s; }
:is(.ai-rose.is-playing, .ai-rose.is-looping) .p-spark { animation: spark 2.8s .15s; }
:is(.ai-rose.is-playing, .ai-rose.is-looping) .s2 { animation-delay: .3s; }
@keyframes sway { 0% { transform: none; } 10% { transform: rotate(-10deg) scale(1.06); } 22% { transform: rotate(8deg); } 32% { transform: rotate(-3deg); } 42%, 100% { transform: none; } }
@keyframes leaf-l { 0% { transform: none; } 12% { transform: rotate(14deg); } 24% { transform: rotate(-6deg); } 36%, 100% { transform: none; } }
@keyframes leaf-r { 0% { transform: none; } 14% { transform: rotate(-14deg); } 26% { transform: rotate(6deg); } 38%, 100% { transform: none; } }

/* ---------- CAKE: hop + flame flicker (flame flickers always while playing) ---------- */
.ai-cake .p-body { transform-origin: 50% 100%; }
.ai-cake .p-flame { transform-origin: 50% 100%; }
:is(.ai-cake.is-playing, .ai-cake.is-looping) .p-body { animation: cake-hop 2.6s; }
:is(.ai-cake.is-playing, .ai-cake.is-looping) .p-flame { animation: cake-hop 2.6s, flicker .45s 6 alternate ease-in-out; }
.ai-cake.is-looping .p-flame { animation: cake-hop 2.6s infinite, flicker .45s infinite alternate ease-in-out; }
@keyframes cake-hop { 0% { transform: none; } 8% { transform: scale(1.1, .9); } 18% { transform: translateY(-12%); } 28% { transform: scale(1.06, .94); } 36%, 100% { transform: none; } }
@keyframes flicker { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.85, 1.15) skewX(-6deg); } 100% { transform: scale(1.08, .92) skewX(5deg); } }

/* ---------- HELP: wobble + dot bounce ---------- */
.ai-help .p-body { transform-origin: 50% 50%; }
.ai-help .p-dot { transform-origin: center; }
:is(.ai-help.is-playing, .ai-help.is-looping) .p-body { animation: wobble 2.4s; }
:is(.ai-help.is-playing, .ai-help.is-looping) .p-dot { animation: dot 2.4s; }
@keyframes wobble { 0% { transform: none; } 8% { transform: rotate(-16deg) scale(1.08); } 16% { transform: rotate(13deg); } 24% { transform: rotate(-8deg); } 32% { transform: rotate(4deg); } 40%, 100% { transform: none; } }
@keyframes dot { 0%, 20% { transform: none; } 26% { transform: translateY(-70%); } 32% { transform: scale(1.3, .7); } 38%, 100% { transform: none; } }

/* ---------- USERS: friend pops in and waves ---------- */
.ai-users .p-front, .ai-users .p-back { transform-origin: 50% 100%; }
:is(.ai-users.is-playing, .ai-users.is-looping) .p-front { animation: bob 2.6s; }
:is(.ai-users.is-playing, .ai-users.is-looping) .p-back { animation: pop-in 2.6s; }
:is(.ai-users.is-playing, .ai-users.is-looping) .p-spark { animation: spark 2.6s .2s; }
@keyframes bob { 0% { transform: none; } 8% { transform: scale(1.06, .92); } 16% { transform: translateY(-10%); } 24%, 100% { transform: none; } }
@keyframes pop-in { 0%, 10% { transform: none; } 16% { transform: translateY(-22%) rotate(10deg); } 22% { transform: rotate(-8deg); } 28% { transform: rotate(6deg); } 36%, 100% { transform: none; } }

/* ---------- Particle burst ---------- */
.burst { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
.burst__p { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); animation: burst-fly .95s cubic-bezier(.15, .7, .3, 1) both; }
.burst__p svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(42, 107, 255, .35)); }
@keyframes burst-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 30px)) scale(1) rotate(var(--r)); }
}

/* ---------- Success celebration ---------- */
.celebrate { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: color-mix(in srgb, var(--bg, #efeff4) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade-in .3s both; cursor: pointer; }
.celebrate.is-out { animation: fade-out .35s both; }
.celebrate__inner { display: grid; justify-items: center; gap: 1rem; animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.celebrate__inner p { margin: 0; padding: 12px 20px; border-radius: 14px; background: var(--cell, #fff); color: var(--text, #000); font-size: 17px; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .25); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }


@media (prefers-reduced-motion: reduce) {
  .ai *, .burst, .celebrate, .celebrate__inner { animation: none !important; }
}

/* spacing next to text */
.main-btn .ai { margin-right: 2px; }
.trust .ai { margin-right: .15rem; }

/* cart: rolls forward and back */
.ai-cart .p-body { transform-origin: 50% 100%; }
:is(.ai-cart.is-playing, .ai-cart.is-looping) .p-body { animation: cart-roll 2.4s; }
@keyframes cart-roll { 0% { transform: none; } 10% { transform: translateX(12%) rotate(-6deg); } 22% { transform: translateX(-6%) rotate(3deg); } 32% { transform: translateX(2%); } 40%, 100% { transform: none; } }

/* clock: the hands sweep round */
.ai-clock .p-hand, .ai-clock .p-hand2 { transform-box: view-box; transform-origin: 24px 25px; }
:is(.ai-clock.is-playing, .ai-clock.is-looping) .p-hand { animation: clock-spin 2.4s cubic-bezier(.5, 0, .3, 1); }
:is(.ai-clock.is-playing, .ai-clock.is-looping) .p-hand2 { animation: clock-spin-slow 2.4s cubic-bezier(.5, 0, .3, 1); }
:is(.ai-clock.is-playing, .ai-clock.is-looping) .p-body { animation: bob 2.4s; }
@keyframes clock-spin { 0% { transform: none; } 45%, 100% { transform: rotate(720deg); } }
@keyframes clock-spin-slow { 0% { transform: none; } 45%, 100% { transform: rotate(60deg); } }

/* card: flips like it is being tapped on a terminal */
.ai-card .p-body { transform-origin: 50% 50%; }
:is(.ai-card.is-playing, .ai-card.is-looping) .p-body { animation: card-tap 2.4s; }
:is(.ai-card.is-playing, .ai-card.is-looping) .p-spark { animation: spark 2.4s .3s; }
@keyframes card-tap { 0% { transform: none; } 10% { transform: perspective(80px) rotateY(-28deg) scale(1.05); } 22% { transform: perspective(80px) rotateY(18deg); } 32% { transform: perspective(80px) rotateY(-6deg); } 40%, 100% { transform: none; } }

/* search: the lens looks around */
.ai-search .p-body { transform-origin: 40% 40%; }
:is(.ai-search.is-playing, .ai-search.is-looping) .p-body { animation: search-look 2.6s; }
@keyframes search-look { 0% { transform: none; } 12% { transform: translate(-10%, -4%) rotate(-10deg); } 26% { transform: translate(8%, 2%) rotate(8deg); } 38% { transform: translate(-3%, 0); } 46%, 100% { transform: none; } }

/* refund: the arrow turns back */
.ai-refund .p-arrow { transform-box: view-box; transform-origin: 24px 24px; }
.ai-refund .p-coin { transform-origin: 50% 50%; }
:is(.ai-refund.is-playing, .ai-refund.is-looping) .p-arrow { animation: refund-turn 2.4s cubic-bezier(.5, 0, .3, 1); }
:is(.ai-refund.is-playing, .ai-refund.is-looping) .p-coin { animation: bob 2.4s .2s; }
@keyframes refund-turn { 0% { transform: none; } 40%, 100% { transform: rotate(-360deg); } }