/* Decorative motion keeps its complete static poster in the layout. */
.motion-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--motion-size, 48px);
  height: var(--motion-size, 48px);
  flex: none;
  vertical-align: middle;
  pointer-events: none;
  isolation: isolate;
}
.motion-mark .motion-poster { grid-area: 1 / 1; width: 100%; height: 100%; }
.motion-mark .motion-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.motion-mark.motion-loaded .motion-poster { visibility: hidden; }
.motion-mark svg { display: block; width: 100%; height: 100%; }
.motion-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.motion-heading > :not(.motion-mark) { min-width: 0; }
.motion-support-heading { display: flex; align-items: center; justify-content: flex-start; gap: 16px; min-width: 0; margin-block: 25px 18px; }
.motion-support-heading > :not(.motion-mark) { min-width: 0; }
.motion-support-heading > h2 { margin: 0; }
.editorial-support .motion-mark { --motion-size: 56px; }

.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--rule, #b8bbae);
  background: transparent;
  color: var(--muted, #596052);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}
.motion-toggle:hover, .motion-toggle:focus-visible { border-color: var(--ink, #20251f); color: var(--ink, #20251f); }

/* Feedback follows a deliberate reader action; it never delays content. */
.button, .header-support, .nav-toggle, .motion-toggle {
  transition-property: background-color, color, border-color, transform;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}
.button:active, .header-support:active, .nav-toggle:active, .motion-toggle:active { transform: translateY(1px); }
.mt-card { transition: border-color 140ms ease-out; }
.mt-card > summary h3 { transition: color 140ms ease-out; }
.mt-openmark::after { transition: transform 140ms ease-out, opacity 140ms ease-out; }
.mt-card[open] .mt-openmark::after { display: block; transform: rotate(180deg); opacity: 0; }
.journal-row h3 a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  transition: text-decoration-color 140ms ease-out;
}
.journal-row h3 a:hover, .journal-row h3 a:focus-visible { text-decoration-color: currentColor; }

@media (hover: hover) and (pointer: fine) {
  .button > span[aria-hidden='true']:not(.motion-mark),
  .header-support > span[aria-hidden='true']:not(.motion-mark) { transition: transform 160ms ease-out; }
  .button:is(:hover, :focus-visible) > span[aria-hidden='true']:not(.motion-mark),
  .header-support:is(:hover, :focus-visible) > span[aria-hidden='true']:not(.motion-mark) { transform: translate(2px, -2px); }
}

.mt-card[open] > .mt-detail,
.mt-pressure[open] > .mt-pressure-body,
.mt-guide details[open] > div,
.article-mobile-contents[open] > .article-contents,
.article-note[open] > p,
.optional-note[open] > .offer-form,
.case-overview[open] > .timeline-list,
.faq-list details[open] > p { animation: motion-detail-reveal 140ms ease-out both; }
.main-nav.is-open { animation: motion-menu-reveal 160ms ease-out both; }
@keyframes motion-detail-reveal { from { opacity: .85; } to { opacity: 1; } }
@keyframes motion-menu-reveal { from { opacity: .88; } to { opacity: 1; } }

/* The reader's site preference also disables earlier CSS walkthroughs. */
html.motion-off { scroll-behavior: auto; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }
.motion-off .motion-mark .motion-player { display: none !important; }
.motion-off .motion-mark.motion-loaded .motion-poster { visibility: visible !important; }
.motion-off :is(.button:active, .header-support:active, .nav-toggle:active, .motion-toggle:active),
.motion-off .button > span[aria-hidden='true']:not(.motion-mark),
.motion-off .header-support > span[aria-hidden='true']:not(.motion-mark) { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-mark .motion-player { display: none !important; }
  .motion-mark.motion-loaded .motion-poster { visibility: visible !important; }
  .button:active, .header-support:active, .nav-toggle:active, .motion-toggle:active,
  .button > span[aria-hidden='true']:not(.motion-mark),
  .header-support > span[aria-hidden='true']:not(.motion-mark) { transform: none !important; }
}

@media print {
  .motion-toggle, .motion-mark .motion-player { display: none !important; }
  .motion-mark.motion-loaded .motion-poster { visibility: visible !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:active, .header-support:active, .nav-toggle:active,
  .button > span[aria-hidden='true']:not(.motion-mark),
  .header-support > span[aria-hidden='true']:not(.motion-mark) { transform: none !important; }
}