/* ========== AOS (Animate On Scroll) ========== */
[data-aos] {
    opacity: 0;
    transform: translateY(30px);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-aos-delay] {
    transition-delay: 0s;
}

[data-aos-delay="100"].aos-animate {
    transition-delay: 0.1s;
}

[data-aos-delay="200"].aos-animate {
    transition-delay: 0.2s;
}

[data-aos-delay="300"].aos-animate {
    transition-delay: 0.3s;
}

[data-aos-delay="400"].aos-animate {
    transition-delay: 0.4s;
}

[data-aos-delay="500"].aos-animate {
    transition-delay: 0.5s;
}

[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="zoom-in"] {
    opacity: 0;
    transform: scale(0.9);
}

[data-aos="zoom-in"].aos-animate {
    opacity: 1;
    transform: scale(1);
}

/* ========== COUNTER ANIMATION ========== */
.counter {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

/* ========== HOVER SCALE ========== */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

/* ========== STAGGER ANIMATION ========== */
@keyframes stagger {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ========== GRADIENT ANIMATION ========== */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ========== GLOW EFFECT ========== */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 122, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 122, 0, 0.6);
    }
}

/* ========== MAGNETIC BUTTON ========== */
@keyframes magnetic-x {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

@keyframes magnetic-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ========== TYPEWRITER ========== */
@keyframes typewriter {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes blink {
    0%, 49%, 100% { border-color: transparent; }
    50%, 99% { border-color: var(--primary); }
}

/* ========== SHIMMER ========== */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ========== FLOAT ========== */
@keyframes float-element {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

/* ========== FLIP ========== */
@keyframes flip {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(360deg); }
}

/* ========== BOUNCE ========== */
@keyframes bounce-element {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* ========== SLIDE ANIMATIONS ========== */
@keyframes slide-in-up {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-down {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========== FADE ANIMATIONS ========== */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ========== SCALE ANIMATIONS ========== */
@keyframes scale-in {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-out {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* ========== ROTATE ANIMATIONS ========== */
@keyframes rotate-360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate-spin {
    from {
        transform: rotate(-180deg);
        opacity: 0;
    }
    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

/* ========== PULSE ANIMATIONS ========== */
@keyframes pulse-bg {
    0%, 100% {
        background-color: rgba(255, 122, 0, 0.05);
    }
    50% {
        background-color: rgba(255, 122, 0, 0.15);
    }
}

/* ========== HOLO EFFECT ========== */
@keyframes holo {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* ========== TEXT GRADIENT ========== */
@keyframes text-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ========== CONTAINER ANIMATIONS ========== */
@keyframes container-in {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========== PARALLAX ========== */
@keyframes parallax-up {
    to {
        transform: translateY(-50px);
    }
}

/* ========== DRAW BORDER ========== */
@keyframes draw-border {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* ========== NEON GLOW ========== */
@keyframes neon-glow {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(255, 122, 0, 0.5),
            0 0 20px rgba(255, 122, 0, 0.3),
            0 0 30px rgba(255, 122, 0, 0.2);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(255, 122, 0, 0.8),
            0 0 30px rgba(255, 122, 0, 0.6),
            0 0 40px rgba(255, 122, 0, 0.4);
    }
}