/* ============================ Dot Loader Styles ============================ */
.dot-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(-80deg, #131331 0%, #0a0a35 50%, #07070f 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.dot-loader-container.fade-out {
    opacity: 0;
    pointer-events: none;
}

.dot-loader {
    display: flex;
    gap: 15px;
    align-items: center;
}

.dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d5ff, #00b4d8);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    /* Changed animation timing for a classic bounce look */
    animation: dotBounce 1.0s infinite ease-in-out;
}

/* Delay staggered to create the 'wave' effect */
.dot:nth-child(1) {
    animation-delay: -0.4s;
}

.dot:nth-child(2) {
    animation-delay: -0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0s;
}

/* --- Keyframes for the UP/DOWN Bounce Animation --- */
@keyframes dotBounce {
    0%, 100% {
        /* Start and End position (lowered) */
        transform: translateY(0);
        opacity: 0.7; /* Slightly faded when low */
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
    }
    50% {
        /* Highest point of the bounce */
        transform: translateY(-20px); /* Adjust this value for bounce height */
        opacity: 1; /* Fully opaque when high */
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
    }
}
/* ------------------------------------------------ */

/* Optional: Add loading text below dots */
.loading-text {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    color: #00d5ff;
    font-family: "Geist Mono", monospace;
    font-size: 14px;
    letter-spacing: 3px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}


/* ============================ Loading section ============================ */

/* Make the loading container fixed and full screen */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    opacity: 1;
}

.loading.start-animation {
    animation: fadeOutLoadingContainer 1.5s ease-out 2s forwards;
}

/* @keyframes fadeOutLoadingContainer {
    from{
        opacity: 1;
    }
    to {
        opacity: 0;
    }
} */

/* In loadingPage.css */

@keyframes fadeOutLoadingContainer {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden; /* Add this */
        pointer-events: none; /* And add this */
    }
}

.loading__text{
    width: 60%;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    position: absolute;
    left: 20%;
    top: 20%;
    font-size: 250px;
    z-index: 210;
    opacity: 0;
}

.loading.start-animation .loading__text {
    opacity: 1;
    animation: opacityText 1s 2s forwards;
}

@keyframes opacityText {
    from {opacity: 1;}
    to  {opacity: 0;}
}

.loading__text div{
    opacity: 0;
}

.loading.start-animation .loading__text div {
    animation: moveUp 0.5s forwards;
    animation-delay: calc(var(--i) * 0.1s);
}

@keyframes moveUp {
  from { opacity: 0; transform: translateY(0); }
  to   { opacity: 1; transform: translateY(-40px); }
}

.strips{
    height: 100vh;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100vw;
    z-index: 200;
}

.strips div{
    width: 20%;
    height: 100vh;
    background: var(--loading-color);
    opacity: 1;
}

.loading.start-animation .strips div {
    animation: fadeOut 1s forwards;
    animation-delay: calc(var(--i) * 0.2s + 0.5s); 
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(100vh); }
}

/* ============================ Main page ============================ */
.main__page{
    opacity: 0;
    transition: opacity 2s ease;
}

.main__page.fade-in {
    opacity: 1;
    transition: opacity 2s ease;
}

@keyframes fadeIn {
  from { opacity: 0;}
  to   { opacity: 1;}
}