/* Custom Architectural Texture Overlay */
        .paper-grain {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
        }

        /* Custom Scrollbar for Luxury Aesthetics */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #FBF9F5;
        }
        ::-webkit-scrollbar-thumb {
            background: #D1CCC0;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #C5A059;
        }

        /* Glassmorphism Frosted Class */
        .frosted-glass {
            background: rgba(251, 249, 245, 0.75);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(226, 223, 216, 0.6);
        }

        .frosted-card {
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        /* Spatial Dynamic Shadow Base */
        .dynamic-shadow {
            transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Fine Grid Architectural Lines */
        .grid-lines {
            background-size: 80px 80px;
            background-image: 
                linear-gradient(to right, rgba(26, 26, 26, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(26, 26, 26, 0.03) 1px, transparent 1px);
        }

        /* Hide default cursor on desktop */
        @media (min-width: 1024px) {
            body {
                cursor: none;
            }
            a, button, input, textarea, select {
                cursor: none;
            }
        }

/* Premium motion layer — preserves the original layout and palette. */
:root {
    --premium-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --premium-gold-glow: rgba(197, 160, 89, 0.22);
}

#light-spot {
    will-change: transform;
    transform: translate3d(0, calc(var(--premium-scroll, 0px) * 0.025), 0);
}

html.premium-motion .premium-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.9s var(--premium-ease), transform 0.9s var(--premium-ease);
    transition-delay: var(--premium-delay, 0ms);
    will-change: opacity, transform;
}

html.premium-motion .premium-reveal.premium-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Soft arrival on the first viewport. */
html.premium-motion #hero-card {
    animation: premium-card-breathe 8s ease-in-out 1.2s infinite;
}

@keyframes premium-card-breathe {
    0%, 100% { box-shadow: 0 24px 60px -12px rgba(26, 26, 26, 0.12), 0 8px 24px -4px rgba(26, 26, 26, 0.06); }
    50% { box-shadow: 0 30px 70px -14px rgba(26, 26, 26, 0.16), 0 10px 28px -5px var(--premium-gold-glow); }
}

/* The image cards get a single, slow editorial light sweep on hover. */
.project-card .group {
    isolation: isolate;
}

.project-card .group::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.32) 49%, transparent 66%);
    transform: translate3d(-115%, 0, 0);
}

.project-card:hover .group::after,
.project-card:focus-within .group::after {
    opacity: 1;
    animation: premium-image-sheen 1.1s var(--premium-ease) forwards;
}

@keyframes premium-image-sheen {
    to { transform: translate3d(115%, 0, 0); }
}

/* Subtle depth on the horizontal stage without changing its footprint. */
#stage-track > div {
    transition: box-shadow 0.5s var(--premium-ease), border-color 0.5s ease, transform 0.5s var(--premium-ease);
}

#stage-track > div:hover {
    border-color: rgba(197, 160, 89, 0.62) !important;
    box-shadow: 0 22px 48px -16px rgba(26, 26, 26, 0.22), 0 0 0 1px rgba(197, 160, 89, 0.08) !important;
}

/* Buttons receive a restrained satin reflection, not a new visual style. */
a.bg-charcoal-800,
button.bg-charcoal-800 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

a.bg-charcoal-800::after,
button.bg-charcoal-800::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(108deg, transparent 28%, rgba(255, 255, 255, 0.16) 50%, transparent 72%);
    transform: translate3d(-115%, 0, 0);
    transition: transform 0.8s var(--premium-ease);
}

a.bg-charcoal-800 > *,
button.bg-charcoal-800 > * {
    position: relative;
    z-index: 1;
}

a.bg-charcoal-800:hover::after,
button.bg-charcoal-800:hover::after {
    transform: translate3d(115%, 0, 0);
}

.filter-btn,
.light-btn {
    transition: color 0.25s ease, background-color 0.35s ease, box-shadow 0.35s ease, transform 0.25s var(--premium-ease) !important;
}

.filter-btn:hover,
.light-btn:hover {
    transform: translateY(-1px);
}

.filter-btn.active,
.light-btn.active {
    box-shadow: 0 8px 20px -10px rgba(26, 26, 26, 0.55), 0 0 0 1px rgba(197, 160, 89, 0.13);
}

/* The original modal now has a small lift as it opens. */
#modal-container {
    transform-origin: center center;
    transition: transform 0.65s var(--premium-ease), opacity 0.65s ease !important;
}

#project-modal.premium-modal-open #modal-container {
    transform: scale(1) translate3d(0, 0, 0);
}

#mobile-menu {
    transform: translate3d(0, -12px, 0) scale(0.985);
}

#mobile-menu:not(.opacity-0) {
    transform: translate3d(0, 0, 0) scale(1);
}

@media (min-width: 768px) {
    #navbar.premium-nav-scrolled {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #navbar.premium-nav-scrolled > div {
        box-shadow: 0 14px 36px -18px rgba(26, 26, 26, 0.26);
        border-color: rgba(197, 160, 89, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.premium-motion .premium-reveal,
    html.premium-motion .premium-reveal.premium-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html.premium-motion #hero-card,
    .project-card:hover .group::after,
    .project-card:focus-within .group::after {
        animation: none;
    }
}