/* Guest motion layer: one timing system for page transitions, scroll reveals and touch feedback.
   Reveals only apply to elements motion.js tags below the fold, so no content depends on JS.
   Entrance animations use fill-mode "backwards" and the individual translate/scale properties,
   so they never leave a transform behind (fixed dialogs inside them keep the viewport as their box)
   and never fight the transform-based hover states already defined per page. */
:root {
    --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
    --motion-ease-in: cubic-bezier(.55, 0, 1, .45);
    --motion-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --motion-fast: 160ms;
    --motion-base: 260ms;
    --motion-slow: 520ms;
    --motion-reveal: 760ms;
    --motion-stagger: 70ms;
}

html {scroll-behavior: smooth; -webkit-tap-highlight-color: transparent}
/* Entrance offsets and rails must never widen the page into a sideways scroll. */
.guest-body #app, .guest-body .guest-footer {overflow-x: clip}
.guest-body {text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased}

/* Touch feedback: press states use the scale property so they stack with hover transforms. */
.guest-body :is(.button, .home-search__submit, .home-theme-toggle, .guest-header__login, .featured-stays__all, .mobile-guest-nav a, .mobile-guest-nav button) {touch-action: manipulation}
.guest-body .button {position: relative; overflow: hidden; isolation: isolate}
.motion-ripple {position: absolute; z-index: -1; width: var(--ripple-size); height: var(--ripple-size); inset-inline-start: auto; left: var(--ripple-x); top: var(--ripple-y); border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; translate: -50% -50%; scale: 0}

@media (prefers-reduced-motion: no-preference) {
    /* Cross-document page transitions (progressive: browsers without support navigate normally). */
    @view-transition {navigation: auto}
    ::view-transition-old(root) {animation: motion-page-out 180ms var(--motion-ease-in) both}
    ::view-transition-new(root) {animation: motion-page-in 360ms var(--motion-ease-out) both}
    .guest-body .guest-header {view-transition-name: guest-header}
    .guest-body .mobile-guest-nav {view-transition-name: guest-tabbar}
    ::view-transition-group(guest-header), ::view-transition-group(guest-tabbar) {animation-duration: 0s}

    /* Scroll reveals. */
    .motion-ready [data-reveal] {opacity: 0; translate: 0 26px; transition: opacity var(--motion-reveal) var(--motion-ease-out), translate var(--motion-reveal) var(--motion-ease-out), scale var(--motion-reveal) var(--motion-ease-out); transition-delay: calc(var(--reveal-index, 0) * var(--motion-stagger))}
    .motion-ready [data-reveal="fade"] {translate: none}
    .motion-ready [data-reveal="zoom"] {translate: 0 14px; scale: .96}
    .motion-ready [data-reveal="side"] {translate: 28px 0} /* RTL: enters from the reading start */
    .motion-ready [data-reveal].is-revealed {opacity: 1; translate: none; scale: none}

    /* Lazy images fade in over a soft shimmer instead of popping. */
    .motion-ready img.motion-img {transition: opacity 600ms var(--motion-ease-out), scale 900ms var(--motion-ease-out)}
    .motion-ready img.motion-img:not(.is-loaded) {opacity: 0; scale: 1.04}
    .motion-ready :is(.home-stay-card__media, .stay-card__media, .public-host-stay-card__media):has(img.motion-img:not(.is-loaded)) {background-image: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 38%) 50%, transparent 80%); background-size: 220% 100%; animation: motion-shimmer 1.3s linear infinite}
    :root[data-home-theme="dark"].motion-ready :is(.home-stay-card__media, .stay-card__media, .public-host-stay-card__media):has(img.motion-img:not(.is-loaded)) {background-image: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 6%) 50%, transparent 80%)}

    /* Header: soft elevation once the page scrolls, and it tucks away on mobile while reading down. */
    .guest-body .guest-header {transition: translate 420ms var(--motion-ease-out), box-shadow var(--motion-base) ease, background-color var(--motion-base) ease}
    .guest-body .guest-header.is-scrolled {box-shadow: 0 10px 30px rgb(52 24 38 / 8%)}
    :root[data-home-theme="dark"] .guest-body .guest-header.is-scrolled {box-shadow: 0 10px 30px rgb(0 0 0 / 35%)}

    /* Buttons and controls. */
    .guest-body .button {transition: background-color var(--motion-base) ease, color var(--motion-base) ease, border-color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--motion-ease-out), scale var(--motion-fast) var(--motion-ease-out)}
    .guest-body :is(.button, .home-search__submit, .home-theme-toggle, .guest-header__login, .mobile-guest-nav a, .mobile-guest-nav button) {transition-property: background-color, color, border-color, box-shadow, transform, scale; transition-duration: var(--motion-base), var(--motion-base), var(--motion-base), var(--motion-base), var(--motion-base), var(--motion-fast); transition-timing-function: var(--motion-ease-out)}
    .guest-body :is(.button, .home-search__submit, .home-theme-toggle, .guest-header__login):active {scale: .965}
    .guest-body .motion-ripple.is-active {animation: motion-ripple 620ms var(--motion-ease-out) forwards}
    .guest-body .featured-stays__all span[aria-hidden="true"] {display: inline-block}
    .guest-body .featured-stays__all span[aria-hidden="true"], .guest-body .home-stay-card__footer > b, .guest-body .popular-city-card > b {transition: translate var(--motion-base) var(--motion-ease-spring)}
    .guest-body .featured-stays__all:hover span[aria-hidden="true"], .guest-body .home-stay-card:hover .home-stay-card__footer > b, .guest-body .popular-city-card:hover > b {translate: -5px 0}

    /* Cards: lift on hover for pointers, gentle press for touch. */
    .guest-body :is(.home-stay-card, .category-card, .popular-city-card, .stay-card, .public-host-stay-card) {transition: translate 380ms var(--motion-ease-out), scale var(--motion-fast) var(--motion-ease-out), box-shadow 380ms var(--motion-ease-out)}
    .guest-body :is(.home-stay-card, .category-card, .popular-city-card, .stay-card, .public-host-stay-card):active {scale: .985}
    .guest-body :is(.category-card__image, .home-stay-card__media img, .popular-city-card > img, .stay-card__media img, .public-host-stay-card__media img) {transition: transform 700ms var(--motion-ease-out), opacity 600ms var(--motion-ease-out)}

    /* Mobile tab bar: the active tab gets a small spring when the page opens. */
    .guest-body .mobile-guest-nav :is(a, button):active {scale: .92}
    .guest-body .mobile-guest-nav [aria-current="page"] .ui-icon {animation: motion-tab-pop 520ms var(--motion-ease-spring) 120ms backwards}
    .guest-body .mobile-guest-nav [aria-current="page"]::before {animation: motion-tab-bar 420ms var(--motion-ease-out) 80ms backwards}

    /* FAQ and other disclosure panels open with a short drop instead of snapping. */
    .guest-body .faq-icon {transition: transform 320ms var(--motion-ease-spring), color var(--motion-base) ease}
    .guest-body .faq-item > div:not([hidden]) {animation: motion-drop 360ms var(--motion-ease-out) backwards}
    .guest-body .faq-item button {transition: color var(--motion-base) ease}
    .guest-body .faq-item button:hover, .guest-body .faq-item.is-open button {color: var(--brand)}
    .guest-body .guest-user-menu[open] .guest-user-menu__panel {animation: motion-pop 260ms var(--motion-ease-out) backwards; transform-origin: top left}
    .guest-body .guest-user-menu__chevron {transition: rotate var(--motion-base) var(--motion-ease-out)}
    .guest-body .guest-user-menu[open] .guest-user-menu__chevron {rotate: 180deg}

    /* Bottom sheets and dialogs slide from the edge they belong to. */
    .guest-body :is(.destination-panel, .search-calendar-panel):not([hidden]) {animation: motion-pop 280ms var(--motion-ease-out) backwards}
    .guest-body .search-modal-backdrop:not([hidden]) {animation: motion-fade 220ms ease backwards}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .guest-body :is(.home-stay-card, .category-card, .popular-city-card, .stay-card, .public-host-stay-card):hover {translate: 0 -4px}
    .guest-body :is(.stay-card, .public-host-stay-card):hover :is(.stay-card__media, .public-host-stay-card__media) img {transform: scale(1.05)}
    .guest-body .home-stay-card:hover .home-stay-card__media, .guest-body .category-card:hover .category-card__image {box-shadow: 0 18px 40px rgb(52 24 38 / 16%)}
    .guest-body .category-card:hover .category-card__image, .guest-body .home-stay-card:hover .home-stay-card__media img {transform: scale(1.06)}
    .guest-body .popular-city-card:hover > img {transform: scale(1.05) rotate(-1.5deg)}
    .guest-body .home-stay-card__media, .guest-body .category-card__image {transition: box-shadow 380ms var(--motion-ease-out), transform 700ms var(--motion-ease-out)}
    .guest-body .button:not(:disabled):hover {box-shadow: 0 10px 26px rgb(142 23 79 / 24%)}
}

@media (max-width: 767px) {
    .guest-body .popular-city-card > b {display: none}
}

@media (max-width: 650px) and (prefers-reduced-motion: no-preference) {
    /* On phones these dialogs are bottom sheets, so they rise from the bottom edge. */
    .guest-body :is(.destination-panel, .search-calendar-panel):not([hidden]) {animation: motion-sheet 380ms var(--motion-ease-out) backwards}
}
@keyframes motion-sheet {from {translate: 0 100%}}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    /* Only the home page: other pages pin their own toolbars right under the header. */
    .guest-home .guest-header.is-tucked {translate: 0 -100%; box-shadow: none}
}

@keyframes motion-page-out {to {opacity: 0; transform: translateY(-8px)}}
@keyframes motion-page-in {from {opacity: 0; transform: translateY(14px)}}
@keyframes motion-rise {from {opacity: 0; translate: 0 24px}}
@keyframes motion-fade {from {opacity: 0}}
@keyframes motion-drop {from {opacity: 0; translate: 0 -8px}}
@keyframes motion-pop {from {opacity: 0; scale: .96; translate: 0 10px}}
@keyframes motion-ripple {0% {scale: 0; opacity: .28} 100% {scale: 1; opacity: 0}}
@keyframes motion-shimmer {from {background-position: 120% 0} to {background-position: -120% 0}}
@keyframes motion-tab-pop {0% {scale: .6; translate: 0 6px} 100% {scale: 1; translate: none}}
@keyframes motion-tab-bar {from {scale: 0 1}}
@keyframes motion-media-in {from {opacity: 0; clip-path: inset(8% 6% 8% 6% round 28px)} to {opacity: 1; clip-path: inset(0 0 0 0 round 0)}}
@keyframes motion-ken-burns {from {scale: 1.12}}

@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto}
    .motion-ripple {display: none}
}