/* Hand-drawn orange underline, drawn left to right on hover.
   Same wiggle and colour as the underline under the name on the home page. */
.menu-button,
.paragraph-text.link,
.h4.weight-400.link,
.link,
.button-text,
.next-project__title,
.project-title.next-project.go-back {
  position: relative;
}

.menu-button::after,
.paragraph-text.link::after,
.h4.weight-400.link::after,
.link::after,
.button-text::after,
.next-project__title::after,
.project-title.next-project.go-back::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -0.5em;
  height: 0.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 8'%3E%3Cpath d='M0 4 Q4.5 -0.5 9 4 T18 4 Q22.5 0.5 27 4 T36 4' fill='none' stroke='%23ff782b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 36px 8px repeat-x;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(.65, 0, .35, 1);
  pointer-events: none;
}

.menu-button:hover::after,
.paragraph-text.link:hover::after,
.h4.weight-400.link:hover::after,
.link:hover::after,
.button-text1:hover .button-text::after,
.project-title.next-project.go-back:hover::after,
.next-project__link:hover .next-project__title::after,
.next-project__link:focus-visible .next-project__title::after,
.menu-button:focus-visible::after,
.button-text1:focus-visible .button-text::after {
  clip-path: inset(0 0 0 0);
}

/* Replace the old hover treatments (dashed/plain underlines, pill backgrounds, strike-through) */
.menu-button:hover,
.paragraph-text.link:hover,
.h4.weight-400.link:hover,
.link:hover,
.button-text:hover {
  text-decoration: none !important;
}

.project-title.next-project.go-back:hover,
.project-title.next-project.go-back.go-up:hover,
.project-title.next-project.go-back.go-up.lime:hover,
.project-title.next-project.go-back.green:hover,
.project-title.next-project.go-back.go-up.green:hover {
  background-color: transparent;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu-button::after, .paragraph-text.link::after, .h4.weight-400.link::after, .link::after,
  .button-text::after, .next-project__title::after,
  .project-title.next-project.go-back::after { transition: none; }
  .next-project__arrow { transition: none; }
}

/* Back / back-to-top arrows: no wiggle underline, just a small grow on hover */
.project-title.next-project.go-back::after { display: none; }

.project-title.next-project.go-back img { transition: transform .2s ease; }
.project-title.next-project.go-back:hover img,
.project-title.next-project.go-back:focus-visible img { transform: scale(1.12); }

/* Project thumbnails link to the project; the link adds no box of its own so the image layout is unchanged */
.project-photo-link { display: contents; }

/* Colorful pills: one gentle sway on hover */
.hashtag-emotional:hover,
.hashtag-ethical:hover,
.hashtag-user-testing:hover,
.hashtag-prototyping:hover,
.hashtag-pd:hover,
.hashtag-wcag:hover,
.hashtag-wireframes:hover,
.hashtag-uu:hover,
.hashtag-accessibility:hover,
.hashtag-design:hover,
.hashtag-ia:hover,
.hashtag-heuristic:hover {
  animation: pill-wiggle .45s ease-in-out;
}

@keyframes pill-wiggle {
  0% { transform: rotate(0); }
  30% { transform: rotate(-1.5deg); }
  65% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hashtag-emotional:hover,
  .hashtag-ethical:hover,
  .hashtag-user-testing:hover,
  .hashtag-prototyping:hover,
  .hashtag-pd:hover,
  .hashtag-wcag:hover,
  .hashtag-wireframes:hover,
  .hashtag-uu:hover,
  .hashtag-accessibility:hover,
  .hashtag-design:hover,
  .hashtag-ia:hover,
  .hashtag-heuristic:hover { animation: none; }
}