/* 1. Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Body Configuration */
body,
html {
    height: 100%;
    width: 100%;
    background-color: #000000;
    /* Pure Black to match logo */
    overflow: hidden;
    /* No scrollbars */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. The Master Wrapper (The Centering Engine) */
.master-wrapper {
    display: flex;
    justify-content: center;
    /* Horizontal Center */
    align-items: center;
    /* Vertical Center */
    width: 100vw;
    height: 100vh;
    padding: 20px;
    /* Padding so logo doesn't touch mobile edges */
}

/* 4. Logo Styling */
.logo-box {
    width: 100%;
    max-width: 900px;
    /* Prevents logo from being too huge on ultra-wide monitors */
    text-align: center;
    opacity: 0;
    /* Starts invisible for the JS fade-in */
    transition: opacity 1.5s ease-in-out;
}

#main-logo {
    width: 100%;
    /* Fills the container */
    height: auto;
    /* Maintains aspect ratio */
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.1));
    /* Subtle gold glow */
}

/* 5. Fade-in Class (Triggered by JS) */
.visible {
    opacity: 1 !important;
}

/* Mobile Specific Adjustments */
@media (max-width: 768px) {
    .logo-box {
        max-width: 85%;
        /* Smaller width on mobile for better framing */
    }
}