/* =========================================================
   LUXURY DESIGN SYSTEM
========================================================= */

:root {
    --luxury-bg: #f7f3ec;
    --luxury-text: #17130f;
    --luxury-muted: rgba(23, 19, 15, 0.62);
    --luxury-soft: rgba(23, 19, 15, 0.46);
    --luxury-line: rgba(23, 19, 15, 0.12);
    /*   --luxury-card: rgba(255, 255, 255, 0.34); */

    --luxury-container: 1520px;
    --luxury-container-narrow: 1180px;

    --luxury-section-space: 190px;
    --luxury-section-space-bottom: 210px;

    --luxury-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base */
[class^="vp-luxury-"],
[class*=" vp-luxury-"],
[class^="vp-luxury-"] *,
[class*=" vp-luxury-"] * {
    box-sizing: border-box;
}

.vp-luxury-section {
    position: relative;
    overflow: hidden;
    background: var(--luxury-bg);
    color: var(--luxury-text);
    padding: var(--luxury-section-space) 0 var(--luxury-section-space-bottom);
}

.vp-luxury-container {
    width: min(100% - 64px, var(--luxury-container));
    margin-inline: auto;
}

/* Typography */
.vp-luxury-eyebrow,
.vp-luxury-kicker,
.vp-luxury-number {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--luxury-soft);
}

.vp-luxury-title {
    margin: 0;
    color: var(--luxury-text);
    font-size: clamp(48px, 5.8vw, 104px);
    line-height: 0.92;
    letter-spacing: -0.085em;
    font-weight: 400;
    text-wrap: balance;
    text-rendering: geometricPrecision;
}

.vp-luxury-title--hero {
    font-size: clamp(46px, 5.8vw, 92px);
    color: #fff;
}

.vp-luxury-title--display {
    font-size: clamp(52px, 6vw, 118px);
}

.vp-luxury-text {
    color: var(--luxury-muted);
    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.8;
    font-weight: 300;
}

/* Buttons */
.vp-luxury-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 58px 0 30px;
    border: 1px solid rgba(23, 19, 15, 0.22);
    border-radius: 999px;
    color: var(--luxury-text);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.045em;
    overflow: hidden;
    transition:
        transform 0.45s ease,
        background 0.45s ease,
        border-color 0.45s ease;
}

.vp-luxury-button::after {
    content: "→";
    position: absolute;
    right: 25px;
    font-size: 16px;
    transition: transform 0.45s ease;
}

.vp-luxury-button:hover {
    transform: translateY(-2px);
    background: rgba(23, 19, 15, 0.05);
    border-color: rgba(23, 19, 15, 0.36);
}

.vp-luxury-button:hover::after {
    transform: translateX(4px);
}


/* Image language */
.vp-luxury-section img {
    max-width: 100%;
}

.vp-luxury-media-filter {
    filter:
        saturate(0.88) contrast(1.04) brightness(0.94) sepia(0.06);
}

/* Reveal foundation for later JS */
.vp-luxury-reveal {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
    transition:
        opacity 0.95s var(--luxury-ease),
        transform 0.95s var(--luxury-ease),
        filter 0.95s var(--luxury-ease);
    will-change: opacity, transform, filter;
}

.vp-luxury-reveal-active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Responsive */
@media (max-width: 980px) {
    .vp-luxury-section {
        padding: 130px 0 150px;
    }

    .vp-luxury-container {
        width: min(100% - 48px, var(--luxury-container));
    }
}

@media (max-width: 640px) {
    .vp-luxury-section {
        padding: 95px 0 110px;
    }

    .vp-luxury-container {
        width: min(100% - 32px, var(--luxury-container));
    }

    .vp-luxury-title,
    .vp-luxury-title--display {
        font-size: clamp(38px, 11vw, 62px);
        line-height: 1;
    }

    .vp-luxury-title--hero {
        font-size: clamp(42px, 14vw, 66px);
    }

    .vp-luxury-text {
        font-size: 16px;
        line-height: 1.7;
    }

}

@media (prefers-reduced-motion: reduce) {
    .vp-luxury-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

.vp-luxury-reveal-item {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);

    transition:
        opacity .9s var(--luxury-ease),
        transform .9s var(--luxury-ease),
        filter .9s var(--luxury-ease);
}

.vp-luxury-reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}


/* =========================================================
   LUXURY SYSTEM REVEAL
========================================================= */

.vp-luxury-reveal {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(7px);

    transition:
        opacity 0.95s var(--luxury-ease),
        transform 0.95s var(--luxury-ease),
        filter 0.95s var(--luxury-ease);

    will-change: opacity, transform, filter;
}

.vp-luxury-reveal.vp-luxury-reveal-active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.vp-luxury-hero__image {
    transition: transform .18s linear;
}

.vp-luxury-hero__content,
.vp-luxury-hero__overlay {
    transition:
        transform .18s linear,
        opacity .18s linear;
}

/* =========================================================
   LUXURY PAGE VISUAL LOCK
   Keeps Luxury independent from global theme backgrounds
========================================================= */

body:has(.vp-luxury-section) {
    background: #f7f3ec;
}

/* Prevent theme background from appearing between luxury blocks */
.vp-luxury-section {
    background: #f7f3ec;
}

/* Elegant transition zones between luxury blocks */
.vp-luxury-section+.vp-luxury-section {
    margin-top: -1px;
}

/* Luxury footer mood override */
body:has(.vp-luxury-section) .vp-footer,
body:has(.vp-luxury-section) footer {
    /*     background:
        linear-gradient(180deg, #f7f3ec 0%, #ead8bf 100%); */
    color: #17130f;
}

/* Luxury header should stay site-level, but softer */
body:has(.vp-luxury-section) .vp-header {
    background: rgba(12, 25, 40, .88);
    backdrop-filter: blur(18px);
}

/* =========================================================
   LUXURY PROJECT FOOTER LOCK
   Maps the Minimal Footer tokens
   to the Luxury visual identity.
========================================================= */

body:has(.vp-luxury-hero) .vp-footer-minimal,
body:has(.vp-luxury-residences) .vp-footer-minimal,
body:has(.vp-luxury-experience) .vp-footer-minimal,
body:has(.vp-luxury-gallery) .vp-footer-minimal,
body:has(.vp-luxury-property) .vp-footer-minimal,
body:has(.vp-luxury-cta) .vp-footer-minimal {

    --primary: var(--luxury-text);

    --text: var(--luxury-text);

    --subtext: var(--luxury-muted);

    --glow-color: 23, 19, 15;

    --button-text: #f7f3ec;

    --shadow-soft:
        0 22px 70px rgba(23, 19, 15, 0.10);

}