/* 1. The Anchor Span */
.animated-underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

/* 2. The Pseudo-Element (The Line) */
.animated-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 100%;
  height: 25px;
  z-index: -1;

  /* The Full SVG Data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='624' height='20' fill='none'%3E%3Cg fill='%23E0AF56'%3E%3Cpath d='M588.962 7.256c-18.153-.407-34.531-.341-51.718-.35-33.539-.02-67.07-1.6-100.612-1.546-75.114.144-151.39-.765-226.767.731-22.264.435-44.503.804-66.544 1.43-2.114.056-4.21.114-6.332.18-20.679.595-47.673.246-68.228.872-18.095.83-32.12 1.873-49.448 1.589-4.598-.196-9.493-.551-12.25-1.27C1.045 7.352-1.754 5.94 1.16 4.765c.95-.388 2.584-.786 4.35-1.144 3.443-.665 7.57-1.187 9.816-1.233C54.059 1.478 98 1.307 133.002 1.146c17.278-.077 35.117-.18 56.927-.379C240.318.484 319.773.302 370.211.03c44.074-.245 88.264 1.108 131.91 2.113 16.591.38 27.042.38 41.919.484 2.484.007 5.291.027 8.171.045 14.703.104 41.185-.407 49.738.576 8.559.995 14.537 1.099 22.017 2.926.396 1.802-2.619 2.634-6.44 2.936-8.907.72-17.073 1.526-23.997 1.773-8.114.284-14.662.295-15.99-.387-1.288-.684-.561-1.108.727-1.42 2.236-.511 6.274-1.071 9.89-1.45z'/%3E%3Cpath d='M236.825 15.718c13.844-.16 27.77-.369 41.573-.258 17.46.135 32.254.571 49.58.511 5.844-.016 41.407.01 46.262-.007 15.13-.058 30.014-.047 45.104.045 10.016.066 20.077.198 30.018.457 23.384.605 47.546 1.012 70.555 2.167 5.844.294 11.822.54 17.708.304 5.844-.228 14.791-.91 14.19-2.32-.687-1.65-6.878-3.702-14.324-4.222-2.276-.153-7.519-.864-9.838-.97-2.189-.094-4.129-.432-6.152-.49-4.77-.142-8.346.342-12.771.578-5.157.274-16.335-.495-21.669-.522-18.828-.104-29.792.955-48.629.918-11.129-.018-22.316-.094-33.451-.134-10.691-.038-21.404.03-32.072-.095-7.445-.083-14.791-.53-22.179-.567-6.334-.03-12.739.227-18.962.502-5.325.245-11.187.142-16.595.15-4.943.02-11.004-.254-15.608 0-5.935.333-12.523.342-18.575.473-11.392.248-17.121-.198-28.464.115-7.058.189-12.267.785-19.308.569-3.608-.115-12.853.398-16.461.313-3.706-.077-3.962.509-7.306.605-4.053.111-8.139.086-12.176.122-1.717.02-6.323-.02-7.52.276-1.684.408 1.676 1.25 4.202 1.488 9.254.889 22.619.178 32.376.103 3.484-.025 6.976-.063 10.492-.11'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;

  /* 3. The Mask (Initial State: Hidden) */
  -webkit-mask-image: linear-gradient(to right, black, black);
  mask-image: linear-gradient(to right, black, black);
  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* 4. The Transition Speed */
  transition:
    mask-size 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    -webkit-mask-size 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}

.animated-underline.hero-underline::after {
  left: -5%;
  width: 110%;
}

.animated-underline.cta-underline::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='275' height='11' fill='none'%3E%3Cpath fill='%23E0AF56' d='M259.558 7.214c-8-.405-15.218-.34-22.792-.349-14.781-.02-29.558-1.59-44.34-1.536-33.103.143-66.719-.761-99.937.727-9.812.432-19.613.798-29.327 1.42-.931.056-1.855.114-2.79.18-9.114.592-21.01.245-30.069.867-7.974.826-14.155 1.862-21.792 1.58-2.026-.196-4.183-.548-5.399-1.262C.46 7.308-.773 5.905.512 4.736c.418-.385 1.138-.78 1.917-1.137 1.517-.662 3.336-1.18 4.325-1.226C23.824 1.47 43.19 1.3 58.614 1.14 66.23 1.063 74.092.96 83.704.763 105.909.48 140.925.3 163.154.029c19.423-.244 38.898 1.1 58.133 2.1 7.312.378 11.918.378 18.474.481 1.095.008 2.332.027 3.601.045 6.48.104 18.15-.404 21.92.573 3.772.99 6.406 1.092 9.703 2.909.174 1.791-1.154 2.62-2.838 2.92-3.926.715-7.525 1.516-10.576 1.761-3.576.283-6.462.293-7.047-.384-.567-.68-.247-1.101.32-1.412.986-.508 2.765-1.065 4.359-1.44z'/%3E%3C/svg%3E");
}

.animated-underline.cta-underline-2::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='295' height='9' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23E0AF56' d='M0 6.929 4.24 2.02l290.009-.148-3.957 4.887z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='m.045 0 294.383 1.875-.045 7L0 7z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* 5. Triggering the Animation */
.animated-underline.is-visible::after {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (max-width: 767px) {
  .animated-underline::after {
    bottom: -20px;
  }
  .animated-underline.hero-underline::after {
    left: -2.5%;
    width: 105%;
  }
}