/* Custom Smooth UI Animations */
/* Replaces AOS with lighter, custom animations */
/* 
 * Usage Examples:
 * <div data-aos="fade-up">Content</div>
 * <div data-aos="fade-left" data-aos-delay="100">Content</div>
 * <div data-aos="zoom-in" data-aos-duration="800">Content</div>
 * 
 * Supported animations: fade-up, fade-down, fade-left, fade-right, fade-in, zoom-in, zoom-out
 * Delays: 50ms to 500ms (in 50ms increments)
 * Durations: 200ms, 400ms, 600ms, 800ms, 1000ms
 */

/* Base animation setup */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
}

/* Fade animations */
[data-aos="fade-up"] {
    transform: translate3d(0, 30px, 0);
}

[data-aos="fade-down"] {
    transform: translate3d(0, -30px, 0);
}

[data-aos="fade-left"] {
    transform: translate3d(30px, 0, 0);
}

[data-aos="fade-right"] {
    transform: translate3d(-30px, 0, 0);
}

[data-aos="fade-in"] {
    opacity: 0;
}

[data-aos="zoom-in"] {
    transform: scale(0.95);
}

[data-aos="zoom-out"] {
    transform: scale(1.05);
}

/* Delay classes */
[data-aos-delay="50"] { transition-delay: 50ms; }
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos-delay="250"] { transition-delay: 250ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos-delay="350"] { transition-delay: 350ms; }
[data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos-delay="450"] { transition-delay: 450ms; }
[data-aos-delay="500"] { transition-delay: 500ms; }

/* Duration classes */
[data-aos-duration="200"] { transition-duration: 200ms; }
[data-aos-duration="400"] { transition-duration: 400ms; }
[data-aos-duration="600"] { transition-duration: 600ms; }
[data-aos-duration="800"] { transition-duration: 800ms; }
[data-aos-duration="1000"] { transition-duration: 1000ms; }

/* Disable animations on mobile for better performance */
@media (max-width: 768px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Splash Screen Styles */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0066CC 0%, #00A8E8 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.splash-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.splash-logo {
    animation: splash-zoom 1s ease-out;
}

.splash-logo svg {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
}

.splash-logo path {
    fill: white;
}

.splash-text {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    margin-top: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: splash-fade-in 0.8s ease-out 0.3s both;
}

.splash-tagline {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-top: 0.5rem;
    font-weight: 500;
    animation: splash-fade-in 0.8s ease-out 0.5s both;
}

.splash-loader {
    margin-top: 2rem;
    animation: splash-fade-in 0.8s ease-out 0.7s both;
}

.splash-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: splash-spin 0.8s linear infinite;
}

@keyframes splash-zoom {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes splash-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes splash-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Page transition */
body.page-loading {
    overflow: hidden;
}