:root{
    --accent: aqua;
    --logo-x-h: 0.66em;
    --logo-gap: 0.25rem;
    --logo-size: 5rem;
}
body {
    background: whitesmoke;
}
h1.logo{
  mix-blend-mode: multiply;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: flex-end;
  gap: var(--logo-gap);
  line-height: 1;
  font-size: 17rem;
  margin: 0;
  aspect-ratio: 1;
  max-width: 600px;
}

/* transform the letters into solid blocks */
h1.logo span{
    background: white;
    box-shadow: var(--accent) -0.45rem -0.15em 0.15em inset;
    color: transparent;
    position: relative;
    grid-column: span 3;
}

/* shape each letter span using border-radius */
h1.logo span:nth-of-type(1){
    border-radius: 0 50% 50% 0;
}
h1.logo span:nth-of-type(2){
    height: var(--logo-x-h);
    border-radius: 50%;
}
h1.logo span:nth-of-type(3){
    height: var(--logo-x-h);
    border-radius: 50% 0 0 50%;
}
h1.logo span:nth-of-type(5),
h1.logo span:nth-of-type(7){
    height: var(--logo-x-h);
    border-radius: 0 75% 0 0.2em;
}
h1.logo span:nth-of-type(6){
    height: var(--logo-x-h);
    border-radius: 0.35em 0 0 0;
}
h1.logo span:nth-of-type(8){
    border-radius: 0 0 0 0.2em;
}
h1.logo span:nth-of-type(9){
    border-radius: 0;
    height: var(--logo-x-h);
}
h1.logo span:nth-of-type(10){
    height: var(--logo-x-h);
    border-radius: 10em;
}
h1.logo span:nth-of-type(11){
    height: var(--logo-x-h);
    border-radius: 0 0.35em 0 0;
}
h1.logo span:nth-of-type(12){
    height: var(--logo-x-h);
    border-radius: 10em 0 10em 0;
}
h1.logo span:nth-of-type(10){
    animation: 1s grow;
    flex-grow: 1;
}
h1.logo span:nth-of-type(10) .typing{
    position: absolute; inset: 0;
    top: 0.5rem;

    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    align-content: center;

    animation: 1s fade;
}
.typing .dot{
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--accent);
    border-radius: 50%;
    animation: 2s infinite typing;
}
.typing .dot:nth-child(1) {
    animation-delay: 1.2s;
}
.typing .dot:nth-child(2) {
    animation-delay: 1.4s;
}
.typing .dot:nth-child(3) {
    animation-delay: 1.6s;
}


@keyframes grow {
    from{ flex-grow: 0; }
    to{ flex-grow: 1; }
}
@keyframes fade {
    0%{ opacity: 0; }
    33%{ opacity: 0; }
    100%{ opacity: 1; }
}
@keyframes typing {
    0%{ margin-bottom: 0; opacity: 1; }
    25%{ margin-bottom: 1.5rem;  opacity: 0.75; }
    50%{ margin-bottom: 0; opacity: 0.25; }
    100%{ margin-bottom: 0; opacity: 1; }
}