/* ---
Global Resets & Desktop Styles (for screens > 800px)
--- */

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

body {
    background-color: #000000;
    background-image: url('assets/landing_v1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Lato', sans-serif;
    min-height: 100vh;
    position: relative; /* Needed for absolute positioning of children */
    overflow: hidden; /* Prevents scrollbars on full-screen view */
}

.logo {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 234px;
    height: 72px;
}

.text-container {
    position: absolute;
    bottom: 40px;
    right: 40px;
    text-align: left;
}

.site-status {
    color: #A5A3A0;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 140%;
    letter-spacing: 0.04em; /* 4% of font-size */
    margin-bottom: 12px;
}

.coming-soon {
    color: #C9C8C6;
    font-size: 40px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 140%;
    letter-spacing: 0.12em; /* 12% of font-size */
}

.mobile-background-image {
    display: none; /* Hide this image on large screens */
}


/* ---
Mobile Styles (for screens <= 800px)
--- */

@media (max-width: 800px) {

    body {
        /* On mobile, the background is a solid color */
        background-image: none;
        background-color: #000000;
        /* We remove position relative because we will use a different layout strategy */
        position: static;
    }

    .logo {
        /* Override absolute positioning for mobile layout */
        position: absolute;
        top: 64px;
        left: 50%;
        transform: translateX(-50%);
        width: 156px;
        height: 48px;
    }

    .text-container {
        position: absolute;
        /* Position the bottom of the container at the vertical halfway point */
        bottom: 50vh;
        left: 50%;
        transform: translateX(-50%);
        width: 100%; /* Ensure container takes full width for centering */
        text-align: center;
        /* Remove desktop-specific spacing */
        right: auto;
    }

    .site-status {
        font-size: 11px;
        /* Letter spacing is the same */
    }

    .coming-soon {
        font-size: 28px;
        letter-spacing: 0.08em; /* 8% of font-size */
    }

    .mobile-background-image {
        /* Make the image visible on mobile */
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50vh; /* Takes up the bottom half of the screen */
        object-fit: cover; /* Ensures the image covers the area without distortion */
        z-index: -1; /* Place it behind content in case of overlap */
    }
}