/* Google Fonts - loaded in HTML head */

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

html {
    min-height: 100%;
    background: #0c1b18;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #f8f8f8;
    text-align: center;
    background: radial-gradient(ellipse at 50% 35%, #243e33, #0c1b18 70%);
}

main {
    width: 100%;
    overflow: hidden;
    padding: 24px 0 48px;
}

/* One illustrated landscape, rather than independently positioned trees. */
.forest-scene {
    position: relative;
    isolation: isolate;
}

.forest-artwork {
    position: relative;
    width: clamp(680px, 100vw, 1200px);
    aspect-ratio: 3 / 2;
    margin-left: 50%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent),
        linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent),
        linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.forest-illustration {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Multiply lets the original white-backed logo take on the clearing's paper tone. */
.logo-container {
    position: absolute;
    top: 25%;
    left: 31%;
    width: 38%;
    mix-blend-mode: multiply;
}

.logo {
    display: block;
    width: 100%;
    height: auto;
}

.text-content {
    position: relative;
    max-width: 560px;
    margin: -48px auto 0;
    padding: 0 24px;
}

.coming-soon {
    font-family: 'Bebas Neue', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(38px, 6.2vw, 56px);
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 3.5px;
    line-height: 1.1;
    margin-bottom: 12px;
}

.subtitle {
    font-size: clamp(15px, 2.4vw, 19px);
    line-height: 1.6;
    color: #bac9bf;
    letter-spacing: 0.3px;
    text-wrap: balance;
}

/* Narrow viewports swap to the cropped scene. The logo keeps its exact
   position within the clearing: the percentages map the crop (240 60 720 740)
   back to the shared 1200x800 coordinate space of the wide variant. */
@media (max-width: 700px) {
    .forest-artwork {
        width: min(100vw, 680px);
        aspect-ratio: 720 / 740;
    }

    .logo-container {
        top: 18.92%;
        left: 18.33%;
        width: 63.33%;
    }
}

@media (max-width: 600px) {
    main {
        padding-top: 0;
        padding-bottom: 32px;
    }

    .text-content {
        margin-top: -16px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    main {
        animation: fadeIn 0.9s ease-out both;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}