/* Custom CSS - Keyframes & Scrollbar Styling */

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #f59e0b; /* Accent color */
}

/* Base Styles & Utility overrides */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Offset for sticky header */
}

/* Animations Definitions */
@keyframes heroReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes pulseCounter {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
        color: #f59e0b;
    }
    100% {
        transform: scale(1);
    }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Applied Animation Classes */
.anim-hero-reveal {
    animation: heroReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-float {
    animation: float 4s ease-in-out infinite;
}

.anim-gradient-shift {
    background-size: 200% auto;
    animation: gradientShift 5s ease infinite;
}

/* Intersection Observer Initial States */
.observe-target {
    opacity: 0;
    will-change: opacity, transform;
}

/* Classes triggered by JS */
.observe-target.is-visible.fade-up {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.observe-target.is-visible.slide-left {
    animation: slideLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.observe-target.is-visible.slide-right {
    animation: slideRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.observe-target.is-visible.scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered Delay Utility */
.observe-target[style*="--stagger"] {
    animation-delay: calc(var(--stagger) * 0.15s);
}

/* Pulse trigger class */
.pulse-animate {
    animation: pulseCounter 0.5s ease-out;
}

/* Testimonial slider hide scrollbar */
#testimonial-track::-webkit-scrollbar {
    display: none;
}
#testimonial-track {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media screen and (max-width: 480px) {
    /* Adjust animation for mobile */
    .hero {
        padding:10px;
    }
}