/* Additional styles for animations and performance optimizations */

/* Animation classes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.products-item, .gallery-item, .about-image-wrapper, .about-details {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.products-item.animate, .gallery-item.animate, .about-image-wrapper.animate, .about-details.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Page load animation */
body {
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.page-loaded {
    opacity: 1;
}

/* Header logo sizing */
.navbar .nav-logo .header-logo {
    height: 60px;
    width: auto;
    transition: transform 0.3s ease;
}

.navbar .nav-logo:hover .header-logo {
    transform: scale(1.05);
}

/* Button hover effects */
.button, .submit-button {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.button:hover, .submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Gallery image hover effect refinement */
.gallery-section .gallery-item {
    overflow: hidden;
    box-shadow: var(--box-shadow-light);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.gallery-section .gallery-item:hover {
    box-shadow: var(--box-shadow-medium);
    transform: translateY(-5px);
}

/* Product card hover effect */
.products-section .products-list .products-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.products-section .products-list .products-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Mobile optimization refinements */
@media screen and (max-width: 900px) {
    .navbar .nav-logo .header-logo {
        height: 50px;
    }
    
    .hero-section .hero-details .title {
        font-size: 1.8rem;
    }
    
    .hero-section .hero-details .subtitle {
        font-size: 1.3rem;
    }
    
    .section-title {
        padding: 40px 0 60px;
    }
    
    .contact-section .contact-info-list,
    .contact-section .contact-form {
        padding: 25px;
    }
}

@media screen and (max-width: 640px) {
    .navbar .nav-logo .header-logo {
        height: 40px;
    }
    
    .hero-section .hero-details .buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .hero-section .hero-details .button {
        width: 100%;
        text-align: center;
    }
    
    .section-title {
        padding: 30px 0 40px;
    }
}

/* Performance optimizations */
img {
    will-change: transform;
}

.hero-section, .products-section, .other-section, .gallery-section, .contact-section {
    will-change: opacity;
}

/* Accessibility improvements */
.nav-link:focus, .button:focus, .social-link:focus, .form-input:focus, .submit-button:focus {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    header, footer, .buttons, .social-link-list {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .section-content {
        padding: 0;
        margin: 20px 0;
    }
    
    .hero-section, .about-section, .products-section, .other-section, .gallery-section, .contact-section {
        background: white;
        padding: 20px 0;
    }
}