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

body, html {
    width: 100%;
    height: 100%;
    /* Use the exact background color from the image to blend it seamlessly */
    background-color: #242424;
    overflow: hidden; /* Prevent scrolling, keep it a fixed parking page */
    font-family: sans-serif;
}

/* Particle Background */
#custom-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind the content */
    pointer-events: none; /* Let clicks pass through */
}

/* Light Effect (Spotlight) */
#light-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let clicks pass through to underneath elements */
    z-index: 2;
    /* We'll update this gradient position in JS */
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 60%);
    transition: opacity 0.3s ease;
}

/* Main Container to center content */
.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3; /* Above background effects */
}

/* Image Wrapper for subtle animations */
.image-wrapper {
    /* Initial state for fade-in animation */
    opacity: 0;
    transform: scale(0.95);
    animation: fadeInScale 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    padding: 20px; /* Padding for smaller screens */
    width: 100%;
    max-width: 1000px; /* Max width to constrain very large screens */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The Image itself */
.logo-image {
    max-width: 100%;
    height: auto;
    display: block;
    /* Optional: a very subtle drop shadow to lift it from the pure background slightly,
       but since we want it to blend perfectly, let's omit drop shadow for now or make it very subtle */
    /* filter: drop-shadow(0 0 20px rgba(0,0,0,0.2)); */
    
    /* Small breathing animation */
    animation: breathing 6s ease-in-out infinite alternate;
}

/* Keyframes */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes breathing {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.02);
    }
}