/* 
* CampusUdaan - Features Page Image Effects
* Beautiful image effects and animations for the features page
*/

/* ===== FEATURES OVERVIEW IMAGE EFFECTS ===== */
.overview-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
}

.overview-text {
    flex: 1;
    min-width: 300px;
}

.overview-image {
    flex: 1;
    min-width: 300px;
    position: relative;
    z-index: 1;
    transition: transform 0.5s ease;
}

/* Create decorative elements around the image */
.overview-image::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    z-index: -1;
    transition: all 0.3s ease;
}

.overview-image::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 40%;
    height: 40%;
    background: rgba(255, 127, 80, 0.1);
    border-radius: 10px;
    z-index: -1;
}

.overview-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.5s ease;
    transform-origin: center;
    position: relative;
    z-index: 2;
}

/* Hover effects */
.overview-image:hover {
    transform: translateY(-10px);
}

.overview-image:hover img {
    transform: scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.overview-image:hover::before {
    transform: translate(-5px, -5px);
    border-color: var(--secondary-color);
}

.overview-image:hover::after {
    transform: translate(5px, 5px);
    background: rgba(76, 175, 145, 0.1);
}

/* Add floating animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.overview-image {
    animation: float 6s ease-in-out infinite;
}

/* ===== ADVANCED FEATURES TAB IMAGES ===== */
.tab-image {
    position: relative;
    overflow: visible;
    border-radius: 12px;
    transition: all 0.5s ease;
    z-index: 1;
    perspective: 1000px;
    transform-style: preserve-3d;
    margin: 20px 0;
}

/* 3D Frame effect */
.tab-image::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    z-index: -1;
    border-radius: 15px;
    transform: translateZ(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
    transition: all 0.5s ease;
}

/* Glossy overlay */
.tab-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0) 50%, 
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: 10px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.tab-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.8s ease;
    transform-origin: center;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 3D hover effects */
.tab-image:hover {
    transform: rotateX(5deg) rotateY(5deg) translateY(-10px);
}

.tab-image:hover::before {
    transform: translateZ(-20px) scale(1.05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.tab-image:hover::after {
    opacity: 1;
}

.tab-image:hover img {
    transform: translateZ(20px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* Custom 3D effects for each tab */
#analytics .tab-image {
    transform-origin: center bottom;
}

#analytics .tab-image::before {
    background: linear-gradient(135deg, #4CAF91, #3d9a7e);
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

#integration .tab-image {
    transform-origin: center center;
}

#integration .tab-image::before {
    background: linear-gradient(135deg, #FF7F50, #ff6a3c);
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%);
}

#security .tab-image {
    transform-origin: center top;
}

#security .tab-image::before {
    background: linear-gradient(135deg, #4CAF91, #FF7F50);
    clip-path: polygon(0 5%, 100% 0, 95% 95%, 5% 100%);
}

/* Dynamic hover animations */
@keyframes floating-3d {
    0% {
        transform: translateZ(0) translateY(0) rotateX(0) rotateY(0);
    }
    50% {
        transform: translateZ(10px) translateY(-10px) rotateX(5deg) rotateY(3deg);
    }
    100% {
        transform: translateZ(0) translateY(0) rotateX(0) rotateY(0);
    }
}

/* Apply different animations to each tab */
#analytics .tab-image {
    animation: floating-3d 8s ease-in-out infinite;
}

#integration .tab-image {
    animation: floating-3d 10s ease-in-out infinite reverse;
}

#security .tab-image {
    animation: floating-3d 12s ease-in-out infinite;
}

/* Add shine effect */
@keyframes shine {
    0% {
        background-position: -100% 100%;
    }
    100% {
        background-position: 200% -100%;
    }
}

.tab-image::after {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%);
    background-size: 200% 200%;
    animation: shine 4s linear infinite;
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 992px) {
    .overview-content {
        flex-direction: column;
    }
    
    .overview-text, .overview-image {
        width: 100%;
    }
    
    .overview-image {
        margin: 0 auto 40px;
        max-width: 80%;
    }
    
    .tab-content-inner {
        flex-direction: column;
    }
    
    .tab-image, .tab-text {
        width: 100%;
    }
    
    .tab-image {
        margin: 0 auto 40px;
        max-width: 80%;
        /* Adjust 3D effect for tablets */
        perspective: 800px;
    }
    
    /* Reduce animation intensity for better performance */
    #analytics .tab-image,
    #integration .tab-image,
    #security .tab-image {
        animation-duration: 10s;
    }
}

@media (max-width: 768px) {
    .overview-image {
        max-width: 90%;
        margin-bottom: 50px;
    }
    
    .overview-image::before {
        top: -10px;
        left: -10px;
    }
    
    .overview-image::after {
        bottom: -10px;
        right: -10px;
        width: 30%;
        height: 30%;
    }
    
    .tab-image {
        max-width: 90%;
        margin-bottom: 40px;
        /* Adjust 3D effect for mobile */
        perspective: 600px;
    }
    
    .tab-image::before {
        top: -12px;
        left: -12px;
        right: -12px;
        bottom: -12px;
        opacity: 0.9;
    }
    
    /* Enhance visibility of clip-path shapes on mobile */
    #analytics .tab-image::before {
        clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
    }
    
    #integration .tab-image::before {
        clip-path: polygon(7% 0, 93% 0, 100% 100%, 0% 100%);
    }
    
    #security .tab-image::before {
        clip-path: polygon(0 7%, 100% 0, 93% 93%, 7% 100%);
    }
    
    /* Adjust hover effects for touch devices */
    .tab-image {
        transform: rotateX(3deg) rotateY(3deg) translateY(-5px);
    }
    
    .tab-image::after {
        opacity: 0.7;
    }
    
    .tab-image img {
        transform: translateZ(10px);
    }
}

@media (max-width: 576px) {
    .overview-image {
        max-width: 100%;
        margin-bottom: 40px;
    }
    
    .overview-image::before {
        top: -8px;
        left: -8px;
        border-width: 1px;
    }
    
    .overview-image::after {
        width: 25%;
        height: 25%;
        bottom: -8px;
        right: -8px;
    }
    
    .tab-image {
        max-width: 100%;
        margin-bottom: 30px;
        /* Further adjust 3D effect for small mobile */
        perspective: 500px;
    }
    
    .tab-image::before {
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    }
    
    /* Simplify animations for better performance on small devices */
    @keyframes floating-3d-mobile {
        0% {
            transform: translateZ(0) translateY(0);
        }
        50% {
            transform: translateZ(5px) translateY(-5px);
        }
        100% {
            transform: translateZ(0) translateY(0);
        }
    }
    
    #analytics .tab-image,
    #integration .tab-image,
    #security .tab-image {
        animation: floating-3d-mobile 8s ease-in-out infinite;
    }
    
    /* Ensure shine effect is visible */
    .tab-image::after {
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0) 0%, 
            rgba(255, 255, 255, 0.5) 50%, 
            rgba(255, 255, 255, 0) 100%);
    }
}