/* Initially hide all sections and the footer */
body > section, body > footer {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s linear 0.8s; /* Delay the fade-in by 0.8s */
}

/* Hide individual arrows initially */
.arrow-nav a {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition for fading */
}

.arrow-nav a.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none; /* Prevent clicking on hidden arrows */
}


/* Class to make elements visible */
body.loaded > section, body.loaded > footer {
   visibility: visible;
   opacity: 1;
}

/* Keyframes for the arrow fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

/* Apply fade-in and restore glow animation to arrows when loaded */
body.loaded .arrow-nav #arrow-up {
    animation: fadeIn 0.2s linear 0.8s forwards, neon-pulse-svg 1.5s infinite alternate 1.0s;
}
body.loaded .arrow-nav #arrow-right {
    animation: fadeIn 0.2s linear 1.0s forwards, neon-pulse-svg 1.5s infinite alternate 1.2s;
}
body.loaded .arrow-nav #arrow-down {
    animation: fadeIn 0.2s linear 1.2s forwards, neon-pulse-svg 1.5s infinite alternate 1.4s;
}
body.loaded .arrow-nav #arrow-left {
    animation: fadeIn 0.2s linear 1.4s forwards, neon-pulse-svg 1.5s infinite alternate 1.6s;
}

/* Animation container */
.animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999; /* Set to a high value to be on top */
    background-color: #0c0c08; /* Match the body background */
    transition: background-color 0.5s linear;
}

/* Move animation container to the back after loading */
body.loaded .animation-container {
    z-index: -1;
    background-color: transparent;
}

.logo-container {
    position: relative;
    width: 800px; /* Adjust size as needed */
    height: 800px; /* Adjust size as needed */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Pseudo-element for the glow, positioned behind the image */
.logo-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f86c14; /* Solid color for the glow */
    border-radius: 50%;
    opacity: 0; /* Start invisible */
}

/* Trigger the glow animation on the pseudo-element */
.logo-container.glow-dim::before {
    animation: pseudo-glow 1.1s ease-in-out forwards;
}

.logo-container img {
    visibility: visible; /* Ensure the image is visible */
    position: relative; /* Ensure it's on top of the pseudo-element */
    z-index: 2;
}

/* Trigger the dim animation on the image */
.logo-container.glow-dim img {
    animation: dim-image 1.1s ease-in-out forwards;
}

.logo-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c0c08; /* Same as body background */
    transform: translateX(0%);
    z-index: 3; /* Ensure cover is on top of everything initially */
}

.logo-cover.animate {
    animation: reveal-logo 2s linear forwards; /* Faster reveal */
}

@keyframes reveal-logo {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Keyframes for the pseudo-element's glow effect */
@keyframes pseudo-glow {
    0% {
        opacity: 0;
        filter: blur(20px);
    }
    50% {
        opacity: 1; /* Brighter glow */
        filter: blur(120px); /* Widened radius */
    }
    100% {
        opacity: 0;
        filter: blur(30px);
    }
}

/* Keyframes to dim the actual logo image */
@keyframes dim-image {
    0%, 50% {
        opacity: 1;
    }
    100% {
        opacity: 0.3; /* Dimmed translucence */
    }
}