/*
Front-end motion only (not loaded in the editor). Everything here is an
enhancement: content is always shown in its final state (nothing fades or
slides in), and none of it runs for visitors who prefer reduced motion. Only opacity, transform, colour and shadow animate (one duration, --motion-base, and one curve, --ease-calm), so
nothing shifts layout. Movement on hover also needs a pointer that can hover (touch screens get no sticky hovers).
*/
:root{--ease-calm:cubic-bezier(.22,.61,.36,1);--motion-base:180ms}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  /* Page-to-page: a soft cross-fade, with the header held still. */
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:320ms;animation-timing-function:var(--ease-calm)}

  /* Responses to the visitor's own actions. */
  .wp-element-button,.wp-block-button__link{transition:background-color var(--motion-base) var(--ease-calm),color var(--motion-base) var(--ease-calm),box-shadow var(--motion-base) var(--ease-calm),scale var(--motion-base) var(--ease-calm)}
  /* A press answers at once: buttons give a little under the finger or pointer. */
  :is(.wp-block-button__link,.wp-element-button,.carousel-button,.header-search .wp-block-search__button):active{scale:.98}
  :is(.carousel-button,.header-search .wp-block-search__button){transition-property:background-color,box-shadow,scale;transition-duration:var(--motion-base)}
  a{transition:color var(--motion-base) var(--ease-calm),text-decoration-color var(--motion-base) var(--ease-calm),text-underline-offset var(--motion-base) var(--ease-calm)}
  .main-nav .wp-block-navigation-item__content::before{transition:transform var(--motion-base) var(--ease-calm)}
  .service-item,.treatment-grid li{transition:transform var(--motion-base) var(--ease-calm),box-shadow var(--motion-base) var(--ease-calm),border-color var(--motion-base) var(--ease-calm)}
  :is(.service-item,.treatment-grid li) :is(.wp-block-post-featured-image img,.service-photo),.gallery-new-photo img,.photo-gallery .wp-block-post-content img,.contact-photo img,.brand img,.footer-brand img,.wp-block-read-more{transition:transform var(--motion-base) var(--ease-calm),opacity var(--motion-base) var(--ease-calm)}
  .visit-map img{transition:transform var(--motion-base) var(--ease-calm)}
  .wp-block-read-more,.link-arrow{display:inline-block}
  .link-arrow{transition:translate var(--motion-base) var(--ease-calm)}
  a.payment-chip{transition:box-shadow var(--motion-base) var(--ease-calm),translate var(--motion-base) var(--ease-calm)}
  .footer-social .wp-social-link{transition:color var(--motion-base) var(--ease-calm)}

  /* Hover only where hovering exists; keyboard focus gets the same movement. */
  @media (hover:hover){
    a:hover{text-underline-offset:6px}
    .main-nav .wp-block-navigation-item__content:hover::before{transform:translateY(-2px)}
    .service-item:hover,.treatment-grid li:hover{transform:translateY(-4px)}
    :is(.service-item,.treatment-grid li):hover :is(.wp-block-post-featured-image img,.service-photo){transform:scale(1.03)}
    .treatment-grid li:hover .wp-block-read-more{translate:3px 0}
    .gallery-new-photo:hover img,.photo-gallery .wp-block-post-content a:hover img,.contact-photo:hover img{transform:scale(1.03)}
    .brand figure a:hover img,.footer-brand figure a:hover img{transform:scale(1.03)}
    .visit-map:hover img{transform:scale(1.03)}
    .visit-band p:not(.payment-chips) a:hover{text-underline-offset:6px}
    a:hover>.link-arrow{translate:3px 0}
    a.payment-chip:hover{translate:0 -2px}
  }
  a:focus-visible>.link-arrow{translate:3px 0}
  a.payment-chip:focus-visible{translate:0 -2px}
  .visit-map:has(:focus-visible) img{transform:scale(1.03)}
  .service-item:has(a:focus-visible),.treatment-grid li:has(a:focus-visible){transform:translateY(-4px)}
  :is(.service-item,.treatment-grid li):has(a:focus-visible) :is(.wp-block-post-featured-image img,.service-photo){transform:scale(1.03)}
  .treatment-grid li:has(a:focus-visible) .wp-block-read-more{translate:3px 0}
  .gallery-new-photo a:focus-visible img,.contact-photo a:focus-visible img{transform:scale(1.03)}
}