:root {
  --neumorphism-shadow-dark: rgba(0, 0, 0, 0.15);
  --neumorphism-shadow-light: rgba(240, 240, 240, 0.4);

  --animation-neu-transition: neu-to-inset-transition 0.3s ease-in-out forwards;
  --animation-fade-in: fade-in 0.5s ease-in-out forwards;
  --animation-slide-right: slide-right 0.75s ease-in-out forwards;
}

@keyframes neu-to-inset-transition {
  0% {
    box-shadow: 8px 8px 10px var(--neumorphism-shadow-dark),
    -8px -8px 10px var(--neumorphism-shadow-light);
  }

  50% {
    box-shadow: 0 0 0 var(--neumorphism-shadow-dark),
    0 0 0 var(--neumorphism-shadow-light);
  }

  51% {
    box-shadow: 0 0 0 var(--neumorphism-shadow-dark) inset,
    0 0 0 var(--neumorphism-shadow-light) inset;
  }

  100% {
    box-shadow: 8px 8px 10px var(--neumorphism-shadow-dark) inset,
    -8px -8px 10px var(--neumorphism-shadow-light) inset;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-right {
  from {
    transform: translateX(-120vw);
  }

  to {
    transform: translateX(0);
  }
}

@utility fade-in-quick {
  animation: fade-in 0.5s ease-in-out forwards;
}

@utility fade-in {
  animation: fade-in 0.75s ease-in-out forwards;
}

@utility fade-in-slow {
  animation: fade-in 1s ease-in-out forwards;
}

@utility slide-right {
  animation: slide-right 0.75s ease-in-out forwards;
}