:root {
    --bg-dark: #111;
    --accent: #ff3e00; /* Vibrant Orange-Red */
}

body {
    margin: 0;
    overflow: hidden; /* Prevent vertical scrolling */
    background: var(--bg-dark);
    color: white;
    font-family: 'Helvetica', sans-serif;
}

.horizontal-wrapper {
    display: flex;
    width: 300vw; /* 3 sections at 100vw each */
    height: 100vh;
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Brighter, Vibrant Gradients */
.panel-1 { 
    background: radial-gradient(circle at center, #1a1a1a 0%, #003366 100%); /* Deep Midnight Blue */
}
.panel-2 { 
    background: radial-gradient(circle at center, #1a1a1a 0%, #4d0000 100%); /* Crimson Wine */
}
.panel-3 { 
    background: radial-gradient(circle at center, #1a1a1a 0%, #1a3300 100%); /* Forest Emerald */
}

.panel {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}



.content {
    max-width: 600px;
    padding: 2rem;
}

h1 {
    font-size: 8rem;
    margin: 0;
    color: var(--accent);
    text-transform: uppercase;
}

p {
    font-size: 1.5rem;
    opacity: 0.6;
}
/* --- MOBILE RESPONSIVE QUERY --- */
@media (max-width: 768px) {
    body {
        overflow-y: auto; /* Allow vertical scrolling on mobile */
    }
    
    .horizontal-wrapper {
        display: block; /* Stack panels vertically */
        width: 100%;
        height: auto;
        transform: none !important; /* Disable the JS translate on mobile */
    }

    .panel {
        width: 100%;
        height: 100vh; /* Keep panels full screen height */
        border-bottom: 1px solid var(--accent);
    }

    .panel {
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
    
    h1 {
        font-size: 3.5rem; /* Shrink text for mobile screens */
    }
}
.glass-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    /* Make it more visible with a slightly stronger white tint */
    background: rgba(255, 255, 255, 0.07); 
    border-radius: 50%;
    
    /* This creates the frosted glass effect */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    
    /* A bright edge makes it look like real glass */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Add a glow to the circle */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    
    z-index: 1; /* Moves it in front of the background */
    pointer-events: none; /* Allows you to still click through it */
    animation: float 8s ease-in-out infinite;
}

/* Ensure your content is ABOVE the glass circle */
.content {
    position: relative;
    z-index: 2; 
}

.progress-container {
    position: fixed;
    bottom: 20px;
    left: 10%;
    width: 80%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 100;
    border-radius: 2px;
}

.progress-bar {
    height: 100%;
    background: var(--accent);
    width: 33.3%; /* Starting width for Page 1 */
    transition: width 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 15px var(--accent);
}