/* =========================================================
   Brandberry Hover Effect for WCF Nav Menu
   Webflow-like: two stacked lines that slide up on hover
   Scope: .wcf-nav-menu-container.bb-wcf-hover-brandberry
   ========================================================= */

.wcf-nav-menu-container.bb-wcf-hover-brandberry .menu-text{
  display: inline-block;
}

.wcf-nav-menu-container.bb-wcf-hover-brandberry .bb-nav-inner{
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.wcf-nav-menu-container.bb-wcf-hover-brandberry .bb-nav-text,
.wcf-nav-menu-container.bb-wcf-hover-brandberry .bb-nav-text-hover{
  display: block;
  will-change: transform;
  transition: transform .45s cubic-bezier(0.8, 0, 0.2, 1);
}

/* Default */
.wcf-nav-menu-container.bb-wcf-hover-brandberry .bb-nav-text{
  transform: translateY(0%);
}

.wcf-nav-menu-container.bb-wcf-hover-brandberry .bb-nav-text-hover{
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(0%);
}

/* Hover */
.wcf-nav-menu-container.bb-wcf-hover-brandberry .wcf-nav-item:hover .bb-nav-text{
  transform: translateY(-100%);
}

.wcf-nav-menu-container.bb-wcf-hover-brandberry .wcf-nav-item:hover .bb-nav-text-hover{
  transform: translateY(-100%);
}