/* Hannya clicker avatar and high-impact tap feedback. */

/* Keep the original characters as a fallback. Hide them only after the new
   image has decoded successfully in the current Telegram WebView. */
.tap-button.has-hannya-avatar .tap-button__character {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* The first implementation used a background on ::after. Some Telegram
   Desktop WebViews failed to paint that decoded WebP, leaving the stage empty. */
.tap-button::after {
  content: none !important;
  display: none !important;
}

.tap-button__hannya {
  position: absolute;
  z-index: 2;
  width: auto;
  max-width: none;
  height: 108%;
  left: 50%;
  bottom: -3%;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  filter:
    saturate(1.12)
    contrast(1.06)
    drop-shadow(0 13px 15px rgba(0, 0, 0, .55))
    drop-shadow(0 0 12px rgba(211, 65, 255, .25));
  transform: translateX(-50%) translateZ(0);
  transform-origin: 50% 82%;
  transition: filter .1s ease, transform .1s cubic-bezier(.2, .9, .3, 1.35);
  backface-visibility: hidden;
  -webkit-user-drag: none;
}

.tap-button::before {
  inset: 2% 8% 10%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 239, 142, .3), rgba(238, 73, 255, .2) 31%, rgba(92, 42, 230, .12) 54%, transparent 74%);
  filter: blur(13px);
  opacity: .92;
  animation: hannya-aura-idle 2.1s ease-in-out infinite;
}

.tap-button__aura {
  width: 82%;
  left: 9%;
  top: 9%;
  background:
    radial-gradient(circle, rgba(255, 222, 92, .28), rgba(217, 62, 255, .2) 39%, rgba(81, 41, 219, .06) 63%, transparent 72%);
  filter: blur(22px);
  opacity: .9;
  animation: hannya-aura 1.75s ease-in-out infinite;
}

.tap-button:active,
.tap-button.is-tapping {
  transform: scale(.965);
  filter: brightness(1.18) saturate(1.12);
}

.tap-button.is-tapping .tap-button__hannya {
  filter:
    saturate(1.28)
    contrast(1.1)
    brightness(1.18)
    drop-shadow(0 16px 18px rgba(0, 0, 0, .58))
    drop-shadow(0 0 20px rgba(255, 210, 74, .72))
    drop-shadow(0 0 30px rgba(219, 65, 255, .62));
  animation: hannya-hit .23s cubic-bezier(.15, .78, .32, 1.32) both;
}

.tap-button.is-tapping::before {
  animation: hannya-flash .3s ease-out both;
}

.tap-button__shockwave {
  width: 126%;
  height: 126%;
  left: -13%;
  top: -13%;
  mix-blend-mode: screen;
  filter:
    saturate(1.45)
    brightness(1.5)
    drop-shadow(0 0 12px rgba(255, 220, 96, .8))
    drop-shadow(0 0 22px rgba(208, 70, 255, .72));
}

.tap-button.is-tapping .tap-button__shockwave {
  animation: hannya-shockwave .42s cubic-bezier(.08, .65, .22, 1) both;
}

.tap-button__shine {
  z-index: 5;
  background:
    linear-gradient(106deg, transparent 31%, rgba(255, 246, 197, .46) 46%, rgba(247, 184, 255, .28) 51%, transparent 65%);
  background-position: 170% 0;
  background-size: 240% 100%;
  mix-blend-mode: screen;
}

.tap-orbit:has(.tap-button.is-tapping) .tap-orbit__ring {
  animation: hannya-ring-impact .38s ease-out both;
}

.tap-pop {
  z-index: 240;
  min-width: 38px;
  margin: -18px 0 0 -19px;
  color: #fff2a8;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  text-shadow:
    0 0 5px #fff,
    0 0 13px rgba(255, 210, 61, .95),
    0 0 25px rgba(221, 65, 255, .72);
  animation: hannya-pop .8s cubic-bezier(.12, .74, .22, 1) both;
}

.tap-spark {
  z-index: 238;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  mix-blend-mode: screen;
  filter:
    saturate(1.55)
    brightness(1.65)
    drop-shadow(0 0 9px rgba(255, 221, 75, .92))
    drop-shadow(0 0 15px rgba(221, 66, 255, .7));
  animation: hannya-spark .58s cubic-bezier(.1, .72, .25, 1) both;
}

.tap-impact-flash {
  position: fixed;
  z-index: 236;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0 5%, rgba(255,223,91,.82) 9%, rgba(239,87,255,.55) 31%, rgba(99,51,231,.18) 54%, transparent 72%);
  box-shadow: 0 0 24px rgba(255, 219, 74, .72), 0 0 46px rgba(218, 57, 255, .55);
  animation: hannya-impact-flash .42s ease-out both;
}

.tap-impact-ring {
  position: fixed;
  z-index: 235;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border: 3px solid rgba(255, 226, 109, .92);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  box-shadow:
    0 0 11px rgba(255, 218, 63, .9),
    inset 0 0 12px rgba(233, 82, 255, .68),
    0 0 25px rgba(221, 61, 255, .62);
  animation: hannya-impact-ring .52s cubic-bezier(.08, .65, .22, 1) both;
}

.tap-burst-particle {
  position: fixed;
  z-index: 239;
  width: var(--particle-size, 8px);
  height: var(--particle-size, 8px);
  margin: calc(var(--particle-size, 8px) * -.5);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 19%, #ffe36b 23% 45%, #ef65ff 62%, transparent 75%);
  box-shadow: 0 0 8px #ffd84e, 0 0 13px rgba(225, 75, 255, .9);
  animation: hannya-burst .62s cubic-bezier(.12, .7, .2, 1) both;
}

@keyframes hannya-aura-idle {
  50% { opacity: .62; transform: scale(1.07); }
}

@keyframes hannya-aura {
  50% { opacity: .62; transform: scale(1.2); }
}

@keyframes hannya-hit {
  0% { transform: translateX(-50%) scale(1); }
  35% { transform: translateX(-50%) translateY(8px) scale(.93) rotate(-1deg); }
  70% { transform: translateX(-50%) translateY(-4px) scale(1.045) rotate(.7deg); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes hannya-flash {
  0% { opacity: 1; transform: scale(.72); filter: blur(8px) brightness(2); }
  100% { opacity: 0; transform: scale(1.32); filter: blur(18px) brightness(1); }
}

@keyframes hannya-shockwave {
  0% { opacity: .98; transform: scale(.48) rotate(-12deg); }
  45% { opacity: .75; }
  100% { opacity: 0; transform: scale(1.42) rotate(10deg); }
}

@keyframes hannya-ring-impact {
  0% { transform: scale(1); filter: brightness(1) saturate(1); }
  36% { transform: scale(1.035); filter: brightness(1.45) saturate(1.38) drop-shadow(0 0 18px rgba(239, 85, 255, .62)); }
  100% { transform: scale(1); filter: brightness(1.05) saturate(1.04); }
}

@keyframes hannya-pop {
  0% { opacity: 0; transform: translate(0, 4px) scale(.65); }
  18% { opacity: 1; transform: translate(calc(var(--pop-x) * .15), -12px) scale(1.18); }
  100% { opacity: 0; transform: translate(var(--pop-x), -96px) scale(1.42); }
}

@keyframes hannya-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(.75) rotate(0); }
  100% { opacity: 0; transform: translate(var(--spark-dx), calc(var(--spark-dy) * 1.35)) scale(.25) rotate(120deg); }
}

@keyframes hannya-impact-flash {
  0% { opacity: 1; transform: scale(.25); }
  55% { opacity: .82; }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes hannya-impact-ring {
  0% { opacity: 1; transform: scale(.45); }
  100% { opacity: 0; transform: scale(2.15); border-width: 1px; }
}

@keyframes hannya-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(.65); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) scale(.15); }
}

@media (max-width: 390px) {
  .tap-button__hannya {
    height: 104%;
    bottom: -2%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tap-button::before,
  .tap-button__aura,
  .tap-button__hannya {
    animation: none !important;
    transition: none !important;
  }

  .tap-burst-particle,
  .tap-impact-flash,
  .tap-impact-ring {
    display: none !important;
  }
}