/*==================================================
VILLA TAZITUNT
style.css
V6.1 — Global Finishing Layer
==================================================*/


/*==================================================
GLOBAL DOCUMENT
==================================================*/

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;

    background:
        var(--stone-50, #f8f6f2);

    color:
        var(--text, #181916);

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


/*==================================================
SELECTION
==================================================*/

::selection {
    background:
        rgba(111, 123, 74, 0.24);

    color:
        var(--charcoal, #181916);
}


/*==================================================
IMAGES
==================================================*/

img {
    max-width: 100%;
}

.v5-home-domain img,
.v5-home-villa img,
.v5-home-interiors img,
.v5-home-gallery img,
.v5-home-experience img,
.v5-final img {
    backface-visibility: hidden;
}


/*==================================================
FOCUS
==================================================*/

a:focus-visible,
button:focus-visible {
    outline:
        1px solid currentColor;

    outline-offset:
        5px;
}


/*==================================================
PREMIUM IMAGE INTERACTION
DESKTOP ONLY
==================================================*/

@media (min-width: 769px) and (hover: hover) {

    .v5-home-domain__media img,
    .v5-home-villa__image img,
    .v5-home-interiors__main img,
    .v5-home-interiors__secondary img,
    .v5-home-gallery__item img {

        transition:
            transform
            1.2s
            cubic-bezier(.22, .61, .36, 1);
    }


    .v5-home-domain__media:hover img,
    .v5-home-villa__image:hover img,
    .v5-home-interiors__main:hover img,
    .v5-home-interiors__secondary:hover img,
    .v5-home-gallery__item:hover img {

        transform:
            scale(1.018);
    }

}


/*==================================================
TEXT RENDERING
==================================================*/

.v5-hero h1,
.v5-home-intro h2,
.v5-home-domain__content h2,
.v5-home-villa__heading h2,
.v5-home-interiors__heading h2,
.v5-home-experience h2,
.v5-home-gallery__heading h2,
.v5-final h2 {

    text-wrap:
        balance;
}


.v5-home-intro__copy p,
.v5-home-domain__copy p,
.v5-home-villa__footer p,
.v5-home-interiors__footer p,
.v5-final__intro {

    text-wrap:
        pretty;
}


/*==================================================
HEADER FINISHING
==================================================*/

.site-header {
    transition:
        background-color 300ms ease,
        color 300ms ease,
        border-color 300ms ease,
        backdrop-filter 300ms ease;
}


.site-header.is-scrolled {

    background:
        rgba(248, 246, 242, 0.92);

    color:
        var(--charcoal, #181916);

    border-bottom:
        1px solid
        rgba(24, 25, 22, 0.08);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/*==================================================
MOBILE POLISH
==================================================*/

@media (max-width: 768px) {

    html {
        scroll-behavior:
            auto;
    }


    body {
        overflow-x:
            hidden;
    }


    .v5-home-intro,
    .v5-home-domain,
    .v5-home-villa,
    .v5-home-interiors,
    .v5-home-gallery {

        isolation:
            isolate;
    }


    .v5-home-intro__copy p,
    .v5-home-domain__copy p,
    .v5-final__intro {

        font-size:
            0.9rem;

        line-height:
            1.75;
    }


    .v5-home-villa__footer p,
    .v5-home-interiors__footer p,
    .v5-home-experience__content > p:not(.v5-eyebrow) {

        overflow-wrap:
            normal;

        word-break:
            normal;

        hyphens:
            none;
    }

}


/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width: 420px) {

    .v5-container {

        width:
            calc(100% - 1.6rem);
    }


    .v5-hero__content,
    .v5-final__content {

        width:
            calc(100% - 1.6rem);
    }

}


/*==================================================
REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}