/* ------ IMAGE INTEGRATION STYLES ------ */

/* Hero Background Image */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    filter: brightness(0.7) contrast(1.1);
    transition: all var(--duration-xl) var(--ease-out-cubic);
}

.hero:hover .hero-bg-image {
    transform: scale(1.02);
    filter: brightness(0.8) contrast(1.2);
}

/* Section Images */
.section-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--duration-md) var(--ease-out-cubic);
}

.humanization-image img,
.innovation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
    display: block;
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 85, 255, 0.15) 0%, rgba(0, 204, 255, 0.08) 100%);
    border-radius: var(--radius-xl);
    transition: all var(--duration-md) var(--ease-out-cubic);
    opacity: 0.8;
}

.humanization-image:hover .section-image,
.innovation-image:hover .section-image {
    transform: scale(1.05);
}

.humanization-image:hover .image-overlay,
.innovation-image:hover .image-overlay {
    background: linear-gradient(135deg, rgba(0, 85, 255, 0.25) 0%, rgba(0, 204, 255, 0.15) 100%);
    opacity: 0.9;
}

/* CTA Background Image */
.cta-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    z-index: 0;
    filter: brightness(0.4) blur(2px);
    transition: all var(--duration-xl) var(--ease-out-cubic);
}

.final-cta-section:hover .cta-bg-image {
    filter: brightness(0.5) blur(1px);
    transform: scale(1.02);
}

/* Enhanced Visual Container Styling */
.visual-container {
    position: relative;
    padding: 0;
}

.humanization-visual .visual-container,
.innovation-visual {
    background: transparent;
}

/* Image Loading States */
.section-image,
.hero-bg-image,
.cta-bg-image {
    opacity: 0;
    animation: imageLoad 1s ease-out forwards;
}

@keyframes imageLoad {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Image Positioning Adjustments */
.innovation-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.tech-showcase {
    margin-top: 0;
}

/* Responsive Image Adjustments */
@media (max-width: 768px) {
    .section-image {
        height: 250px;
    }
    
    .humanization-image,
    .innovation-image {
        margin-bottom: var(--space-md);
    }
    
    .innovation-visual {
        gap: var(--space-md);
    }
}

@media (max-width: 576px) {
    .section-image {
        height: 200px;
        border-radius: var(--radius-lg);
    }
    
    .humanization-image,
    .innovation-image {
        border-radius: var(--radius-lg);
    }
    
    .image-overlay {
        border-radius: var(--radius-lg);
    }
}

/* Enhanced Image Focus States for Accessibility */
.humanization-image:focus-within,
.innovation-image:focus-within {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

/* Optimized for High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .section-image,
    .hero-bg-image,
    .cta-bg-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print Styles for Images */
@media print {
    .hero-bg-image,
    .cta-bg-image {
        display: none;
    }
    
    .section-image {
        box-shadow: none;
        border: 1px solid var(--gray-300);
    }
    
    .image-overlay {
        display: none;
    }
}
