@keyframes gentleGlitch {

    0%,
    100% {
        transform: translate(0);
        text-shadow: none;
    }

    25% {
        transform: translate(-1px, 0);
        text-shadow: -1px 0 var(--secondary), 1px 0 var(--primary);
    }

    75% {
        transform: translate(1px, 0);
        text-shadow: 1px 0 var(--secondary), -1px 0 var(--primary);
    }
}

@media (min-width: 769px) {
    .hero-name:hover {
        animation: gentleGlitch 0.3s ease-in-out;
    }
}

@keyframes floatShape {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes morphCore {
    0% {
        border-radius: 30% 70% 45% 55% / 65% 40% 60% 35%;
    }

    100% {
        border-radius: 55% 45% 70% 30% / 40% 60% 40% 60%;
    }
}

@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateRingReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.floating-shape {
    animation: floatShape 6s infinite ease-in-out;
}

.floating-shape .core {
    animation: morphCore 12s infinite alternate;
}

.floating-shape .ring {
    animation: rotateRing 12s linear infinite;
}

.floating-shape .ring2 {
    animation: rotateRingReverse 15s linear infinite;
}

@keyframes floatAnim {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }

    100% {
        transform: translate(-60px, 50px) scale(1.15);
        opacity: 0.7;
    }
}

@keyframes floatAnim2 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }

    100% {
        transform: translate(70px, -50px) scale(1.2);
        opacity: 0.6;
    }
}

.orb-1 {
    animation: floatAnim 25s infinite alternate;
}

.orb-2 {
    animation: floatAnim2 22s infinite alternate;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp 0.7s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.project-card-horizontal,
.project-card,
.skill-item,
.cert-card,
.contact-card {
    transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.project-card-horizontal:hover {
    transform: translateY(-10px);
    border-color: var(--secondary);
    box-shadow: 0 25px 40px -15px rgba(0, 217, 255, 0.25);
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: var(--secondary);
    box-shadow: 0 20px 35px -12px rgba(0, 217, 255, 0.2);
}

.skill-item:hover {
    transform: translateY(-3px);
}

.cert-card:hover {
    transform: translateY(-6px);
    border-color: var(--secondary);
}

.contact-item:hover {
    transform: translateX(-5px);
    background: rgba(108, 99, 255, 0.05);
}

.scroll-arrow:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}

.back-to-top:hover {
    transform: scale(1.08);
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(108, 99, 255, 0.4);
}

.btn-outline:hover {
    transform: translateY(-3px);
}