.logo-block {
    max-width: 100%;
    padding: 20px;
}

.logo-block svg {
    display: block;
    overflow: visible;
    max-width: 190px;
}

.logo-block svg > path {
    opacity: 0;
    transform: translateY(20px);
    animation: textSlideUp 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.logo-link {
    display: block;
    line-height: 0;
}

.logo-block svg > path:nth-child(1) { animation-delay: 0.8s; }
.logo-block svg > path:nth-child(2) { animation-delay: 0.85s; }
.logo-block svg > path:nth-child(3) { animation-delay: 0.9s; }
.logo-block svg > path:nth-child(4) { animation-delay: 0.95s; }
.logo-block svg > path:nth-child(5) { animation-delay: 1.0s; }
.logo-block svg > path:nth-child(6) { animation-delay: 1.05s; }
.logo-block svg > path:nth-child(7) { animation-delay: 1.1s; }
.logo-block svg > path:nth-child(8) { animation-delay: 1.15s; }
.logo-block svg > path:nth-child(9) { animation-delay: 1.2s; }
.logo-block svg > path:nth-child(10) { animation-delay: 1.25s; }

.logo-block #cloud-group {
    transform-origin: center;
    transform-box: fill-box;
    animation: floatCloud 3s ease-in-out infinite alternate;
}

.logo-block #cloud-group path {
    stroke: url(#paint0_linear_2601_78);
    stroke-width: 1.5px;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    fill-opacity: 0;
    animation: 
        drawCloud 1.5s ease-in-out forwards,
        fillCloud 1s ease-out 1.2s forwards;
}

#cloud-group {
    filter: var(--primary-color-filter);
}

@keyframes drawCloud {
    to { stroke-dashoffset: 0; }
}

@keyframes fillCloud {
    to { fill-opacity: 1; stroke-width: 0; }
}

@keyframes floatCloud {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes textSlideUp {
    to { opacity: 1; transform: translateY(0); }
}