/* chat/effects — full-screen message effects + animated big emoji */

.fx-overlay {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  pointer-events: none; z-index: 9000; display: block;
}

/* reduced-motion stand-in: a few emoji softly fade in and out */
.fx-gentle {
  position: fixed; left: 50%; top: 42%; z-index: 9000; pointer-events: none;
  transform: translate(-50%, -50%); font-size: 2.6rem; letter-spacing: .3em; white-space: nowrap;
  opacity: 0; animation: fx-gentle 2s ease-in-out forwards;
}
@keyframes fx-gentle { 0%, 100% { opacity: 0; } 25%, 70% { opacity: 1; } }

/* ── animated big emoji (Telegram-style) ─────────────────────────────────── */
.ae-beat, .ae-shake, .ae-wave, .ae-pop, .ae-drip, .ae-flicker, .ae-bump, .ae-kiss, .ae-bob {
  display: inline-block; will-change: transform; backface-visibility: hidden;
  animation-fill-mode: both; animation-timing-function: ease-in-out;
}
.ae-beat    { animation-name: ae-beat;    animation-duration: 1.1s; animation-iteration-count: 3; transform-origin: 50% 60%; }
.ae-shake   { animation-name: ae-shake;   animation-duration: .9s;  animation-iteration-count: 3; transform-origin: 50% 80%; }
.ae-wave    { animation-name: ae-wave;    animation-duration: 1.2s; animation-iteration-count: 2; transform-origin: 75% 85%; }
.ae-pop     { animation-name: ae-pop;     animation-duration: 1.1s; animation-iteration-count: 2; transform-origin: 30% 90%; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.ae-drip    { animation-name: ae-drip;    animation-duration: 1.6s; animation-iteration-count: 2; transform-origin: 50% 100%; }
.ae-flicker { animation-name: ae-flicker; animation-duration: .8s;  animation-iteration-count: 3; transform-origin: 50% 100%; }
.ae-bump    { animation-name: ae-bump;    animation-duration: 1s;   animation-iteration-count: 2; transform-origin: 30% 90%; }
.ae-kiss    { animation-name: ae-kiss;    animation-duration: 1.3s; animation-iteration-count: 2; transform-origin: 50% 60%; }
.ae-bob     { animation-name: ae-bob;     animation-duration: 1.6s; animation-iteration-count: 2; }

@keyframes ae-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.22); } 28% { transform: scale(.96); }
  42% { transform: scale(1.14); } 70% { transform: scale(1); }
}
@keyframes ae-shake {
  0%, 100% { transform: rotate(0) translateY(0); }
  15% { transform: rotate(-12deg) translateY(-3px); } 30% { transform: rotate(10deg) translateY(0); }
  45% { transform: rotate(-9deg) translateY(-2px); } 60% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); }
}
@keyframes ae-wave {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(18deg); } 30% { transform: rotate(-10deg); } 45% { transform: rotate(16deg); }
  60% { transform: rotate(-6deg); } 75% { transform: rotate(8deg); }
}
@keyframes ae-pop {
  0%, 100% { transform: scale(1) rotate(0); }
  20% { transform: scale(.82) rotate(-8deg); }
  45% { transform: scale(1.25) rotate(10deg); }
  70% { transform: scale(.98) rotate(-2deg); }
}
@keyframes ae-drip {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(2px) scale(1.05, .93); }
  50% { transform: translateY(-4px) scale(.96, 1.05); opacity: .92; }
  75% { transform: translateY(1px) scale(1.02, .98); opacity: 1; }
}
@keyframes ae-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  20% { transform: scale(1.04, 1.12) skewX(-4deg); }
  40% { transform: scale(.98, .94) skewX(3deg); opacity: .9; }
  60% { transform: scale(1.03, 1.1) skewX(-2deg); opacity: 1; }
  80% { transform: scale(1, .97) skewX(2deg); }
}
@keyframes ae-bump {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  25% { transform: translateY(-10px) rotate(-14deg) scale(1.12); }
  45% { transform: translateY(0) rotate(4deg) scale(.96); }
  60% { transform: translateY(-3px) rotate(-3deg) scale(1.03); }
}
@keyframes ae-kiss {
  0%, 100% { transform: scale(1) rotate(0); }
  20% { transform: scale(.9) rotate(-6deg); }
  40% { transform: scale(1.2) rotate(6deg) translateX(3px); }
  60% { transform: scale(1.05) rotate(-2deg); }
}
@keyframes ae-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ae-beat, .ae-shake, .ae-wave, .ae-pop, .ae-drip, .ae-flicker, .ae-bump, .ae-kiss, .ae-bob { animation: none !important; }
  .fx-gentle { animation-duration: 2.4s; }
}