/* View transition allows for animation between pages */
/*@view-transition {*/
/*    navigation: auto;*/
/*}*/

/*
  * Create a link:hover animation, it shows respecting user motion preferences
  *
  * use any class to opt-out from having the effect applyed for fully stylezed font
  * use [data_underline_link] for animated underline only
*/
[data-link] {
  position: relative;
  inline-size: max-content;
  color: oklch(var(--color-dark));
  text-decoration: none !important;
  transition:
    color var(--anim-fast),
    text-shadow var(--anim-fast);
}

[data-link]:hover {
  color: oklch(var(--color-primary)) !important;
}

[data-link]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  inline-size: 100%;
  block-size: 2px;
  background-color: oklch(var(--color-primary));
  scale: 0;
  transform-origin: right;
  transition: scale var(--anim-fast);
}

[data-link]:hover::after {
  scale: 1;
  transform-origin: left;
}