.speech-balloon .stroke-cl-1,
.speech-balloon .stroke-cl-2,
.speech-balloon .stroke-cl-3,
.speech-balloon .stroke-cl-4 {
    fill: none;
    stroke-miterlimit: 10;
    stroke-width: 40px;
}
.speech-balloon .stroke-cl-1 {
    stroke: var(--color-active);
}
.speech-balloon .stroke-cl-2 {
    stroke: var(--color-secondary);
}
.speech-balloon .stroke-cl-3 {
    stroke: var(--color-primary);
}
.speech-balloon .stroke-cl-4 {
    stroke: var(--color-warning);
}
.speech-balloon {
    position:relative;
    width:100%;
    max-width:380px;
    z-index:10;
}
.speech-balloon .stroke-cl-1 {
    fill:transparent;
    stroke-width:40px;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    opacity:0;
    animation: speech_balloon_dash 1s 3s ease-out forwards;
}
.speech-balloon .stroke-cl-2 {
    fill:transparent;
    stroke-width:40px;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    opacity:0;
    animation: speech_balloon_dash .5s 3.7s ease-out forwards;
}
.speech-balloon .stroke-cl-3 {
    fill:transparent;
    stroke-width:40px;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    opacity:0;
    animation: speech_balloon_dash .5s 4.15s ease-out forwards;
}
.speech-balloon .stroke-cl-4 {
    fill:transparent;
    stroke-width:40px;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    opacity:0;
    animation: speech_balloon_dash .5s 4.6s ease-out forwards;
}

@keyframes speech_balloon_dash {
    to {
        stroke-width:40px;
        stroke-dashoffset: 0;
        fill:transparent;
        opacity:1;
    }
}

.speech-balloon .text {
    font-size: 160px;
    font-family: veneer-webfont;
    fill: var(--color-tint);
    opacity: 0;
    animation: speech_balloon_reveal .8s 5s ease-out forwards;
}

.speech-balloon .text tspan {
    fill: inherit;
    opacity: inherit;
    mix-blend-mode: initial;
}
@keyframes speech_balloon_reveal {
    0% {opacity:0;}
    100% {opacity:1;}
}
.speech-balloon.animate-scale .text {
    transition: 0.45s transform cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center center;
}
.speech-balloon:hover.animate-scale .text {
    transform: scale(1.025);
    transform-origin: center center;
}