/* animation.css - Premium Recreated Animations */

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

@keyframes spin {
    to {
        --angle: 360deg;
    }
}

/* Base Reveal Styles */
.reveal {
    opacity: 0;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(50px);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In From Sides */
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Professional Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Utility Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-fade-in-scale {
    animation: fadeInScale 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Stagger Helpers */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }



/* Pulse Animation for active icons */
@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(0, 183, 181, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 183, 181, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 183, 181, 0); }
}

/* Legacy Support & Mappings */
.fade-in { animation: fadeInScale 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.fade-up { animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.fade-out { animation: fadeInScale 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

.bottom-entry, .left-entry, .right-entry {
    opacity: 0;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-entry { transform: translateY(50px); }
.left-entry { transform: translateX(-50px); }
.right-entry { transform: translateX(50px); }

.bottom-entry.active, .left-entry.active, .right-entry.active {
    opacity: 1;
    transform: translate(0);
}

/* Progress bar animation */
.progress span {
    width: 0;
    transition: width 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.progress.active span {
    width: var(--target-width);
}