/* ==========================================================================
   Luxe Menu - Background Patterns & Border Styles
   ========================================================================== */

/* ===== BACKGROUND PATTERNS ===== */

/* Linear Gradient Pattern */
.luxe-bg-gradient_linear {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
}

/* Radial Gradient Pattern */
.luxe-bg-gradient_radial {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%) !important;
}

/* Dots Pattern */
.luxe-bg-dots {
    background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Lines Pattern */
.luxe-bg-lines {
    background-image: repeating-linear-gradient(0deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.05) 10px,
            rgba(255, 255, 255, 0.05) 11px);
}

/* Grid Pattern */
.luxe-bg-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Waves Pattern */
.luxe-bg-waves {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.05)' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom;
}

/* Zigzag Pattern */
.luxe-bg-zigzag {
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%);
    background-size: 20px 20px;
}

/* Triangles Pattern */
.luxe-bg-triangles {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpolygon points='20,0 40,40 0,40' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

/* Hexagon Pattern */
.luxe-bg-hexagon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='rgba(255,255,255,0.05)' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/svg%3E");
}

/* Circuit Pattern */
.luxe-bg-circuit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M10 10h80v80H10z' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3Ccircle cx='10' cy='10' r='3' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='90' cy='10' r='3' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='10' cy='90' r='3' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='90' cy='90' r='3' fill='rgba(255,255,255,0.1)'/%3E%3Cpath d='M50 10v30M50 60v30M10 50h30M60 50h30' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='5' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E");
    background-size: 100px 100px;
}

/* 3D Cubes Pattern */
.luxe-bg-3d_cubes {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0L60 15v30L30 60 0 45V15z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cpath d='M30 30v30M0 15l30 15M60 15L30 30' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* Glassmorphism Effect */
.luxe-bg-glassmorphism {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ===== ANIMATED BACKGROUNDS ===== */

/* Gradient Animated */
.luxe-bg-gradient_animated {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: luxe-gradient-shift 15s ease infinite;
}

@keyframes luxe-gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Particles Animation Container */
.luxe-bg-particles {
    position: relative;
    overflow: hidden;
}

.luxe-bg-particles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
    animation: luxe-float 20s ease-in-out infinite;
}

@keyframes luxe-float {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    25% {
        transform: translateY(-5px) translateX(5px);
    }

    50% {
        transform: translateY(-10px) translateX(0);
    }

    75% {
        transform: translateY(-5px) translateX(-5px);
    }
}

/* 3D Abstract Background */
.luxe-bg-3d_abstract {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
    position: relative;
    overflow: hidden;
}

.luxe-bg-3d_abstract::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.1), transparent 30%);
    animation: luxe-rotate 30s linear infinite;
}

@keyframes luxe-rotate {
    100% {
        transform: rotate(360deg);
    }
}

/* ===== ANIMATION SPEEDS ===== */
.luxe-anim-slow * {
    animation-duration: 30s !important;
}

.luxe-anim-medium * {
    animation-duration: 15s !important;
}

.luxe-anim-fast * {
    animation-duration: 5s !important;
}

.luxe-anim-pulse {
    animation: luxe-pulse 2s ease-in-out infinite;
}

@keyframes luxe-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.luxe-anim-float {
    animation: luxe-float-gentle 4s ease-in-out infinite;
}

@keyframes luxe-float-gentle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* ===== BORDER STYLES ===== */

/* Gradient Border */
.luxe-border-gradient {
    border-top: none !important;
    position: relative;
}

.luxe-border-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--border-width, 2px);
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
    background-size: 300% 100%;
}

/* Neon Glow Border */
.luxe-border-neon_glow {
    border-top: var(--border-width, 2px) solid var(--border-color, #00ff88);
    box-shadow:
        0 0 5px var(--border-color, #00ff88),
        0 0 10px var(--border-color, #00ff88),
        0 0 20px var(--border-color, #00ff88);
}

/* Animated Gradient Border */
.luxe-border-animated_gradient {
    border-top: none !important;
    position: relative;
}

.luxe-border-animated_gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--border-width, 2px);
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
    background-size: 300% 100%;
    animation: luxe-border-flow 3s linear infinite;
}

@keyframes luxe-border-flow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* Wavy Border (SVG) */
.luxe-border-wavy {
    border-top: none !important;
    position: relative;
}

.luxe-border-wavy::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E");
    background-size: 1200px 10px;
    background-repeat: repeat-x;
}

/* Zigzag Border */
.luxe-border-zigzag_border {
    border-top: none !important;
    position: relative;
}

.luxe-border-zigzag_border::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    height: 10px;
    background-image: linear-gradient(135deg, var(--border-color, #fff) 25%, transparent 25%),
        linear-gradient(225deg, var(--border-color, #fff) 25%, transparent 25%);
    background-size: 10px 10px;
    background-position: 0 0, 5px 0;
}

/* ===== LOGO SHADOWS ===== */
.luxe-logo-shadow {
    filter: drop-shadow(var(--logo-shadow-x, 0) var(--logo-shadow-y, 4px) var(--logo-shadow-blur, 10px) var(--logo-shadow-color, rgba(0, 0, 0, 0.3)));
}

/* Logo Hover Effects */
.luxe-menu-logo img {
    transition: all 0.3s ease;
}

.luxe-menu-logo:hover img {
    transform: scale(1.05);
}

/* ===== RIGHT LOGO STYLES ===== */
.luxe-menu-logo-right {
    flex-shrink: 0;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.luxe-menu-logo-right img,
.luxe-menu-logo-right svg {
    height: 100%;
    width: auto;
    object-fit: contain;
}