.animated-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--margin-md);
  width: clamp(440px, 30vw, 590px);
  z-index: 100;
}

.animated-badge svg {
  max-width: 100%;
  height: auto;
}

.animated-badge .animate-rotate {
  flex-shrink: 1;
}

.animated-badge .stroke-cl-1,
.animated-badge .stroke-cl-2,
.animated-badge .stroke-cl-3,
.animated-badge .stroke-cl-4 {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 82px;
}
.animated-badge .stroke-cl-1 {
  stroke: var(--color-secondary);
}
.animated-badge .stroke-cl-2 {
  stroke: var(--color-active);
}
.animated-badge .stroke-cl-3 {
  stroke: var(--color-warning);
}
.animated-badge .stroke-cl-4 {
  stroke: var(--color-primary);
}

.animated-badge a {
  text-decoration: none;
}

.animated-badge p {
  color:var(--color-tint);
  font-family: helvetica;
  font-weight: bold;
  font-size:var(--text-base);
  line-height: 1.65;
  opacity: 0;
  animation: animated_badge_moveX .6s 5.5s ease-in forwards;
}
@keyframes animated_badge_moveX {
	0% {transform: translateX(-50%); opacity:0;}
	100% {transform: translateX(0%); opacity:1;}
}
.animated-badge .text {
  font-size: 230px;
  font-family: veneer-webfont;
  fill:transparent;
  stroke:#FEFEFE;
  stroke-width:1px;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: animated_badge_fadein 3s 1s ease-out forwards;
}
.animated-badge .text > text {
  fill: inherit;
}
@keyframes animated_badge_fadein {
  0% {fill:transparent; stroke-width:1px;}
  100% {fill:#FEFEFE; stroke-width:1px;}
}
.animated-badge .lines {
  fill:transparent;
  stroke-width:82px;
  stroke-dasharray: 1080;
  stroke-dashoffset: 1000;
  opacity:0;
  animation: animated_badge_dashes 2s 3s ease-out forwards;
}
@keyframes animated_badge_dashes {
  0%{ opacity:0; }
  50%{ opacity:1; stroke-dashoffset: 0;}
  55%{ opacity:1; stroke-dashoffset: 0; transform-origin: 50% 50%; transform: rotate(0deg);}
  100%{ opacity:1; stroke-dashoffset: 0; transform-origin: 50% 50%; transform: rotate(360deg);}
}

.animated-badge .animate-rotate .text {
  transform: rotate(-83deg);
  transition: 3.25s transform cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center center;
}
.animated-badge:hover .animate-rotate .text {
  transform: rotate(-440deg);
  transform-origin: center center;
}