/* Enhanced Dynamic Background with RE/MAX Branding */
/* Premium animated background with multiple layers and sophisticated effects */

/* CSS Variables for easy customization */
:root {
    --bg-primary: #0054a6;      /* RE/MAX Blue */
    --bg-secondary: #003d7a;    /* Dark Blue */
    --bg-accent: #dc2626;       /* RE/MAX Red */
    --bg-light: #00a8e8;        /* Light Blue */
    --bg-gradient-speed: 20s;
    --bg-opacity: 0.08;
}

/* Base body styling */
body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background: #f8f9fa;
}

/* Main animated gradient background - Layer 1 */
body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(0, 84, 166, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 61, 122, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, 
            rgba(0, 84, 166, 0.1) 0%, 
            rgba(0, 61, 122, 0.08) 25%, 
            rgba(0, 168, 232, 0.06) 50%, 
            rgba(0, 84, 166, 0.08) 75%, 
            rgba(0, 61, 122, 0.1) 100%);
    background-size: 400% 400%, 300% 300%, 250% 250%, 500% 500%;
    animation: 
        gradientFlow 25s ease infinite,
        radialPulse 15s ease-in-out infinite alternate;
    z-index: -2;
    will-change: background-position, transform;
}

/* Secondary animated layer - Layer 2 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at top left, rgba(0, 168, 232, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(0, 61, 122, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at center, rgba(220, 38, 38, 0.04) 0%, transparent 70%);
    background-size: 150% 150%, 120% 120%, 200% 200%;
    animation: 
        layer2Move 30s ease-in-out infinite,
        opacityPulse 20s ease-in-out infinite alternate;
    z-index: -1;
    opacity: 0.6;
    will-change: background-position, opacity;
}

/* Main gradient flow animation */
@keyframes gradientFlow {
    0% { 
        background-position: 0% 50%, 100% 0%, 50% 50%, 0% 0%;
        transform: rotate(0deg);
    }
    25% { 
        background-position: 100% 50%, 0% 100%, 0% 0%, 100% 50%;
        transform: rotate(90deg);
    }
    50% { 
        background-position: 50% 100%, 50% 50%, 100% 100%, 50% 0%;
        transform: rotate(180deg);
    }
    75% { 
        background-position: 0% 0%, 100% 100%, 50% 0%, 0% 100%;
        transform: rotate(270deg);
    }
    100% { 
        background-position: 0% 50%, 100% 0%, 50% 50%, 0% 0%;
        transform: rotate(360deg);
    }
}

/* Radial pulse animation for depth */
@keyframes radialPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* Secondary layer movement */
@keyframes layer2Move {
    0% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
        transform: translate(0, 0);
    }
    33% {
        background-position: 50% 25%, 50% 75%, 0% 100%;
        transform: translate(2%, -1%);
    }
    66% {
        background-position: 100% 50%, 0% 0%, 100% 0%;
        transform: translate(-1%, 2%);
    }
    100% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
        transform: translate(0, 0);
    }
}

/* Opacity pulse for subtle breathing effect */
@keyframes opacityPulse {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.8;
    }
}

/* Floating navigation with enhanced glassmorphism */
nav {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(30, 31, 58, 0.85) !important;
    box-shadow: 
        0 8px 32px 0 rgba(31, 38, 135, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease;
}

nav:hover {
    box-shadow: 
        0 12px 40px 0 rgba(31, 38, 135, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Enhanced floating property cards */
.property-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 20px 60px 0 rgba(31, 38, 135, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer effect on cards */
.property-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition: transform 0.6s;
}

.property-card:hover::before {
    transform: translateX(100%) translateY(100%) rotate(45deg);
}

.property-card:nth-child(1) { animation-delay: 0.1s; }
.property-card:nth-child(2) { animation-delay: 0.2s; }
.property-card:nth-child(3) { animation-delay: 0.3s; }
.property-card:nth-child(4) { animation-delay: 0.4s; }
.property-card:nth-child(5) { animation-delay: 0.5s; }
.property-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.property-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 30px 80px 0 rgba(31, 38, 135, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Premium gradient buttons with enhanced effects */
.btn-gradient {
    background: linear-gradient(135deg, #0054a6 0%, #003d7a 50%, #0054a6 100%);
    background-size: 200% 200%;
    box-shadow: 
        0 8px 20px 0 rgba(0, 84, 166, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: buttonShimmer 3s ease-in-out infinite;
}

@keyframes buttonShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s;
}

.btn-gradient:hover::before {
    left: 100%;
}

.btn-gradient:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 15px 35px 0 rgba(0, 84, 166, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background-position: 100% 50%;
}

/* Glassmorphism effect for sections */
.glass-section {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 32px 0 rgba(31, 38, 135, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Enhanced floating filter card */
.filter-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 20px 60px 0 rgba(31, 38, 135, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 30px 80px 0 rgba(31, 38, 135, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Enhanced image overlay with gradient */
.image-overlay {
    background: linear-gradient(
        to bottom, 
        transparent 0%, 
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.property-card:hover .image-overlay {
    opacity: 0.9;
}

/* Staggered animation for cards */
@keyframes staggerFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Smooth scroll with momentum */
html {
    scroll-behavior: smooth;
}

/* Enhanced hover effects with better transitions */
.hover-lift {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

.hover-lift:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Enhanced image slider container */
#image-slider {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        0 20px 60px 0 rgba(31, 38, 135, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: box-shadow 0.3s ease;
}

#image-slider:hover {
    box-shadow: 
        0 30px 80px 0 rgba(31, 38, 135, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Premium table styling with gradient */
table {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

thead tr {
    background: linear-gradient(135deg, #005EA6 0%, #004080 50%, #005EA6 100%);
    background-size: 200% 200%;
    animation: tableHeaderShimmer 4s ease-in-out infinite;
}

@keyframes tableHeaderShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

thead th {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
}

thead th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Dynamic flash message animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Enhanced table row hover with gradient */
tbody tr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

tbody tr::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #0054a6, #003d7a);
    opacity: 0;
    transition: opacity 0.3s ease;
}

tbody tr:hover::before {
    opacity: 1;
}

tbody tr:hover {
    background: linear-gradient(to right, rgba(0, 84, 166, 0.08), rgba(0, 84, 166, 0.03)) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(0, 84, 166, 0.1);
    transform: translateX(2px);
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    .property-card,
    .btn-gradient,
    thead tr {
        animation: none;
    }
    
    * {
        transition-duration: 0.01ms !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    body::before {
        background-size: 200% 200%, 150% 150%, 125% 125%, 250% 250%;
        animation-duration: 20s;
    }
    
    body::after {
        animation-duration: 25s;
    }
    
    .property-card:hover {
        transform: translateY(-6px) scale(1.01);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    body::before,
    body::after {
        opacity: 0.05;
    }
}

/* ===================================
   Animated Moving Circles
   =================================== */

/* Container for animated circles */
.animated-circles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Base circle styling */
.circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
    will-change: transform;
}

/* Circle 1 - RE/MAX Blue - Large, slow movement */
.circle-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 84, 166, 0.6) 0%, rgba(0, 84, 166, 0.2) 50%, transparent 100%);
    top: 10%;
    left: 10%;
    animation: moveCircle1 30s ease-in-out infinite;
}

/* Circle 2 - Dark Blue - Medium, medium speed */
.circle-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 61, 122, 0.5) 0%, rgba(0, 61, 122, 0.15) 50%, transparent 100%);
    top: 60%;
    right: 15%;
    animation: moveCircle2 25s ease-in-out infinite;
}

/* Circle 3 - Light Blue - Small, fast movement */
.circle-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 168, 232, 0.5) 0%, rgba(0, 168, 232, 0.15) 50%, transparent 100%);
    bottom: 20%;
    left: 20%;
    animation: moveCircle3 20s ease-in-out infinite;
}

/* Circle 4 - RE/MAX Red - Medium, slow diagonal */
.circle-4 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, rgba(220, 38, 38, 0.1) 50%, transparent 100%);
    top: 30%;
    right: 30%;
    animation: moveCircle4 35s ease-in-out infinite;
}

/* Circle 5 - RE/MAX Blue - Small, medium speed */
.circle-5 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 84, 166, 0.5) 0%, rgba(0, 84, 166, 0.15) 50%, transparent 100%);
    bottom: 10%;
    right: 25%;
    animation: moveCircle5 22s ease-in-out infinite;
}

/* Circle 6 - Dark Blue - Large, very slow */
.circle-6 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 61, 122, 0.4) 0%, rgba(0, 61, 122, 0.1) 50%, transparent 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: moveCircle6 40s ease-in-out infinite;
}

/* Circle movement animations */
@keyframes moveCircle1 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(150px, 100px) scale(1.1);
    }
    50% {
        transform: translate(300px, 50px) scale(0.9);
    }
    75% {
        transform: translate(100px, 200px) scale(1.05);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes moveCircle2 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(-200px, -150px) scale(1.15);
    }
    66% {
        transform: translate(-100px, 100px) scale(0.85);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes moveCircle3 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    20% {
        transform: translate(180px, -120px) scale(1.2);
    }
    40% {
        transform: translate(250px, 80px) scale(0.8);
    }
    60% {
        transform: translate(100px, 150px) scale(1.1);
    }
    80% {
        transform: translate(-80px, -50px) scale(0.95);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes moveCircle4 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(-250px, 180px) scale(1.2) rotate(90deg);
    }
    50% {
        transform: translate(-150px, -100px) scale(0.9) rotate(180deg);
    }
    75% {
        transform: translate(200px, 150px) scale(1.1) rotate(270deg);
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(360deg);
    }
}

@keyframes moveCircle5 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    30% {
        transform: translate(120px, -180px) scale(1.25);
    }
    60% {
        transform: translate(-150px, 100px) scale(0.75);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes moveCircle6 {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(-40%, -60%) scale(1.3) rotate(90deg);
    }
    50% {
        transform: translate(-60%, -40%) scale(0.7) rotate(180deg);
    }
    75% {
        transform: translate(-45%, -55%) scale(1.15) rotate(270deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(360deg);
    }
}

/* Responsive adjustments for circles */
@media (max-width: 768px) {
    .circle-1 {
        width: 250px;
        height: 250px;
    }
    
    .circle-2 {
        width: 200px;
        height: 200px;
    }
    
    .circle-3 {
        width: 150px;
        height: 150px;
    }
    
    .circle-4 {
        width: 220px;
        height: 220px;
    }
    
    .circle-5 {
        width: 130px;
        height: 130px;
    }
    
    .circle-6 {
        width: 280px;
        height: 280px;
    }
    
    /* Slower animations on mobile for better performance */
    .circle-1 { animation-duration: 25s; }
    .circle-2 { animation-duration: 20s; }
    .circle-3 { animation-duration: 18s; }
    .circle-4 { animation-duration: 30s; }
    .circle-5 { animation-duration: 18s; }
    .circle-6 { animation-duration: 35s; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .circle {
        animation: none !important;
        opacity: 0.2;
    }
}