/* ==========================================================================
   Groyt — /etkileşim önizlemeleri (9 Ekim): tokat · ağla · dans
   --------------------------------------------------------------------------
   Bot GIF gönderiyor (çoğunlukla çizgi film/film/hayvan/meme); burada sade CSS sahneleri var (gerçek GIF
   değil). previews.css'teki .fx / .fx-av yapısının üstüne kurulu.
   ========================================================================== */
.fx.r10 { height: 84px; }
.r10 .fx-av { position: relative; }
.r10-duo { display: flex; justify-content: center; align-items: center; gap: 30px; }
.r10 .r10-fx { position: absolute; font-style: normal; line-height: 1; pointer-events: none; }

/* 👋 tokat — el savrulur, hedef sarsılır */
.r10-slap .r10-hand { left: calc(50% - 22px); top: 14px; font-size: 26px; animation: r10Swing 1.3s ease-in infinite; transform-origin: 80% 90%; }
.r10-slap .is-target { animation: r10Hit 1.3s ease-out infinite; }
.r10-slap .r10-boom { left: calc(50% + 34px); top: 6px; font-size: 18px; opacity: 0; animation: r10Boom 1.3s ease-out infinite; }
@keyframes r10Swing { 0%, 30% { transform: translateX(-18px) rotate(-40deg); opacity: 0.9; } 48% { transform: translateX(14px) rotate(20deg); opacity: 1; } 60%, 100% { transform: translateX(-18px) rotate(-40deg); opacity: 0.9; } }
@keyframes r10Hit { 0%, 46% { transform: none; box-shadow: none; } 52% { transform: translateX(6px) rotate(8deg); box-shadow: inset -10px 0 12px rgba(239, 68, 68, 0.55); } 70% { transform: translateX(-2px) rotate(-3deg); } 100% { transform: none; box-shadow: inset -6px 0 10px rgba(239, 68, 68, 0.25); } }
@keyframes r10Boom { 0%, 46% { opacity: 0; transform: scale(0.4); } 52% { opacity: 1; transform: scale(1.2); } 80%, 100% { opacity: 0; transform: scale(1); } }

/* 😭 ağla — gözyaşı damlaları */
.r10-cry .fx-av { animation: r10Sob 0.9s ease-in-out infinite; filter: saturate(0.75); }
.r10-cry .r10-tear { top: 30px; width: 6px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #7dd3fc; box-shadow: 0 0 4px rgba(125, 211, 252, 0.8); animation: r10Drop 1.1s ease-in infinite; }
.r10-cry .r10-tear:nth-of-type(1) { left: calc(50% - 14px); }
.r10-cry .r10-tear:nth-of-type(2) { left: calc(50% + 9px); animation-delay: 0.45s; }
@keyframes r10Sob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px) scale(1.02, 0.98); } }
@keyframes r10Drop { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(36px) scale(1); opacity: 0; } }

/* 💃 dans — zıplayan avatar, uçuşan notalar, disko ışığı */
.r10-dance { background: radial-gradient(circle at 50% 60%, rgba(167, 139, 250, 0.28), transparent 62%); border-radius: 10px; animation: r10Disco 1.6s linear infinite; }
.r10-dance .fx-av { animation: r10Bounce 0.55s ease-in-out infinite alternate; }
.r10-dance .r10-note { font-size: 14px; opacity: 0; animation: r10Note 1.6s ease-out infinite; }
.r10-dance .r10-note:nth-of-type(1) { left: calc(50% - 46px); top: 40px; }
.r10-dance .r10-note:nth-of-type(2) { left: calc(50% + 34px); top: 34px; animation-delay: 0.5s; }
.r10-dance .r10-note:nth-of-type(3) { left: calc(50% - 10px); top: 4px; animation-delay: 1s; }
@keyframes r10Bounce { from { transform: translateY(3px) rotate(-8deg); } to { transform: translateY(-7px) rotate(8deg); } }
@keyframes r10Note { 0% { opacity: 0; transform: translateY(6px) rotate(-10deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px) rotate(14deg); } }
@keyframes r10Disco { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .r10 .fx-av, .r10 .r10-fx, .r10-dance { animation: none !important; }
  .r10 .r10-fx { opacity: 1; }
}