Breadcrumb Fade

<nav class="nuda-breadcrumb-fade" aria-label="Breadcrumb">
  <ol class="nuda-breadcrumb-fade__list">
    <li class="nuda-breadcrumb-fade__item"><a href="#">Home</a></li>
    <li class="nuda-breadcrumb-fade__sep" aria-hidden="true">/</li>
    <li class="nuda-breadcrumb-fade__item"><a href="#">Products</a></li>
    <li class="nuda-breadcrumb-fade__sep" aria-hidden="true">/</li>
    <li class="nuda-breadcrumb-fade__item current" aria-current="page">Details</li>
  </ol>
</nav>

/* Breadcrumb Fade
   Breadcrumb items and chevrons animate in with staggered fade.
   Customize: --breadcrumb-accent, --breadcrumb-text, --breadcrumb-sep */

.nuda-breadcrumb-fade__list {
  --breadcrumb-accent: #e4ff54;
  --breadcrumb-text: #999;
  --breadcrumb-sep: #555;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nuda-breadcrumb-fade__item a {
  color: var(--breadcrumb-text);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.nuda-breadcrumb-fade__item a:hover {
  color: #fff;
}

.nuda-breadcrumb-fade__item.current {
  color: var(--breadcrumb-accent);
  font-size: 0.85rem;
  font-weight: 600;
}

.nuda-breadcrumb-fade__sep {
  color: var(--breadcrumb-sep);
  font-size: 0.75rem;
  animation: nuda-breadcrumb-fade-in 0.6s ease-out both;
}

.nuda-breadcrumb-fade__item {
  animation: nuda-breadcrumb-slide 0.5s ease-out both;
}

.nuda-breadcrumb-fade__item:nth-child(1) { animation-delay: 0s; }
.nuda-breadcrumb-fade__sep:nth-child(2)  { animation-delay: 0.1s; }
.nuda-breadcrumb-fade__item:nth-child(3) { animation-delay: 0.2s; }
.nuda-breadcrumb-fade__sep:nth-child(4)  { animation-delay: 0.3s; }
.nuda-breadcrumb-fade__item:nth-child(5) { animation-delay: 0.4s; }

@keyframes nuda-breadcrumb-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes nuda-breadcrumb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-breadcrumb-fade__item,
  .nuda-breadcrumb-fade__sep {
    animation: none;
  }
}