.toggle-icon-hover,
.like-icon-hover {
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

.toggle-icon-hover:hover,
.like-icon-hover:hover {
    transform: scale(1.12);
    filter: brightness(1.1);
}

.like-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Heart "pop": quick overshoot then settle, like Instagram's tap-to-like. */
.like-icon-pop .mud-icon-root {
    animation: like-icon-heart-pop 0.55s cubic-bezier(0.17, 0.89, 0.32, 1.28);
    transform-origin: center;
    will-change: transform;
    position: relative;
    z-index: 1;
}

@keyframes like-icon-heart-pop {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(0.8);
    }

    40% {
        transform: scale(1.35);
    }

    60% {
        transform: scale(0.92);
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Radiating ring that expands and fades out around the heart. */
.like-icon-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--mud-palette-error, #f44336);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    opacity: 0.9;
    animation: like-icon-burst-ring 0.6s ease-out forwards;
    z-index: 0;
}

@keyframes like-icon-burst-ring {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.9;
    }

    70% {
        opacity: 0.35;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .like-icon-pop .mud-icon-root {
        animation: none;
    }

    .like-icon-burst {
        display: none;
    }
}

.GD-navbar.GD-navbar-glass .mud-icon-root.mud-svg-icon.mud-icon-size-medium {
    font-size: 1.25rem !important;
}