/**
 * ResiHub AI - Bayou Design Elements CSS
 * =======================================
 * Louisiana Bayou Steampunk theme utilities
 * Use these classes to add themed borders, corners, frames to any element
 * 
 * Design Elements Path: /static/images/bazaar/
 * 
 * Usage Examples:
 *   <div class="bayou-frame">Content</div>
 *   <div class="bayou-corners-steampunk">Content</div>
 *   <img src="..." class="agent-recommend-badge" data-agent="resi">
 */

:root {
    /* Bayou Theme Colors */
    --bayou-glow: #00d4ff;
    --copper-accent: #b87333;
    --moss-green: #4a5d23;
    --cypress-brown: #5c4033;
    --swamp-water: #2d4a3e;
    
    /* Design element base path */
    --bazaar-img-path: '/static/images/bazaar';
}

/* ============================================================
   ITEM FRAMES - For product cards, feature boxes
   ============================================================ */

/* Basic wood frame with metal inner border */
.bayou-item-frame {
    position: relative;
    background-image: url('/static/images/bazaar/bazaar_blank_item_frame.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 60px 50px 50px 50px;
    min-height: 200px;
}

/* Ornate item frame */
.bayou-item-frame-ornate {
    position: relative;
    background-image: url('/static/images/bazaar/bazaar_item_frame.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 80px;
}

/* Wood background texture */
.bayou-wood-bg {
    background-image: url('/static/images/bazaar/bazaar_item_wood_background.png');
    background-size: cover;
    background-position: center;
}

/* Wood shelf with shadow */
.bayou-shelf {
    background-image: url('/static/images/bazaar/Item_shadow_wood_shelf.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding-bottom: 40px;
}

/* ============================================================
   CORNER DECORATIONS - 3 SETS
   ============================================================ */

/* Set 1: Basic corners (subtle) */
.bayou-corners-basic {
    position: relative;
}
.bayou-corners-basic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background-image: url('/static/images/bazaar/bazaar_top_left.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.bayou-corners-basic::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background-image: url('/static/images/bazaar/bazaar_bottom_Left.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Set 2: Steampunk corners (gears + moss + blue glow) */
.bayou-corners-steampunk {
    position: relative;
}
.bayou-corners-steampunk::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 120px;
    height: 100px;
    background-image: url('/static/images/bazaar/bazaar_top_left_2.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}
.bayou-corners-steampunk::after {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 120px;
    height: 100px;
    background-image: url('/static/images/bazaar/bazaar_top_right_2.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}
/* Additional corners for steampunk set */
.bayou-corners-steampunk-full {
    position: relative;
}
.bayou-corners-steampunk-full .corner-tl,
.bayou-corners-steampunk-full .corner-tr,
.bayou-corners-steampunk-full .corner-bl,
.bayou-corners-steampunk-full .corner-br {
    position: absolute;
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}
.bayou-corners-steampunk-full .corner-tl {
    top: -10px;
    left: -10px;
    background-image: url('/static/images/bazaar/bazaar_top_left_2.png');
}
.bayou-corners-steampunk-full .corner-tr {
    top: -10px;
    right: -10px;
    background-image: url('/static/images/bazaar/bazaar_top_right_2.png');
}
.bayou-corners-steampunk-full .corner-bl {
    bottom: -10px;
    left: -10px;
    background-image: url('/static/images/bazaar/bazaar_bottom_left_2.png');
}
.bayou-corners-steampunk-full .corner-br {
    bottom: -10px;
    right: -10px;
    background-image: url('/static/images/bazaar/bazaar_bottom_right_2.png');
}

/* Set 3: Vine corners (cypress root design) */
.bayou-corners-vine {
    position: relative;
}
.bayou-corners-vine::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 100px;
    height: 100px;
    background-image: url('/static/images/bazaar/bazaar_Corner_upper.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}
.bayou-corners-vine::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 100px;
    height: 100px;
    background-image: url('/static/images/bazaar/bazaar_corner_lower.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}

/* ============================================================
   HORIZONTAL BARS - Section dividers
   ============================================================ */

.bayou-divider {
    width: 100%;
    height: 60px;
    background-image: url('/static/images/bazaar/bazaar_horizontal_bar.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 2rem 0;
}

.bayou-divider-universal {
    width: 100%;
    height: 50px;
    background-image: url('/static/images/bazaar/bazaar_bar_universal_horizontal.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    margin: 1.5rem 0;
}

/* ============================================================
   PILLARS - Vertical borders for sidebars/panels
   ============================================================ */

.bayou-pillars {
    position: relative;
    padding: 0 80px;
}
.bayou-pillars::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background-image: url('/static/images/bazaar/bazaar_pillar_left_Side_2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}
.bayou-pillars::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background-image: url('/static/images/bazaar/bazaar_pillar_right_Side_2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ============================================================
   AGENT RECOMMENDATION BADGES
   ============================================================ */

.agent-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.agent-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--bayou-glow);
}

.agent-badge-resi { background-image: url('/static/images/bazaar/Resi_Circle_Icon.png'); }
.agent-badge-charles { background-image: url('/static/images/bazaar/Charles_Circle_Icon.png'); }
.agent-badge-becky { background-image: url('/static/images/bazaar/Becky_Circle_Icon.png'); }
.agent-badge-tally { background-image: url('/static/images/bazaar/Tally_Circle_Icon.png'); }
.agent-badge-hawk { background-image: url('/static/images/bazaar/Hawk_Circle_Icon.png'); }
.agent-badge-spike { background-image: url('/static/images/bazaar/Spke_Circle_Icon.png'); }

/* Agent badge in item frame (top-right position) */
.bayou-item-frame .agent-recommend {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
}

/* ============================================================
   DECORATIVE ELEMENTS - Nature accents
   ============================================================ */

.bayou-critter-snail {
    width: 100px;
    height: auto;
    background-image: url('/static/images/bazaar/snail_with_dragonfly_rider.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.bayou-lilypad {
    background-image: url('/static/images/bazaar/lily_pad_bunch.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.bayou-firefly-lamps {
    background-image: url('/static/images/bazaar/bazaar_hanging firefly_lamps_3.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 150px;
}

.bayou-potted-plants {
    background-image: url('/static/images/bazaar/bazaar_potted_blue_highlighted_plants.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.bayou-bubbles {
    background-image: url('/static/images/bazaar/swamp_gas_bubbles.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Butterflies - Static */
.bayou-butterfly {
    background-size: contain;
    background-repeat: no-repeat;
    animation: flutter 3s ease-in-out infinite;
}
.bayou-butterfly-side { background-image: url('/static/images/bazaar/Side_Monarch_butterfly.png'); }
.bayou-butterfly-top { background-image: url('/static/images/bazaar/Top_Manorch_btterfly.png'); }
.bayou-butterfly-dual { background-image: url('/static/images/bazaar/Duel_Manarch_butterfly.png'); }

@keyframes flutter {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

/* Flying Butterfly - Animated GIF */
.flying-butterfly {
    background-image: url('/static/images/bazaar/Flying butterfly.gif');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    pointer-events: none;
}

/* Flying butterfly with path animation */
.flying-butterfly-wander {
    background-image: url('/static/images/bazaar/Flying butterfly.gif');
    background-size: contain;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    animation: butterfly-wander 20s ease-in-out infinite;
}

@keyframes butterfly-wander {
    0% { 
        top: 20%; 
        left: -100px; 
        transform: scaleX(1);
    }
    25% { 
        top: 40%; 
        left: 30%; 
        transform: scaleX(1);
    }
    50% { 
        top: 15%; 
        left: 70%; 
        transform: scaleX(-1);
    }
    75% { 
        top: 60%; 
        left: 40%; 
        transform: scaleX(-1);
    }
    100% { 
        top: 20%; 
        left: calc(100% + 100px); 
        transform: scaleX(1);
    }
}

/* Butterfly hover effect - appears on hover */
.butterfly-on-hover {
    position: relative;
}
.butterfly-on-hover::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -20px;
    width: 60px;
    height: 60px;
    background-image: url('/static/images/bazaar/Flying butterfly.gif');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.butterfly-on-hover:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* Trees */
.bayou-tree-cypress { background-image: url('/static/images/bazaar/Cyprus.png'); }
.bayou-tree-cedar { background-image: url('/static/images/bazaar/Cedar.png'); }
.bayou-tree-willow { background-image: url('/static/images/bazaar/Weeping Willow.png'); }

/* ============================================================
   BACKGROUND SCENES
   ============================================================ */

.bayou-pier-bg {
    background-image: url('/static/images/bazaar/bazaar_pier_water_mist_background.png');
    background-size: cover;
    background-position: center bottom;
}

/* ============================================================
   UI ELEMENTS
   ============================================================ */

.bayou-message-bubble {
    background-image: url('/static/images/bazaar/bazaar_message_bubble.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 30px 40px;
    min-height: 100px;
}

.bayou-add-to-cart {
    background-image: url('/static/images/bazaar/bazaar_add_to_cart.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 120px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.bayou-add-to-cart:hover {
    transform: scale(1.05);
}

/* ============================================================
   GLOW EFFECTS - Bayou magic
   ============================================================ */

.bayou-glow {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.bayou-glow-strong {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.5),
                0 0 60px rgba(0, 212, 255, 0.2);
}

.bayou-glow-pulse {
    animation: bayou-pulse 2s ease-in-out infinite;
}

@keyframes bayou-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
    50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.6); }
}

/* ============================================================
   ENERGY PULSE - Blue energy flowing through borders
   ============================================================ */

/* Pulsing energy border - wraps any element */
.energy-border {
    position: relative;
}
.energy-border::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--bayou-glow), 
        transparent,
        var(--bayou-glow),
        transparent);
    background-size: 200% 100%;
    border-radius: inherit;
    z-index: -1;
    animation: energy-flow 3s linear infinite;
}

@keyframes energy-flow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Energy pulse on corners - makes blue glow in corner images pulse */
.corner-energy-pulse {
    animation: corner-energy 2s ease-in-out infinite;
}

@keyframes corner-energy {
    0%, 100% { 
        filter: brightness(1) drop-shadow(0 0 5px rgba(0, 212, 255, 0.3));
    }
    50% { 
        filter: brightness(1.3) drop-shadow(0 0 15px rgba(0, 212, 255, 0.8));
    }
}

/* Flowing energy line - horizontal */
.energy-line {
    position: relative;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--bayou-glow), transparent);
    background-size: 200% 100%;
    animation: energy-flow 2s linear infinite;
    border-radius: 2px;
}

/* Energy trace on borders - adds glow trail effect */
.energy-trace {
    position: relative;
    overflow: hidden;
}
.energy-trace::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);
    animation: trace-sweep 3s ease-in-out infinite;
}

@keyframes trace-sweep {
    0% { left: -50%; }
    100% { left: 150%; }
}

/* Steampunk corner with energy pulse */
.steampunk-corner-animated {
    animation: corner-energy 2.5s ease-in-out infinite;
}

/* Full border energy effect for sections */
.section-energy-border {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(var(--navy-blue), var(--navy-blue)) padding-box,
                linear-gradient(90deg, var(--copper-accent), var(--bayou-glow), var(--copper-accent)) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: border-energy-flow 4s linear infinite;
}

@keyframes border-energy-flow {
    0% { background-position: 0 0, 0% 0; }
    100% { background-position: 0 0, 300% 0; }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.bayou-text-glow {
    text-shadow: 0 0 10px var(--bayou-glow);
}

.bayou-border {
    border: 2px solid var(--bayou-glow);
}

.bayou-border-copper {
    border: 3px solid var(--copper-accent);
}

/* ============================================================
   LILY POND ELEMENTS - Upgraded
   ============================================================ */

/* Lilypad Homes - For property/home related sections */
.lilypad-home-left {
    background-image: url('/static/images/bazaar/lilly_pad_home_face_left.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}

.lilypad-home-right {
    background-image: url('/static/images/bazaar/lilly_pad_home_face_right.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 180px;
    height: 180px;
}

/* Lotus Flowers - Beautiful water lilies */
.lily-flowers {
    background-image: url('/static/images/bazaar/lily_pad_bunch.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Lily Pad Lane Sign - Section headers */
.lily-pad-sign {
    background-image: url('/static/images/bazaar/Lily_pad_sign.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 150px;
    height: 180px;
}

/* Lily Pond Lamps - Navigation/sidebar accents */
.lily-pond-lamps {
    background-image: url('/static/images/bazaar/lily_pond_lamps.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 180px;
    height: 180px;
}

/* Frog on Lilypad - Fun accents */
.lilypad-frog {
    background-image: url('/static/images/bazaar/Lilypad_with_frog.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 120px;
    height: 80px;
    transition: transform 0.3s ease;
}
.lilypad-frog:hover {
    transform: scale(1.1) translateY(-5px);
}

/* Misty Pier Background - Hero sections */
.bayou-mist-bg {
    background-image: url('/static/images/bazaar/bazaar_pier_water_mist_background.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.bayou-mist-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(13, 76, 101, 0.7) 0%, rgba(2, 44, 72, 0.9) 100%);
    pointer-events: none;
}

/* Footer decoration with lotus flowers */
.footer-lily-pond {
    position: relative;
    padding-bottom: 100px;
}
.footer-lily-pond::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 150px;
    background-image: url('/static/images/bazaar/lily_pad_bunch.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    opacity: 0.6;
    pointer-events: none;
}

/* Sidebar lamp decorations */
.sidebar-with-lamps {
    position: relative;
}
.sidebar-with-lamps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -60px;
    width: 100px;
    height: 150px;
    background-image: url('/static/images/bazaar/lily_pond_lamps.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    pointer-events: none;
}

/* Property card with lilypad home icon */
.property-card-bayou {
    position: relative;
}
.property-card-bayou::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background-image: url('/static/images/bazaar/lilly_pad_home_face_right.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
    pointer-events: none;
}

/* ============================================================
   CRITTER ANIMATIONS
   ============================================================ */

.critter-hop {
    animation: hop 2s ease-in-out infinite;
}

@keyframes hop {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-15px); }
    50% { transform: translateY(-5px); }
    70% { transform: translateY(-10px); }
}

.lamp-glow {
    animation: lamp-flicker 3s ease-in-out infinite;
}

@keyframes lamp-flicker {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
    75% { filter: brightness(0.95); }
}