/* PERFORMANCE OPTIMIZED CSS */
/* Mobile contact centering fix */
@media (max-width: 768px) {
    .awesome-contact {
        text-align: center !important;
        padding: 12px 0 10px 0 !important;
        display: block !important;
        width: 100% !important;
    }
    
    #page-contact .container {
        text-align: center !important;
    }
    
    #page-contact .col-md-4 {
        text-align: center !important;
        margin: 0 auto !important;
        float: none !important;
        width: 100% !important;
        display: block !important;
        padding: 0 15px !important;
    }
    
    #page-contact .col-md-4 p {
        text-align: center !important;
        margin: 0 auto !important;
        max-width: 300px !important;
    }
    
    #page-contact .col-md-4 a {
        text-align: center !important;
        display: inline-block !important;
    }
    
    #page-contact .awesome-contact + p {
        text-align: center !important;
    }
}

/* Developer credit styling */
.footer-credits-copyright a[href*="100x.co.il"] {
    color: #777 !important;
    font-size: 11px !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
    opacity: 0.8;
}

.footer-credits-copyright a[href*="100x.co.il"]:hover {
    color: #999 !important;
    opacity: 1;
}

@media (max-width: 768px) {
    .footer-credits-copyright a[href*="100x.co.il"] {
        font-size: 10px !important;
        margin-top: 5px !important;
        display: inline-block;
    }
}

/* Video optimization */
.featured-work-photo video.img-correction {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.featured-work-photo:hover video.img-correction {
    transform: scale(1.05);
}

.featured-work-photo {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.featured-video {
    cursor: pointer;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

.featured-work-photo:hover .featured-video {
    opacity: 1;
}

/* Grid video optimization - CRITICAL FOR PERFORMANCE */
#page-home #wall video {
    opacity: 0.4 !important;
    filter: brightness(0.6) contrast(0.8) !important;
    transition: all 0.3s ease !important;
}

#page-home #wall video:hover {
    opacity: 1 !important;
    filter: brightness(1) contrast(1) !important;
}

/* Featured work videos should not be affected by grid styles */
#page-featured-work video,
.featured-work-photo video {
    opacity: 1 !important;
    filter: none !important;
    transition: opacity 0.3s ease !important;
    visibility: visible !important;
    background: #f0f0f0 !important;
}

#page-featured-work video:hover,
.featured-work-photo:hover video {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.05) !important;
}

/* Video modal styling */
#video-modal video,
#modal-video {
    opacity: 1 !important;
    filter: none !important;
}

/* Gallery styling - optimized */
.video-gallery-container .gallery-thumbnails {
    scrollbar-width: thin;
    scrollbar-color: #00afea transparent;
}

.video-gallery-container .gallery-thumbnails::-webkit-scrollbar {
    height: 8px;
}

.video-gallery-container .gallery-thumbnails::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.video-gallery-container .gallery-thumbnails::-webkit-scrollbar-thumb {
    background: #00afea;
    border-radius: 4px;
}

.video-gallery-container .gallery-thumbnails::-webkit-scrollbar-thumb:hover {
    background: #0099cc;
}

.gallery-thumb {
    transition: all 0.3s ease !important;
}

.gallery-thumb:hover {
    transform: scale(1.05) !important;
    border: 2px solid #00afea !important;
    box-shadow: 0 4px 15px rgba(0,175,234,0.3) !important;
}

/* Mobile gallery responsive */
@media only screen and (max-width: 768px) {
    .video-gallery-container {
        padding: 15px !important;
    }
    
    .gallery-thumb {
        width: 100px !important;
        height: 70px !important;
        min-width: 100px !important;
    }
    
    .video-gallery-container h3 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    #modal-image {
        max-width: 95% !important;
        max-height: 85% !important;
    }
    
    #gallery-title {
        font-size: 14px !important;
    }
    
    #toggle-gallery {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    
    #back-to-video {
        font-size: 12px !important;
        padding: 6px 12px !important;
        top: 10px !important;
        left: 10px !important;
    }
    
    #image-navigation {
        bottom: 10px !important;
        gap: 8px !important;
    }
    
    #prev-modal-image, #next-modal-image {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
    }
    
    #modal-image-counter {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    
    .gallery-header {
        margin-bottom: 10px !important;
    }
    
    .gallery-content-wrapper {
        max-height: 150px !important;
    }
}

/* Title positioning optimization */
.titleOT {
    will-change: transform;
}

@media only screen and (max-width: 768px) {
    .titleOT {
        top: 30% !important;
        width: 90% !important;
        max-width: 90% !important;
        margin-left: -45% !important;
        padding: 0 20px !important;
    }
}

@media only screen and (max-width: 480px) {
    .titleOT {
        top: 25% !important;
        width: 95% !important;
        max-width: 95% !important;
        margin-left: -47.5% !important;
        padding: 0 10px !important;
    }
}

/* Navigation optimization */
nav#home-navigation {
    margin-bottom: 550px !important;
    will-change: transform;
}

@media only screen and (max-width: 880px) {
    nav#home-navigation {
        margin-bottom: 450px !important;
    }
}

@media only screen and (max-width: 480px) {
    nav#home-navigation {
        margin-bottom: 400px !important;
        width: 300px !important;
        margin-left: -150px !important;
    }
}

/* iPhone SE specific */
@media only screen and (max-width: 375px) and (max-height: 667px) {
    nav#home-navigation {
        margin-bottom: 280px !important;
        width: 350px;
        margin-left: -175px;
    }
    
    nav#home-navigation .nav-button {
        margin: 2px;
        padding: 8px 14px;
        font-size: 11px;
        letter-spacing: 0.1em;
    }
}

@media only screen and (max-width: 320px) {
    nav#home-navigation {
        margin-bottom: 260px !important;
        width: 300px;
        margin-left: -150px;
    }
    
    nav#home-navigation .nav-button {
        margin: 2px;
        padding: 6px 12px;
        font-size: 10px;
        letter-spacing: 0.05em;
    }
}

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

@keyframes fadeInImage {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Modal optimization */
.modal-loading {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.modal-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal-error {
    color: #ff6b6b !important;
    font-weight: bold;
}

/* Gallery container improvements */
.video-gallery-container {
    max-height: 40vh;
    transition: all 0.3s ease;
}

.video-gallery-container:hover {
    background: rgba(0,0,0,0.95);
}

/* Enhanced modal navigation */
#prev-modal-image:hover, #next-modal-image:hover {
    background: rgba(255,255,255,1) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

#back-to-video:hover {
    background: rgba(0,175,234,0.9) !important;
    color: white !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(0,175,234,0.4) !important;
}

#modal-image-container {
    backdrop-filter: blur(2px);
}

#modal-image {
    animation: fadeInImage 0.3s ease-in-out;
}

/* Gallery toggle animation */
.gallery-content-wrapper {
    transition: all 0.3s ease !important;
    overflow: hidden;
}

.gallery-header {
    transition: opacity 0.3s ease;
}

#gallery-title {
    transition: opacity 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

#toggle-gallery {
    transition: all 0.3s ease;
}

#toggle-gallery:hover {
    background: rgba(255,255,255,0.3) !important;
    transform: scale(1.05);
}