/* Public-site motion. Content remains visible and usable without JavaScript. */
.site-shell {
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-short: 180ms;
    --motion-panel: 360ms;
}

.site-shell .tourism-hero--carousel .tourism-hero__scene { display: grid; }
.site-shell .tourism-hero--carousel .tourism-hero__copy {
    grid-area: 1 / 1; margin: 0; animation: none;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 650ms ease, visibility 650ms;
}
.site-shell .tourism-hero--carousel .tourism-hero__copy.is-active {
    opacity: 1; visibility: visible; pointer-events: auto;
}
.tourism-hero__controls {
    position: absolute; inset-inline: 18px; bottom: 10px; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 9px;
}
.tourism-hero__pause, .tourism-hero__dot {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; min-height: 32px; padding: 0; border: 0;
    color: #244b3a; background: #ffffffc9; border-radius: 50%;
}
.tourism-hero__pause { font-size: 14px; }
.tourism-hero__dot { width: 44px; border-radius: 12px; background: transparent; }
.tourism-hero__dot-track { position: relative; width: 36px; height: 4px; border-radius: 4px; background: #fff9; overflow: hidden; }
.tourism-hero__dot-progress { display: block; height: 100%; background: #285b42; transform: scaleX(0); transform-origin: right; }
.tourism-hero__dot[aria-current="true"] .tourism-hero__dot-progress { animation: motion-hero-progress 7s linear forwards; }
.tourism-hero--paused .tourism-hero__dot-progress { animation-play-state: paused !important; }
.tourism-hero__controls button:focus-visible { outline: 2px solid #244b3a; outline-offset: 2px; }
.tourism-hero--carousel .tourism-hero__copy { padding-bottom: 49px; }

/* Skeletons cover only the area being refreshed, without blocking the page. */
.motion-results-loading { position: relative; }
.motion-results-loading::before {
    content: ''; position: absolute; inset: 0 12px auto; height: 3px;
    background: #c9dbcf; border-radius: 2px; pointer-events: none; z-index: 2;
}
.motion-skeleton-grid {
    position: absolute; inset: 0 12px auto; z-index: 1;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
    pointer-events: none;
}
.motion-skeleton-card { min-width: 0; padding-bottom: 20px; }
.motion-skeleton-image, .motion-skeleton-line {
    background: #eef0ed; position: relative; overflow: hidden; border-radius: 6px;
}
.motion-skeleton-image { aspect-ratio: 1.55; border-radius: 16px; margin-bottom: 16px; }
.motion-skeleton-line { height: 12px; width: 78%; margin-block: 12px; }
.motion-skeleton-line:last-child { width: 45%; }
.motion-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.motion-skeleton-grid--units { grid-template-columns: 1fr; inset-inline: 12px 34%; }
.motion-skeleton-grid--units .motion-skeleton-card { display: grid; grid-template-columns: 38% 1fr; gap: 16px; align-items: start; }
.motion-skeleton-grid--units .motion-skeleton-image { grid-row: span 3; margin: 0; }
.motion-skeleton-grid--units .motion-skeleton-line { margin-top: 6px; }

@keyframes motion-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-art { from { translate: 0 8px; } to { translate: 0 0; } }
@keyframes motion-panel { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-gallery { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-content { from { opacity: .35; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes motion-card { from { opacity: .25; } to { opacity: 1; } }
@keyframes motion-skeleton { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@keyframes motion-hero-progress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
    .site-shell .tourism-hero__art { animation: motion-art 800ms var(--motion-ease) both; }
    .site-shell .tourism-hero__copy { animation: none; }
    .site-shell .tourism-hero__copy.is-active > *,
    .site-shell .tourism-hero:not(.tourism-hero--carousel) .tourism-hero__copy > * {
        animation: motion-arrive 650ms var(--motion-ease) both;
    }
    .tourism-hero__copy > :nth-child(1) { animation-delay: 60ms !important; }
    .tourism-hero__copy > :nth-child(2) { animation-delay: 130ms !important; }
    .tourism-hero__copy > :nth-child(3) { animation-delay: 210ms !important; }
    .tourism-hero__copy > :nth-child(4) { animation-delay: 280ms !important; }
    .tourism-hero__copy > :nth-child(5) { animation-delay: 340ms !important; }
    .site-shell .motion-enter { animation: motion-arrive 420ms var(--motion-ease) var(--motion-delay, 0ms) backwards; }
    .site-shell .motion-card-enter { animation-name: motion-card; animation-duration: 320ms; }
    .site-shell :is(.category-carousel__track, .complex-carousel-track, .daltonModal__nav) { scroll-behavior: smooth; }
    .site-shell .swiper-wrapper { transition-timing-function: cubic-bezier(.25,.8,.25,1); }
    .site-shell .top-search-bar {
        transition: width 460ms var(--motion-ease), border-radius 460ms var(--motion-ease), box-shadow 250ms ease;
    }
    .site-shell .mobile-search-floating-bar { transition: border-radius 320ms var(--motion-ease), box-shadow 250ms ease; }
    .site-shell .modal.fade .modal-dialog { transition: transform 360ms var(--motion-ease); }
    .site-shell .modal.show:not(#daltonModal) > .modal-dialog { animation: motion-panel 360ms var(--motion-ease); }
    .site-shell #daltonModal.show > .modal-dialog { animation: motion-gallery 380ms var(--motion-ease); }
    .site-shell :is(.dateBtn.show .dateBtn__drodown, .guestsBtn.show .guests__dropdown,
        .tab-pane.active, .amenity-dialog__body > section:not([hidden])) { animation: motion-content 240ms var(--motion-ease); }
    .site-shell :is(.unit-full-details, .amenity-dialog, .mobile-reviews-dialog, .payment-info-dialog)[open],
    .site-shell .photo-viewer { animation: motion-panel 360ms var(--motion-ease); }
    .site-shell :is(.complex-about-dialog.is-open, .all-reviews-sheet:not([hidden])) { animation: motion-card 240ms ease; }
    .site-shell :is(.complex-about-dialog.is-open .complex-about-dialog__panel, .all-reviews-sheet:not([hidden]) .all-reviews-sheet__panel) { animation: motion-panel 360ms var(--motion-ease); }
    .site-shell .mobile-order-open .mobile-order-sheet { animation: motion-panel 380ms var(--motion-ease); }
    .site-shell :is(.link-icons__action, .mobile-gallery-favorite, .desktop-gallery-favorite,
        .photo-viewer__arrow, .tourism-hero__controls button, .bottom-nav-item, .amenities-compact__all,
        .unit-compact-open, .complex-stay-range) {
        transition: scale 180ms var(--motion-ease), background-color 180ms ease, color 180ms ease;
    }
    .site-shell :is(.link-icons__action, .mobile-gallery-favorite, .desktop-gallery-favorite,
        .tourism-hero__controls button, .photo-viewer__arrow):active { scale: .9; }
    .site-shell :is(.bottom-nav-item, .amenities-compact__all, .unit-compact-open, .complex-stay-range):active { scale: .97; }
    .motion-skeleton-image::after, .motion-skeleton-line::after {
        content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffffb3, transparent);
        animation: motion-skeleton 1.5s ease-in-out infinite;
    }
    .site-shell .public-location-map__loading { animation: motion-content 1.5s ease-in-out infinite alternate; }
    .site-shell .public-location-map__marker > span { animation: motion-panel 420ms var(--motion-ease); transition: scale 200ms var(--motion-ease); }
    .site-shell .public-location-map:hover .public-location-map__marker > span { scale: 1.06; }
}

/* Native dialogs keep their top layer during a supported exit transition. */
@supports (transition-behavior: allow-discrete) and (overlay: auto) {
    @media (prefers-reduced-motion: no-preference) {
        .site-shell dialog:is(.unit-full-details, .amenity-dialog, .mobile-reviews-dialog, .payment-info-dialog) {
            opacity: 0; translate: 0 20px;
            transition: opacity 240ms ease, translate 360ms var(--motion-ease), display 360ms allow-discrete, overlay 360ms allow-discrete;
        }
        .site-shell dialog:is(.unit-full-details, .amenity-dialog, .mobile-reviews-dialog, .payment-info-dialog)[open] {
            opacity: 1; translate: 0 0; animation: none;
        }
        .site-shell dialog:is(.unit-full-details, .amenity-dialog, .mobile-reviews-dialog, .payment-info-dialog)::backdrop {
            background: #0000;
            transition: background-color 240ms ease, display 360ms allow-discrete, overlay 360ms allow-discrete;
        }
        .site-shell dialog:is(.unit-full-details, .amenity-dialog, .mobile-reviews-dialog, .payment-info-dialog)[open]::backdrop { background: #14201970; }
        @starting-style {
            .site-shell dialog:is(.unit-full-details, .amenity-dialog, .mobile-reviews-dialog, .payment-info-dialog)[open] { opacity: 0; translate: 0 20px; }
            .site-shell dialog:is(.unit-full-details, .amenity-dialog, .mobile-reviews-dialog, .payment-info-dialog)[open]::backdrop { background: #0000; }
        }
    }
}
@media (min-width: 1200px) {
    .site-shell .top-search-bar { width: 100%; margin-inline: auto; }
    .site-shell.motion-scrolled .top-search-bar { width: 96%; border-radius: 32px; box-shadow: 0 4px 18px #243e2b14; }
}
@media (max-width: 991px) { .motion-skeleton-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 767.98px) {
    .tourism-hero--carousel .tourism-hero__copy { padding-bottom: 112px; }
    .motion-skeleton-grid, .motion-skeleton-grid--units { grid-template-columns: 1fr; inset-inline: 12px; }
    .motion-skeleton-card:nth-child(n+3) { display: none; }
    .motion-skeleton-grid--units .motion-skeleton-card { display: block; }
    .motion-skeleton-grid--units .motion-skeleton-image { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-shell :is(.tourism-hero, .category-carousel, .place-card, .unit-card-refresh, .modal, dialog,
        .photo-viewer, .mobile-order-sheet, .top-search-bar, .public-location-map, .complex-carousel-track,
        .category-carousel__track, .motion-skeleton-grid),
    .site-shell :is(.tourism-hero, .category-carousel, .place-card, .unit-card-refresh, .modal, dialog,
        .photo-viewer, .mobile-order-sheet, .public-location-map) *,
    .site-shell .motion-enter { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
    .site-shell .tourism-hero__dot[aria-current="true"] .tourism-hero__dot-progress { transform: scaleX(1); }
}