/* Custom Luxury Real Estate Theme Setup */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ------------------------------------------------------------------
   PERFORMANCE OPTIMIZATION PASS
   All changes are purely performance-related ([PERF] tags below).
   No colors, typography, spacing, or visual appearance were altered.
------------------------------------------------------------------- */

:root {
    --bg-dark: #0D110F;
    --bg-card: #141A17;
    --gold-accent: #C5A059;
    --gold-light: #E5C483;
    --gold-dark: #9A7733;
    --text-light: #F8F9FA;
    --text-muted: #9DA59F;
    --glass-bg: rgba(20, 26, 23, 0.65);
    --glass-border: rgba(197, 160, 89, 0.25);

    /* [PERF] Centralized blur values so desktop keeps the original,
       full-fidelity glass look while mobile gets a lighter variant.
       backdrop-filter is one of the most expensive paint operations on
       mobile GPUs (it re-samples everything behind the element every
       frame it's composited), so reducing the radius on small screens
       meaningfully cuts paint time without changing the desktop design. */
    --blur-panel: 16px;
    --blur-card: 10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Cormorant Garamond', serif;
}

/* Glassmorphism Luxury Styling */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-panel));
    -webkit-backdrop-filter: blur(var(--blur-panel));
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    /* [PERF] `contain: paint` scopes this element's paint invalidation to
       its own box instead of the whole document, so its blur/shadow
       repaints don't force a wider repaint pass when content around it
       changes (e.g., during scroll-triggered class toggles elsewhere). */
    contain: paint;
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(var(--blur-card));
    -webkit-backdrop-filter: blur(var(--blur-card));
    border: 1px solid rgba(197, 160, 89, 0.15);
    /* [PERF] transition-property is narrowed from "all" (implicit) to the
       exact properties we animate. Transitioning "all" forces the browser
       to watch every animatable property for changes; listing them
       explicitly (both GPU-friendly: transform, box-shadow, border-color)
       avoids that overhead. Visual timing/easing is unchanged. */
    transition-property: transform, box-shadow, border-color;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    contain: paint; /* [PERF] see .glass-panel comment above */
}

.glass-card:hover {
    border-color: var(--gold-accent);
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(197, 160, 89, 0.15);
}

/* Metallic Gold Text Gradient */
.gold-text-gradient {
    background: linear-gradient(135deg, #FFF6D6 0%, #C5A059 50%, #8E6D2F 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gold-border-glow {
    position: relative;
}

.gold-border-glow::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
    z-index: -1;
    border-radius: inherit;
    opacity: 0.5;
}

/* Scroll Progress Bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    z-index: 9999;
    /* [PERF] Width is now driven via transform: scaleX() from JS instead of
       the `width` property (which forces layout on every scroll frame).
       We keep width: 100% as the base box and scale it down/up with a
       compositor-only transform — visually identical, far cheaper. */
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform; /* small, always-visible element: safe to keep promoted */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0D110F;
}
::-webkit-scrollbar-thumb {
    background: #252F2A;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold-accent);
}

/* Custom Lightbox */
.lightbox-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.lightbox-modal.active {
    display: flex;
}

/* [PERF] Mobile drawer: transform-based slide (translate-x-full is applied
   via Tailwind utility classes in HTML/JS, unchanged). We add an explicit
   GPU-accelerated transition here so the drawer animates via transform only
   — never triggering layout — and matches the 400ms will-change cleanup
   timeout in main.js exactly. */
#mobile-drawer {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    contain: layout paint; /* [PERF] isolate drawer's box from page layout */
}

/* ------------------------------------------------------------------
   [PERF] MOBILE / TABLET OPTIMIZATIONS
   Scoped strictly to max-width: 1024px so desktop rendering is 100%
   untouched. These reduce the most GPU/paint-expensive properties
   (backdrop-filter blur radius, shadow blur radius) on smaller,
   typically less powerful devices, while keeping the same visual
   language (still blurred, still glassy, still shadowed).
------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        /* [PERF] Roughly half the blur radius: backdrop-filter cost scales
           with blur radius, so this is a meaningful GPU saving on mobile
           while remaining visually a "frosted glass" panel. */
        --blur-panel: 8px;
        --blur-card: 6px;
    }

    .glass-panel,
    .glass-card {
        /* [PERF] Slightly smaller shadow blur radius = fewer pixels the
           compositor needs to sample per frame during scroll/hover,
           without visibly flattening the luxury drop-shadow look. */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    }

    .glass-card:hover {
        box-shadow: 0 8px 20px rgba(197, 160, 89, 0.15);
    }

    /* [PERF] Hover-triggered lift is a desktop-only affordance anyway
       (no hover on touch devices); removing the transform on mobile
       avoids any accidental sticky-hover repaint on touch-end. */
    .glass-card:active {
        transform: none;
    }
}

/* [PERF] Respect OS-level reduced motion preference: removes
   scroll-driven and hover transforms/transitions for users who've
   opted out of animation, improving perceived performance and
   accessibility without changing default behavior for everyone else. */
@media (prefers-reduced-motion: reduce) {
    .glass-card,
    #mobile-drawer,
    #scroll-progress {
        transition-duration: 0.01ms !important;
    }
}