/**
 * Front Page Visual Enhancements
 * Add this to the end of main.css
 */

/* ============================================
   SUBTLE BACKGROUND TEXTURES
   ============================================ */

/* Subtle noise texture overlay for sections */
.why-us::before,
.service-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

.why-us,
.service-area {
    position: relative;
}

/* ============================================
   SECTION DIVIDERS
   ============================================ */

/* Copper accent line between sections */
.services::after,
.why-us::after,
.pricing-preview::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    margin: 0 auto;
    position: relative;
    bottom: calc(var(--space-3xl) * -0.5);
}

/* ============================================
   ENHANCED FEATURE CARDS
   ============================================ */

.feature {
    background: var(--color-bg);
    padding: var(--space-2xl) var(--space-xl);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
}

.feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* Top accent border */
.feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* Icon circles - uses CSS shapes, can replace with real icons */
.feature::after {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-lg);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 4px 12px rgba(61, 90, 115, 0.3);
}

/* Different icon indicators per feature */
.feature:nth-child(1)::after {
    /* Owner icon - person silhouette shape */
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/60% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/60% no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.feature:nth-child(2)::after {
    /* Quiet icon - volume low */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z'/%3E%3C/svg%3E") center/60% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z'/%3E%3C/svg%3E") center/60% no-repeat;
}

.feature:nth-child(3)::after {
    /* Quality icon - shield check */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E") center/60% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E") center/60% no-repeat;
}

/* ============================================
   ENHANCED PRICING CARDS
   ============================================ */

.price-item {
    position: relative;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.price-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--color-accent);
}

.price-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.price-item:hover::before {
    opacity: 1;
}

/* ============================================
   WHY US SECTION BACKGROUND
   ============================================ */

.why-us {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

/* ============================================
   PRICING SECTION ENHANCEMENT
   ============================================ */

.pricing-preview {
    background: linear-gradient(180deg, var(--color-bg-alt) 0%, #f0eeea 100%);
    position: relative;
}

/* Decorative corner accent */
.pricing-preview::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at top right, rgba(184, 115, 51, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* ============================================
   SECTION HEADINGS ENHANCEMENT
   ============================================ */

section h2 {
    position: relative;
    display: inline-block;
    width: 100%;
}

.why-us h2,
.pricing-preview h2 {
    font-style: italic;
    letter-spacing: -0.02em;
}

/* ============================================
   SERVICE CARDS ENHANCEMENT
   ============================================ */

.service-card {
    position: relative;
}

.service-card::after {
    content: "→";
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    width: 32px;
    height: 32px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.service-card:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   HERO ENHANCEMENT
   ============================================ */

.hero {
    background: 
        linear-gradient(135deg, rgba(61, 90, 115, 0.03) 0%, transparent 50%),
        linear-gradient(225deg, rgba(184, 115, 51, 0.05) 0%, transparent 50%),
        var(--color-bg-alt);
    position: relative;
    overflow: hidden;
}

/* Subtle geometric decoration */
.hero::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border: 2px solid rgba(184, 115, 51, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 300px;
    height: 300px;
    border: 2px solid rgba(61, 90, 115, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

/* ============================================
   CTA SECTION ENHANCEMENT
   ============================================ */

.cta {
    background: 
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* ============================================
   SCROLL ANIMATIONS (optional)
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
    .feature,
    .price-item,
    .service-card {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.6s ease forwards;
    }
    
    .feature:nth-child(1) { animation-delay: 0.1s; }
    .feature:nth-child(2) { animation-delay: 0.2s; }
    .feature:nth-child(3) { animation-delay: 0.3s; }
    
    .price-item:nth-child(1) { animation-delay: 0.1s; }
    .price-item:nth-child(2) { animation-delay: 0.2s; }
    .price-item:nth-child(3) { animation-delay: 0.3s; }
    
    .service-card:nth-child(1) { animation-delay: 0.1s; }
    .service-card:nth-child(2) { animation-delay: 0.2s; }
    .service-card:nth-child(3) { animation-delay: 0.3s; }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}