/* Animation styles for theme interactions */

.animate-in {
    animation: fadeInUp 0.6s ease forwards;
}

.header.scrolled {
    background: rgba(26, 122, 138, 0.95);
    backdrop-filter: blur(10px);
}

.project-img {
    transition: transform 0.3s ease;
}

.btn-primary.loading,
.btn-secondary.loading {
    opacity: 0.7;
    pointer-events: none;
}

.btn-primary.loading::after,
.btn-secondary.loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* AOS Animation styles */
[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="fade-in"] {
    opacity: 0;
    transition: opacity 0.8s ease;
}

[data-aos="fade-in"].aos-animate {
    opacity: 1;
}

/* Smooth image loading */
.project-hero-img {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.project-hero-img.lazy-load {
    opacity: 1;
}

input.error,
textarea.error {
    border: 2px solid #e74c3c;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}

.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy.loaded {
    opacity: 1;
}

@media (max-width: 768px) {
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #1a7a8a;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        display: none;
    }
        
    .nav-menu li {
        margin: 10px 0;
    }
}