/* Shared motion vocabulary. Millisecond values are also consumed by motion.js. */
:root {
  --motion-fast: 180ms;
  --motion-ui: 300ms;
  --motion-reveal: 620ms;
  --motion-stagger: 70ms;
  --motion-distance: 18px;
  --motion-lift: -4px;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
.btn svg, .text-link svg, .service-link svg, .contact-email svg,
.service-icon, .method-tab > svg, .nav-toggle span {
  transition: transform var(--motion-ui) var(--motion-ease);
}
.btn:active { transform: translateY(1px); }
.text-link, .contact-email {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .3em;
  transition: text-decoration-color var(--motion-fast) ease;
}
.text-link:is(:hover, :focus-visible), .contact-email:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
.btn:is(:hover, :focus-visible) svg, .text-link:is(:hover, :focus-visible) svg,
.service-card:focus-within .service-link svg { transform: translateX(4px); }
.service-card { transition: transform var(--motion-ui) var(--motion-ease), background var(--motion-ui) ease; }
.service-card:focus-within { outline: 2px solid var(--brand-sage); outline-offset: 4px; }
.post-card .cover-art { transition: transform var(--motion-reveal) var(--motion-ease); transform-origin: center; }
.post-card:focus-within .cover-art { transform: translateY(var(--motion-lift)); }
.method-tab { position: relative; }
.method-tab::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--brand-sage); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-ui) var(--motion-ease); }
.method-tab.is-active::after { transform: scaleX(1); }
.method-tab.is-active > svg { transform: translateX(4px); }
.faq-list summary::after { transition: transform var(--motion-ui) var(--motion-ease); }
.filter { transition: background var(--motion-fast) ease, color var(--motion-fast) ease; }
.field :is(input, select, textarea) { transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease; }
.field:focus-within > label { color: var(--brand-sage); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { transform: translateY(var(--motion-lift)); box-shadow: none; }
  .service-card:hover .service-icon { transform: translateY(-3px) rotate(-4deg); }
  .service-card:hover .service-link svg { transform: translateX(4px); }
  .post-card:hover .cover-art { transform: translateY(var(--motion-lift)); }
}
@media (max-width: 720px) {
  /* Discrete display keeps the closed menu out of keyboard navigation. */
  .nav-links { transition: opacity var(--motion-ui) ease, transform var(--motion-ui) var(--motion-ease), display var(--motion-ui) allow-discrete; opacity: 0; transform: translateY(-8px); }
  .nav-open .nav-links { opacity: 1; transform: none; }
  @starting-style { .nav-open .nav-links { opacity: 0; transform: translateY(-8px); } }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .text-link svg, .service-link svg, .contact-email svg, .service-icon,
  .method-tab > svg, .method-tab::after, .nav-toggle span, .nav-links,
  .service-card, .post-card .cover-art, .faq-list summary::after, .filter,
  .field :is(input, select, textarea), .text-link, .contact-email { transition: none; }
  .btn:active, .btn:is(:hover, :focus-visible) svg, .text-link:is(:hover, :focus-visible) svg,
  .service-card:hover, .service-card:hover .service-icon, .service-card .service-link svg,
  .post-card:is(:hover, :focus-within) .cover-art, .method-tab.is-active > svg { transform: none; }
}