/*-----------------------------------*\
  #MOTION TOKENS
\*-----------------------------------*/

:root {
    --animation-ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
    --animation-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --animation-duration-fast: 0.6s;
    --animation-duration-base: 0.88s;
    --animation-duration-slow: 1.08s;
}

/*-----------------------------------*\
  #PAGE LOAD
\*-----------------------------------*/

body.animations-ready .navbar {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
    transition:
        opacity var(--animation-duration-fast) var(--animation-ease-luxury),
        transform var(--animation-duration-fast) var(--animation-ease-luxury),
        background-color 0.3s ease;
}

body.animations-ready.page-loaded .navbar {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.animations-ready.page-loaded .navbar.navbar-hidden {
    opacity: 0;
    transform: translateY(-100%);
}

/*-----------------------------------*\
  #APPEARING ANIMATIONS
\*-----------------------------------*/

body.animations-ready .animate-fade-up {
    --motion-x: 0px;
    --motion-y: 28px;
    --motion-scale: 1;
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(var(--motion-x), var(--motion-y), 0) scale(var(--motion-scale));
    transition:
        opacity var(--animation-duration-base) var(--animation-ease-luxury),
        transform var(--animation-duration-base) var(--animation-ease-luxury),
        filter var(--animation-duration-slow) var(--animation-ease-soft);
    transition-delay: var(--animation-delay, 0ms);
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
}

body.animations-ready .animate-fade-up.is-visible {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
}

body.animations-ready .animate-fade-right {
    --motion-x: 34px;
    --motion-y: 0px;
}

body.animations-ready .animate-fade-left {
    --motion-x: -34px;
    --motion-y: 0px;
}

body.animations-ready .animate-scale-soft {
    --motion-y: 18px;
    --motion-scale: 0.975;
}

body.animations-ready .animate-fade-only {
    --motion-y: 0px;
}

/* Both hero logos are absolutely centered with translateX(-50%). */
body.animations-ready .animate-fade-up.animate-hero-logo {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(-50%, -12px, 0) scale(0.985);
}

body.animations-ready .animate-fade-up.animate-hero-logo.is-visible {
    opacity: 1;
    filter: none;
    transform: translate3d(-50%, 0, 0) scale(1);
}

body.animations-ready .animate-image-reveal {
    --motion-y: 16px;
    --motion-scale: 1.018;
    clip-path: inset(0 0 8% 0);
    filter: blur(5px) saturate(0.9);
    transition:
        opacity var(--animation-duration-base) var(--animation-ease-luxury),
        transform var(--animation-duration-slow) var(--animation-ease-luxury),
        filter var(--animation-duration-slow) var(--animation-ease-soft),
        clip-path var(--animation-duration-slow) var(--animation-ease-luxury);
    transition-delay: var(--animation-delay, 0ms);
}

body.animations-ready .animate-image-reveal.is-visible {
    clip-path: inset(0 0 0 0);
}

body.animations-ready .animate-line-reveal {
    opacity: 0;
    filter: none;
    transform: scaleX(0);
    transform-origin: left center;
    transition:
        opacity 0.45s ease,
        transform var(--animation-duration-slow) var(--animation-ease-luxury);
    transition-delay: var(--animation-delay, 0ms);
}

body.animations-ready .animate-line-reveal.is-visible {
    opacity: 1;
    transform: scaleX(1);
}

body.animations-ready .gallery-page-divider.animate-line-reveal,
body.animations-ready .contact-title-devider.animate-line-reveal {
    transform-origin: center;
}

body.animations-ready .animate-fade-up.animation-complete {
    transition-delay: 0ms;
    will-change: auto;
}

/*-----------------------------------*\
  #PREMIUM HOVER DETAILS
\*-----------------------------------*/

.menu-tab-button {
    transition:
        transform 0.45s var(--animation-ease-luxury),
        border-color 0.35s ease;
}

.menu-tab-button:is(:hover, :focus-visible, :focus-within) {
    transform: translate3d(6px, 0, 0);
}

.menu-image,
.chef-section-main-image,
.map-contacts,
.contact-map {
    transition:
        transform 0.75s var(--animation-ease-luxury),
        box-shadow 0.75s ease;
}

.gallery-index-image {
    transition: transform 0.85s var(--animation-ease-luxury);
}

.tasting-menu-image,
.category-image,
.drinks-image-menu {
    transition: transform 0.9s var(--animation-ease-luxury);
}

.contact-widget {
    transition:
        transform 0.65s var(--animation-ease-luxury),
        scale 0.65s var(--animation-ease-luxury),
        box-shadow 0.65s ease,
        background-color 0.35s ease,
        border-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .gallery-index-slide:hover .gallery-index-image {
        transform: scale(1.025);
    }

    .tasting-menu-image-picture:hover .tasting-menu-image,
    .category-image-picture:hover .category-image,
    .drinks-image-picture:hover .drinks-image-menu {
        transform: scale(1.025);
    }

    body.animations-ready .menu-tab-button.animate-fade-up.is-visible:is(:hover, :focus-visible, :focus-within) {
        transform: translate3d(6px, 0, 0) scale(1);
    }

    body.animations-ready .menu-image.animate-fade-up.is-visible:hover,
    body.animations-ready .chef-section-main-image.animate-fade-up.is-visible:hover,
    body.animations-ready .map-contacts.animate-fade-up.is-visible:hover,
    body.animations-ready .contact-map.animate-fade-up.is-visible:hover {
        transform: translate3d(0, -4px, 0) scale(1.01);
        box-shadow: 0 24px 50px rgba(42, 34, 36, 0.12);
    }

    body.animations-ready .contact-widget.animate-fade-up.is-visible:is(:hover, :focus-visible, :focus-within) {
        transform: translate3d(0, -6px, 0) scale(1);
        box-shadow: 0 20px 44px rgba(42, 34, 36, 0.12);
    }
}

/*-----------------------------------*\
  #GALLERY LIGHTBOX
\*-----------------------------------*/

.gallery-lightbox:not([hidden]) .gallery-lightbox-image {
    animation: luxury-lightbox-image-in 0.7s var(--animation-ease-luxury) both;
}

.gallery-lightbox:not([hidden]) .gallery-lightbox-close,
.gallery-lightbox:not([hidden]) .gallery-lightbox-control {
    animation: luxury-lightbox-control-in 0.55s var(--animation-ease-luxury) 100ms both;
}

@keyframes luxury-lightbox-image-in {
    from {
        opacity: 0;
        filter: blur(5px);
        scale: 0.985;
    }

    to {
        opacity: 1;
        filter: none;
        scale: 1;
    }
}

@keyframes luxury-lightbox-control-in {
    from {
        opacity: 0;
        scale: 0.9;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.faq-answer > div {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition:
        opacity 0.32s ease,
        transform 0.42s var(--animation-ease-luxury);
}

.faq-item.active .faq-answer > div {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 80ms;
}

/*-----------------------------------*\
  #SIDEBAR
\*-----------------------------------*/

.sidebar-menu-panel {
    transition:
        transform 0.45s var(--animation-ease-luxury),
        box-shadow 0.45s ease;
}

.sidebar-menu.is-open .sidebar-menu-panel {
    box-shadow: 20px 0 60px rgba(42, 34, 36, 0.14);
}

.sidebar-menu-top,
.sidebar-menu-nav,
.sidebar-menu-divider,
.sidebar-menu-contact {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
    transition:
        opacity 0.45s var(--animation-ease-luxury),
        transform 0.45s var(--animation-ease-luxury);
}

.sidebar-menu.is-open .sidebar-menu-top {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 100ms;
}

.sidebar-menu.is-open .sidebar-menu-nav {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 160ms;
}

.sidebar-menu.is-open .sidebar-menu-divider {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 220ms;
}

.sidebar-menu.is-open .sidebar-menu-contact {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 280ms;
}

/*-----------------------------------*\
  #RESPONSIVE MOTION
\*-----------------------------------*/

@media (max-width: 700px) {
    body.animations-ready .animate-fade-up {
        --motion-y: 20px;
        filter: blur(2px);
        transition-duration: 0.76s;
    }

    body.animations-ready .animate-fade-left,
    body.animations-ready .animate-fade-right {
        --motion-x: 0px;
        --motion-y: 20px;
    }

    body.animations-ready .animate-image-reveal {
        --motion-y: 14px;
        --motion-scale: 1.012;
        clip-path: inset(0 0 5% 0);
    }

    body.animations-ready .animate-fade-up.animate-hero-logo {
        transform: translate3d(-50%, -10px, 0) scale(0.99);
    }

    body.animations-ready .animate-fade-up.animate-hero-logo.is-visible {
        transform: translate3d(-50%, 0, 0) scale(1);
    }
}

/*-----------------------------------*\
  #REDUCED MOTION
\*-----------------------------------*/

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    body.animations-ready .navbar,
    body.animations-ready .animate-fade-up,
    .sidebar-menu-top,
    .sidebar-menu-nav,
    .sidebar-menu-divider,
    .sidebar-menu-contact {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        clip-path: none !important;
    }

    body.animations-ready .animate-fade-up.animate-hero-logo {
        transform: translateX(-50%) !important;
    }
}