/* Native examples. The default without JavaScript keeps every image and text visible. */
:root {
  --clinic-primary: #175cff;
  --clinic-accent: #c9ff62;
  --clinic-ease: cubic-bezier(.22, 1, .36, 1);
  --clinic-enter-duration: 650ms;
}
.clinic-motion-ready .clinic-reveal {
  transition: opacity var(--clinic-enter-duration) ease, transform var(--clinic-enter-duration) var(--clinic-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.clinic-motion-ready .clinic-reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); }
.clinic-motion-ready .clinic-reveal:focus-within { opacity: 1; transform: none; }
.clinic-mask-motion { position: relative; height: 185vh; }
.clinic-mask-motion [data-mask-stage] {
  position: sticky; top: 10vh; height: 80vh; overflow: hidden;
  background: var(--clinic-primary); border-radius: 28px;
}
.clinic-mask-motion [data-mask-image] {
  display: block; width: 100%; height: 100%; object-fit: cover;
  mask-image: var(--mask-url, none); -webkit-mask-image: var(--mask-url, none);
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: center; -webkit-mask-position: center;
  mask-size: var(--mask-size, 100%) var(--mask-size, 100%);
  -webkit-mask-size: var(--mask-size, 100%) var(--mask-size, 100%);
}
.clinic-magnetic-target {
  display: inline-flex; transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px));
  transition: transform 180ms var(--clinic-ease);
}
.clinic-magnetic-target:focus-visible { transform: none; outline: 3px solid currentColor; outline-offset: 5px; }
.clinic-card-stack { display: grid; gap: 28px; padding-bottom: 12vh; }
.clinic-card-stack > * { position: sticky; top: calc(14vh + var(--stack-index, 0) * 22px); }
@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .clinic-mask-motion { height: auto; }
  .clinic-mask-motion [data-mask-stage] { position: relative; top: auto; height: auto; min-height: 280px; }
  .clinic-mask-motion [data-mask-image] { height: auto; min-height: 280px; mask-image: none !important; -webkit-mask-image: none !important; }
  .clinic-magnetic-target { transform: none !important; }
  .clinic-card-stack > * { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .clinic-motion-ready .clinic-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .clinic-mask-motion { height: auto; }
  .clinic-mask-motion [data-mask-stage] { position: relative; top: auto; height: auto; }
  .clinic-mask-motion [data-mask-image] { mask-image: none !important; -webkit-mask-image: none !important; height: auto; }
  .clinic-magnetic-target { transform: none !important; transition: none; }
  .clinic-card-stack > * { position: static; }
}