/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   Content appears with staggered delays on scroll
   ============================================ */

/* Base animation states - elements start hidden */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    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);
}

.reveal.reveal-left {
    transform: translateX(-60px);
}

.reveal.reveal-right {
    transform: translateX(60px);
}

.reveal.reveal-scale {
    transform: scale(0.85);
}

.reveal.reveal-fade {
    transform: none;
}

.reveal.reveal-up {
    transform: translateY(60px);
}

/* Visible state */
.reveal.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Staggered delay classes */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-7 { transition-delay: 0.7s; }
.delay-8 { transition-delay: 0.8s; }

/* Hero-specific animations */
.hero-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
}

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

.hero-reveal.delay-hero-1 { transition-delay: 0.4s; }
.hero-reveal.delay-hero-2 { transition-delay: 0.7s; }
.hero-reveal.delay-hero-3 { transition-delay: 1.0s; }
.hero-reveal.delay-hero-4 { transition-delay: 1.3s; }

/* Card hover lift effect */
.card-hover {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* Image zoom on scroll */
.img-reveal {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Parallax-like floating elements */
.float-element {
    animation: float-gentle 6s ease-in-out infinite;
}

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

/* Text reveal - line by line */
.text-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Counter animation */
.counter-reveal {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Section divider reveal */
.divider-reveal {
    opacity: 0;
    width: 0;
    transition: opacity 0.8s ease 0.2s, width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.divider-reveal.visible {
    opacity: 1;
    width: 100%;
}

/* Staggered grid children */
.stagger-grid > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.stagger-grid.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-grid.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-grid.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-grid.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-grid.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-grid.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-grid.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-grid.visible > *:nth-child(8) { transition-delay: 0.4s; }
.stagger-grid.visible > *:nth-child(9) { transition-delay: 0.45s; }
.stagger-grid.visible > *:nth-child(10) { transition-delay: 0.5s; }
.stagger-grid.visible > *:nth-child(11) { transition-delay: 0.55s; }
.stagger-grid.visible > *:nth-child(12) { transition-delay: 0.6s; }

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

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal, .hero-reveal, .img-reveal, .text-reveal,
    .counter-reveal, .divider-reveal, .stagger-grid > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .float-element {
        animation: none;
    }
}