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

/* Body Styles */
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background-color: #e3e3e3;
}

/* Logo Container */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Logo Styles */
.logo {
    width: 100px; /* Starting small size to simulate "far away" */
    max-width: none; /* Allow the logo to scale beyond 100px */
    opacity: 0;
    transform: scale(0.1) translateZ(-1000px);
    animation: logoAppear 3s ease-in-out forwards;
}

/* Loading Text Styles */
.loading-text {
    margin-top: 120px; /* Increased margin to push the text further down */
    font-size: 24px;
    color: #000;
    opacity: 0;
    animation: textAppear 1s ease-in-out forwards;
    animation-delay: 3s; /* Delay the appearance until the logo animation completes */
}

@keyframes logoAppear {
    0% {
        opacity: 0;
        transform: scale(0.1) translateZ(-1000px);
    }
    100% {
        opacity: 1;
        transform: scale(4) translateZ(0);
    }
}

@keyframes textAppear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Dots Animation */
@keyframes dots {
    0%, 20% {
        content: '...';
    }
    40% {
        content: ' ';
    }
    60% {
        content: '.';
    }
    80%, 100% {
        content: '..';
    }
}

.dots::after {
    content: '...';
    animation: dots 1.5s infinite;
}