/* A small shared motion vocabulary. Content is visible without JavaScript. */
:root {
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-response: 180ms;
}

.js-reveal,
.js-reveal.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.button {
  transition: background-color var(--ui-response), color var(--ui-response),
    box-shadow 220ms var(--ui-ease), transform 140ms var(--ui-ease);
}
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { transform: none; }

/* Labels keep their alignment. The small affordance carries the movement. */
.service-row .plus { transition: transform 240ms var(--ui-ease); }
.service-row:focus-visible .plus { transform: translateX(3px); }
.service-row:active { background: var(--charcoal); color: var(--paper); }
.service-row:active p { color: #d1d4c9; }
.scenario strong,
.phase-nav button { transition: color var(--ui-response); }
.scenario:active,
.phase-nav button:active { background: #191b1805; }

.nav-link:after { transition: transform 260ms var(--ui-ease); }
.text-link { transition: border-color var(--ui-response), color var(--ui-response); }
.menu-toggle > span {
  display: inline-block;
  transition: transform 220ms var(--ui-ease);
}
.menu-toggle[aria-expanded="true"] > span { transform: rotate(45deg); }
.detail-toggle:before,
.detail-toggle:after { transition: transform 240ms var(--ui-ease); }
.service-detail[data-ui-detail-target="closed"] .detail-toggle:after { transform: rotate(90deg); }
details[data-ui-detail-target] > summary:focus-visible { outline-offset: -3px; }
.principles details[data-ui-detail-target="closed"] summary:after,
.faq-section details[data-ui-detail-target="closed"] summary:after { content: '+'; }

@media (hover: hover) and (pointer: fine) {
  .service-row:hover .plus { transform: translateX(3px); }
  .phase-nav button:hover { color: var(--ink); }
}

@media (hover: none), (pointer: coarse) {
  /* Reset a touch browser's sticky hover as a complete color pair. Keyboard
     focus and the actual pressed state retain the editorial charcoal row. */
  .service-row:hover:not(:focus-visible):not(:active) { background: transparent; color: var(--ink); }
  .service-row:hover:not(:focus-visible):not(:active) p { color: var(--muted); }
  .button.solid:hover { background: var(--ink); box-shadow: none; }
  .button.solid:active { background: #3d403a; }
  .button.outline:hover { background: transparent; }
  .button.outline:active { background: #191b180b; }
  .start-card:hover { border-color: #999e90; background: transparent; }
  .start-card:active { border-color: var(--ink); background: transparent; }
  .scenario:hover strong { color: inherit; }
  .nav-link:hover:after { transform: scaleX(0); }
  .nav-link[aria-current="page"]:after,
  .nav-link:focus-visible:after { transform: scaleX(1); }
}

@media (max-width: 760px) {
  .header-nav[data-ui-menu-closing] {
    display: flex;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button:active:not(:disabled),
  .service-row:hover .plus,
  .service-row:focus-visible .plus { transform: none; }
  .header-nav[data-ui-menu-closing] { display: none; }
}

@media (forced-colors: active) {
  .service-row:active { background: Highlight; color: HighlightText; }
  .service-row:active p { color: HighlightText; }
}
@media (forced-colors: active) and (hover: none), (forced-colors: active) and (pointer: coarse) {
  .service-row:hover:not(:focus-visible):not(:active) { background: Canvas; color: CanvasText; }
  .service-row:hover:not(:focus-visible):not(:active) p { color: CanvasText; }
}