:root {
  /* Dark effect colors for particles to match the dark pill */
  --goovy-color-1: #09203F;
  --goovy-color-2: #0d2e5a;
  --goovy-color-3: #062042;
  --goovy-color-4: #122c4e;
  --goovy-color-white: #123563;
}

/* Ensure container handles absolute elements properly without breaking magento layout */
nav.rootmenu {
  position: relative;
  font-family: 'Outfit', sans-serif;
}

/* Base states for list items */
nav.rootmenu ul#rw-menutop > li > a {
  position: relative;
  z-index: 4;
  width: 100%;
}

nav.rootmenu .goovy-effect {
  display: none; /* Hidden on mobile */
}

/* Desktop only effect - Updated breakpoint to 992px */
@media (min-width: 992px) {
  nav.rootmenu .goovy-effect {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 1;
    pointer-events: none;
    display: block;
    z-index: 1;
    transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1), top 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

  nav.rootmenu .goovy-effect.filter {
    filter: url(#goovy-gooey);
    z-index: 1;
  }

  /* Dark effect pill */
  nav.rootmenu .goovy-effect.filter::after {
    content: '';
    position: absolute;
    inset: 0;
    
    background: #09203F; 
    
    transform: scale(0.9);
    opacity: 0;
    z-index: -1;
    border-radius: 100vw; /* Full pill shape */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

  nav.rootmenu .goovy-effect.active::after {
    transform: scale(1);
    opacity: 1;
  }

  /* Particles */
  .goovy-particle,
  .goovy-point {
    display: block;
    opacity: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    transform-origin: center;
  }

  .goovy-particle {
    --time: 5s;
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    animation: goovy-particle calc(var(--time)) ease 1 -350ms;
  }

  .goovy-point {
    background: var(--color);
    opacity: 1;
    animation: goovy-point calc(var(--time)) ease 1 -350ms;
  }

  @keyframes goovy-particle {
    0% {
      transform: rotate(0deg) translate(calc(var(--start-x)), calc(var(--start-y)));
      opacity: 1;
      animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }
    70% {
      transform: rotate(calc(var(--rotate) * 0.5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2));
      opacity: 1;
      animation-timing-function: ease;
    }
    85% {
      transform: rotate(calc(var(--rotate) * 0.66)) translate(calc(var(--end-x)), calc(var(--end-y)));
      opacity: 1;
    }
    100% {
      transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5));
      opacity: 1;
    }
  }

  @keyframes goovy-point {
    0% {
      transform: scale(0);
      opacity: 0;
      animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }
    25% {
      transform: scale(calc(var(--scale) * 0.25));
    }
    38% {
      opacity: 1;
    }
    65% {
      transform: scale(var(--scale));
      opacity: 1;
      animation-timing-function: ease;
    }
    85% {
      transform: scale(var(--scale));
      opacity: 1;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
}

@media (min-width: 992px) {
    .goovy-effect.text, 
    .rootmenu > .rootmenu-list > li > a::before {
        display: none !important;
    }
    .rootmenu > .rootmenu-list > li.get-a-quote:hover {
        background: transparent;
    }
}