/* 04 : a topic compass: cool geometry and a responsive, readable guide. */
body.concept-04 {
  --c04-ease: cubic-bezier(.2, .75, .25, 1);
}

@media (prefers-reduced-motion: no-preference) {
  body.concept-04.c04-motion .guide-hero::before {
    transform: translate(var(--c04-ring-x, 0px), var(--c04-ring-y, 0px));
    transition: transform 1250ms var(--c04-ease);
  }

  body.concept-04.c04-motion .guide-hero::after {
    transform: translate(calc(var(--c04-ring-x, 0px) * -.6), calc(var(--c04-ring-y, 0px) * -.6));
    transition: transform 1450ms var(--c04-ease);
  }

  body.concept-04 .guide-tab {
    /* Selected foreground/background switch together to preserve contrast. */
    transition: border-color 320ms ease;
  }

  body.concept-04 .guide-tab > span {
    transition: transform 280ms var(--c04-ease);
  }

  body.concept-04 .guide-tab > .label {
    transform-origin: center;
  }

  body.concept-04 .guide-tab:focus-visible > span:last-child {
    transform: translateX(3px);
  }

  body.concept-04 :is(.guide-contact > a, .human-contact .button, .nav-contact) {
    transition: transform 220ms var(--c04-ease), background-color 180ms ease;
  }

  body.concept-04 :is(.guide-contact > a, .human-contact .button, .nav-contact):active {
    transform: scale(.98);
    transition-duration: 80ms;
  }

  body.concept-04 :is(.guide-links li > a, .guide-help > a, .text-link, .human-reading > a) {
    transition: text-underline-offset 220ms var(--c04-ease), color 180ms ease;
  }

  body.concept-04 :is(.guide-links li > a, .guide-help > a, .human-reading > a):focus-visible {
    text-underline-offset: 8px;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  body.concept-04 .guide-tab:hover > span:last-child {
    transform: translateX(3px);
  }

  body.concept-04 :is(.guide-contact > a, .human-contact .button, .nav-contact):hover {
    transform: translateY(-2px);
  }

  body.concept-04 :is(.guide-contact > a, .human-contact .button, .nav-contact):active {
    transform: scale(.98);
  }

  body.concept-04 :is(.guide-links li > a, .guide-help > a, .human-reading > a):hover {
    text-underline-offset: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.concept-04) { scroll-behavior: auto; }

  body.concept-04 :is(.guide-tab, .guide-tab > span, .guide-contact > a,
    .human-contact .button, .nav-contact, .guide-links li > a,
    .guide-help > a, .text-link, .human-reading > a),
  body.concept-04 .guide-hero::before,
  body.concept-04 .guide-hero::after {
    transition: none;
    animation: none;
    transform: none;
  }
}