/* Small, finite responses. Camera, marker placement, sheets and photo blends
   keep their own motion; this layer never animates those transforms. */
:root{--micro-ease:cubic-bezier(.22,1,.36,1);--micro-time:220ms}

/* Explicit properties keep glass and layout changes out of the animation. */
:is(.brand,.text-button,.round-button,.sheet-toggle,.gallery-autoplay,
.gallery-navigation button,.map-style-switch button,.category-filters button,
.map-controls button,.maplibregl-ctrl-attrib-button,.booking-button,.destination-actions a,.nearby-item,
.photo-thumb,.destination-photos button,.lightbox-top button,.lightbox-stage>button,
.fallback-stays button){
 transition:background-color var(--micro-time) ease,color var(--micro-time) ease,
 opacity var(--micro-time) ease,translate var(--micro-time) var(--micro-ease),
 scale var(--micro-time) var(--micro-ease);
}
:is(.text-button,.round-button,.sheet-toggle,.gallery-autoplay,.gallery-navigation button,
.map-style-switch button,.category-filters button,.map-controls button,.booking-button,
.destination-actions a,.nearby-item,.destination-source,.lightbox-top button,
.lightbox-stage>button)>.icon,
.nearby-item>.service-icon,.brand .wordmark,.brand-dot,.expand-photo,
.atlas-pin__dot>svg{
 transition:translate var(--micro-time) var(--micro-ease),scale var(--micro-time) var(--micro-ease),
 rotate 320ms var(--micro-ease),opacity var(--micro-time) ease;
}
.brand-dot{display:inline-block}
.photo-thumb>img{transition:scale 420ms var(--micro-ease)}
:is(.destination-source,.lightbox-credit,.maplibregl-ctrl-attrib a,.skip-link){
 transition:color 180ms ease,text-decoration-color 180ms ease,text-underline-offset 180ms ease;
}

/* Press feedback also works on touch, without waiting for hover. */
:is(.brand,.text-button,.round-button,.sheet-toggle,.gallery-autoplay,
.gallery-navigation button,.map-style-switch button,.category-filters button,
.map-controls button,.maplibregl-ctrl-attrib-button,.lightbox-top button,.lightbox-stage>button,
.fallback-stays button):not(:disabled):active{scale:.95;transition-duration:90ms}
:is(.booking-button,.destination-actions a,.nearby-item,.photo-thumb,
.destination-photos button):not(:disabled):active{scale:.985;transition-duration:90ms}
.gallery-main:active .expand-photo{scale:.92;transition-duration:90ms}
.atlas-pin:not(.atlas-pin--pending):not(.atlas-pin--exiting):active .atlas-pin__dot>svg{scale:.86;transition-duration:90ms}

/* A focus ring inside clipped photo/rail controls stays visible over imagery.
   It is a keyboard indicator, never a permanent outline on the glass. */
.photo-thumb,.destination-photos button{position:relative}
:is(.gallery-main,.photo-thumb,.destination-photos button):focus-visible{outline:none}
:is(.gallery-main,.photo-thumb,.destination-photos button):focus-visible::after{
 content:"";position:absolute;inset:5px;z-index:4;border:2px solid #fff;
 border-radius:10px;box-shadow:0 0 0 2px #0009;pointer-events:none;
}
.photo-thumb:focus-visible::after{inset:3px;border-radius:5px}
:is(.zoom-controls>button,.category-filters button,.map-style-switch button,.sheet-toggle):focus-visible{
 outline:2px solid currentColor;outline-offset:-5px;
}
@media(forced-colors:active){
 :is(.gallery-main,.photo-thumb,.destination-photos button):focus-visible::after{border-color:Highlight}
 :is(.zoom-controls>button,.category-filters button,.map-style-switch button,.sheet-toggle):focus-visible{outline-color:Highlight}
}

/* Focus responses supplement the existing visible keyboard indicator. */
:is(.booking-button,.destination-source):focus-visible>.icon{translate:2px -2px}
.nearby-item:focus-visible>.icon{translate:3px 0}
.text-button:focus-visible>.icon{translate:-3px 0}
:is(.round-button,.sheet-toggle,.gallery-autoplay,.gallery-navigation button,
.map-style-switch button,.category-filters button,.map-controls button,.destination-actions a,
.lightbox-top button,.lightbox-stage>button):focus-visible>.icon{scale:1.1}
.gallery-main:focus-visible .expand-photo{scale:1.1}
.photo-thumb:focus-visible>img{scale:1.035}
.brand:focus-visible .brand-dot{translate:0 -2px}
#theme-toggle:focus-visible>.icon{rotate:14deg}
:is(.destination-source,.lightbox-credit,.maplibregl-ctrl-attrib a):focus-visible{text-underline-offset:5px}

@media(hover:hover) and (pointer:fine){
 :is(.booking-button,.destination-actions a,.nearby-item,.category-filters button,
 .photo-thumb,.fallback-stays button):not(:disabled):hover{translate:0 -2px}
 .brand:hover .wordmark{scale:1.015}
 .brand:hover .brand-dot{translate:0 -2px}
 .text-button:hover>.icon{translate:-3px 0}
 :is(.booking-button,.destination-source):hover>.icon{translate:2px -2px}
 .nearby-item:hover>.icon{translate:3px 0}
 .nearby-item:hover>.service-icon{scale:1.06}
 :is(.round-button,.gallery-autoplay,.gallery-navigation button,.map-controls button,
 .lightbox-top button,.lightbox-stage>button):not(:disabled):hover>.icon{scale:1.1}
 #reset-view:hover>.icon{rotate:16deg}
 #theme-toggle:hover>.icon{rotate:14deg}
 :is(#close-destination,#close-gallery):hover>.icon{rotate:12deg}
 .gallery-main:hover .expand-photo{scale:1.1}
 .photo-thumb:hover>img{scale:1.035}
 :is(.destination-source,.lightbox-credit,.maplibregl-ctrl-attrib a):hover{text-underline-offset:5px}
 :is(.booking-button,.destination-actions a,.nearby-item,.category-filters button,
 .photo-thumb,.fallback-stays button):active{translate:0 0}
}

/* Keep inherited image/pin hover enlargements from sticking after a touch. */
@media(hover:none),(pointer:coarse){
 .destination-photos button:hover img{transform:none}
 .atlas-pin:not(.atlas-pin--pending):not(.atlas-pin--exiting):hover:not(:focus-visible) .atlas-pin__dot{scale:1}
}

/* Saved state is one quiet confirmation, not a continuous pulse. */
#save-property[aria-pressed=true]>.icon{animation:micro-saved 420ms var(--micro-ease)}
.gallery-autoplay>.icon,#theme-toggle>.icon{animation:micro-appear 180ms ease}

/* These nodes survive filter/destination list updates. Entrance motion belongs
   to a new view, not to every replacement button or autoplay thumbnail. */
.category-filters:not([hidden]){animation:micro-enter 480ms var(--micro-ease)}
.property-heading>.eyebrow{animation:micro-enter 480ms var(--micro-ease) 50ms backwards}
.property-heading>h1{animation:micro-enter 520ms var(--micro-ease) 90ms backwards}
.property-facts>span{animation:micro-enter 480ms var(--micro-ease) 140ms backwards}
.property-facts>span:nth-child(2){animation-delay:180ms}
.property-facts>span:nth-child(3){animation-delay:220ms}
.property-description{animation:micro-enter 520ms var(--micro-ease) 180ms backwards}
.amenities>span{animation:micro-enter 480ms var(--micro-ease) 220ms backwards}
.amenities>span:nth-child(2){animation-delay:245ms}
.amenities>span:nth-child(3){animation-delay:270ms}
.amenities>span:nth-child(4){animation-delay:295ms}
.amenities>span:nth-child(5){animation-delay:320ms}
.booking-note{animation:micro-appear 500ms ease 240ms backwards}
.local-guide>.section-title{animation:micro-enter 520ms var(--micro-ease) 280ms backwards}
.local-guide>.guide-intro{animation:micro-enter 520ms var(--micro-ease) 320ms backwards}
#nearby-list{animation:micro-enter 520ms var(--micro-ease) 360ms backwards}
.route-disclosure{animation:micro-appear 500ms ease 400ms backwards}

/* Fresh destination content settles quickly; its sticky heading and actions
   keep their position and remain immediately usable. */
.destination-card:not([hidden])>h2{animation:micro-enter 420ms var(--micro-ease)}
.destination-card:not([hidden])>.destination-photos{animation:micro-enter 460ms var(--micro-ease) 45ms backwards}
.destination-card:not([hidden])>.route-summary{animation:micro-appear 400ms ease 80ms backwards}
.destination-card:not([hidden])>p{animation:micro-enter 460ms var(--micro-ease) 100ms backwards}
.destination-card:not([hidden])>.destination-actions>a{animation:micro-appear 400ms ease 140ms backwards}
.destination-card:not([hidden])>.destination-source{animation:micro-appear 400ms ease 180ms backwards}
.map-caption:not([hidden])>h1{animation:micro-enter 700ms var(--micro-ease) 120ms backwards}
.map-caption:not([hidden])>p{animation:micro-enter 700ms var(--micro-ease) 220ms backwards}
.overview-map-note:not([hidden])>div{animation:micro-enter 620ms var(--micro-ease) 280ms backwards}
.map-status:not([hidden]),.toast:not([hidden]){animation:micro-appear 220ms ease}
.gallery-dialog[open]{animation:micro-dialog 300ms var(--micro-ease)}
.gallery-dialog[open]::backdrop{animation:micro-appear 220ms ease}

@keyframes micro-enter{from{opacity:.45;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes micro-appear{from{opacity:.45}to{opacity:1}}
@keyframes micro-saved{0%{scale:.92}55%{scale:1.16}100%{scale:1}}
@keyframes micro-dialog{from{opacity:.4;scale:.985}to{opacity:1;scale:1}}

/* Live preference changes settle these effects immediately. No marker opacity,
   gallery layer state, or parent sheet transform is overridden here. */
@media(prefers-reduced-motion:reduce){
 :is(.brand,.text-button,.round-button,.sheet-toggle,.gallery-autoplay,
 .gallery-navigation button,.map-style-switch button,.category-filters button,
 .map-controls button,.maplibregl-ctrl-attrib-button,.booking-button,.destination-actions a,.nearby-item,
 .photo-thumb,.destination-photos button,.lightbox-top button,.lightbox-stage>button,
 .fallback-stays button,.destination-source,.lightbox-credit,.maplibregl-ctrl-attrib a,
 .skip-link,.brand .wordmark,.brand-dot,.expand-photo,.photo-thumb>img,
 .atlas-pin__dot>svg),
 :is(.text-button,.round-button,.sheet-toggle,.gallery-autoplay,.gallery-navigation button,
 .map-style-switch button,.category-filters button,.map-controls button,.booking-button,
 .destination-actions a,.nearby-item,.destination-source,.lightbox-top button,.lightbox-stage>button)>.icon,
 .nearby-item>.service-icon{
  transition:none!important;translate:none!important;scale:none!important;rotate:none!important;
 }
 :is(.category-filters,.property-heading>.eyebrow,.property-heading>h1,.property-facts>span,
 .property-description,.amenities>span,.booking-note,.local-guide>.section-title,
 .local-guide>.guide-intro,#nearby-list,.route-disclosure,.destination-card>h2,
 .destination-card>.destination-photos,.destination-card>.route-summary,.destination-card>p,
 .destination-actions>a,.destination-source,.map-caption>h1,.map-caption>p,
 .overview-map-note>div,.map-status,.toast,.gallery-dialog,.gallery-autoplay>.icon,#theme-toggle>.icon,#save-property>.icon){
  animation:none!important;
 }
 .gallery-dialog::backdrop{animation:none!important}
 .destination-photos button img{transform:none!important}
}