/* Filter Button */
.filter-btn {
  transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status="active"] {
  background-color: #131313;
  color: #EFEEEC;
}

/* Filter List Item */
.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}

.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}

.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden; 
  position: absolute;
}

/* Scaling Hamburger Nav */

/* Nav Dark BG */
.navigation__dark-bg {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}

[data-navigation-status="active"] .navigation__dark-bg {
  opacity: 0.33;
  visibility: visible;
}

/* Nav Group BG  */
.hamburger-nav__bg {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}

[data-navigation-status="active"] .hamburger-nav__bg {
  width: 100%;
  height: 100%;
}

/* Nav Group  */
.hamburger-nav__group {
  transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: scale(0.15) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
}

[data-navigation-status="active"] .hamburger-nav__group {
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
}

/* Active Link  */

.hamburger-nav__a[aria-current] .hamburger-nav__p {
  opacity: 0.33;
}

/* Active Indicator  */

.hamburger-nav__dot {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: scale(0) rotate(0.001deg);
  opacity: 0.5;
}

.hamburger-nav__a[aria-current] .hamburger-nav__dot {
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
}

.hamburger-nav:has(.hamburger-nav__a:hover) .hamburger-nav__dot {
  transform: scale(0) rotate(0.001deg);
}

.hamburger-nav .hamburger-nav__a:hover .hamburger-nav__dot {
  transform: scale(1) rotate(0.001deg);
  opacity: 0.25;
}

/* Hamburger Button  */
.hamburger-nav__toggle {
  transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: translate(0em, 0em) rotate(0.001deg);
}

[data-navigation-status="active"] .hamburger-nav__toggle {
  transform: translate(-1em, 1em) rotate(0.001deg);
}

.hamburger-nav__toggle .hamburger-nav__toggle-bar {
  transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: translateY(-0.15em) rotate(0.001deg);
}

.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar {
  transform: translateY(0.15em) rotate(0.001deg);
}

[data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar {
  transform: translateY(0em) rotate(45deg);
}

.hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) {
  transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: translateY(0.15em) rotate(0.001deg);
}

.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar:nth-child(2) {
  transform: translateY(-0.15em) rotate(0.001deg);
}

[data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) {
  transform: translateY(0em) rotate(-45deg);
}