@keyframes wtTopLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px -4px; }
}
@keyframes wtTopRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px -4px; }
}
@keyframes wtBottomLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px 4px; }
}
@keyframes wtBottomRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px 4px; }
}
.wt-tl, .wt-tr, .wt-bl, .wt-br {
    transition: translate 0.4s ease;
}
svg:hover .wt-tl { animation: wtTopLeft 1.2s ease-in-out infinite; }
svg:hover .wt-tr { animation: wtTopRight 1.2s ease-in-out infinite; }
svg:hover .wt-bl { animation: wtBottomLeft 1.2s ease-in-out infinite; }
svg:hover .wt-br { animation: wtBottomRight 1.2s ease-in-out infinite; }

@keyframes goTopLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px -4px; }
}
@keyframes goTopRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px -4px; }
}
@keyframes goBottomLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px 4px; }
}
@keyframes goBottomRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px 4px; }
}
.move-tl, .move-tr, .move-bl, .move-br {
    transition: translate 0.6s ease;
}
svg:hover .move-tl { animation: goTopLeft 1.4s ease-in-out infinite; }
svg:hover .move-tr { animation: goTopRight 1.4s ease-in-out infinite; }
svg:hover .move-bl { animation: goBottomLeft 1.4s ease-in-out infinite; }
svg:hover .move-br { animation: goBottomRight 1.4s ease-in-out infinite; }

@keyframes seoTopLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px -4px; }
}
@keyframes seoTopRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px -4px; }
}
@keyframes seoBottomLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px 4px; }
}
@keyframes seoBottomRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px 4px; }
}
.seo-tl, .seo-tr, .seo-bl, .seo-br {
    transition: translate 0.4s ease;
}
svg:hover .seo-tl { animation: seoTopLeft 1.3s ease-in-out infinite; }
svg:hover .seo-tr { animation: seoTopRight 1.33s ease-in-out infinite; }
svg:hover .seo-bl { animation: seoBottomLeft 1.37s ease-in-out infinite; }
svg:hover .seo-br { animation: seoBottomRight 1.4s ease-in-out infinite; }

@keyframes appTopLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px -4px; }
}
@keyframes appTopRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px -4px; }
}
@keyframes appBottomLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px 4px; }
}
@keyframes appBottomRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px 4px; }
}
.app-tl, .app-tr, .app-bl, .app-br {
    transition: translate 0.4s ease;
}
svg:hover .app-tl { animation: appTopLeft 1.2s ease-in-out infinite; }
svg:hover .app-tr { animation: appTopRight 1.2s ease-in-out infinite; }
svg:hover .app-bl { animation: appBottomLeft 1.2s ease-in-out infinite; }
svg:hover .app-br { animation: appBottomRight 1.2s ease-in-out infinite; }

@keyframes adsTopLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px -4px; }
}
@keyframes adsTopRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px -4px; }
}
@keyframes adsBottomLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px 4px; }
}
@keyframes adsBottomRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px 4px; }
}
.ads-tl, .ads-tr, .ads-bl, .ads-br {
    transition: translate 0.4s ease;
}
svg:hover .ads-tl { animation: adsTopLeft 1.2s ease-in-out infinite; }
svg:hover .ads-tr { animation: adsTopRight 1.25s ease-in-out infinite; }
svg:hover .ads-bl { animation: adsBottomLeft 1.3s ease-in-out infinite; }
svg:hover .ads-br { animation: adsBottomRight 1.35s ease-in-out infinite; }

@keyframes smmTopLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px -4px; }
}
@keyframes smmTopRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px -4px; }
}
@keyframes smmBottomLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px 4px; }
}
@keyframes smmBottomRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px 4px; }
}
.smm-tl, .smm-tr, .smm-bl, .smm-br {
    transition: translate 0.4s ease;
}
svg:hover .smm-tl { animation: smmTopLeft 1.4s ease-in-out infinite; }
svg:hover .smm-tr { animation: smmTopRight 1.4s ease-in-out infinite; }
svg:hover .smm-bl { animation: smmBottomLeft 1.4s ease-in-out infinite; }
svg:hover .smm-br { animation: smmBottomRight 1.4s ease-in-out infinite; }

@keyframes apiTopLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px -4px; }
}
@keyframes apiTopRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px -4px; }
}
@keyframes apiBottomLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px 4px; }
}
@keyframes apiBottomRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px 4px; }
}
.api-tl, .api-tr, .api-bl, .api-br {
    transition: translate 0.4s ease;
}
svg:hover .api-tl { animation: apiTopLeft 1.4s ease-in-out infinite; }
svg:hover .api-tr { animation: apiTopRight 1.4s ease-in-out infinite; }
svg:hover .api-bl { animation: apiBottomLeft 1.4s ease-in-out infinite; }
svg:hover .api-br { animation: apiBottomRight 1.4s ease-in-out infinite; }

@keyframes microTopLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px -4px; }
}
@keyframes microTopRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px -4px; }
}
@keyframes microBottomLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px 4px; }
}
@keyframes microBottomRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px 4px; }
}
.micro-tl, .micro-tr, .micro-bl, .micro-br {
    transition: translate 0.4s ease;
}
svg:hover .micro-tl { animation: microTopLeft 1.4s ease-in-out infinite; }
svg:hover .micro-tr { animation: microTopRight 1.4s ease-in-out infinite; }
svg:hover .micro-bl { animation: microBottomLeft 1.4s ease-in-out infinite; }
svg:hover .micro-br { animation: microBottomRight 1.4s ease-in-out infinite; }

@keyframes emailTopLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px -4px; }
}
@keyframes emailTopRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px -4px; }
}
@keyframes emailBottomLeft {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -4px 4px; }
}
@keyframes emailBottomRight {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 4px 4px; }
}
.email-tl, .email-tr, .email-bl, .email-br {
    transition: translate 0.4s ease;
}
svg:hover .email-tl { animation: emailTopLeft 1.2s ease-in-out infinite; }
svg:hover .email-tr { animation: emailTopRight 1.25s ease-in-out infinite; }
svg:hover .email-bl { animation: emailBottomLeft 1.30s ease-in-out infinite; }
svg:hover .email-br { animation: emailBottomRight 1.35s ease-in-out infinite; }

@keyframes aboutPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.03); opacity: 1; }
}
@keyframes aboutLeftWing {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -5px -2px; }
}
@keyframes aboutRightWing {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 5px -2px; }
}
@keyframes aboutVertical {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 0px -5px; }
}
.about-card-svg {
    transition: transform 0.5s ease;
}
.about-card-svg:hover {
    transform: scale(1.01);
}
.ab-center { transform-origin: center; }
svg:hover .ab-left { animation: aboutLeftWing 1.4s ease-in-out infinite; }
svg:hover .ab-right { animation: aboutRightWing 1.5s ease-in-out infinite; }
svg:hover .ab-vert { animation: aboutVertical 1.6s ease-in-out infinite; }