/* 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.60;
  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);
}

.navigation__dark-bg {
  opacity: 0;
  visibility: hidden;
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}

[data-navigation-status="active"] .navigation__dark-bg {
  opacity: 0.33;
  visibility: visible;
}
/* Note: Both of the sets of CSS are not needed for the parallax effect */

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* ------------------------- Underline Link [https://osmo.supply/] -------------------------  */

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }  
}