/* Motion complements the work. Content is always visible without JavaScript. */
:root {
  --motion-ease: cubic-bezier(.22, .68, .18, 1);
}

.motion-image {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.directory-arrow,
.directory-name,
.directory-desc {
  transition: transform 460ms var(--motion-ease), color 260ms ease;
}

.directory-arrow svg,
.directory-arrow .directory-illustration {
  display: block;
  width: 100px;
  height: 100px;
  overflow: visible;
}

.directory-row .directory-arrow {
  transform-origin: 50% 70%;
}

.directory-row .directory-name {
  transform-origin: 0 50%;
}

.directory-desc {
  position: relative;
}

.directory-row .directory-desc::after {
  content: '↗';
  position: absolute;
  right: -25px;
  top: 50%;
  opacity: 0;
  transform: translate(-6px, calc(-50% + 6px));
  transition: opacity 300ms ease, transform 460ms var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .directory-row:hover .directory-arrow {
    transform: translateY(-3px) rotate(-3deg);
  }

  html[data-motion="on"] .directory-row:hover .directory-name {
    transform: translateX(7px);
  }

  html[data-motion="on"] .directory-row:hover .directory-desc::after,
  html[data-motion="on"] .directory-row:focus-visible .directory-desc::after {
    opacity: 1;
    transform: translate(0, -50%);
  }

  html[data-motion="on"] .round-link span {
    transition: transform 350ms var(--motion-ease);
  }

  html[data-motion="on"] .round-link:hover span {
    transform: translate(3px, -3px);
  }

  html[data-motion="on"] .button {
    transition: background 180ms ease, color 180ms ease, transform 300ms var(--motion-ease);
  }

  html[data-motion="on"] .button:hover {
    transform: translateY(-2px);
  }
}

.process-tabs button {
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.faq summary span {
  transition: transform 280ms var(--motion-ease);
}

.motion-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.motion-control::before {
  content: '';
  display: block;
  width: 6px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: .75;
}

.motion-control[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-right: 0;
  border-left: 6px solid currentColor;
}

.motion-control:disabled {
  cursor: default;
  text-decoration: none;
}

html[data-motion="off"] .motion-image {
  transform: none !important;
}

html[data-motion="off"] .directory-arrow,
html[data-motion="off"] .directory-name,
html[data-motion="off"] .directory-desc,
html[data-motion="off"] .directory-desc::after,
html[data-motion="off"] .round-link span,
html[data-motion="off"] .process-tabs button,
html[data-motion="off"] .faq summary span,
html[data-motion="off"] .article-image img,
html[data-motion="off"] .button,
html[data-motion="off"] [data-motion-art] {
  animation: none !important;
  transition: none !important;
}

html[data-motion="off"] .article-card:hover img,
html[data-motion="off"] .button:hover {
  transform: none;
}

@media (max-width: 700px) {
  .directory-arrow svg,
  .directory-arrow .directory-illustration {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-image {
    transform: none !important;
  }

  .directory-arrow,
  .directory-name,
  .directory-desc,
  .directory-desc::after,
  .process-tabs button,
  .faq summary span {
    transition: none !important;
  }
}