/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    background-color: #ffffff;
}

.container {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 25vh;
}

.logo-wrapper {
    padding: 20px;
    width: 70%;
    animation: fadeIn 1s ease-in;
}

#logo-container {
    width: 100%;
}

#logo-container svg {
    width: 100%;
    height: auto;
}

/* Circle Animations */
circle.animated-circle {
    transform-origin: center !important;
    transform-box: fill-box !important;
    animation: gatherIn 5s ease-out forwards !important;
    animation-delay: var(--animation-delay, 0s) !important;
    opacity: 0;
}

circle.animated-circle.gathered {
    animation: float var(--float-duration, 20s) ease-in-out infinite !important;
    /* opacity: var(--final-opacity, 0.54) !important; */
}

@keyframes gatherIn {
    0% {
        opacity: 0;
        transform: translate(var(--start-x, -50px), var(--start-y, -50px)) scale(0.8);
    }
    100% {
        opacity: var(--final-opacity, 0.54);
        transform: translate(0, 0) scale(1);
    }
}

@keyframes float {
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 100%{
        transform: translate(0, 0) scale(1);
        opacity: var(--final-opacity, 0.54);
    }
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85% {
        transform: translate(var(--float-x, 0px), var(--float-y, 0px));
    }
    89% {
        transform: translate(var(--float-x, 0px), var(--float-y, 0px));
        opacity: 0.0001;
    }
    90% {
        transform: translate(var(--start-x-half, -50px), var(--start-y-half, -50px));
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logo-wrapper {
        width: 80%;
    }
}