/* ============================================================
   PIPSBULL ANIMATION SYSTEM v2.0 - CSS
   ============================================================ */

/* ===== BASE ANIMATION CLASSES ===== */

/* Section Reveal */
.section-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.section-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Card Stagger */
.card-stagger {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-stagger.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Cards Container */
.stagger-cards .card-stagger,
.stagger-cards .blog-card,
.stagger-cards .testimonial-card,
.stagger-cards .value-card,
.stagger-cards .about-card,
.stagger-cards .journey-step {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.stagger-cards.visible .card-stagger,
.stagger-cards.visible .blog-card,
.stagger-cards.visible .testimonial-card,
.stagger-cards.visible .value-card,
.stagger-cards.visible .about-card,
.stagger-cards.visible .journey-step {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.stagger-cards.visible .card-stagger:nth-child(1),
.stagger-cards.visible .blog-card:nth-child(1),
.stagger-cards.visible .testimonial-card:nth-child(1),
.stagger-cards.visible .value-card:nth-child(1),
.stagger-cards.visible .about-card:nth-child(1),
.stagger-cards.visible .journey-step:nth-child(1) { transition-delay: 0.05s; }

.stagger-cards.visible .card-stagger:nth-child(2),
.stagger-cards.visible .blog-card:nth-child(2),
.stagger-cards.visible .testimonial-card:nth-child(2),
.stagger-cards.visible .value-card:nth-child(2),
.stagger-cards.visible .about-card:nth-child(2),
.stagger-cards.visible .journey-step:nth-child(2) { transition-delay: 0.10s; }

.stagger-cards.visible .card-stagger:nth-child(3),
.stagger-cards.visible .blog-card:nth-child(3),
.stagger-cards.visible .testimonial-card:nth-child(3),
.stagger-cards.visible .value-card:nth-child(3),
.stagger-cards.visible .about-card:nth-child(3),
.stagger-cards.visible .journey-step:nth-child(3) { transition-delay: 0.15s; }

.stagger-cards.visible .card-stagger:nth-child(4),
.stagger-cards.visible .blog-card:nth-child(4),
.stagger-cards.visible .testimonial-card:nth-child(4),
.stagger-cards.visible .value-card:nth-child(4),
.stagger-cards.visible .about-card:nth-child(4),
.stagger-cards.visible .journey-step:nth-child(4) { transition-delay: 0.20s; }

.stagger-cards.visible .card-stagger:nth-child(5),
.stagger-cards.visible .blog-card:nth-child(5),
.stagger-cards.visible .testimonial-card:nth-child(5),
.stagger-cards.visible .value-card:nth-child(5),
.stagger-cards.visible .about-card:nth-child(5),
.stagger-cards.visible .journey-step:nth-child(5) { transition-delay: 0.25s; }

.stagger-cards.visible .card-stagger:nth-child(6),
.stagger-cards.visible .blog-card:nth-child(6),
.stagger-cards.visible .testimonial-card:nth-child(6),
.stagger-cards.visible .value-card:nth-child(6),
.stagger-cards.visible .about-card:nth-child(6),
.stagger-cards.visible .journey-step:nth-child(6) { transition-delay: 0.30s; }

/* Image Animation */
.anim-image {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(8px);
    transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1),
                transform 1s cubic-bezier(0.23, 1, 0.32, 1),
                filter 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.anim-image.visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
}

/* CTA Animation */
.cta-animate {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.cta-animate.visible {
    opacity: 1;
    transform: scale(1);
}

/* Hero Animation */
.hero-animate {
    opacity: 0;
    transform: translateY(60px) scale(0.98);
    transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1),
                transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-animate.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger Grid */
.stagger-grid > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.stagger-grid.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-grid.visible > *:nth-child(2) { transition-delay: 0.10s; }
.stagger-grid.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-grid.visible > *:nth-child(4) { transition-delay: 0.20s; }
.stagger-grid.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-grid.visible > *:nth-child(6) { transition-delay: 0.30s; }

.stagger-grid.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Section Tag */
.section-tag-animate {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-tag-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stat Counter */
.stat-counter {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.stat-counter.visible {
    opacity: 1;
    transform: scale(1);
}

/* Fade In */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in.delay-1 { transition-delay: 0.1s; }
.fade-in.delay-2 { transition-delay: 0.2s; }
.fade-in.delay-3 { transition-delay: 0.3s; }
.fade-in.delay-4 { transition-delay: 0.4s; }
.fade-in.delay-5 { transition-delay: 0.5s; }
.fade-in.delay-6 { transition-delay: 0.6s; }

/* Fade Scale */
.fade-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fade-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Timeline Item */
.timeline-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.timeline-item.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Reading Progress Bar */
#readingProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
    z-index: 9999;
    width: 0%;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 20px rgba(139,0,0,0.3);
    pointer-events: none;
}

/* ===== RESPONSIVE ===== */
@media (prefers-reduced-motion: reduce) {
    .section-reveal,
    .card-stagger,
    .anim-image,
    .cta-animate,
    .hero-animate,
    .fade-in,
    .fade-scale,
    .stat-counter,
    .section-tag-animate,
    .stagger-grid > *,
    .timeline-item,
    .stagger-cards .card-stagger,
    .stagger-cards .blog-card,
    .stagger-cards .testimonial-card,
    .stagger-cards .value-card,
    .stagger-cards .about-card,
    .stagger-cards .journey-step {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    
    #readingProgress {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .section-reveal {
        transform: translateY(40px);
    }
    
    .card-stagger,
    .stagger-cards .card-stagger,
    .stagger-cards .blog-card,
    .stagger-cards .testimonial-card,
    .stagger-cards .value-card,
    .stagger-cards .about-card,
    .stagger-cards .journey-step {
        transform: translateY(30px);
    }
    
    .hero-animate {
        transform: translateY(40px) scale(0.98);
    }
}