/* ================================================
   OSITEX CREATIVE HUB - Animations
   animate.css
   ================================================ */
                    /* ------------------------------------------------
   1. BASE ANIMATION SETUP
   All animated elements start hidden
   JavaScript adds .animated class when visible
   JavaScript removes .animated when out of view
------------------------------------------------ */
                    
                    [data-animate] {
                        opacity: 0;
                        transition: opacity 0.3s ease, transform 0.3s ease;
                        will-change: opacity, transform; /* Performance optimization */
                    }
                    
                    [data-animate].animated {
                        opacity: 1;
                        transform: none !important;
                        will-change: auto; /* Remove will-change after animation */
                    }
                    /* ------------------------------------------------
   2. ANIMATION DIRECTIONS
------------------------------------------------ */
                    
                    [data-animate="slide-left"] {
                        transform: translateX(-60px);
                    }
                    
                    [data-animate="slide-right"] {
                        transform: translateX(60px);
                    }
                    
                    [data-animate="slide-up"] {
                        transform: translateY(40px);
                    }
                    
                    [data-animate="slide-down"] {
                        transform: translateY(-40px);
                    }
                    
                    [data-animate="fade"] {
                        transform: none;
                    }
                    
                    [data-animate="scale"] {
                        transform: scale(0.85);
                    }
                    /* ------------------------------------------------
   3. ANIMATION DELAYS
------------------------------------------------ */
                    
                    [data-delay="100"] {
                        transition-delay: 0.1s;
                    }
                    
                    [data-delay="200"] {
                        transition-delay: 0.2s;
                    }
                    
                    [data-delay="300"] {
                        transition-delay: 0.3s;
                    }
                    
                    [data-delay="400"] {
                        transition-delay: 0.4s;
                    }
                    
                    [data-delay="500"] {
                        transition-delay: 0.5s;
                    }
                    
                    [data-delay="600"] {
                        transition-delay: 0.6s;
                    }
                    
                    [data-delay="700"] {
                        transition-delay: 0.7s;
                    }
                    
                    [data-delay="800"] {
                        transition-delay: 0.8s;
                    }
                    /* ------------------------------------------------
   4. HERO SECTION ANIMATIONS
   Left slides from left
   Right slides from right
   Both trigger after intro finishes
------------------------------------------------ */
                    
                    .hero-left {
                        opacity: 0;
                        transform: translateX(-60px);
                        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
                        will-change: opacity, transform;
                    }
                    
                    .hero-right {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
                        will-change: opacity, transform;
                    }
                    
                    .hero-left.animated,
                    .hero-right.animated {
                        opacity: 1;
                        transform: translateX(0);
                        will-change: auto;
                    }
                    /* ------------------------------------------------
   5. SERVICES SECTION ANIMATIONS
   Title drops from top
   Cards slide in from different directions
   Connectors fade in
   CTA slides up
------------------------------------------------ */
                    
                    .services-header {
                        opacity: 0;
                        transform: translateY(-30px);
                        transition: opacity 0.3s ease, transform 0.3s ease;
                    }
                    
                    .services-header.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    /* Top row - card 1 from left */
                    
                    .services-flow>.service-card:nth-child(1) {
                        opacity: 0;
                        transform: translateX(-50px);
                        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
                    }
                    /* Top row - card 2 from bottom (featured) */
                    
                    .services-flow>.service-card:nth-child(3) {
                        opacity: 0;
                        transform: translateY(40px);
                        transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
                    }
                    /* Top row - card 3 from right */
                    
                    .services-flow>.service-card:nth-child(5) {
                        opacity: 0;
                        transform: translateX(50px);
                        transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
                    }
                    /* Bottom row - card 1 from left */
                    
                    .services-flow-bottom>.service-card:nth-child(1) {
                        opacity: 0;
                        transform: translateX(-50px);
                        transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
                    }
                    /* Bottom row - card 2 from right */
                    
                    .services-flow-bottom>.service-card:nth-child(3) {
                        opacity: 0;
                        transform: translateX(50px);
                        transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
                    }
                    
                    .service-card.animated {
                        opacity: 1;
                        transform: translate(0) !important;
                    }
                    
                    .service-connector {
                        opacity: 0;
                        transition: opacity 0.3s ease 0.4s;
                    }
                    
                    .service-connector.animated {
                        opacity: 1;
                    }
                    
                    .services-cta {
                        opacity: 0;
                        transform: translateY(30px);
                        transition: opacity 0.3s ease 0.5s, transform 0.3s ease 0.5s;
                    }
                    
                    .services-cta.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    /* ------------------------------------------------
    6. PORTFOLIO SECTION ANIMATIONS
   Header drops from top
   Stats slides up
   Filter bar slides from top
   Cards stagger upward
   Testimonials slide from right
------------------------------------------------ */
                    
                    .portfolio-header {
                        opacity: 0;
                        transform: translateY(-30px);
                        transition: opacity 0.3s ease, transform 0.3s ease;
                    }
                    
                    .portfolio-header.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    
                    .portfolio-stats {
                        opacity: 0;
                        transform: translateY(30px);
                        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
                    }
                    
                    .portfolio-stats.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    
                    .portfolio-filter {
                        opacity: 0;
                        transform: translateY(-20px);
                        transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
                    }
                    
                    .portfolio-filter.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    /* Portfolio cards staggered upward */
                    
                    .portfolio-card:nth-child(1) {
                        opacity: 0;
                        transform: translateY(40px);
                        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
                    }
                    
                    .portfolio-card:nth-child(2) {
                        opacity: 0;
                        transform: translateY(40px);
                        transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
                    }
                    
                    .portfolio-card:nth-child(3) {
                        opacity: 0;
                        transform: translateY(40px);
                        transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
                    }
                    
                    .portfolio-card:nth-child(4) {
                        opacity: 0;
                        transform: translateY(40px);
                        transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
                    }
                    
                    .portfolio-card:nth-child(5) {
                        opacity: 0;
                        transform: translateY(40px);
                        transition: opacity 0.3s ease 0.5s, transform 0.3s ease 0.5s;
                    }
                    
                    .portfolio-card:nth-child(6) {
                        opacity: 0;
                        transform: translateY(40px);
                        transition: opacity 0.3s ease 0.6s, transform 0.3s ease 0.6s;
                    }
                    
                    .portfolio-card.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    /* Testimonials slide from right */
                    
                    .testimonials-header {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease, transform 0.3s ease;
                    }
                    
                    .testimonials-header.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    
                    .testimonials-slider {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
                    }
                    
                    .testimonials-slider.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    
                    .slider-dots {
                        opacity: 0;
                        transition: opacity 0.3s ease 0.3s;
                    }
                    
                    .slider-dots.animated {
                        opacity: 1;
                    }
                    /* ------------------------------------------------
   7. FAQ SECTION ANIMATIONS
   Title slides from left
   Items slide from right one by one
   CTA slides up
------------------------------------------------ */
                    
                    .faq-header {
                        opacity: 0;
                        transform: translateX(-60px);
                        transition: opacity 0.3s ease, transform 0.3s ease;
                    }
                    
                    .faq-header.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    
                    .faq-item:nth-child(1) {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
                    }
                    
                    .faq-item:nth-child(2) {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
                    }
                    
                    .faq-item:nth-child(3) {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
                    }
                    
                    .faq-item:nth-child(4) {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
                    }
                    
                    .faq-item:nth-child(5) {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.25s, transform 0.3s ease 0.25s;
                    }
                    
                    .faq-item:nth-child(6) {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
                    }
                    
                    .faq-item:nth-child(7) {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.35s, transform 0.3s ease 0.35s;
                    }
                    
                    .faq-item:nth-child(8) {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
                    }
                    
                    .faq-item.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    
                    .faq-cta {
                        opacity: 0;
                        transform: translateY(30px);
                        transition: opacity 0.3s ease 0.5s, transform 0.3s ease 0.5s;
                    }
                    
                    .faq-cta.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    /* ------------------------------------------------
    8. BLOG SECTION ANIMATIONS
   Title slides from left
   Cards alternate left and right
    ------------------------------------------------ */
                    
                    .blog-header {
                        opacity: 0;
                        transform: translateX(-60px);
                        transition: opacity 0.3s ease, transform 0.3s ease;
                    }
                    
                    .blog-header.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    
                    .blog-card:nth-child(odd) {
                        opacity: 0;
                        transform: translateX(-50px);
                        transition: opacity 0.3s ease, transform 0.3s ease;
                    }
                    
                    .blog-card:nth-child(even) {
                        opacity: 0;
                        transform: translateX(50px);
                        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
                    }
                    
                    .blog-card.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    /* ------------------------------------------------
   9. ABOUT SECTION ANIMATIONS
   Image slides from left
   Text slides from right
------------------------------------------------ */
                    
                    .about-image {
                        opacity: 0;
                        transform: translateX(-60px);
                        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
                    }
                    
                    .about-image.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    
                    .about-content {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
                    }
                    
                    .about-content.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    /* ------------------------------------------------
   10. CONTACT SECTION ANIMATIONS
   Header slides from top
   Form slides from left
   Info slides from right
------------------------------------------------ */
                    
                    .contact-header {
                        opacity: 0;
                        transform: translateY(-30px);
                        transition: opacity 0.3s ease, transform 0.3s ease;
                    }
                    
                    .contact-header.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    
                    .contact-form-wrapper {
                        opacity: 0;
                        transform: translateX(-60px);
                        transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
                    }
                    
                    .contact-form-wrapper.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    
                    .contact-info-wrapper {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
                    }
                    
                    .contact-info-wrapper.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    /* ------------------------------------------------
    11. FOOTER ANIMATIONS
    Brand slides from left
    Middle columns slide up
    Social slides from right
    Bottom fades in
    ------------------------------------------------ */
                    
                    .footer-brand {
                        opacity: 0;
                        transform: translateX(-60px);
                        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
                    }
                    
                    .footer-brand.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    
                    .footer-links {
                        opacity: 0;
                        transform: translateY(40px);
                        transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
                    }
                    
                    .footer-links.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    
                    .footer-services {
                        opacity: 0;
                        transform: translateY(40px);
                        transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
                    }
                    
                    .footer-services.animated {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    
                    .footer-social {
                        opacity: 0;
                        transform: translateX(60px);
                        transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
                    }
                    
                    .footer-social.animated {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    
                    .footer-bottom {
                        opacity: 0;
                        transition: opacity 0.3s ease 0.5s;
                    }
                    
                    .footer-bottom.animated {
                        opacity: 1;
                    }
                    /* ------------------------------------------------
    12. DISABLE ANIMATIONS on low motion devices
    ------------------------------------------------ */
                    
                    @media (prefers-reduced-motion: reduce) {
                        [data-animate],
                        .hero-left,
                        .hero-right,
                        .services-header,
                        .service-card,
                        .service-connector,
                        .services-cta,
                        .portfolio-header,
                        .portfolio-stats,
                        .portfolio-filter,
                        .portfolio-card,
                        .testimonials-header,
                        .testimonials-slider,
                        .slider-dots,
                        .faq-header,
                        .faq-item,
                        .faq-cta,
                        .blog-header,
                        .blog-card,
                        .about-image,
                        .about-content,
                        .contact-header,
                        .contact-form-wrapper,
                        .contact-info-wrapper,
                        .footer-brand,
                        .footer-links,
                        .footer-services,
                        .footer-social,
                        .footer-bottom {
                            opacity: 1 !important;
                            transform: none !important;
                            transition: none !important;
                        }
                    }