/**
 * Scroll Animation Styles
 * 
 * CSS classes and transitions for scroll-triggered animations
 * Works with the TeeqCore Scroll Animation System
 * 
 * @package TeeqCore
 * @since 1.0.0
 */

/* Base Animation Classes */
.animate-in {
    opacity: 1 !important;
    transform: none !important;
}

/* Scroll Animation Elements */
[data-scroll-animate] {
    opacity: 0;
    transition: all 0.6s ease-out;
    will-change: opacity, transform;
}

/* Animation Types - Initial States (applied via JavaScript) */
[data-animation="fade-up"] {
    transform: translateY(30px);
}

[data-animation="fade-down"] {
    transform: translateY(-30px);
}

[data-animation="fade-left"] {
    transform: translateX(-30px);
}

[data-animation="fade-right"] {
    transform: translateX(30px);
}

[data-animation="scale-up"] {
    transform: scale(0.95);
}

[data-animation="fade-in"] {
    transform: scale(1);
}

/* Legacy Animation Support */
.hero-scroll-animate,
.cta-scroll-animate,
.partner-scroll-animate,
.component-scroll-animate,
.section-scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.hero-scroll-animate.animate-in,
.cta-scroll-animate.animate-in,
.partner-scroll-animate.animate-in,
.component-scroll-animate.animate-in,
.section-scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Animation Support */
[data-stagger-delay] {
    transition-delay: var(--stagger-delay, 0ms);
}

/* Performance Optimizations */
@media (prefers-reduced-motion: reduce) {

    [data-scroll-animate],
    .hero-scroll-animate,
    .cta-scroll-animate,
    .partner-scroll-animate,
    .component-scroll-animate,
    .section-scroll-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Utility Classes for Quick Animations */
.scroll-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

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

.scroll-fade-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease-out;
}

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

.scroll-fade-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease-out;
}

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

.scroll-scale-up {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.6s ease-out;
}

.scroll-scale-up.animate-in {
    opacity: 1;
    transform: scale(1);
}

/* Special Effects */
.scroll-blur-in {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.scroll-blur-in.animate-in {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Grid/List Item Stagger Support */
.scroll-stagger-container .scroll-stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-out;
}

.scroll-stagger-container .scroll-stagger-item:nth-child(1) {
    transition-delay: 0ms;
}

.scroll-stagger-container .scroll-stagger-item:nth-child(2) {
    transition-delay: 100ms;
}

.scroll-stagger-container .scroll-stagger-item:nth-child(3) {
    transition-delay: 200ms;
}

.scroll-stagger-container .scroll-stagger-item:nth-child(4) {
    transition-delay: 300ms;
}

.scroll-stagger-container .scroll-stagger-item:nth-child(5) {
    transition-delay: 400ms;
}

.scroll-stagger-container .scroll-stagger-item:nth-child(6) {
    transition-delay: 500ms;
}

.scroll-stagger-container .scroll-stagger-item:nth-child(7) {
    transition-delay: 600ms;
}

.scroll-stagger-container .scroll-stagger-item:nth-child(8) {
    transition-delay: 700ms;
}

.scroll-stagger-container.animate-in .scroll-stagger-item {
    opacity: 1;
    transform: translateY(0);
}

/* Loading States */
.scroll-animations-loading [data-scroll-animate] {
    opacity: 0;
    pointer-events: none;
}

.scroll-animations-ready [data-scroll-animate] {
    pointer-events: auto;
}

/* Debug Mode Styles */
.scroll-animations-debug [data-scroll-animate] {
    outline: 2px dashed rgba(255, 0, 0, 0.3);
    outline-offset: 2px;
}

.scroll-animations-debug [data-scroll-animate]:before {
    content: attr(data-animation);
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    z-index: 9999;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    [data-scroll-animate] {
        transition-duration: 0.4s;
    }

    .scroll-stagger-container .scroll-stagger-item {
        transition-duration: 0.3s;
    }

    .scroll-stagger-container .scroll-stagger-item:nth-child(n+4) {
        transition-delay: 0ms;
        /* Reduce delays on mobile */
    }
}

/* High Performance Mode */
@media (max-width: 480px) {

    [data-scroll-animate],
    .hero-scroll-animate,
    .cta-scroll-animate,
    .partner-scroll-animate,
    .component-scroll-animate,
    .section-scroll-animate {
        transition-duration: 0.3s;
    }
}

/* Print Styles */
@media print {

    [data-scroll-animate],
    .hero-scroll-animate,
    .cta-scroll-animate,
    .partner-scroll-animate,
    .component-scroll-animate,
    .section-scroll-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}