body {
    background-image: url('Grace-Fo no rocket trail.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;         /* Removes default browser spacing around the edge */
}

.background-overlay {
    position: fixed;
    width: 100%;         /* Starts invisible/flat on the right */
    height: 0%;      /* Stays full height on desktop */
    bottom: 0;
    left: 0;
    
    /* Your second image setup */
    background-image: url('launched bigger.jpeg'); 
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;   
    
    /* Triggers the right-to-left animation on desktop */
    animation: revealUp 4s ease-out forwards; 
    animation-delay: 3s;
}

/* The desktop right-to-left animation rules */
@keyframes revealLeft {
    from {
        width: 0%;
    }
    to {
        width: 100%; /* Fully covers the screen from right to left */
    }
}

/* The mobile bottom-to-top animation rules */
@keyframes revealUp {
    from { 
        height: 0%; 
    }
    to { 
        height: 100%; 
    }
}

.hello-world-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10; /* Keeps it layered safely on top of your background animations */

    /* Flexbox layout system to handle alignment */
    display: flex;
    flex-direction: column; /* Stacks elements vertically inside the div */
    justify-content: center; /* Centers elements vertically */
    align-items: center;    /* Centers elements horizontally */
    pointer-events: none; /* Prevents this invisible fullscreen block from blocking clicks */
}

/* Re-enables clicking for items inside the div (like buttons, links, or forms) */
.hello-world-main * {
    pointer-events: auto;
    font-family: "Montserrat", sans-serif;
}

.hello-world-main h1 {
    font-weight: 300;
    font-size: 11vh;
    color: black;
    margin-bottom: -5px;
}

.hello-world-main p {
    font-weight: 200;
    font-size: 3.5vh;
    max-width: 60vh;
    text-align: center;
    margin-top: -2px;
}

.menu-bar-home {
    font-family: "Montserrat", sans-serif;
    font-weight: 200;
    font-size: 1.5em;
    top: 0;
    left: 0;
    width: 100%;
}

ul { 
    margin: 30px auto 0; 
    padding: 0; 
    list-style: none; 
    display: table;
    width: auto;
    text-align: center;
}

li { 
    display: table-cell; 
    position: relative; 
    padding: 15px 0;
}

a {
    color: black;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.1em;
    
    display: inline-block;
    padding: 15px 20px;
    position: relative;
}

a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

a:hover:after { 
    width: 100%; 
    left: 0; 
}

@media screen and (max-height: 300px) {
    ul {
        margin-top: 40px;
    }
}

/* Full-screen background for the loader */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white; /* Choose whatever background color you like */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100; /* Keeps it above everything else */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Simple CSS Spinner */
.loading-icon {
    width: 30px;  /* Adjust size as needed */
    height: auto;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Class applied by JS to fade it out smoothly */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Base style for all fading elements to start invisible */
.fade-1, .fade-2, .fade-3 {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

/* 1. "Hello World" starts after a short pause (0.3 seconds) */
.fade-1 {
    animation-delay: 1.5s;
}

/* 2. "My name is..." starts after 1.2 seconds */
.fade-2 {
    animation-delay: 2s;
}

/* 3. Navigation Bar starts after 2.1 seconds */
.fade-3 {
    animation-delay: 2.5s;
}

/* The core fade-in animation rule */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* Optional: subtly drifts items upward as they fade in */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Mobile Responsive Styles (Phones under 768px wide) --- */
@media screen and (max-width: 768px) {
    
    /* 1. Swap background images to mobile versions */
    body {
        background-image: url('mobile no rocket.jpg'); /* Your mobile base image */
        background-position: center center;
    }

    .background-overlay {
        background-image: url('mobile with rocket.jpg'); /* Your mobile sliding image */
        background-position: center center;
        
        /* Reset desktop side animation anchors */
        right: auto;
        top: auto;
        
        /* Configure mobile bottom animation anchors */
        bottom: 0;
        left: 0;
        width: 100%;       /* Full width on mobile screen */
        height: 0%;        /* Start flat at the bottom so it can reveal upwards */
        
        /* Run bottom-to-top animation instead */
        animation: revealUp 4s ease-out forwards;
    }

    /* 2. Scale down the text sizing */
    .hello-world-main h1 {
        font-size: 7vh; /* Shrunk down from 11vh to fit smaller screens */
        text-align: center;
        padding: 0 15px;
    }

    .hello-world-main p {
        font-size: 2.8vh; /* Shrunk down from 3.5vh */
        max-width: 85vw;  /* Allows the text block to expand wider on narrow screens */
        padding: 0 10px;
    }

    /* 3. Resize and stack the menu bar elements */
    .menu-bar-home {
        font-size: 2.5vh; /* Shrunk down text size from 4vh */
        width: 100%;
    }

    ul {
        width: 90% !important; /* Shrinks the menu frame container width */
        margin: 20px auto 0 !important;
        display: flex !important; /* Switches from table layout to flex for better phone control */
        justify-content: space-around;
        padding: 0;
    }

    li {
        display: block !important; /* Removes the table-cell property */
        padding: 5px 0;
    }

    a {
        padding: 10px 8px; /* Tighter padding so links don't wrap or collide */
        letter-spacing: 0.05em; /* Slightly tighter letters for smaller screens */
    }
}