/* Epoxy Flooring Pattern Styles */

/* Metallic Epoxy Pattern - Silver/Gray */
.epoxy-metallic-silver {
    background: 
        radial-gradient(circle at 20% 30%, rgba(200, 200, 220, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(180, 180, 200, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(160, 160, 180, 0.2) 0%, transparent 60%),
        linear-gradient(135deg, #2a3a4f 0%, #1e2a3a 50%, #2a3a4f 100%);
    background-size: 200% 200%, 150% 150%, 100% 100%, 100% 100%;
    animation: metallicFlow 8s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.epoxy-metallic-silver::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px),
        repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);
}

/* Metallic Epoxy Pattern - Gold/Bronze */
.epoxy-metallic-gold {
    background: 
        radial-gradient(circle at 30% 40%, rgba(220, 180, 100, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(200, 160, 80, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(180, 140, 60, 0.2) 0%, transparent 60%),
        linear-gradient(135deg, #3a2a1f 0%, #2a1f15 50%, #3a2a1f 100%);
    background-size: 200% 200%, 150% 150%, 100% 100%, 100% 100%;
    animation: metallicFlow 8s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.epoxy-metallic-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,220,150,0.03) 2px, rgba(255,220,150,0.03) 4px);
}

/* Flake Epoxy Pattern - Blue/Gray */
.epoxy-flake-blue {
    background: 
        radial-gradient(circle at 15% 25%, rgba(100, 150, 200, 0.6) 2px, transparent 2px),
        radial-gradient(circle at 85% 75%, rgba(80, 130, 180, 0.5) 3px, transparent 3px),
        radial-gradient(circle at 50% 50%, rgba(120, 170, 220, 0.4) 2px, transparent 2px),
        radial-gradient(circle at 25% 75%, rgba(90, 140, 190, 0.5) 2.5px, transparent 2.5px),
        radial-gradient(circle at 75% 25%, rgba(110, 160, 210, 0.4) 3px, transparent 3px),
        linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 50%, #1e3a5f 100%);
    background-size: 80px 80px, 100px 100px, 60px 60px, 90px 90px, 70px 70px, 100% 100%;
    position: relative;
}

.epoxy-flake-blue::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.02) 1px, rgba(255,255,255,0.02) 2px);
}

/* Solid Color Epoxy - Dark Blue */
.epoxy-solid-blue {
    background: 
        linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 50%, #1e3a5f 100%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 20px);
    position: relative;
    overflow: hidden;
}

.epoxy-solid-blue::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    animation: shine 6s ease-in-out infinite;
}

/* Decorative Flake - Multi-Color */
.epoxy-flake-multi {
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 100, 100, 0.5) 3px, transparent 3px),
        radial-gradient(circle at 80% 70%, rgba(100, 200, 255, 0.5) 2.5px, transparent 2.5px),
        radial-gradient(circle at 50% 50%, rgba(255, 200, 100, 0.4) 2px, transparent 2px),
        radial-gradient(circle at 30% 80%, rgba(150, 255, 150, 0.4) 3px, transparent 3px),
        radial-gradient(circle at 70% 20%, rgba(200, 150, 255, 0.4) 2.5px, transparent 2.5px),
        linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 50%, #2a2a3a 100%);
    background-size: 60px 60px, 80px 80px, 50px 50px, 70px 70px, 65px 65px, 100% 100%;
    position: relative;
}

/* Industrial/Warehouse Pattern */
.epoxy-industrial {
    background: 
        repeating-linear-gradient(90deg, transparent, transparent 98%, rgba(255,255,255,0.03) 98%, rgba(255,255,255,0.03) 100%),
        repeating-linear-gradient(0deg, transparent, transparent 98%, rgba(255,255,255,0.03) 98%, rgba(255,255,255,0.03) 100%),
        linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #2a2a2a 100%);
    position: relative;
}

.epoxy-industrial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03) 0%, transparent 50%);
}

/* Animations */
@keyframes metallicFlow {
    0%, 100% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
    50% {
        background-position: 100% 100%, 50% 50%, 25% 25%, 0% 0%;
    }
}

@keyframes shine {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg);
    }
}