@view-transition {
  navigation: auto;
}

[data-anim] > * {
  opacity: 0;
  will-change: transform, opacity;
}

/* GSAP animations */
[data-anim="fade-in-up"] > * {
  translate: 0 25px;
}

[data-anim="fade-in-right"] > * {
  translate: 25px 0;
}

[data-anim="fade-in-down"] > * {
  translate: 0 -25px;
}

[data-anim="fade-in-left"] > * {
  translate: -25px 0;
}

/*@media(prefers-reduced-motion: no-preference) {*/
/*    [data-text="pulse-shadow"] {*/
/*        animation: pulse var(--anim-super-slow) ease-in-out alternate infinite;*/
/*    }*/

/*    @keyframes pulse {*/
/*        0% {*/
/*            text-shadow: 0 0 0.5em oklch(var(--color-primary));*/
/*        }*/
/*        100% {*/
/*            text-shadow: 0 0 1em oklch(var(--color-primary));*/
/*        }*/
/*    }*/
/*}*/

#cursor,
#cursor-follower {
  --__scale: 1.75;    

  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  pointer-events: none;
  transform: translate3d(var(--mouseX, 0), var(--mouseY, 0), 0);
  mix-blend-mode: difference;
}

#cursor-inner,
#cursor-follower-inner {
  --__size: 5px;

  inline-size: var(--__size);
  block-size: var(--__size);
  background-color: oklch(var(--color-primary));
  border-radius: 100vw;
  translate: -50% -50%;
  will-change: transform;
  transition: all var(--anim-fast);
}

#cursor-follower-inner {
  inline-size: calc(var(--__size) * 10);
  block-size: calc(var(--__size) * 10);
  translate: -50% -50%;
  background-color: oklch(var(--color-primary) / 0.25);
  border: 2px solid oklch(var(--color-primary));
  transition-timing-function: var(--overshoot-soft);
}

body:has(
      :is(
        a,
        button,
        [role="button"],
        input,
        textarea,
        select
      ):hover) #cursor-inner {
  will-change: scale;
  scale: 0;
}

body:has(
      :is(
        a,
        button,
        [role="button"],
        input,
        textarea,
        select
      ):hover) #cursor-follower-inner {
  background-color: transparent;
  inline-size: calc(var(--__size) * 15);
  block-size: calc(var(--__size) * 15);
  mix-blend-mode: difference;
  will-change: inline-size, block-size, background-color;
}

body:has([data-cursor="pointer-hover"]:hover) #cursor-follower-inner {
  inline-size: calc(var(--__size) * 20);
  block-size: calc(var(--__size) * 20);
  background-color: oklch(var(--color-primary));
  filter: blur(3px);
  mix-blend-mode: difference;
  will-change: inline-size, block-size, background-color, filter;
}

body:has(
  .text-error:hover,
  .error-border:hover
) :is(#cursor-inner, #cursor-follower-inner) {
  background-color: oklch(var(--color-error-light));
  border-color: oklch(var(--color-error-dark));
}

/*
  * 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-light));
  text-decoration: none !important;
  transition: color 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;
}