/* ============================================================================
   UNIFIED ANIMATION SYSTEM CSS
   ============================================================================ */

/* Base animation setup - applies to all animated elements */
[data-animation] {
    opacity: 0;
    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);
    will-change: opacity, transform;
}

/* Visible state - all animations end here */
[data-animation].is-visible {
    opacity: 1;
    transform: none !important;
}

/* ============================================================================
   FADE ANIMATIONS
   ============================================================================ */

/* Basic fade in */
[data-animation="fade-in"] {
    transform: translateY(20px);
}

/* Fade in from bottom (most common) */
[data-animation="fade-in-up"] {
    transform: translateY(40px);
}

/* Fade in from top */
[data-animation="fade-in-down"] {
    transform: translateY(-40px);
}

/* Fade in from left */
[data-animation="fade-in-left"] {
    transform: translateX(-40px);
}

/* Fade in from right */
[data-animation="fade-in-right"] {
    transform: translateX(40px);
}

/* ============================================================================
   SCALE ANIMATIONS
   ============================================================================ */

/* Zoom in effect */
[data-animation="zoom-in"] {
    transform: scale(0.85);
}

/* Zoom out effect */
[data-animation="zoom-out"] {
    transform: scale(1.15);
}

/* Subtle zoom in */
[data-animation="zoom-in-subtle"] {
    transform: scale(0.95);
}

/* ============================================================================
   ROTATION ANIMATIONS
   ============================================================================ */

/* Rotate in */
[data-animation="rotate-in"] {
    transform: rotate(-180deg) scale(0.8);
}

/* Flip in X */
[data-animation="flip-in-x"] {
    transform: perspective(400px) rotateX(-90deg);
}

/* Flip in Y */
[data-animation="flip-in-y"] {
    transform: perspective(400px) rotateY(-90deg);
}

/* ============================================================================
   COMBINED ANIMATIONS
   ============================================================================ */

/* Slide up and fade */
[data-animation="slide-fade-up"] {
    transform: translateY(60px) scale(0.95);
}

/* Slide left and fade */
[data-animation="slide-fade-left"] {
    transform: translateX(-60px) scale(0.95);
}

/* Slide right and fade */
[data-animation="slide-fade-right"] {
    transform: translateX(60px) scale(0.95);
}

/* Bounce in */
[data-animation="bounce-in"] {
    transform: scale(0.3);
    transition: opacity 0.8s ease,
                transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================================================
   STAGGER ANIMATIONS (for lists and grids)
   ============================================================================ */

/* Elements with stagger will have increasing delays automatically */
[data-animation][data-animation-delay] {
    transition-delay: var(--animation-delay, 0ms);
}

/* ============================================================================
   RESPONSIVE ANIMATIONS
   ============================================================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    [data-animation] {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    
    [data-animation]:not(.is-visible) {
        opacity: 1;
        transform: none !important;
    }
}

/* Simplified animations on smaller screens */
@media (max-width: 768px) {
    [data-animation] {
        transition-duration: 0.6s;
    }
    
    /* Reduce transform distances on mobile */
    [data-animation="fade-in-up"],
    [data-animation="fade-in-down"] {
        transform: translateY(20px);
    }
    
    [data-animation="fade-in-left"],
    [data-animation="fade-in-right"] {
        transform: translateX(20px);
    }
    
    [data-animation="slide-fade-up"],
    [data-animation="slide-fade-left"],
    [data-animation="slide-fade-right"] {
        transform: translateY(30px) scale(0.98);
    }
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* GPU acceleration for better performance */
[data-animation] {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* ============================================================================
   SPECIAL EFFECTS
   ============================================================================ */

/* Glowing effect for special elements */
[data-animation="glow-in"] {
    transform: scale(0.9);
    filter: blur(2px);
    transition: opacity 0.8s ease,
                transform 0.8s ease,
                filter 0.8s ease;
}

[data-animation="glow-in"].is-visible {
    filter: blur(0px);
}

/* Typewriter effect for text */
[data-animation="typewriter"] {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--accent-color, #00A9FF);
    transition: width 1.5s steps(40, end),
                border-color 0.75s step-end;
}

[data-animation="typewriter"].is-visible {
    width: 100%;
    border-color: transparent;
}

/* ============================================================================
   DEBUGGING (remove in production)
   ============================================================================ */

/* Uncomment this to see all animated elements */
/*
[data-animation]:not(.is-visible) {
    outline: 2px dashed red !important;
}

[data-animation].is-visible {
    outline: 2px dashed green !important;
}
*/