/* Base link style */
a {
    color: #547ed1;
    text-decoration: none;
    position: relative;
    padding-right: 2px;
    display: inline;
    background-image: linear-gradient(#547ed1, #547ed1);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 100% 1px;
}

/* Internal links (starting with #) */
a[href^="#"]::after {
    content: "→";
    margin-left: 2px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* External links (excluding mailto and #) */
a[href]:not([href^="#"]):not([href^="mailto:"])::after {
    content: "↗";
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Email links */
:root {
    --mailto-icon-scale: 1.3;
}
@media screen and (max-width: 768px) {
    :root {
        --mailto-icon-scale: 1.0;
    }
}

a[href^="mailto:"]::after {
    content: "✉";
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.3s ease;
    vertical-align: 1px;
    transform-origin: center;
    transform: scale(var(--mailto-icon-scale));
}

/* Animations */
@keyframes arrowMove {
    0% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

@keyframes arrowMoveDiagonal {
    0% { transform: translate(0, 0); }
    50% { transform: translate(3px, -3px); }
    100% { transform: translate(0, 0); }
}

@keyframes envelopeVibrate {
    0%, 100% { transform: scale(var(--mailto-icon-scale)) rotate(0); }
    15% { transform: scale(var(--mailto-icon-scale)) rotate(-10deg); }
    35% { transform: scale(var(--mailto-icon-scale)) rotate(10deg); }
    50% { transform: scale(var(--mailto-icon-scale)) rotate(0); }
}

/* Apply animations to different link types */
a[href^="#"]:hover::after {
    animation: arrowMove 1s infinite;
}

a[href]:not([href^="#"]):not([href^="mailto:"]):hover::after {
    animation: arrowMoveDiagonal 1s infinite;
}

a[href^="mailto:"]:hover::after {
    animation: envelopeVibrate 1s infinite;
}

/* Exceptions */
.social_icon,
.scroll-top,
#social_icons a {
    background: none;
    text-decoration: none;
}

/* Remove icons for special links */
.social_icon::after,
.scroll-top::after,
#social_icons a::after {
    content: none !important;
}