/* Villa Noktası — shared public chrome: navigation states, scroll motion, hover language.
   Scoped to the public body classes; admin layouts never receive them. */

:root {
    --vn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --vn-nav-bg: rgba(28, 31, 27, 0.9);
    --vn-nav-bg-compact: rgba(28, 31, 27, 0.96);
}

html {
    scroll-padding-top: 92px;
}

/* -------------------------------------------------------------------------
   Navigation — one fixed bar, dark backing in every state.
   Fixed (not absolute → fixed on scroll) so the bar never jumps; it is out of
   flow in both states, so no layout shift.
   ------------------------------------------------------------------------- */

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled {
    position: fixed !important;
    top: 0 !important;
    right: 0;
    left: 0;
    z-index: 1030;
    width: 100%;
    margin-top: 0 !important;
    padding: 18px 0 !important;
    background: var(--vn-nav-bg) !important;
    border-bottom: 1px solid rgba(216, 201, 176, 0.18);
    box-shadow: none !important;
    transition: padding 0.35s var(--vn-ease-out), background-color 0.35s ease, box-shadow 0.35s ease !important;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.vn-nav--compact {
    padding: 8px 0 !important;
    background: var(--vn-nav-bg-compact) !important;
    box-shadow: 0 12px 32px rgba(20, 22, 19, 0.22) !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar,
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled {
        background: rgba(28, 31, 27, 0.74) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
        backdrop-filter: blur(14px) saturate(1.1);
    }

    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.vn-nav--compact {
        background: rgba(28, 31, 27, 0.86) !important;
    }
}

.vn-nav-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 96px;
    pointer-events: none;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .vn-nav__brand img,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .vn-nav__brand img {
    height: 92px;
    margin: -24px 0;
    filter: none;
    transform-origin: left center;
    transition: transform 0.35s var(--vn-ease-out);
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.vn-nav--compact .vn-nav__brand img {
    transform: scale(0.8);
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .vn-nav__wordmark,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .vn-nav__wordmark {
    color: #f6f3ec;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-nav .nav-item .nav-link,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .navbar-nav .nav-item .nav-link {
    color: #f6f3ec !important;
    text-shadow: none !important;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 9px;
    transition: color 0.25s ease, text-decoration-color 0.3s ease !important;
}

body.vn-home #ftco-navbar .navbar-nav .nav-item .nav-link {
    text-decoration: none;
}

body:is(.vn-page, .vn-property) #ftco-navbar .navbar-nav .nav-item .nav-link:hover,
body:is(.vn-page, .vn-property) #ftco-navbar .navbar-nav .nav-item .nav-link:focus-visible,
body:is(.vn-page, .vn-property) #ftco-navbar .navbar-nav .nav-item.active .nav-link {
    color: #ffffff !important;
    text-decoration-color: #d8c9b0;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-nav .nav-item .nav-link::after,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .navbar-nav .nav-item .nav-link::after {
    background: #d8c9b0;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-nav .nav-item .nav-link:focus-visible {
    outline: 1px solid #d8c9b0;
    outline-offset: 6px;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-contact-info,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-contact-info .contact-item,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .text-turquoise,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .navbar-contact-info,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .navbar-contact-info .contact-item,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .text-turquoise {
    color: #d8c9b0 !important;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-contact-info .contact-item:hover,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-contact-info .contact-item:focus-visible {
    color: #f6f3ec !important;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-toggler,
body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .navbar-toggler {
    display: none;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid rgba(246, 243, 236, 0.4) !important;
    border-radius: 0;
    color: #f6f3ec !important;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-toggler:focus-visible {
    outline: 1px solid #d8c9b0;
    outline-offset: 3px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-contact-info.d-lg-flex {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar,
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled {
        padding: 12px 0 !important;
    }

    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.vn-nav--compact {
        padding: 6px 0 !important;
    }

    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-toggler,
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .navbar-toggler {
        display: inline-flex;
        margin-left: auto;
    }

    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar #ftco-nav,
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled #ftco-nav {
        width: 100%;
        max-height: calc(100vh - 84px);
        margin-top: 10px;
        padding: 6px 4px 14px;
        overflow-y: auto;
        background: #1c1f1b !important;
        border-top: 1px solid rgba(216, 201, 176, 0.2);
    }

    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-nav .nav-item .nav-link,
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .navbar-nav .nav-item .nav-link {
        display: flex;
        align-items: center;
        min-height: 46px;
        margin: 0 !important;
        padding: 12px 10px !important;
        font-size: 13px !important;
        border-bottom: 1px solid rgba(246, 243, 236, 0.08);
    }

    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-nav .nav-item .nav-link::after {
        display: none;
    }

    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .navbar-nav .nav-item.active .nav-link {
        color: #d8c9b0 !important;
    }

    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .vn-nav__contact-mobile,
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .vn-nav__contact-mobile .contact-item {
        color: #d8c9b0 !important;
        font-size: 13px;
        letter-spacing: 0.04em;
    }
}

@media (max-width: 575.98px) {
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .vn-nav__brand img,
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar.scrolled .vn-nav__brand img {
        height: 76px;
        margin: -19px 0;
    }
}

/* -------------------------------------------------------------------------
   Signature 01 — architectural frame.
   A bounded scroll range opens the photograph from a small architectural
   mat (inset, rounded) to the full section. Without JavaScript, or with
   reduced motion, the photograph stays at its resolved size.
   ------------------------------------------------------------------------- */

.vn-home .vn-arch {
    background: #f6f3ec;
}

.vn-home .vn-arch .vn-atmosphere__media {
    position: relative;
    min-height: 78vh;
    --vn-arch-p: 1;
    clip-path: inset(
        calc((1 - var(--vn-arch-p)) * 9%)
        calc((1 - var(--vn-arch-p)) * 8%)
        calc((1 - var(--vn-arch-p)) * 9%)
        calc((1 - var(--vn-arch-p)) * 8%)
        round calc((1 - var(--vn-arch-p)) * 28px)
    );
}

.vn-home .vn-arch .vn-atmosphere__media img {
    height: 100%;
    will-change: auto;
}

/* -------------------------------------------------------------------------
   Signature 02 — one editorial chapter, not a page of sticky sections.
   Default is ordinary vertical flow (mobile, reduced motion, older browsers).
   ------------------------------------------------------------------------- */

.vn-home .vn-tale__photo {
    margin: 0 0 36px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: #242722;
}

.vn-home .vn-tale__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vn-home .vn-tale__mark,
.vn-home .vn-tale__outro {
    display: none;
}

@keyframes vn-tale-a {
    0%, 24% { opacity: 1; }
    34%, 100% { opacity: 0; }
}

@keyframes vn-tale-b {
    0%, 26% { opacity: 0; }
    36%, 58% { opacity: 1; }
    68%, 100% { opacity: 0; }
}

@keyframes vn-tale-c {
    0%, 60% { opacity: 0; }
    72%, 100% { opacity: 1; }
}

@keyframes vn-tale-drift {
    from { transform: scale(1.06); object-position: center 30%; }
    to { transform: scale(1); object-position: center 62%; }
}

@supports (animation-timeline: view()) {
    @media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
        .vn-home .vn-tale {
            padding: 0 !important;
            background: #efeae0 !important;
        }

        .vn-home .vn-tale__run {
            height: 240vh;
            view-timeline: --vn-tale block;
        }

        .vn-home .vn-tale__pin {
            position: sticky;
            top: 80px;
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
            height: calc(100vh - 80px);
            overflow: hidden;
        }

        .vn-home .vn-tale__photo {
            height: 100%;
            margin: 0;
            aspect-ratio: auto;
        }

        .vn-home .vn-tale__photo img {
            animation: vn-tale-drift linear both;
            animation-timeline: --vn-tale;
            animation-range: entry 0% exit 100%;
        }

        .vn-home .vn-tale__copy {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            width: auto;
            max-width: none;
            margin: 0;
            padding: 40px 6vw 56px 48px;
        }

        .vn-home .vn-tale__mark {
            display: grid;
            margin: 0 0 16px;
            color: #555c4a;
            font-family: "Cormorant Garamond", "Times New Roman", serif;
            font-size: clamp(2.2rem, 3.5vw, 3.2rem);
            font-variant-numeric: tabular-nums;
            line-height: 1;
        }

        .vn-home .vn-tale__mark span {
            grid-area: 1 / 1;
        }

        .vn-home .vn-tale .vn-process__list {
            display: block;
            position: relative;
            min-height: 9rem;
            margin-top: 22px;
        }

        .vn-home .vn-tale .vn-process__step {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .vn-home .vn-tale .vn-process__step:nth-child(-n + 3) {
            position: absolute;
            inset: 0 auto auto 0;
            width: min(100%, 36rem);
        }

        .vn-home .vn-tale .vn-process__step .icon {
            display: none;
        }

        .vn-home .vn-tale .vn-process__step h3 {
            margin: 0 0 12px;
            font-size: clamp(2.1rem, 3.4vw, 3.3rem);
            line-height: 0.96;
        }

        .vn-home .vn-tale .vn-process__step:nth-child(4) {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .vn-home .vn-tale__mark span:nth-child(1),
        .vn-home .vn-tale .vn-process__step:nth-child(1) {
            animation: vn-tale-a linear both;
            animation-timeline: --vn-tale;
            animation-range: entry 8% exit 92%;
        }

        .vn-home .vn-tale__mark span:nth-child(2),
        .vn-home .vn-tale .vn-process__step:nth-child(2) {
            animation: vn-tale-b linear both;
            animation-timeline: --vn-tale;
            animation-range: entry 8% exit 92%;
        }

        .vn-home .vn-tale__mark span:nth-child(3),
        .vn-home .vn-tale .vn-process__step:nth-child(3) {
            animation: vn-tale-c linear both;
            animation-timeline: --vn-tale;
            animation-range: entry 8% exit 92%;
        }

        .vn-home .vn-tale__outro {
            display: grid;
            grid-template-columns: auto minmax(0, 36rem);
            gap: 6px 28px;
            align-items: baseline;
            width: min(1240px, calc(100% - 8vw));
            margin: 0 auto;
            padding: 72px 0 96px;
        }

        .vn-home .vn-tale__outro-no {
            margin: 0;
            color: #555c4a;
            font-family: "Cormorant Garamond", "Times New Roman", serif;
            font-size: clamp(2.2rem, 3.5vw, 3.2rem);
            line-height: 1;
        }

        .vn-home .vn-tale__outro h3 {
            margin: 0 0 8px;
            color: #242722;
            font-family: "Cormorant Garamond", "Times New Roman", serif;
            font-size: clamp(2.1rem, 3.4vw, 3.3rem);
            font-weight: 500;
            line-height: 0.96;
        }

        .vn-home .vn-tale__outro p {
            margin: 0;
            color: #5c5a54;
            font-family: "Outfit", "Nunito Sans", sans-serif;
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.6;
        }
    }
}

/* -------------------------------------------------------------------------
   Signature 03 — same-origin page transition.
   The browser navigates normally. Unsupported browsers ignore these rules.
   Each villa photograph has its own name, so two cards never share one.
   ------------------------------------------------------------------------- */

@view-transition {
    navigation: auto;
}

body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar {
    view-transition-name: vn-nav;
}

::view-transition-group(vn-nav) {
    animation: none;
    z-index: 10;
}

::view-transition-old(root) {
    animation: vn-vt-out 320ms var(--vn-ease-out) both;
}

::view-transition-new(root) {
    animation: vn-vt-in 420ms var(--vn-ease-out) both;
}

@keyframes vn-vt-out {
    to { opacity: 0; }
}

@keyframes vn-vt-in {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar,
    body:is(.vn-home, .vn-page, .vn-property) #ftco-navbar .vn-nav__brand img {
        transition: none !important;
    }

    #ftco-navbar,
    .vn-prop__media,
    .vn-detail-intro__media {
        view-transition-name: none !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}