.animated-text { max-width: 100%; height: auto; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .animated-text path { fill: transparent; stroke: currentColor; stroke-width: 2; stroke-dasharray: var(--path-length); stroke-dashoffset: var(--path-length); animation: logo-anim 10s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: center; stroke-linecap: round; stroke-linejoin: round; animation-play-state: running !important; will-change: transform; } @keyframes logo-anim { 0% { stroke-dashoffset: var(--path-length); stroke-dasharray: var(--path-length) var(--path-length); fill: transparent; opacity: 0; } 5% { opacity: 1; stroke-dashoffset: var(--path-length); stroke-dasharray: var(--path-length) var(--path-length); } 50% { stroke-dashoffset: 0; stroke-dasharray: var(--path-length) var(--path-length); fill: transparent; } 60%, 75% { stroke-dashoffset: 0; stroke-dasharray: var(--path-length) var(--path-length); fill: currentColor; opacity: 1; } 85% { stroke-dashoffset: 0; stroke-dasharray: var(--path-length) var(--path-length); fill: transparent; opacity: 1; } 95% { stroke-dashoffset: var(--path-length); stroke-dasharray: var(--path-length) var(--path-length); fill: transparent; opacity: 1; } 100% { stroke-dashoffset: var(--path-length); stroke-dasharray: var(--path-length) var(--path-length); fill: transparent; opacity: 0; } } @media (prefers-color-scheme: dark) { .animated-text path { stroke: currentColor; } } @media (hover: none) and (pointer: coarse) { .animated-text { touch-action: manipulation; cursor: pointer; } }