/* 
 * The Chopping Block - CSS-based Texture Fallbacks
 * This file provides CSS-based texture alternatives to the image-based textures
 */

/* Butcher Paper Texture */
.butcher-paper-texture {
    background-image: 
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(rgba(100,80,60,0.05), rgba(100,80,60,0.05));
    background-size: 20px 20px, 20px 20px, 100% 100%;
    background-color: var(--light-color);
    background-blend-mode: overlay;
}

/* Wood Grain Texture */
.wood-grain-texture {
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.1) 0px,
            rgba(0,0,0,0.05) 1px,
            rgba(0,0,0,0) 2px,
            rgba(0,0,0,0) 10px
        );
    background-color: var(--primary-color);
    background-size: 100% 100%;
    background-blend-mode: overlay;
}

/* Butcher Block Pattern */
.butcher-block-pattern {
    height: 10px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--primary-color) 0px,
        var(--primary-color) 20px,
        var(--secondary-color) 20px,
        var(--secondary-color) 40px
    );
}

/* Knife Cut Edge */
.knife-cut-edge {
    height: 10px;
    background-color: var(--primary-color);
    clip-path: polygon(
        0% 0%, 5% 100%, 10% 40%, 15% 100%, 20% 60%, 
        25% 100%, 30% 40%, 35% 80%, 40% 20%, 45% 100%, 
        50% 40%, 55% 80%, 60% 20%, 65% 100%, 70% 60%, 
        75% 100%, 80% 40%, 85% 80%, 90% 20%, 95% 100%, 
        100% 0%
    );
}

/* String Tie */
.string-tie {
    position: relative;
}

.string-tie::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 2px solid #8B4513;
    border-radius: 50%;
    z-index: 2;
}

.string-tie::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: 
        linear-gradient(to right, transparent 13px, #8B4513 13px, #8B4513 17px, transparent 17px),
        linear-gradient(to bottom, transparent 13px, #8B4513 13px, #8B4513 17px, transparent 17px);
    z-index: 3;
}

/* Smoke Texture */
.smoke-texture {
    position: relative;
    overflow: hidden;
}

.smoke-texture::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
        circle at 70% 60%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0) 70%
    );
    opacity: 0.3;
    animation: smokeMove 60s infinite alternate;
}

@keyframes smokeMove {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* CSS-based Texture Implementation */

/* Apply butcher paper texture to body */
body {
    background-image: 
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(rgba(100,80,60,0.05), rgba(100,80,60,0.05));
    background-size: 20px 20px, 20px 20px, 100% 100%;
    background-blend-mode: overlay;
}

/* Apply wood grain texture to buttons */
.btn {
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.1) 0px,
            rgba(0,0,0,0.05) 1px,
            rgba(0,0,0,0) 2px,
            rgba(0,0,0,0) 10px
        );
    background-blend-mode: overlay;
}

/* Apply butcher paper texture to secondary buttons */
.btn-secondary {
    background-image: 
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 10px 10px, 10px 10px;
}

/* Apply butcher block pattern to section dividers */
.featured-products::before,
.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--primary-color) 0px,
        var(--primary-color) 20px,
        var(--secondary-color) 20px,
        var(--secondary-color) 40px
    );
}

/* Apply knife cut edge to about preview */
.about-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: var(--primary-color);
    clip-path: polygon(
        0% 0%, 5% 100%, 10% 40%, 15% 100%, 20% 60%, 
        25% 100%, 30% 40%, 35% 80%, 40% 20%, 45% 100%, 
        50% 40%, 55% 80%, 60% 20%, 65% 100%, 70% 60%, 
        75% 100%, 80% 40%, 85% 80%, 90% 20%, 95% 100%, 
        100% 0%
    );
}

/* Apply string tie to product cards */
.product-card {
    position: relative;
}

.product-card::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 2px solid #8B4513;
    border-radius: 50%;
    z-index: 2;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: 
        linear-gradient(to right, transparent 13px, #8B4513 13px, #8B4513 17px, transparent 17px),
        linear-gradient(to bottom, transparent 13px, #8B4513 13px, #8B4513 17px, transparent 17px);
    z-index: 3;
}

/* Apply smoke texture to services video section */
.services-preview-video .smoke-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
        circle at 70% 60%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0) 70%
    );
    opacity: 0.3;
    z-index: 2;
    animation: smokeMove 60s infinite alternate;
}

/* Apply wood grain texture to content side */
.content-side::before {
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.1) 0px,
            rgba(0,0,0,0.05) 1px,
            rgba(0,0,0,0) 2px,
            rgba(0,0,0,0) 10px
        );
    background-blend-mode: overlay;
}

/* Apply butcher paper texture to service cards */
.service-card::before {
    background-image: 
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 10px 10px, 10px 10px;
}

/* Apply wood grain texture to service cards in video section */
.services-preview-video .service-card::before {
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.1) 0px,
            rgba(0,0,0,0.05) 1px,
            rgba(0,0,0,0) 2px,
            rgba(0,0,0,0) 10px
        );
    background-blend-mode: overlay;
}