/* ===================================
   Background Patterns & Gradients
   No external images required
   =================================== */

/* Hero Background - Elegant gradient with pattern overlay */
.hero-background {
    background: 
        radial-gradient(ellipse at top right, rgba(172, 158, 94, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(50, 49, 51, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #FAF5F0 0%, #ffffff 50%, #FAF5F0 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 35px,
            rgba(172, 158, 94, 0.03) 35px,
            rgba(172, 158, 94, 0.03) 70px
        );
    pointer-events: none;
}

/* Service Cards - Subtle gradient backgrounds */
.service-card:nth-child(1) {
    background: linear-gradient(135deg, #ffffff 0%, #FAF5F0 100%);
}

.service-card:nth-child(2) {
    background: linear-gradient(135deg, #ffffff 0%, rgba(172, 158, 94, 0.05) 100%);
}

.service-card:nth-child(3) {
    background: linear-gradient(135deg, #ffffff 0%, rgba(174, 176, 178, 0.05) 100%);
}

.service-card:nth-child(4) {
    background: linear-gradient(135deg, #ffffff 0%, #FAF5F0 100%);
}

/* About Section Background Pattern */
.about-preview {
    background: 
        radial-gradient(circle at 20% 50%, rgba(172, 158, 94, 0.05) 0%, transparent 50%),
        linear-gradient(90deg, #FAF5F0 0%, #ffffff 50%, #FAF5F0 100%);
    position: relative;
}

.about-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(172, 158, 94, 0.02) 100px,
            rgba(172, 158, 94, 0.02) 101px
        );
    pointer-events: none;
}

/* Gallery Items - Gradient Placeholders */
.gallery-item:nth-child(3n+1) .image-placeholder {
    background: 
        linear-gradient(135deg, #AC9E5E 0%, #FAF5F0 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23AC9E5E" opacity="0.1"/></svg>');
}

.gallery-item:nth-child(3n+2) .image-placeholder {
    background: 
        linear-gradient(135deg, #323133 0%, #AC9E5E 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23323133" opacity="0.1"/></svg>');
}

.gallery-item:nth-child(3n) .image-placeholder {
    background: 
        linear-gradient(135deg, #AEB0B2 0%, #323133 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23AEB0B2" opacity="0.1"/></svg>');
}

/* Testimonial Background */
.testimonials {
    background: 
        radial-gradient(ellipse at center, rgba(172, 158, 94, 0.03) 0%, transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #FAF5F0 50%, #ffffff 100%);
}

/* CTA Section Enhanced Background */
.cta-section {
    background: 
        radial-gradient(circle at top right, rgba(172, 158, 94, 0.3) 0%, transparent 50%),
        radial-gradient(circle at bottom left, rgba(172, 158, 94, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #323133 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 50px,
        rgba(172, 158, 94, 0.05) 50px,
        rgba(172, 158, 94, 0.05) 51px
    );
    animation: shimmer 20s linear infinite;
    pointer-events: none;
}

/* Page Hero Variations */
.page-hero {
    background: 
        radial-gradient(ellipse at top, rgba(172, 158, 94, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #323133 0%, #1a1a1a 100%);
}

.gallery-hero {
    background: 
        radial-gradient(circle at bottom right, rgba(172, 158, 94, 0.3) 0%, transparent 60%),
        linear-gradient(135deg, #323133 0%, #AC9E5E 100%);
}

/* Value Cards Background */
.value-card {
    background: 
        radial-gradient(circle at top left, rgba(172, 158, 94, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #ffffff 0%, #FAF5F0 100%);
}

/* Feature Items Background */
.feature-item {
    background: 
        linear-gradient(135deg, #ffffff 0%, rgba(250, 245, 240, 0.5) 100%);
}

/* Instagram Section Background */
.instagram-section {
    background: 
        linear-gradient(90deg, transparent 0%, rgba(172, 158, 94, 0.02) 50%, transparent 100%),
        linear-gradient(180deg, #ffffff 0%, #FAF5F0 100%);
}

/* Subtle Texture Overlay (can be applied to any section) */
.texture-overlay {
    position: relative;
}

.texture-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-image: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="1" height="1" fill="%23AC9E5E" opacity="0.1"/></svg>');
    pointer-events: none;
}

/* Animated Background for Loading States */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.loading-background {
    background: linear-gradient(270deg, #FAF5F0, #ffffff, #FAF5F0, #ffffff);
    background-size: 800% 800%;
    animation: gradientShift 3s ease infinite;
}

/* Decorative Elements */
.decorative-line {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #AC9E5E 50%, transparent 100%);
    margin: 40px auto;
    max-width: 200px;
}

.decorative-dot {
    width: 6px;
    height: 6px;
    background: #AC9E5E;
    border-radius: 50%;
    margin: 20px auto;
}

/* Enhanced Image Placeholders with Patterns */
.image-placeholder.pattern-hair {
    background: 
        repeating-linear-gradient(
            90deg,
            #AC9E5E,
            #AC9E5E 2px,
            #FAF5F0 2px,
            #FAF5F0 4px
        ),
        linear-gradient(135deg, #AC9E5E 0%, #FAF5F0 100%);
}

.image-placeholder.pattern-waves {
    background: 
        radial-gradient(circle at 20% 80%, transparent 30%, rgba(172, 158, 94, 0.3) 30.5%),
        radial-gradient(circle at 80% 20%, transparent 30%, rgba(172, 158, 94, 0.3) 30.5%),
        radial-gradient(circle at 40% 40%, transparent 30%, rgba(172, 158, 94, 0.3) 30.5%),
        linear-gradient(135deg, #FAF5F0 0%, #ffffff 100%);
}

.image-placeholder.pattern-luxury {
    background: 
        conic-gradient(from 45deg at 50% 50%, #AC9E5E 0deg, #FAF5F0 90deg, #AC9E5E 180deg, #FAF5F0 270deg, #AC9E5E 360deg);
    opacity: 0.3;
}