@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Oswald', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
    /* Background setup - optimized for all devices */
    background-image: url('background.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Use fixed attachment on desktop for parallax effect */
    background-attachment: fixed;
}

/* Mobile optimization - use scroll attachment for better performance */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}

/* For very small or square aspect ratios, ensure full coverage */
@media (max-aspect-ratio: 1/1) {
    body {
        background-size: auto 100%;
        background-position: center center;
    }
}

.container {
    text-align: center;
    z-index: 10;
    position: relative;
    padding: 20px;
}

.soon-text {
    font-size: 10em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    
    /* Enhanced text shadow for better visibility */
    text-shadow: 
        0 0 40px rgba(255, 255, 255, 1),
        0 0 80px rgba(255, 255, 255, 0.9),
        0 0 120px rgba(255, 255, 255, 0.7),
        0 4px 30px rgba(0, 0, 0, 0.95),
        0 8px 40px rgba(0, 0, 0, 0.8);
    
    /* Smooth entrance animation */
    animation: fadeIn 2s ease-in-out, glow 3s ease-in-out infinite alternate;
    
    /* Prevent text from breaking */
    white-space: nowrap;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-30px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

@keyframes glow {
    from {
        text-shadow: 
            0 0 30px rgba(255, 255, 255, 0.9),
            0 0 60px rgba(255, 255, 255, 0.7),
            0 0 90px rgba(255, 255, 255, 0.5),
            0 4px 30px rgba(0, 0, 0, 0.95),
            0 8px 40px rgba(0, 0, 0, 0.8);
    }
    to {
        text-shadow: 
            0 0 50px rgba(255, 255, 255, 1),
            0 0 100px rgba(255, 255, 255, 0.95),
            0 0 150px rgba(255, 255, 255, 0.8),
            0 4px 30px rgba(0, 0, 0, 0.95),
            0 8px 40px rgba(0, 0, 0, 0.8);
    }
}

/* Responsive breakpoints - tested across all devices */

/* Large desktops and 4K screens */
@media (max-width: 2560px) {
    .soon-text {
        font-size: 12em;
    }
}

/* Standard desktops */
@media (max-width: 1920px) {
    .soon-text {
        font-size: 10em;
    }
}

/* Laptops and smaller desktops */
@media (max-width: 1440px) {
    .soon-text {
        font-size: 8em;
    }
}

/* Tablets landscape and small laptops */
@media (max-width: 1200px) {
    .soon-text {
        font-size: 6.5em;
        letter-spacing: 0.12em;
    }
}

/* Tablets portrait */
@media (max-width: 992px) {
    .soon-text {
        font-size: 5.5em;
        letter-spacing: 0.1em;
    }
}

/* Large phones and small tablets */
@media (max-width: 768px) {
    .soon-text {
        font-size: 4.5em;
        letter-spacing: 0.1em;
    }
}

/* Standard phones */
@media (max-width: 576px) {
    .soon-text {
        font-size: 3.5em;
        letter-spacing: 0.08em;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .soon-text {
        font-size: 3em;
        letter-spacing: 0.08em;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .soon-text {
        font-size: 2.5em;
        letter-spacing: 0.06em;
    }
}

/* Landscape orientation on mobile devices */
@media (max-height: 500px) and (orientation: landscape) {
    .soon-text {
        font-size: 3em;
        letter-spacing: 0.08em;
    }
}

/* Ultra-wide screens */
@media (min-aspect-ratio: 21/9) {
    body {
        background-size: 100% auto;
    }
}

/* Prevent text overflow on any screen */
@media (max-width: 320px) {
    .soon-text {
        font-size: 2em;
        letter-spacing: 0.05em;
    }
}