/* =========================================
   1. CORE LUXURY SETTINGS & GPU BOOTSTRAP
   ========================================= */
:root {
    --gold-primary: #C5A059;
    --gold-light: #E6D28D;
    --gold-dark: #9E7C30;
    --black-base: #050505;
    --black-surface: #0A0A0A;
    --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
    background-color: var(--black-base);
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    width: 100%;
    touch-action: pan-y; 
}

main, footer, section {
    contain-intrinsic-size: 1px 1000px;
}

::-webkit-scrollbar { width: 0px; background: transparent; }

/* =========================================
   2. CUSTOM CURSOR (STRICTLY DESKTOP)
   ========================================= */
@media (hover: hover) and (pointer: fine) {
    .cursor-dot {
        position: fixed; top: 0; left: 0; width: 6px; height: 6px;
        background-color: var(--gold-primary); border-radius: 50%; z-index: 9999;
        pointer-events: none; 
        transform: translate(-50%, -50%);
        will-change: transform; 
    }
    .cursor-outline {
        position: fixed; top: 0; left: 0; width: 40px; height: 40px;
        border: 1px solid rgba(197, 160, 89, 0.4); border-radius: 50%; z-index: 9998;
        pointer-events: none;
        transform: translate(-50%, -50%);
        will-change: transform, width, height;
        transition: width 0.3s var(--easing-smooth), height 0.3s var(--easing-smooth), background-color 0.3s var(--easing-smooth), border-color 0.3s var(--easing-smooth);
    }
    body.hovering .cursor-outline {
        width: 60px; height: 60px; background-color: rgba(197, 160, 89, 0.05);
        border-color: var(--gold-primary); backdrop-filter: blur(2px);
    }
}

@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-outline { display: none !important; visibility: hidden; }
    body { cursor: auto !important; }
}

/* =========================================
   3. TYPOGRAPHY & UTILITIES
   ========================================= */
h1, h2, h3, h4, .font-display { font-family: 'Cinzel Decorative', cursive; font-weight: 400; }

.text-gold-gradient {
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-light) 50%, var(--gold-dark) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; 
    background-size: 200% auto; 
    animation: shine 5s linear infinite;
    will-change: background-position;
}
@keyframes shine { to { background-position: 200% center; } }

/* =========================================
   4. ANIMATIONS & REVEALS (GPU ACCELERATED)
   ========================================= */
.reveal-image-trigger { 
    clip-path: inset(100% 0 0 0); 
    transition: clip-path 1.5s var(--easing-smooth);
    will-change: clip-path; 
}

.reveal-image-trigger img {
    will-change: transform;
    backface-visibility: hidden; 
    transform: translateZ(0); 
}

@keyframes revealUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-reveal-up { 
    opacity: 0;
    animation: revealUp 1.2s var(--easing-smooth) forwards; 
    will-change: transform, opacity;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }

/* =========================================
   5. 3D FLIP GALLERY & STACK
   ========================================= */
.perspective-1000 { perspective: 1000px; }
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.flip-card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.8s var(--easing-smooth);
    transform-style: preserve-3d;
    will-change: transform;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg) scale(1.02);
}

.flip-card-front { z-index: 2; transform: rotateY(0deg); }
.flip-card-back { z-index: 1; transform: rotateY(180deg); }

/* Stack Cards Logic */
.stack-card {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(197, 160, 89, 0.3);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background-color: #111;
    cursor: pointer;
    will-change: transform, opacity;
}

/* =========================================
   6. COMPONENT SPECIFICS
   ========================================= */
.clip-path-circle-closed { clip-path: circle(0% at 100% 0); }
.clip-path-circle-open { clip-path: circle(150% at 100% 0); }

.preloader-panel { will-change: transform; }

.nav-scrolled {
    background: rgba(5, 5, 5, 0.95); 
    backdrop-filter: blur(10px); 
    border-bottom: 1px solid rgba(197, 160, 89, 0.1);
    padding-top: 1rem !important; padding-bottom: 1rem !important;
    transition: transform 0.3s ease-out, padding 0.3s ease-out, background-color 0.3s;
    will-change: transform, padding;
}

#smooth-wrapper { width: 100%; position: relative; }

.static-noise {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 200px 200px;
}