/* Nav */
@utility nav-base {
  @apply border border-neutral-100 dark:border-stone-500/20
         bg-neutral-100 dark:bg-neutral-800
         shadow-xs dark:shadow-md
}

/* Fade edges of a div */
@utility mask-fade-edges {
  -webkit-mask-image: 
    linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
    linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
  mask-image: 
    linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
    linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);

  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Animations */
@utility smooth-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

@utility smooth-reveal-2 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

@utility smooth-reveal-cards {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

@utility smooth-reveal-fade {
  opacity: 0;
  transform: translateY(0px);
  transition: opacity 1.8s ease, transform 0.8s ease;
}