/* ===== SCROLL LOADING ANIMATIONS ===== */

/* Base animation classes */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px) rotateX(10deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* Fade In Up with 3D effect */
.fade-in-up {
    opacity: 0;
    transform: translateY(60px) rotateX(15deg) scale(0.95);
    transition: all 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-style: preserve-3d;
}

.fade-in-up.animate {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
}

/* Fade In Left with 3D rotation */
.fade-in-left {
    opacity: 0;
    transform: translateX(-80px) rotateY(25deg) scale(0.9);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.fade-in-left.animate {
    opacity: 1;
    transform: translateX(0) rotateY(0deg) scale(1);
}

/* Fade In Right with 3D rotation */
.fade-in-right {
    opacity: 0;
    transform: translateX(80px) rotateY(-25deg) scale(0.9);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.fade-in-right.animate {
    opacity: 1;
    transform: translateX(0) rotateY(0deg) scale(1);
}

/* Scale In with 3D depth */
.scale-in {
    opacity: 0;
    transform: scale(0.7) translateZ(-100px) rotateX(20deg);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.scale-in.animate {
    opacity: 1;
    transform: scale(1) translateZ(0) rotateX(0deg);
}

/* Flip In X with enhanced 3D */
.flip-in-x {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg) translateZ(-50px);
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center bottom;
    transform-style: preserve-3d;
}

.flip-in-x.animate {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) translateZ(0);
}

/* Slide In Bottom with 3D tilt */
.slide-in-bottom {
    opacity: 0;
    transform: translateY(100px) rotateX(30deg) scale(0.8);
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    transform-style: preserve-3d;
}

.slide-in-bottom.animate {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
}

/* Bounce In with 3D effect */
.bounce-in {
    opacity: 0;
    transform: scale(0.3) translateZ(-200px) rotateY(180deg);
    transition: all 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-style: preserve-3d;
}

.bounce-in.animate {
    opacity: 1;
    transform: scale(1) translateZ(0) rotateY(0deg);
}

/* Rotate In with enhanced 3D */
.rotate-in {
    opacity: 0;
    transform: rotate(-45deg) scale(0.5) translateZ(-150px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

.rotate-in.animate {
    opacity: 1;
    transform: rotate(0deg) scale(1) translateZ(0);
}

/* Stagger animation delays for multiple elements */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }

/* Special animations for specific elements */

/* Hero title animation */
.hero-title-animate {
    opacity: 0;
    transform: translateY(80px) rotateX(20deg) scale(0.9);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

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

/* Card hover enhancements with 3D */
.feature-card,
.academy-card,
.blog-card-item {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

.feature-card:hover,
.academy-card:hover,
.blog-card-item:hover {
    transform: translateY(-10px) rotateX(5deg) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Profile items animation */
.profile-item {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

.profile-item:hover {
    transform: translateX(10px) rotateY(5deg) scale(1.05);
}

/* Button 3D effects */
.btn-primary,
.btn-secondary,
.form-button,
.academy-form-button {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

.btn-primary:hover,
.btn-secondary:hover,
.form-button:hover,
.academy-form-button:hover {
    transform: translateY(-3px) rotateX(10deg) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Image 3D effects */
.trading-chart-img,
.profiles-illustration,
.security-illustration,
.capital-illustration,
.phone-mockup {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

.trading-chart-img:hover,
.profiles-illustration:hover,
.security-illustration:hover,
.capital-illustration:hover,
.phone-mockup:hover {
    transform: rotateY(5deg) rotateX(5deg) scale(1.05);
}

/* Icon animations */
.card-icon,
.tech-icon,
.infra-icon-container,
.feature-icon {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

.card-icon:hover,
.tech-icon:hover,
.infra-icon-container:hover,
.feature-icon:hover {
    transform: rotateY(360deg) scale(1.1);
}

/* Parallax effect for background elements */
.hero-bg {
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Loading animation for the entire page */
@keyframes pageLoad {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body {
    animation: pageLoad 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@media (max-width: 1199px) {
    .commissions-section {
        margin-bottom: 30px;
    }

    section.featured-profiles-section {
        margin-top: 50px;
    }

    section.social-trading-section {
        padding: 0px 90px;
    }
}

/* Enhanced mobile responsiveness for animations */
@media (max-width: 768px) {
    .animate-on-scroll,
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .scale-in,
    .flip-in-x,
    .slide-in-bottom,
    .bounce-in,
    .rotate-in {
        transform: translateY(30px) scale(0.95);
    }
    
    .animate-on-scroll.animate,
    .fade-in-up.animate,
    .fade-in-left.animate,
    .fade-in-right.animate,
    .scale-in.animate,
    .flip-in-x.animate,
    .slide-in-bottom.animate,
    .bounce-in.animate,
    .rotate-in.animate {
        transform: translateY(0) scale(1);
    }
    
    /* Reduce 3D effects on mobile for performance */
    .feature-card:hover,
    .academy-card:hover,
    .blog-card-item:hover {
        transform: translateY(-5px) scale(1.02);
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .scale-in,
    .flip-in-x,
    .slide-in-bottom,
    .bounce-in,
    .rotate-in {
        transition: opacity 0.3s ease;
        transform: none;
    }
    
    .animate-on-scroll.animate,
    .fade-in-up.animate,
    .fade-in-left.animate,
    .fade-in-right.animate,
    .scale-in.animate,
    .flip-in-x.animate,
    .slide-in-bottom.animate,
    .bounce-in.animate,
    .rotate-in.animate {
        opacity: 1;
        transform: none;
    }
}