/* Global Reset & Fonts */
body {
    background-color: #f8f9ff;
    color: #0b1c30;
}

/* Custom scrollbar for webkit */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f8f9ff;
}
::-webkit-scrollbar-thumb {
    background: #cbdbf5;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #78dc77;
}

/* Material Symbols Styling */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

/* Global keyframe animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Premium Glassmorphic Navigation Bar container (Floating Liquid Pill) */
.mobile-bottom-nav {
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100% - 32px) !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background-color: rgba(248, 249, 255, 0.65) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    box-shadow: 0 15px 35px rgba(11, 28, 48, 0.08) !important;
}

.dark .mobile-bottom-nav {
    background-color: rgba(11, 28, 48, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35) !important;
}

/* Styling for mobile nav links */
.mobile-nav-link {
    position: relative;
    min-width: 64px;
    height: 52px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #4d4635 !important;
}

.dark .mobile-nav-link {
    color: #c8c6c7 !important;
}

/* Override dynamic highlight classes for a cleaner, liquid tab look */
.mobile-nav-link.bg-primary-container {
    background-color: transparent !important;
    box-shadow: none !important;
    color: #735c00 !important;
    animation: jelly-bounce 0.65s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.dark .mobile-nav-link.bg-primary-container {
    color: #e9c349 !important;
}

.mobile-nav-link.bg-primary-container span.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    animation: scale-up 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Elegant glowing active line at the bottom */
.mobile-nav-link.bg-primary-container::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background-color: #735c00;
    border-radius: 9999px;
}

.dark .mobile-nav-link.bg-primary-container::after {
    background-color: #e9c349;
}

/* Wobbly liquid gold water droplet behind the active icon */
.mobile-nav-link.bg-primary-container::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: radial-gradient(circle, rgba(115, 92, 0, 0.22) 0%, rgba(115, 92, 0, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    animation: wobble 4s infinite ease-in-out, fluid-blob 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.dark .mobile-nav-link.bg-primary-container::before {
    background: radial-gradient(circle, rgba(233, 195, 73, 0.18) 0%, rgba(233, 195, 73, 0) 70%);
}

/* Keyframes for liquid animations */
@keyframes jelly-bounce {
    0% {
        transform: translateY(0) scale(0.85);
    }
    30% {
        transform: translateY(-8px) scale(1.08, 0.92);
    }
    55% {
        transform: translateY(-3px) scale(0.95, 1.05);
    }
    75% {
        transform: translateY(-5px) scale(1.02, 0.98);
    }
    100% {
        transform: translateY(-4px) scale(1);
    }
}

@keyframes scale-up {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1.15);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 4px 1px rgba(115, 92, 0, 0.4), 0 0 12px 3px rgba(115, 92, 0, 0.2);
        opacity: 0.6;
    }
    50% {
        box-shadow: 0 0 8px 3px rgba(115, 92, 0, 0.8), 0 0 20px 8px rgba(115, 92, 0, 0.4);
        opacity: 1;
    }
}

@keyframes dark-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 4px 1px rgba(233, 195, 73, 0.4), 0 0 12px 3px rgba(233, 195, 73, 0.2);
        opacity: 0.6;
    }
    50% {
        box-shadow: 0 0 8px 3px rgba(233, 195, 73, 0.8), 0 0 20px 8px rgba(233, 195, 73, 0.4);
        opacity: 1;
    }
}

@keyframes wobble {
    0% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    }
    50% {
        border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%;
    }
    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    }
}

@keyframes fluid-blob {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    50% {
        transform: scale(1.3, 0.85);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Subtle touch feedback */
.mobile-nav-link:active {
    transform: scale(0.9) translateY(0) !important;
    transition: transform 0.1s ease;
}

/* --- Crisp, High-Performance Motion Graphic System --- */
.ae-animate, .reveal {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal {
    transform: translate3d(0, 24px, 0);
}

/* 1. Default Fade Up */
.ae-fade-up {
    transform: translate3d(0, 28px, 0) scale(0.98);
}

/* 2. Slide Left */
.ae-slide-left {
    transform: translate3d(-36px, 0, 0);
}

/* 3. Slide Right */
.ae-slide-right {
    transform: translate3d(36px, 0, 0);
}

/* 4. Zoom Pop (Elastic Overshoot) */
.ae-zoom-in, .ae-pop {
    transform: scale(0.92) translate3d(0, 12px, 0);
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 5. 3D Perspective Flip */
.ae-flip-3d {
    transform: perspective(1000px) rotateX(15deg) translate3d(0, 20px, 0);
}

/* Active State when element enters viewport (100% Sharp & Crystal Clear) */
.ae-animate.ae-show, .reveal.ae-show, .reveal.active {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) rotateX(0deg) !important;
}

/* Staggered Delay Utilities for Sequential Wave Effects */
.ae-delay-50 { transition-delay: 50ms !important; }
.ae-delay-100 { transition-delay: 100ms !important; }
.ae-delay-150 { transition-delay: 150ms !important; }
.ae-delay-200 { transition-delay: 200ms !important; }
.ae-delay-250 { transition-delay: 250ms !important; }
.ae-delay-300 { transition-delay: 300ms !important; }
.ae-delay-350 { transition-delay: 350ms !important; }
.ae-delay-400 { transition-delay: 400ms !important; }
.ae-delay-500 { transition-delay: 500ms !important; }

/* Custom Elastic Spring Motion (After Effects Overshoot) */
.ae-bounce {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Targeted After Effects style text reveal utility */
@keyframes aeGlobalTextReveal {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.ae-text-reveal {
  animation: aeGlobalTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* GPU hardware acceleration and anti-aliasing to prevent sub-pixel border/shadow lines on hover */
.property-card {
    will-change: transform, box-shadow;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease !important;
}

.property-card:hover {
    transform: translate3d(0, -4px, 0) !important;
}

/* VIP Card Static Style (Subtle Gold Border Glow) */
.property-card.vip-card {
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.08) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
}

/* VIP Card Hover Shadow (Premium Gold Glow) */
.property-card.vip-card:hover {
    box-shadow: 0 12px 45px rgba(212, 175, 55, 0.35), 0 4px 15px rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.85) !important;
}

/* Dark Card Hover Shadow (Glow Gelap/Shadow Tebal) */
.property-card.dark-card:not(.vip-card):hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Light/Standard Card Hover Shadow */
.property-card:not(.vip-card):not(.dark-card):hover {
    box-shadow: 0 12px 40px rgba(11, 28, 48, 0.08) !important;
}