/* Quiet, progressive enhancement. No JavaScript-dependent hidden content. */
:root {
  --clinic-reveal-distance: 30px;
  --clinic-hero-distance: 20px;
}

/* The homepage cards share a stage and crossfade, never slide sideways. */
.hp-card-carousel.is-ready .hp-card-track {
  display: block;
  position: relative;
  transform: none !important;
  transition: none;
  will-change: auto;
}
.hp-card-carousel.is-ready .hp-card-slide {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.2s ease-in-out, visibility 0s linear 1.2s;
}
.hp-card-carousel.is-ready .hp-card-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition-delay: 0s;
}
.hp-card-carousel .hp-card-viewport {
  transition: height 1.2s ease-in-out;
}

/* The original background is moved to its own layer, below its existing veil. */
.hp-team-card.has-motion-backdrop { background-image: none; }
.hp-team-card.has-motion-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--clinic-motion-background);
  background-color: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
}

@keyframes clinic-hero-enter {
  from { opacity: 0; translate: 0 var(--clinic-hero-distance); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes clinic-scroll-enter {
  from { opacity: 0; translate: 0 var(--clinic-reveal-distance); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes clinic-slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* Labels, heading, body, then action: 0 / 150 / 300 / 450 ms. */
.hp-card-carousel.is-ready .has-entered [data-hero-motion] {
  animation: clinic-hero-enter .8s ease-out both;
  animation-delay: var(--clinic-hero-delay, 0s);
}
.hp-card-carousel.is-ready .hp-card-slide:not(.is-active) [data-hero-motion] {
  animation-play-state: paused;
}
.site-typography .clinic-reveal {
  animation: clinic-scroll-enter .8s ease-out both;
  animation-delay: var(--clinic-reveal-delay, 0ms);
}

/* Keep existing colors, layout, and focus indicators. Only feedback changes. */
.site-typography .clinic-motion-button {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.site-typography .clinic-motion-button:is(:hover, :active) { transform: none; }
.site-typography .clinic-motion-arrow {
  display: inline-block;
  transition: transform .3s ease-out;
}
.site-typography a.clinic-motion-link {
  position: relative;
  text-decoration: none;
}
.site-typography .clinic-motion-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease-out;
  pointer-events: none;
}
.site-typography .clinic-motion-link:hover { text-decoration: none; }
.site-typography :is(.hp-doctor, .hp-history) a.clinic-motion-link {
  border-bottom-color: transparent;
}
.site-typography .clinic-motion-link:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}
.site-typography .clinic-motion-card,
.site-typography .clinic-motion-photo {
  transition: scale .3s ease-out, box-shadow .3s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .site-typography .clinic-motion-button:hover {
    background-color: color-mix(in srgb, var(--clinic-button-background, transparent) 92%, #000) !important;
  }
}
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  .site-typography :is(a, button):is(:hover, :focus-visible) .clinic-motion-arrow {
    transform: translateX(4px);
  }
  .site-typography .clinic-motion-card:is(:hover, :focus-within),
  .site-typography .clinic-motion-photo:hover {
    scale: 1.03;
    box-shadow: 0 8px 24px rgb(28 43 37 / 7%);
  }
  /* A photo inside a card must not get a second, compounded zoom. */
  .site-typography .clinic-motion-card .clinic-motion-photo:hover {
    scale: 1;
    box-shadow: none;
  }
}
@media (min-width: 701px) {
  .hp-card-carousel.is-ready .has-entered .hp-hero-art,
  .hp-card-carousel.is-ready .has-entered .hp-story-visual > img,
  .hp-card-carousel.is-ready .has-entered.has-motion-backdrop::after {
    animation: clinic-slow-zoom 6s linear both;
    transform-origin: center;
  }
  .hp-card-carousel.is-ready .has-entered .hp-hero-art {
    transform-origin: right center;
  }
  .hp-card-carousel.is-ready .hp-card-slide:not(.is-active) .hp-hero-art,
  .hp-card-carousel.is-ready .hp-card-slide:not(.is-active) .hp-story-visual > img,
  .hp-card-carousel.is-ready .hp-card-slide:not(.is-active).has-motion-backdrop::after {
    animation-play-state: paused;
  }
}

/* On phones, appearances are fade-only and nothing scales or shifts. */
@media (max-width: 700px) {
  :root { --clinic-reveal-distance: 0px; --clinic-hero-distance: 0px; }
  .site-typography .clinic-motion-card,
  .site-typography .clinic-motion-photo,
  .site-typography .clinic-motion-arrow { scale: none; transform: none; }
  .site-typography .clinic-motion-link::after { transition: none; }
  .hp-card-carousel .hp-card-viewport { transition: none; }
}

/* Also stops older page animations and smooth scrolling, including hover. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .site-typography,
  .site-typography *,
  .site-typography *::before,
  .site-typography *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .site-typography .clinic-reveal,
  .site-typography [data-hero-motion] { opacity: 1 !important; translate: none !important; }
  .site-typography .clinic-motion-card,
  .site-typography .clinic-motion-photo { scale: none !important; }
  .site-typography .clinic-motion-arrow,
  .site-typography .clinic-motion-button,
  .site-typography .clinic-motion-link::after { transform: none !important; }
  .site-typography .clinic-motion-link::after { display: none; }
}

@media print {
  .site-typography .clinic-reveal { animation: none !important; opacity: 1; translate: none; }
  .hp-card-carousel.is-ready .hp-card-viewport { height: auto !important; overflow: visible; }
  .hp-card-carousel.is-ready .hp-card-slide {
    position: relative;
    opacity: 1;
    visibility: visible;
    break-inside: avoid;
  }
  .hp-card-carousel .hp-card-controls { display: none; }
}