/**
 * NFT Quality Float Effects CSS
 * Utility classes and base styles for the quality float effects system
 */

/* Base container for quality float effects */
.quality-float-container {
    position: relative;
    overflow: hidden;
}

/* Base image styles */
.quality-float-image {
    transition: filter 0.3s ease;
}

/* Quality level classes */
.quality-pristine {
    filter: brightness(1.1) contrast(1.05) saturate(1.15) drop-shadow(0 0 3px rgba(0,255,136,0.3));
}

.quality-excellent {
    filter: brightness(1.05) contrast(1.02) saturate(1.1) blur(0.1px);
}

.quality-good {
    filter: brightness(0.95) contrast(1.15) saturate(0.9) blur(0.3px) sepia(0.05);
}

.quality-fair {
    filter: brightness(0.85) contrast(1.35) saturate(0.75) blur(0.8px) sepia(0.15) hue-rotate(3deg);
}

.quality-poor {
    filter: brightness(0.8) contrast(1.2) saturate(0.7) sepia(0.2) blur(1.2px) hue-rotate(3deg);
}

/* Overlay base */
.quality-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Quality indicators */
.quality-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
}

.quality-pristine .quality-indicator {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

.quality-excellent .quality-indicator {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.quality-good .quality-indicator {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.quality-fair .quality-indicator {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.quality-poor .quality-indicator {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Hover effects */
.quality-float-container:hover .quality-float-image {
    transform: scale(1.02);
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quality-overlay {
        /* Reduce overlay intensity on mobile for performance */
        opacity: 0.8;
    }
}

/* Animation classes */
.quality-reveal {
    animation: qualityReveal 0.5s ease-out;
}

@keyframes qualityReveal {
    from {
        filter: none;
        opacity: 0.8;
    }
    to {
        opacity: 1;
    }
}

/* Backward compatibility classes (deprecated) */
.wear-effects-container { @extend .quality-float-container; }
.wear-effects-image { @extend .quality-float-image; }
.wear-overlay { @extend .quality-overlay; }
.wear-pristine { @extend .quality-pristine; }
.wear-excellent { @extend .quality-excellent; }
.wear-good { @extend .quality-good; }
.wear-fair { @extend .quality-fair; }
.wear-poor { @extend .quality-poor; }
.wear-reveal { @extend .quality-reveal; }