/**
 * =========================================================================
 * OPTIMIZED CAROUSEL STYLES - Performance-First CSS
 * =========================================================================
 * 
 * Performance optimizations:
 * - GPU-accelerated transforms only (transform, opacity)
 * - No expensive properties (box-shadow, filter limited)
 * - Containment for layout isolation
 * - Will-change for animation hints
 * - Hardware acceleration triggers
 * - Reduced paint areas
 * - Optimized for 60fps
 */

/* ===== CAROUSEL CONTAINER ===== */

.curved-image-container {
    /* Layout containment for performance */
    contain: layout style paint;
    
    /* Position and sizing */
    position: relative;
    width: 100%;
    height: 100%;
    max-width: clamp(600px, 60vw, 800px);
    max-height: clamp(500px, 50vh, 700px);
    
    /* Border radius */
    border-radius: clamp(20px, 3vw, 30px);
    border-bottom-left-radius: clamp(80px, 10vw, 120px);
    
    /* Optimize rendering */
    overflow: hidden;
    background: #f8f9fa;
    
    /* Force GPU layer */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ===== IMAGE DISPLAY ===== */

.image-display {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    border-bottom-left-radius: 120px;
    overflow: hidden;
    z-index: 2;
    background: white;
    
    /* Performance optimization */
    contain: strict;
}

/* Carousel container for multiple images */
.carousel-container {
    position: relative;
}

.carousel-container .carousel-image {
    position: absolute;
    top: 0;
    left: 0;
}

/* ===== SHOWCASE IMAGES ===== */

.showcase-image {
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Image rendering */
    object-fit: cover;
    object-position: center;
    
    /* Initial state */
    opacity: 0;
    z-index: 1;
    
    /* GPU-accelerated transitions - ONLY transform and opacity */
    /* Slower dissolve transition for smooth effect */
    transition: 
        opacity 800ms cubic-bezier(0.4, 0.0, 0.2, 1),
        transform 800ms cubic-bezier(0.4, 0.0, 0.2, 1);
    
    /* Force GPU rendering */
    transform: translate3d(0, 0, 0) scale(1);
    backface-visibility: hidden;
    
    /* Optimize image quality */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Subtle enhancement without filter (better performance) */
    /* Use img attributes or server-side processing instead of CSS filters */
}

/* Active image state */
.showcase-image.active {
    opacity: 1;
    z-index: 2;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Fade out transition */
.showcase-image.fade-out {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.95);
    z-index: 1;
}

/* Fade in transition */
.showcase-image.fade-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    z-index: 2;
}

/* Remove will-change when not transitioning for better memory management */
.showcase-image:not(.active):not(.fade-out):not(.fade-in) {
    will-change: auto;
}

/* ===== NAVIGATION ARROWS ===== */

.showcase-arrow {
    /* Positioning */
    position: absolute;
    top: 50%;
    z-index: 10;
    
    /* Size and shape */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    /* Styling */
    background: #002B49;
    border: 2px solid #002B49;
    box-shadow: 0 4px 12px rgba(0, 43, 73, 0.4);
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Interaction */
    cursor: pointer;
    opacity: 0.8;
    pointer-events: auto;
    
    /* GPU-accelerated transition */
    transition: 
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* GPU optimization */
    transform: translateY(-50%) translateZ(0);
    backface-visibility: hidden;
}

.showcase-arrow-prev {
    left: 20px;
}

.showcase-arrow-next {
    right: 20px;
}

/* Arrow hover state */
.showcase-arrow:hover {
    background: #003d6b;
    border-color: #003d6b;
    opacity: 1;
    transform: translateY(-50%) translateZ(0) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 43, 73, 0.6);
}

/* Arrow active state */
.showcase-arrow:active {
    transform: translateY(-50%) translateZ(0) scale(0.95);
}

/* Arrow icon */
.showcase-arrow svg {
    color: #F1C400;
    transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 24px;
    height: 24px;
}

.showcase-arrow:hover svg {
    color: #F1C400;
}

/* Ensure arrows are visible on container hover */
.curved-image-container:hover .showcase-arrow {
    opacity: 1;
}

/* ===== CAROUSEL INDICATORS ===== */

.carousel-indicators {
    /* Positioning */
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 10;
    
    /* Layout */
    display: flex;
    gap: 12px;
    align-items: center;
    
    /* GPU optimization */
    transform: translateX(-50%) translateZ(0);
    backface-visibility: hidden;
}

.carousel-indicator {
    /* Size */
    width: 10px;
    height: 10px;
    
    /* Styling */
    background: rgba(0, 43, 73, 0.3);
    border: 2px solid #002B49;
    border-radius: 50%;
    
    /* Reset button styles */
    padding: 0;
    margin: 0;
    outline: none;
    
    /* Interaction */
    cursor: pointer;
    
    /* GPU-accelerated transition */
    transition: 
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* GPU optimization */
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
}

.carousel-indicator:hover {
    background: #002B49;
    border-color: #002B49;
    transform: translateZ(0) scale(1.2);
}

.carousel-indicator.active {
    background: #002B49;
    border-color: #002B49;
    transform: translateZ(0) scale(1.3);
    box-shadow: 0 0 8px rgba(0, 43, 73, 0.8);
}

.carousel-indicator:focus {
    outline: 2px solid rgba(0, 43, 73, 0.8);
    outline-offset: 2px;
}

/* ===== GOLDEN BORDER (Optimized) ===== */

.golden-border {
    position: absolute;
    top: -18px;
    left: -18px;
    right: -18px;
    bottom: -18px;
    
    /* Border radius matching container */
    border-radius: clamp(25px, 4vw, 48px);
    border-bottom-left-radius: clamp(70px, 12vw, 138px);
    
    /* Styling */
    background: #F1C400;
    border: clamp(3px, 0.5vw, 6px) solid #F1C400;
    z-index: 1;
    
    /* Optimized shadow - limited for performance */
    box-shadow: 
        0 0 20px rgba(241, 196, 0, 0.6),
        0 0 40px rgba(241, 196, 0, 0.3);
    
    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* Subtle pulse animation */
    animation: goldenPulse 3s ease-in-out infinite alternate;
}

/* Optimized golden pulse animation - GPU only */
@keyframes goldenPulse {
    0% {
        opacity: 0.9;
        transform: translateZ(0) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateZ(0) scale(1.01);
    }
}

/* Golden border gradient effect */
.golden-border::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    
    /* Border radius */
    border-radius: 51px;
    border-bottom-left-radius: 141px;
    
    /* Gradient */
    background: linear-gradient(
        45deg, 
        #F1C400 0%, 
        #FFD700 25%, 
        #FFA500 50%, 
        #FFD700 75%, 
        #F1C400 100%
    );
    background-size: 300% 300%;
    
    /* Z-index */
    z-index: -1;
    
    /* Subtle flow animation */
    animation: goldenFlow 4s linear infinite;
    
    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* GPU-accelerated gradient animation */
@keyframes goldenFlow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* Golden glow effect (simplified for performance) */
.golden-glow {
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    
    /* Border radius */
    border-radius: 55px;
    border-bottom-left-radius: 145px;
    
    /* Radial gradient glow */
    background: radial-gradient(
        circle, 
        rgba(241, 196, 0, 0.6) 0%,
        rgba(255, 215, 0, 0.4) 30%,
        rgba(255, 165, 0, 0.2) 60%,
        transparent 100%
    );
    
    /* Blur effect - use sparingly */
    filter: blur(15px);
    
    /* Z-index */
    z-index: -2;
    
    /* Subtle glow animation */
    animation: goldenGlow 4s ease-in-out infinite;
    
    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimized glow animation */
@keyframes goldenGlow {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

/* ===== IMAGE OVERLAY ===== */

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 30px;
    
    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        transparent 100%
    );
    z-index: -1;
}

.content-label {
    position: relative;
    color: white;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet adjustments */
@media (max-width: 1024px) {
    .curved-image-container {
        max-width: 90vw;
        max-height: 60vh;
    }
    
    .showcase-arrow {
        width: 45px;
        height: 45px;
    }
    
    .showcase-arrow-prev {
        left: 15px;
    }
    
    .showcase-arrow-next {
        right: 15px;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .curved-image-container {
        max-width: 95vw;
        max-height: 50vh;
        border-bottom-left-radius: clamp(40px, 8vw, 60px);
    }
    
    .showcase-arrow {
        width: 40px;
        height: 40px;
    }
    
    .showcase-arrow svg {
        width: 20px;
        height: 20px;
    }
    
    .showcase-arrow-prev {
        left: 10px;
    }
    
    .showcase-arrow-next {
        right: 10px;
    }
    
    .carousel-indicators {
        bottom: 15px;
        gap: 10px;
    }
    
    .carousel-indicator {
        width: 8px;
        height: 8px;
    }
    
    .golden-border {
        top: -12px;
        left: -12px;
        right: -12px;
        bottom: -12px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .curved-image-container {
        border-bottom-left-radius: 40px;
    }
    
    .showcase-arrow {
        width: 36px;
        height: 36px;
    }
    
    .carousel-indicators {
        bottom: 10px;
        gap: 8px;
    }
}

/* ===== ACCESSIBILITY ===== */

/* Focus styles for keyboard navigation */
.showcase-arrow:focus-visible {
    outline: 3px solid rgba(0, 102, 204, 0.8);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .showcase-image,
    .showcase-arrow,
    .carousel-indicator,
    .golden-border,
    .golden-border::before,
    .golden-glow {
        animation: none;
        transition: none;
    }
    
    .showcase-image {
        transition: opacity 150ms ease;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .showcase-arrow {
        border: 3px solid currentColor;
        background: white;
    }
    
    .carousel-indicator {
        border: 2px solid currentColor;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Prevent layout shifts during image load */
.image-display::before {
    content: '';
    display: block;
    padding-top: 100%; /* 1:1 aspect ratio */
}

/* Optimize for print */
@media print {
    .showcase-arrow,
    .carousel-indicators,
    .golden-border,
    .golden-glow {
        display: none;
    }
    
    .showcase-image:not(.active) {
        display: none;
    }
}