/* Motion within the accepted Butterfly layout. Clinic chapters own their scene. */
:root {
  --butterfly-motion-press: 90ms;
  --butterfly-motion-fast: 180ms;
  --butterfly-motion-control: 240ms;
  --butterfly-motion-panel: 360ms;
  --butterfly-motion-ease: cubic-bezier(.22,.75,.25,1);
}

/* The original logo stays complete underneath this temporary tracing stroke. */
.header .brand__mark .butterfly-contour-trace {
  stroke: var(--taupe-text);
  pointer-events: none;
}

.button:not(.clinic-story *),
.profile-booking:not(.clinic-story *) {
  transition: background-color var(--butterfly-motion-control) var(--butterfly-motion-ease),
    border-color var(--butterfly-motion-control) var(--butterfly-motion-ease),
    color var(--butterfly-motion-control) var(--butterfly-motion-ease),
    transform var(--butterfly-motion-fast) var(--butterfly-motion-ease);
}

.button:not(.clinic-story *):active,
.profile-booking:not(.clinic-story *):active {
  transform: translateY(1px) scale(.985);
  transition-duration: var(--butterfly-motion-press);
}

.button:not(.clinic-story *) .button__icon {
  transition: transform var(--butterfly-motion-control) var(--butterfly-motion-ease);
}

:is(a,button).text-link--arrow:not(.clinic-story *) > svg,
.personal-route li svg,
.document-links svg {
  transition: transform var(--butterfly-motion-control) var(--butterfly-motion-ease);
}

.button:not(.clinic-story *):focus-visible .button__icon,
:is(a,button).text-link--arrow:not(.clinic-story *):focus-visible > svg,
.personal-route li :is(a,button):focus-visible svg,
.document-links a:focus-visible svg {
  transform: translate(2px,-2px);
}

.desktop-nav a::after {
  transition: transform var(--butterfly-motion-control) var(--butterfly-motion-ease);
}

.desktop-nav a:focus-visible::after { transform: scaleX(1); }

.tab-controls button,
.price-filters button,
.booking-topics label span,
.journey-tabs button span {
  transition: background-color var(--butterfly-motion-control) var(--butterfly-motion-ease),
    border-color var(--butterfly-motion-control) var(--butterfly-motion-ease),
    color var(--butterfly-motion-control) var(--butterfly-motion-ease);
}

/* ARIA remains the source of selection. The existing circle is the indicator. */
.finder__tabs .finder__tab-arrow {
  transform: scale(.88);
  transition: opacity var(--butterfly-motion-fast) var(--butterfly-motion-ease),
    transform var(--butterfly-motion-control) var(--butterfly-motion-ease),
    background-color var(--butterfly-motion-control) var(--butterfly-motion-ease),
    color var(--butterfly-motion-control) var(--butterfly-motion-ease);
}

.finder__tab-arrow svg {
  transition: transform var(--butterfly-motion-control) var(--butterfly-motion-ease);
}

.finder__tabs button[aria-selected=true] .finder__tab-arrow,
.finder__tabs button:focus-visible .finder__tab-arrow { transform: scale(1); }
.finder__tabs button:focus-visible .finder__tab-arrow svg { transform: translate(2px,-2px); }

.experience-ready [data-panel].is-changing {
  animation-duration: var(--butterfly-motion-panel);
  animation-timing-function: var(--butterfly-motion-ease);
}

/* Short readable steps replace a second parent transition, without changing flow. */
.butterfly-motion-ready.story-ready .personal-route:not([hidden]) { animation: none; }
.butterfly-motion-ready.story-ready .personal-route:not([hidden]) li {
  animation: butterfly-route-step var(--butterfly-motion-panel) var(--butterfly-motion-ease) both;
}
.butterfly-motion-ready .personal-route li:nth-child(2) { animation-delay: 35ms; }
.butterfly-motion-ready .personal-route li:nth-child(3) { animation-delay: 70ms; }
.butterfly-motion-ready .personal-route li:nth-child(4) { animation-delay: 105ms; }

@keyframes butterfly-route-step {
  from { opacity: .72; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Native details own layout and state; only their readable content enters. */
.accordion__item[open] > .accordion__body,
.service-item[open] > .service-item__body,
.doctor-profile[open] > .doctor-profile__body {
  animation: butterfly-content-enter 200ms var(--butterfly-motion-ease) both;
}

/* Keep the menu backdrop still and each keyboard target available immediately. */
.butterfly-motion-ready .mobile-menu:not([hidden]) { animation: none; }
.butterfly-motion-ready .mobile-menu:not([hidden]) .menu-column {
  animation: butterfly-content-enter 180ms var(--butterfly-motion-ease) both;
}
.butterfly-motion-ready .mobile-menu .menu-column:nth-last-child(3) { animation-delay: 0ms; }
.butterfly-motion-ready .mobile-menu .menu-column:nth-last-child(2) { animation-delay: 35ms; }
.butterfly-motion-ready .mobile-menu .menu-column:nth-last-child(1) { animation-delay: 70ms; }

@keyframes butterfly-content-enter {
  from { opacity: .78; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Existing live text tells success from manual-copy fallback; it is never replaced. */
#copy-status.is-copy-confirmed { font-weight: 500; }
#copy-status.is-copy-confirmed::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 5px;
  margin-right: 6px;
  border: solid currentColor;
  border-width: 0 0 1.5px 1.5px;
  transform: translateY(-2px) rotate(-45deg);
}

@media (hover:hover) and (pointer:fine) {
  .button:not(.clinic-story *):hover .button__icon,
  :is(a,button).text-link--arrow:not(.clinic-story *):hover > svg,
  .personal-route li :is(a,button):hover svg,
  .document-links a:hover svg { transform: translate(2px,-2px); }
  .finder__tabs button:hover .finder__tab-arrow { transform: scale(1); }
  .finder__tabs button:hover .finder__tab-arrow svg { transform: translate(2px,-2px); }
}

/* Touch must not leave the earlier hover rotation stuck after a tap. */
@media (hover:none), (pointer:coarse) {
  .button:not(.clinic-story *):hover:not(:focus-visible) .button__icon,
  .personal-route li :is(a,button):hover:not(:focus-visible) svg,
  .document-links a:hover:not(:focus-visible) svg { transform: none; }
  .finder__tabs button:hover:not(:focus-visible):not([aria-selected=true]) .finder__tab-arrow {
    transform: scale(.88);
    opacity: 0;
  }
  .finder__tabs button:hover[aria-selected=true] .finder__tab-arrow { transform: scale(1); }
}

@media (prefers-reduced-motion:reduce) {
  .header .brand__mark .butterfly-contour-trace { display: none; }
  .button:not(.clinic-story *):active,
  .profile-booking:not(.clinic-story *):active,
  .button:not(.clinic-story *) .button__icon,
  :is(a,button).text-link--arrow:not(.clinic-story *) > svg,
  .personal-route li svg,
  .document-links svg,
  .finder__tabs .finder__tab-arrow,
  .finder__tab-arrow svg { transform: none !important; }
  .butterfly-motion-ready.story-ready .personal-route:not([hidden]) li {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .accordion__item[open] > .accordion__body,
  .service-item[open] > .service-item__body,
  .doctor-profile[open] > .doctor-profile__body,
  .butterfly-motion-ready .mobile-menu:not([hidden]) .menu-column {
    animation: none;
    opacity: 1;
    transform: none;
  }
}