.curved-underline{
  position: relative;
  display: inline;
  z-index: 0;
  --curve-pad: 0.35em;
  --curve-height: 0.55em;
  --curve-width: 100%;
  padding-bottom: var(--curve-pad);
}
.curved-underline .cu-svg{
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--curve-width);
  height: var(--curve-height);
  pointer-events: none;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
  z-index: -1;
}

/* Fade animation */
.cu-anim-fade{ 
  animation: cuFadeIn 400ms ease-out both; 
}
@keyframes cuFadeIn{ 
  from{ opacity:0 } 
  to{ opacity:1 } 
}

/* Slide animation */
.cu-anim-slide{ 
  animation: cuSlideUp 400ms ease-out both; 
}
@keyframes cuSlideUp{ 
  from{ opacity:0; transform: translateY(6px) } 
  to{ opacity:1; transform: translateY(0) } 
}

/* Draw animation with higher specificity and !important declarations */
.curved-underline .cu-svg.cu-anim-draw-path,
.curved-underline .cu-svg.cu-anim-draw-path path { 
  animation-timing-function: ease-out !important;
  animation-fill-mode: forwards !important;
  animation-duration: inherit !important;
}

/* Fallback keyframes for older browsers - values will be overridden dynamically */
@keyframes cuDraw{ 
  from { 
    stroke-dashoffset: 100; 
  }
  to { 
    stroke-dashoffset: 0; 
  } 
}

/* Ensure stroke properties are properly set */
.curved-underline .cu-svg path {
  transition: none;
}