/* Showcase Image Styles */
.showcase-image {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* Real Sample - Natural photo */
.real-sample {
    background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=300&fit=crop');
    position: relative;
}

.real-sample::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(16, 185, 129, 0.3) 100%);
}

/* Fake Sample - AI generated face */
.fake-sample {
    background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop');
    position: relative;
}

.fake-sample::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(245, 158, 11, 0.3) 100%);
}

/* Deepfake Sample - Manipulated face */
.deepfake-sample {
    background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=300&fit=crop');
    position: relative;
}

.deepfake-sample::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(236, 72, 153, 0.3) 100%);
    animation: scan 3s infinite;
}

@keyframes scan {
    0% {
        background: linear-gradient(to bottom, transparent 0%, rgba(236, 72, 153, 0.3) 100%);
    }

    50% {
        background: linear-gradient(to bottom, rgba(236, 72, 153, 0.5) 0%, transparent 100%);
    }

    100% {
        background: linear-gradient(to bottom, transparent 0%, rgba(236, 72, 153, 0.3) 100%);
    }
}

/* AI Art Sample - Synthetic art */
.ai-art-sample {
    background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=300&fit=crop');
    position: relative;
}

.ai-art-sample::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(59, 130, 246, 0.3) 100%);
}