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

body {
    background-color: #000000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

/* Responsive Logo Sizing - Optimized for Aesthetics */
.logo {
    /* Fluid sizing using clamp for smooth scaling across all screens */
    width: clamp(280px, 35vw, 600px);
    height: auto;
    transition: transform 0.2s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Mobile Devices (Portrait) - Small phones */
@media screen and (max-width: 480px) and (orientation: portrait) {
    .logo {
        width: clamp(200px, 65vw, 320px);
        max-width: 85vw;
    }
}

/* Mobile Devices (Landscape) */
@media screen and (max-width: 896px) and (orientation: landscape) {
    .logo {
        width: clamp(220px, 40vh, 380px);
        max-height: 65vh;
    }
}

/* Tablets (Portrait) */
@media screen and (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
    .logo {
        width: clamp(280px, 50vw, 450px);
    }
}

/* Tablets (Landscape) */
@media screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .logo {
        width: clamp(320px, 38vw, 500px);
    }
}

/* Laptops - Standard screens */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .logo {
        width: clamp(360px, 36vw, 550px);
    }
}

/* Desktop - Large screens */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .logo {
        width: clamp(400px, 32vw, 600px);
    }
}

/* Large Desktop & 4K displays */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
    .logo {
        width: clamp(500px, 28vw, 750px);
    }
}

/* Ultra-wide and 5K+ displays */
@media screen and (min-width: 2561px) {
    .logo {
        width: clamp(600px, 25vw, 900px);
        max-width: 900px;
    }
}

/* Small height screens (laptops with short screens) */
@media screen and (max-height: 700px) and (min-width: 1024px) {
    .logo {
        width: clamp(250px, 35vh, 400px);
        max-height: 60vh;
    }
}

/* Very small height (mobile landscape, compact devices) */
@media screen and (max-height: 500px) {
    .logo {
        width: clamp(180px, 30vh, 280px);
        max-height: 55vh;
    }
}

/* Subtle glow effect on hover */
.logo:hover {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

/* High DPI displays - Ensure crisp rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Accessibility - Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .logo {
        transition: none;
    }
}