/* ===================================
   COMPONENT: Scroll Animation System
   BEM Block: animate-on-scroll (utility animations)
   Purpose: Intersection Observer animations for scroll reveals
   Dependencies: main.css for CSS variables
   =================================== */

/* Scroll Animation Classes - Performance optimized with will-change */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    will-change: auto; /* Remove hint after animation completes */
}

/* Fade animations */
.fade-in-up {
    transform: translateY(30px);
}

.fade-in-down {
    transform: translateY(-30px);
}

.fade-in-left {
    transform: translateX(-30px);
}

.fade-in-right {
    transform: translateX(30px);
}

.scale-in {
    transform: scale(0.9);
}

/* Stagger delays for sequential animations */
.stagger-delay-1 { transition-delay: 0.05s; animation-delay: 0.05s; }
.stagger-delay-2 { transition-delay: 0.1s; animation-delay: 0.1s; }
.stagger-delay-3 { transition-delay: 0.15s; animation-delay: 0.15s; }
.stagger-delay-4 { transition-delay: 0.2s; animation-delay: 0.2s; }
.stagger-delay-5 { transition-delay: 0.25s; animation-delay: 0.25s; }
.stagger-delay-6 { transition-delay: 0.3s; animation-delay: 0.3s; }
.stagger-delay-7 { transition-delay: 0.35s; animation-delay: 0.35s; }
.stagger-delay-8 { transition-delay: 0.4s; animation-delay: 0.4s; }
.stagger-delay-9 { transition-delay: 0.45s; animation-delay: 0.45s; }
.stagger-delay-10 { transition-delay: 0.5s; animation-delay: 0.5s; }

/* Hero section on-load animations */
.hero__mascot {
    animation: scaleIn 1.2s ease-out 0.6s both;
    will-change: transform, opacity;
}

/* Mobile-specific hero animations */
@media (max-width: 767px) {
    .hero__actions {
        animation: heroFadeInUp 1.0s ease-out 0.3s both;
        will-change: transform, opacity;
    }

    .hero__mascot {
        animation: mascotFadeInUp 1.2s ease-out 0.9s both !important;
    }
}

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

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

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

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
    
    .animate-on-scroll.animate {
        opacity: 1;
        transform: none;
    }
    
    .fade-in-up,
    .fade-in-down,
    .fade-in-left,
    .fade-in-right,
    .scale-in {
        transform: none;
    }
    
    .stagger-delay-1,
    .stagger-delay-2,
    .stagger-delay-3,
    .stagger-delay-4,
    .stagger-delay-5,
    .stagger-delay-6,
    .stagger-delay-7,
    .stagger-delay-8,
    .stagger-delay-9,
    .stagger-delay-10 {
        transition-delay: 0s;
    }
    
    .hero__actions,
    .hero__mascot {
        animation: none;
        opacity: 1;
        transform: none;
        will-change: auto;
    }
}