/* ============================================================
   EasyLifeFX — Animated "GFX" Emoji
   Replaces plain OS/browser emoji (which look inconsistent
   across Windows/Android/iOS) with crisp, consistent Twemoji
   graphics, then gives them a subtle pop-in + gentle animation
   so they feel alive instead of static text.
   ============================================================ */

img.gfx-emoji {
    height: 1.15em;
    width: 1.15em;
    vertical-align: -0.2em;
    display: inline-block;
    margin: 0 0.03em;
    animation:
        gfx-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        gfx-float 3.2s ease-in-out 0.45s infinite;
}

@keyframes gfx-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.22); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes gfx-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* Alerts, warnings and the notification bell get a slightly more
   attention-grabbing pulse instead of the gentle float. */
.alert img.gfx-emoji,
.notif-emoji img.gfx-emoji,
.topbar-btn img.gfx-emoji {
    animation:
        gfx-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        gfx-pulse 1.5s ease-in-out 0.45s infinite;
}

@keyframes gfx-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

/* Big "hero" emoji (package icons, empty-state icons) — a touch bigger,
   slower, calmer float so they don't feel jittery at large sizes. */
.gfx-emoji-lg img.gfx-emoji,
h1 img.gfx-emoji,
h2 img.gfx-emoji,
h3 img.gfx-emoji {
    height: 1.4em;
    width: 1.4em;
    animation:
        gfx-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        gfx-float 4s ease-in-out 0.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
    img.gfx-emoji {
        animation: none !important;
    }
}