{source}<?php
$document->getWebAssetManager()->addInlineStyle('
#typewriter {
/*display: inline-block;*/
overflow: hidden;
white-space: nowrap;
/*border-right: 2px solid;*/
/*animation: typing 30s steps(30, end) infinite, blink-caret 1s step-end infinite;*/

padding-left: .5rem;
}

@keyframes typing {
from { width: 0; }
to { width: 100%; }
}

@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: black; }
}
');
?>
{/source}

{source}<?php
$document->getWebAssetManager()->addInlineScript(
'
document.addEventListener("DOMContentLoaded", function() {
const typewriterElement = document.getElementById(\'typewriter\');
const texts = ["K-12 Private School", "Pest Control Company", "Small Business"];
let index = 0;

function typewriterEffect(text, i, callback) {
if (i < text.length) {
typewriterElement.innerHTML = text.substring(0, i + 1) + \'<span aria-hidden="true"></span>\';
setTimeout(function() {
typewriterEffect(text, i + 1, callback);
}, 100);
} else if (typeof callback === \'function\') {
setTimeout(callback, 700);
}
}

function startAnimation() {
if (index >= texts.length) {
index = 0;
}
typewriterEffect(texts[index], 0, function() {
index++;
setTimeout(startAnimation, 700);
});
}

startAnimation();
});
',
['position' => 'before']
);
?>{/source}