/* ==========================================================================
   1. Reset & Base Layout Best Practices
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: #111111; /* Sleek dark background; change to #ffffff if preferred */
    overflow: hidden; /* Prevents accidental scrollbars if the image fits tightly */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   2. Perfectly Centered Container (Flexbox)
   ========================================================================== */
.container {
    width: 100%;
    height: 100vh; /* Takes 100% of the viewport height */
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;     /* Vertical centering */
    padding: 20px;           /* Safety padding for small mobile screens */
}

/* ==========================================================================
   3. Responsive & Optimized Image
   ========================================================================== */
.hero-image {
    max-width: 100%;
    max-height: 90vh; /* Keeps the image from clipping on short, vertical screens */
    width: auto;
    height: auto;
    object-fit: contain; /* Preserves the image's exact aspect ratio without distortion */
    
    /* Performance & Rendering Optimizations */
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
    
    /* Smooth Loading Animation */
    animation: fadeIn 0.8s ease-in-out;
}

/* Subtle fade-in scale effect on load */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}