/* ============================================================
   ایموجی‌های سه‌بعدی (سبک تلگرام/اپل) + انیمیشن مخصوصِ هر ایموجی
   تصویرها: web/assets/emoji  (Microsoft Fluent Emoji 3D — لایسنس MIT)
   متنِ اصلیِ ایموجی داخل span می‌ماند (شفاف) تا کپی/اکسل/جستجو خراب نشه.
   انیمیشن موقع هاور/کلیک روی ایموجی یا دکمه‌ی حاویِ آن پخش می‌شود.
   ============================================================ */
.tge{
    display:inline-block; width:1.3em; height:1.3em; vertical-align:-0.3em;
    background-position:center; background-repeat:no-repeat; background-size:contain;
    color:transparent !important; text-shadow:none !important;
    overflow:hidden; white-space:nowrap; line-height:1; letter-spacing:0;
    font-style:normal; font-weight:normal; text-decoration:none;
    margin:0 0.08em; transform-origin:50% 60%;
    filter:drop-shadow(0 1px 1.5px rgba(30,40,80,.22));
    will-change:transform;
}
/* وقتی داخل دکمه‌ی کوچکِ آیکونی (مثل 🔍) است کمی بزرگ‌تر باشد */
.btn-icon-sm .tge{ width:1.45em; height:1.45em; margin:0; vertical-align:-0.35em; }
.toast .tge{ width:1.5em; height:1.5em; }
.tge[data-e="1f5a8"]{ background-image:url("../assets/emoji/1f5a8.webp"); }
.tge[data-e="1f4e4"]{ background-image:url("../assets/emoji/1f4e4.webp"); }
.tge[data-e="1f4e5"]{ background-image:url("../assets/emoji/1f4e5.webp"); }
.tge[data-e="1f4ca"]{ background-image:url("../assets/emoji/1f4ca.webp"); }
.tge[data-e="1f50d"]{ background-image:url("../assets/emoji/1f50d.webp"); }
.tge[data-e="1f514"]{ background-image:url("../assets/emoji/1f514.webp"); }
.tge[data-e="1f4be"]{ background-image:url("../assets/emoji/1f4be.webp"); }
.tge[data-e="2795"]{ background-image:url("../assets/emoji/2795.webp"); }
.tge[data-e="1f5d1"]{ background-image:url("../assets/emoji/1f5d1.webp"); }
.tge[data-e="1f517"]{ background-image:url("../assets/emoji/1f517.webp"); }
.tge[data-e="270f"]{ background-image:url("../assets/emoji/270f.webp"); }
.tge[data-e="1f5c2"]{ background-image:url("../assets/emoji/1f5c2.webp"); }
.tge[data-e="1f4c1"]{ background-image:url("../assets/emoji/1f4c1.webp"); }
.tge[data-e="1f4c5"]{ background-image:url("../assets/emoji/1f4c5.webp"); }
.tge[data-e="1f4cb"]{ background-image:url("../assets/emoji/1f4cb.webp"); }
.tge[data-e="2705"]{ background-image:url("../assets/emoji/2705.webp"); }
.tge[data-e="1f512"]{ background-image:url("../assets/emoji/1f512.webp"); }
.tge[data-e="2714"]{ background-image:url("../assets/emoji/2714.webp"); }
.tge[data-e="2716"]{ background-image:url("../assets/emoji/2716.webp"); }
.tge[data-e="26a0"]{ background-image:url("../assets/emoji/26a0.webp"); }
.tge[data-e="1f44d"]{ background-image:url("../assets/emoji/1f44d.webp"); }
.tge[data-e="2764"]{ background-image:url("../assets/emoji/2764.webp"); }
.tge[data-e="1f602"]{ background-image:url("../assets/emoji/1f602.webp"); }
.tge[data-e="1f612"]{ background-image:url("../assets/emoji/1f612.webp"); }
.tge[data-e="1f60f"]{ background-image:url("../assets/emoji/1f60f.webp"); }
.tge[data-e="1f44c"]{ background-image:url("../assets/emoji/1f44c.webp"); }
.tge[data-e="1f621"]{ background-image:url("../assets/emoji/1f621.webp"); }
.tge[data-e="1f611"]{ background-image:url("../assets/emoji/1f611.webp"); }

/* ---------- حرکت‌ها: هر ایموجی مخصوصِ خودش ---------- */
.tge.tge-play{ animation-duration:.85s; animation-timing-function:cubic-bezier(.3,.7,.4,1); animation-fill-mode:both; }
.tge.tge-play[data-a="print"]  { animation-name:tge-print; }
.tge.tge-play[data-a="up"]     { animation-name:tge-up; }
.tge.tge-play[data-a="down"]   { animation-name:tge-down; }
.tge.tge-play[data-a="bars"]   { animation-name:tge-bars; transform-origin:50% 100%; }
.tge.tge-play[data-a="search"] { animation-name:tge-search; }
.tge.tge-play[data-a="bell"]   { animation-name:tge-bell; transform-origin:50% 8%; animation-duration:1s; }
.tge.tge-play[data-a="save"]   { animation-name:tge-save; }
.tge.tge-play[data-a="plus"]   { animation-name:tge-plus; }
.tge.tge-play[data-a="trash"]  { animation-name:tge-trash; transform-origin:50% 100%; }
.tge.tge-play[data-a="link"]   { animation-name:tge-link; }
.tge.tge-play[data-a="pencil"] { animation-name:tge-pencil; transform-origin:10% 90%; }
.tge.tge-play[data-a="folder"] { animation-name:tge-folder; transform-origin:50% 100%; }
.tge.tge-play[data-a="flip"]   { animation-name:tge-flip; }
.tge.tge-play[data-a="pop"]    { animation-name:tge-pop; }
.tge.tge-play[data-a="lock"]   { animation-name:tge-lock; transform-origin:50% 90%; }
.tge.tge-play[data-a="spin"]   { animation-name:tge-spin; }
.tge.tge-play[data-a="warn"]   { animation-name:tge-warn; transform-origin:50% 90%; }

.tge.tge-play[data-a="thumb"]  { animation-name:tge-thumb; transform-origin:30% 88%; animation-duration:1s; }
.tge.tge-play[data-a="beat"]   { animation-name:tge-beat; animation-duration:1s; }
.tge.tge-play[data-a="laugh"]  { animation-name:tge-laugh; transform-origin:50% 70%; animation-duration:1s; }
.tge.tge-play[data-a="roll"]   { animation-name:tge-roll; animation-duration:1.1s; }
.tge.tge-play[data-a="smirk"]  { animation-name:tge-smirk; animation-duration:1s; }
.tge.tge-play[data-a="okay"]   { animation-name:tge-okay; animation-duration:.95s; }
.tge.tge-play[data-a="angry"]  { animation-name:tge-angry; transform-origin:50% 80%; animation-duration:1s; }
.tge.tge-play[data-a="deadpan"]{ animation-name:tge-deadpan; animation-duration:1.2s; }

@keyframes tge-print  { 0%{transform:translateY(0)} 20%{transform:translateY(-3px) scale(1.08)} 40%{transform:translateY(1.5px)} 60%{transform:translateY(-2px) scale(1.06)} 80%{transform:translateY(1px)} 100%{transform:none} }
@keyframes tge-up     { 0%{transform:none} 35%{transform:translate(2px,-5px) scale(1.15)} 55%{transform:translate(0,1px) scale(.95)} 100%{transform:none} }
@keyframes tge-down   { 0%{transform:none} 35%{transform:translateY(5px) scale(1.12)} 55%{transform:translateY(-1px) scale(.96)} 100%{transform:none} }
@keyframes tge-bars   { 0%{transform:scaleY(1)} 25%{transform:scaleY(.55)} 55%{transform:scaleY(1.2)} 80%{transform:scaleY(.95)} 100%{transform:none} }
@keyframes tge-search { 0%{transform:none} 25%{transform:translate(-3px,-2px) rotate(-14deg) scale(1.1)} 50%{transform:translate(3px,-3px) rotate(12deg) scale(1.15)} 75%{transform:translate(1px,1px) rotate(-5deg)} 100%{transform:none} }
@keyframes tge-bell   { 0%{transform:rotate(0)} 12%{transform:rotate(22deg)} 28%{transform:rotate(-20deg)} 44%{transform:rotate(15deg)} 60%{transform:rotate(-11deg)} 76%{transform:rotate(6deg)} 100%{transform:rotate(0)} }
@keyframes tge-save   { 0%{transform:none} 30%{transform:translateY(-4px) scale(1.12)} 55%{transform:translateY(2px) scale(.92,1.06)} 75%{transform:translateY(-1px)} 100%{transform:none} }
@keyframes tge-plus   { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.3)} 100%{transform:rotate(360deg) scale(1)} }
@keyframes tge-trash  { 0%{transform:rotate(0)} 15%{transform:rotate(-14deg) translateY(-2px)} 35%{transform:rotate(12deg)} 55%{transform:rotate(-8deg)} 75%{transform:rotate(4deg)} 100%{transform:none} }
@keyframes tge-link   { 0%{transform:none} 30%{transform:rotate(-20deg) scale(1.15)} 60%{transform:rotate(16deg) scale(1.1)} 100%{transform:none} }
@keyframes tge-pencil { 0%{transform:none} 20%{transform:rotate(-16deg) translate(-1px,-2px)} 40%{transform:rotate(8deg) translate(2px,1px)} 60%{transform:rotate(-12deg) translate(-1px,-1px)} 80%{transform:rotate(5deg)} 100%{transform:none} }
@keyframes tge-folder { 0%{transform:none} 30%{transform:scale(1.18,.86)} 55%{transform:scale(.94,1.12) translateY(-3px)} 100%{transform:none} }
@keyframes tge-flip   { 0%{transform:perspective(60px) rotateY(0)} 50%{transform:perspective(60px) rotateY(180deg) scale(1.1)} 100%{transform:perspective(60px) rotateY(360deg)} }
@keyframes tge-pop    { 0%{transform:scale(1)} 30%{transform:scale(.55)} 60%{transform:scale(1.35)} 80%{transform:scale(.92)} 100%{transform:scale(1)} }
@keyframes tge-lock   { 0%{transform:none} 15%{transform:rotate(-12deg)} 30%{transform:rotate(10deg)} 45%{transform:rotate(-7deg)} 60%{transform:scale(1.2)} 100%{transform:none} }
@keyframes tge-spin   { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.25)} 100%{transform:rotate(360deg) scale(1)} }
@keyframes tge-warn   { 0%{transform:none} 15%{transform:rotate(-14deg) scale(1.1)} 30%{transform:rotate(12deg) scale(1.15)} 45%{transform:rotate(-9deg) scale(1.1)} 60%{transform:rotate(6deg)} 80%{transform:scale(1.12)} 100%{transform:none} }

/* ری‌اکشن‌ها */
@keyframes tge-thumb  { 0%{transform:none} 18%{transform:rotate(-34deg) translateY(2px) scale(.95)} 38%{transform:rotate(10deg) translateY(-6px) scale(1.28)} 55%{transform:rotate(-8deg) translateY(-1px) scale(1.05)} 72%{transform:rotate(5deg) scale(1.12)} 100%{transform:none} }
@keyframes tge-beat   { 0%{transform:scale(1)} 14%{transform:scale(1.38)} 28%{transform:scale(.95)} 42%{transform:scale(1.3)} 70%{transform:scale(1)} 100%{transform:scale(1)} }
@keyframes tge-laugh  { 0%{transform:none} 10%{transform:translateY(-4px) rotate(-12deg) scale(1.15)} 22%{transform:translateY(0) rotate(12deg) scale(1.2)} 34%{transform:translateY(-4px) rotate(-12deg) scale(1.15)} 46%{transform:translateY(0) rotate(12deg) scale(1.2)} 58%{transform:translateY(-3px) rotate(-8deg) scale(1.12)} 72%{transform:rotate(6deg) scale(1.08)} 100%{transform:none} }
@keyframes tge-roll   { 0%{transform:none} 20%{transform:translateX(-3px) rotate(-10deg) scale(1.08)} 50%{transform:translateX(3px) rotate(10deg) scale(1.1)} 75%{transform:translateX(-1px) rotate(-4deg) scale(1.04)} 100%{transform:none} }
@keyframes tge-smirk  { 0%{transform:none} 25%{transform:rotate(-14deg) translateX(-2px) scale(1.18)} 55%{transform:rotate(-14deg) translateX(-2px) scale(1.18)} 80%{transform:rotate(5deg) scale(1.05)} 100%{transform:none} }
@keyframes tge-okay   { 0%{transform:scale(1) rotate(0)} 25%{transform:scale(.72) rotate(-14deg)} 55%{transform:scale(1.35) rotate(12deg)} 78%{transform:scale(.95) rotate(-4deg)} 100%{transform:scale(1) rotate(0)} }

/* 😡 خشمِ فشرده: چند لرزشِ تند، بزرگ‌شدنِ ناگهانی و سرخ‌شدن (فیلتر) */
@keyframes tge-angry  { 0%{transform:none; filter:drop-shadow(0 1px 1.5px rgba(30,40,80,.22))}
    12%{transform:translateX(-3px) rotate(-9deg) scale(1.12); filter:saturate(1.6) drop-shadow(0 0 5px rgba(230,40,30,.7))}
    24%{transform:translateX(3px) rotate(9deg) scale(1.2)} 36%{transform:translateX(-3px) rotate(-9deg) scale(1.26)}
    48%{transform:translateX(3px) rotate(9deg) scale(1.3); filter:saturate(1.8) drop-shadow(0 0 7px rgba(230,40,30,.85))}
    60%{transform:translateX(-2px) rotate(-6deg) scale(1.22)} 78%{transform:translateX(1px) rotate(3deg) scale(1.1)}
    100%{transform:none; filter:drop-shadow(0 1px 1.5px rgba(30,40,80,.22))} }
/* 😑 بی‌تفاوت: آرام و کُند، یک چرخش به سمتِ چپ و راست و فرو رفتن، بدون هیجان */
@keyframes tge-deadpan{ 0%{transform:none} 25%{transform:perspective(60px) rotateY(-28deg) translateY(1px) scale(.96)} 55%{transform:perspective(60px) rotateY(28deg) translateY(2px) scale(.94)} 80%{transform:perspective(60px) rotateY(-8deg) translateY(1px) scale(.97)} 100%{transform:none} }

@media (prefers-reduced-motion: reduce){
    .tge.tge-play{ animation:none !important; }
}