/* Shared motion layer for the public hotel website. Content stays visible until JS is ready. */
:root {
    --website-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --website-motion-fast: 220ms;
    --website-motion-base: 380ms;
    --website-motion-slow: 640ms;
    --website-motion-distance: 24px;
    --website-card-shadow: 0 16px 42px rgba(6, 38, 91, .09);
    --website-card-shadow-hover: 0 24px 52px rgba(6, 38, 91, .15);
    --website-focus-color: rgba(29, 99, 195, .72);
    --website-focus-ring: 0 0 0 4px rgba(29, 99, 195, .14);
    --hotel-btn-shadow-primary: 0 12px 28px rgba(7, 62, 139, .24);
    --hotel-btn-shadow-primary-hover: 0 16px 32px rgba(7, 62, 139, .32);
    --hotel-btn-shadow-outline: 0 8px 22px rgba(7, 54, 119, .09);
    --hotel-btn-shadow-outline-hover: 0 12px 26px rgba(7, 54, 119, .14);
}

#website-root {
    overflow-x: clip;
}

#website-root > main {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(circle at 8% 12%, rgba(63, 153, 235, .08), transparent 24%),
        radial-gradient(circle at 92% 34%, rgba(242, 184, 75, .07), transparent 22%),
        linear-gradient(180deg, #fff 0%, #f9fcff 48%, #fff 100%);
}

#website-root > main::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(16, 76, 145, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 76, 145, .028) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}

#website-root > main > * {
    position: relative;
    z-index: 1;
}

#website-root [data-website-header] {
    transition:
        background-color var(--website-motion-base) ease,
        border-color var(--website-motion-base) ease,
        box-shadow var(--website-motion-base) ease,
        backdrop-filter var(--website-motion-base) ease;
}

#website-root [data-website-header].is-scrolled {
    border-color: rgba(5, 43, 96, .12);
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 12px 34px rgba(5, 34, 76, .12);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
    backdrop-filter: blur(18px) saturate(1.18);
}

#website-root :is(
    .nav-menu > a,
    .menu > a,
    .nav-menu .nav-link,
    .menu .nav-link
)::after {
    right: 50%;
    left: 50%;
    background: linear-gradient(90deg, var(--brand-blue), #7bbaff);
    opacity: 0;
    transition: left .28s ease, right .28s ease, opacity .28s ease;
}

#website-root :is(
    .nav-menu > a:hover,
    .nav-menu > a:focus-visible,
    .nav-menu > a.active,
    .menu > a:hover,
    .menu > a:focus-visible,
    .menu > a.active,
    .nav-menu .nav-link:hover,
    .nav-menu .nav-link:focus-visible,
    .nav-menu .nav-link.active,
    .nav-item.active > .nav-link
)::after {
    right: 0;
    left: 0;
    opacity: 1;
}

#website-root :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--website-focus-color);
    outline-offset: 3px;
}

#website-root :is(input, select, textarea):focus-visible {
    border-color: #6ba8e9;
    box-shadow: var(--website-focus-ring);
}

/* Existing button markup receives these aliases from website-effects.js. */
#website-root .hotel-btn {
    --hotel-btn-shadow-current: var(--hotel-btn-shadow-outline);
    --hotel-btn-sheen-opacity: .28;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: var(--hotel-btn-min-height, 44px);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform .26s ease,
        border-color .26s ease,
        box-shadow .26s ease,
        background-color .26s ease,
        color .26s ease;
}

#website-root .hotel-btn::before {
    position: absolute;
    z-index: -1;
    top: -60%;
    bottom: -60%;
    left: -34%;
    width: 45%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, var(--hotel-btn-sheen-opacity)),
        transparent
    );
    content: "";
    pointer-events: none;
    transform: rotate(20deg);
    transition: left .5s ease;
}

#website-root .hotel-btn > :is(i, svg, .icon, span) {
    position: relative;
    z-index: 1;
}

#website-root .hotel-btn :is(i, svg, .icon) {
    flex: 0 0 auto;
    transition: transform .26s ease;
}

#website-root .hotel-btn-primary {
    --hotel-btn-shadow-current: var(--hotel-btn-shadow-primary);
    --hotel-btn-sheen-opacity: .48;
    box-shadow: var(--hotel-btn-shadow-current);
}

#website-root .hotel-btn-outline {
    --hotel-btn-shadow-current: var(--hotel-btn-shadow-outline);
    --hotel-btn-sheen-opacity: .24;
    box-shadow: var(--hotel-btn-shadow-current);
}

#website-root .hotel-btn:focus-visible {
    outline-color: rgba(29, 99, 195, .5);
    box-shadow: var(--website-focus-ring), var(--hotel-btn-shadow-current);
}

#website-root .hotel-btn:focus-visible::before {
    left: 115%;
}

@media (hover: hover) and (pointer: fine) {
    #website-root .hotel-btn:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]):hover {
        transform: translateY(-2px);
        box-shadow: var(--hotel-btn-shadow-current);
    }

    #website-root .hotel-btn-primary:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]):hover {
        box-shadow: var(--hotel-btn-shadow-primary-hover);
    }

    #website-root .hotel-btn-outline:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]):hover {
        border-color: rgba(7, 54, 119, .36) !important;
        box-shadow: var(--hotel-btn-shadow-outline-hover);
    }

    #website-root .hotel-btn:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]):hover::before {
        left: 115%;
    }

    #website-root .hotel-btn:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]):hover :is(i, svg, .icon) {
        transform: translateY(-1px);
    }

    #website-root .hotel-btn:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]):hover :is(i[class*="arrow"], .icon-arrow) {
        transform: translateX(2px);
    }
}

@media (hover: none), (pointer: coarse) {
    #website-root .hotel-btn:hover,
    #website-root .hotel-btn:hover :is(i, svg, .icon) {
        transform: none;
    }

    #website-root .hotel-btn:hover::before {
        left: -34%;
    }
}

#website-root .hotel-btn:not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]):active {
    transform: translateY(-1px) scale(.99);
}

#website-root .hotel-btn:is(:disabled, [aria-disabled="true"], .is-loading, [aria-busy="true"]) {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

#website-root .hotel-btn:is(:disabled, [aria-disabled="true"], .is-loading, [aria-busy="true"])::before {
    display: none;
}

#website-root .website-motion-card {
    --website-tilt-x: 0deg;
    --website-tilt-y: 0deg;
    --website-glow-x: 50%;
    --website-glow-y: 50%;
    transform-origin: center;
    transition:
        transform var(--website-motion-base) var(--website-motion-ease),
        border-color var(--website-motion-base) ease,
        box-shadow var(--website-motion-base) ease;
}

#website-root .website-motion-card.is-website-tilting {
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    #website-root .website-motion-card:hover,
    #website-root .website-motion-card:focus-within,
    #website-root .website-motion-card.is-website-tilting {
        border-color: rgba(29, 99, 195, .2) !important;
        box-shadow: var(--website-card-shadow-hover) !important;
        transform:
            perspective(1100px)
            rotateX(var(--website-tilt-x))
            rotateY(var(--website-tilt-y))
            translate3d(0, -4px, 0);
    }
}

#website-root .website-motion-media {
    overflow: hidden;
}

#website-root .website-motion-media :is(img, picture img) {
    transition: transform var(--website-motion-slow) var(--website-motion-ease), filter var(--website-motion-slow) ease;
}

@media (hover: hover) and (pointer: fine) {
    #website-root .website-motion-card:hover .website-motion-media :is(img, picture img),
    #website-root .website-motion-card:focus-within .website-motion-media :is(img, picture img) {
        filter: saturate(1.04) contrast(1.015);
        transform: scale(1.035);
    }
}

#website-root .website-motion-card :is(
    .feature-icon,
    .tile-icon,
    .offer-icon,
    .gallery-reference-info-icon,
    .news-reference-newsletter-icon,
    .contact-reference-info-item > i
) {
    transition: transform .3s var(--website-motion-ease), background-color .3s ease, color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
    #website-root .website-motion-card:hover :is(
        .feature-icon,
        .tile-icon,
        .offer-icon,
        .gallery-reference-info-icon,
        .news-reference-newsletter-icon,
        .contact-reference-info-item > i
    ) {
        transform: translateY(-2px) scale(1.035);
    }
}

#website-root.website-effects-ready .website-reveal {
    opacity: 0;
    transform: translate3d(0, var(--website-motion-distance), 0);
    transition:
        opacity .62s var(--website-motion-ease),
        transform .62s var(--website-motion-ease);
    transition-delay: var(--website-reveal-delay, 0ms), 0ms;
}

#website-root.website-effects-ready .website-reveal[data-website-reveal-style="fade-left"] {
    transform: translate3d(calc(var(--website-motion-distance) * -1), 0, 0);
}

#website-root.website-effects-ready .website-reveal[data-website-reveal-style="fade-right"] {
    transform: translate3d(var(--website-motion-distance), 0, 0);
}

#website-root.website-effects-ready .website-reveal[data-website-reveal-style="fade-in"] {
    transform: none;
}

#website-root.website-effects-ready .website-reveal[data-website-reveal-style="zoom-soft"] {
    transform: translate3d(0, 14px, 0) scale(.985);
}

#website-root.website-effects-ready .website-reveal.is-website-visible {
    opacity: 1;
    transform: none;
}

#website-root.website-effects-ready .website-reveal.website-motion-card {
    transition:
        opacity .62s var(--website-motion-ease),
        transform .62s var(--website-motion-ease),
        border-color var(--website-motion-base) ease,
        box-shadow var(--website-motion-base) ease;
    transition-delay: var(--website-reveal-delay, 0ms), 0ms, 0ms, 0ms;
}

@media (hover: hover) and (pointer: fine) {
    #website-root.website-effects-ready .website-reveal.website-motion-card:is(:hover, :focus-within, .is-website-tilting) {
        border-color: rgba(29, 99, 195, .2) !important;
        box-shadow: var(--website-card-shadow-hover) !important;
        transform:
            perspective(1100px)
            rotateX(var(--website-tilt-x))
            rotateY(var(--website-tilt-y))
            translate3d(0, -4px, 0);
    }
}

#website-root.website-effects-ready .website-motion-hero .website-hero-motion-item {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity .62s var(--website-motion-ease),
        transform .62s var(--website-motion-ease);
    transition-delay: var(--website-hero-delay, 0ms);
}

#website-root.website-effects-ready .website-motion-hero .website-hero-motion-visual {
    transform: translate3d(0, 8px, 0) scale(1.018);
}

#website-root.website-effects-ready .website-motion-hero.is-website-visible .website-hero-motion-item {
    opacity: 1;
    transform: none;
}

#website-root [data-website-footer] :is(.footer-link-list a, .footer-contact-item a, .copy-links span) {
    transition: transform .24s ease, color .24s ease, opacity .24s ease;
}

@media (hover: hover) and (pointer: fine) {
    #website-root [data-website-footer] :is(.footer-link-list a, .footer-contact-item a):hover,
    #website-root [data-website-footer] :is(.footer-link-list a, .footer-contact-item a):focus-visible {
        color: #fff;
        transform: translateX(3px);
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #website-root [data-website-header].is-scrolled {
        background: rgba(255, 255, 255, .97) !important;
    }
}

@media (max-width: 900px) {
    :root {
        --website-motion-distance: 16px;
    }

    #website-root .website-motion-card,
    #website-root .website-motion-card:hover,
    #website-root .website-motion-card:focus-within {
        transform: none;
    }

    #website-root.website-effects-ready .website-reveal,
    #website-root.website-effects-ready .website-motion-hero .website-hero-motion-item {
        transition-duration: .48s;
    }

    #website-root.website-effects-ready .website-motion-hero .website-hero-motion-visual {
        transform: translate3d(0, 6px, 0) scale(1.01);
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    #website-root,
    #website-root * {
        scroll-behavior: auto !important;
    }

    #website-root.website-effects-ready .website-reveal,
    #website-root.website-effects-ready .website-reveal.is-website-visible,
    #website-root.website-effects-ready .website-motion-hero .website-hero-motion-item,
    #website-root.website-effects-ready .website-motion-hero.is-website-visible .website-hero-motion-item,
    #website-root .website-motion-card,
    #website-root .website-motion-card:hover,
    #website-root .website-motion-card:focus-within,
    #website-root .website-motion-card.is-website-tilting,
    #website-root .website-motion-media :is(img, picture img),
    #website-root .website-motion-card:hover .website-motion-media :is(img, picture img) {
        opacity: 1;
        filter: none;
        transform: none !important;
        transition-duration: .01ms !important;
        animation: none !important;
    }

    #website-root .hotel-btn,
    #website-root .hotel-btn::before,
    #website-root .hotel-btn :is(i, svg, .icon),
    #website-root [data-website-header],
    #website-root [data-mobile-nav],
    #website-root [data-mobile-nav] .mobile-nav-panel {
        animation: none !important;
        transition: none !important;
    }

    #website-root .hotel-btn {
        transform: none !important;
    }

    #website-root .hotel-btn::before {
        display: none;
    }
}