/* [data-wf--nav--nav-position="overlap"].nav_component {
  transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  &.is-at-top {
    background-color: transparent;
  }

  &.is-scrolled {
    transform: translateY(-100%);
  }

  &.is-stopped {
    transform: translateY(0%);
    transition-delay: 0.25s;
    background-color: white;
    color: black;

    .nav_links_link {
      filter: invert(1);
    }

    &:has(.w-nav-button.w--open) {
      .nav_links_link {
        filter: invert(0);
      }
    }

    .button_main_wrap {
      --_button-style---text: var(--_theme---button-primary--text);
      --_button-style---text-hover: var(--_theme---button-primary--text-hover);
      --_button-style---border: var(--_theme---button-primary--border);
      --_button-style---border-hover: var(
        --_theme---button-primary--border-hover
      );
      --_button-style---background: var(--_theme---button-primary--background);
      --_button-style---background-hover: var(
        --_theme---button-primary--background-hover
      );
    }
  }
} */

[data-wf--nav--nav-position="overlap"].nav_component {
  .nav_desktop_contain,
  .nav_mobile_layout,
  .nav_desktop_layout {
    transition: all 0.3s ease;
  }

  &.is-scrolled {
    .nav_desktop_contain {
      margin-top: 1rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      background: transparent;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      border-radius: 0.75rem;
      border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .nav_desktop_layout {
      border-bottom: 1px solid transparent;
    }

    .nav_mobile_layout {
      margin-top: 1rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      background: transparent;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 0.75rem;
      border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .button_main_wrap {
      --_button-style---text: var(--_theme---button-primary--text);
      --_button-style---text-hover: var(--_theme---button-primary--text-hover);
      --_button-style---border: var(--_theme---button-primary--border);
      --_button-style---border-hover: var(
        --_theme---button-primary--border-hover
      );
      --_button-style---background: var(--_theme---button-primary--background);
      --_button-style---background-hover: var(
        --_theme---button-primary--background-hover
      );
    }
  }

  &:has(.w-nav-button.w--open) {
    .nav_mobile_layout {
      margin-top: 0rem;
      padding-left: 0rem;
      padding-right: 0rem;
      background: transparent;
      backdrop-filter: unset;
      -webkit-backdrop-filter: unset;
      border-radius: 0rem;
      border: 1px solid transparent;
      color: black;
    }
  }
}

[text-link] {
  position: relative;
}

[text-link]::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transition: transform 0.3s ease-out;
  transform-origin: bottom right;
}

[text-link]:hover::after {
  transform-origin: bottom left;
}

[text-link]:hover::after {
  transform: scaleX(1);
}

/* [data-scrub-animation="parallax"] {
  transform: scale(1.3);
} */

/* References Swiper */
.swiper-slide.is-references {
  /* Smoothly animate width changes */
  transition: width 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. Define the "Active" state width */
.swiper-slide.is-references.swiper-slide-active {
  /* Make active slide wider than the 26.25rem defined in your base CSS */
  width: 32rem !important;
  z-index: 2;
}

/* 3. Set the transition for the hover wrap (the grid) */
.references_item_hover_wrap {
  /* Smoothly animate the grid opening */
  transition: grid-template-rows 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* 4. Expand the grid content when the parent slide is active */
.swiper-slide.is-references.swiper-slide-active .references_item_hover_wrap {
  /* Opens the grid to show content */
  grid-template-rows: 1fr;
}

/* Optional: Mobile Responsiveness */
@media screen and (max-width: 767px) {
  .swiper-slide.is-references.swiper-slide-active {
    /* On mobile, usually better to fit screen width minus padding */
    width: 100% !important;
  }
}

.button_arrow_wrap.swiper-button-disabled {
  border-color: #e5e6e5;
  background: #fff;
  color: #000;
}