/* Coming-soon hero composition.
   Cityscape background + hero figure + framed message + logo, built as responsive
   CSS layers so the headline and paragraph stay real, crawlable text.

   Responsive strategy:
   - The frame keeps the artwork's exact aspect ratio. Its WIDTH is the single
     binding dimension (min of viewport-width / viewport-height / a max px), and
     aspect-ratio derives the height, so the art never distorts.
   - Text inside is sized in container-query units (cqi), so it scales with the
     frame identically at every screen size: fit it once, it fits everywhere.
   - Hero + logo use fluid units and bleed off the edges; the hero sits behind the
     frame so the message stays readable. svh units absorb mobile browser chrome. */

:root {
    --brand-blue: #0000ff;
}

body.coming-soon {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    color: #1a1a1a;
}

.stage {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    background: #bfe0f5 url('/images/cityscapes/city-main-2026-06.jpg') center center / cover no-repeat;
}

/* --- Framed message (the blue/gold panel) --- */
.stage__frame {
    position: absolute;
    left: 50%;
    /* Center sits 40% down, but never lets the frame's top edge rise into the reserved
       top band, so the top-right logo is never covered. (0.687 * width = half height.) */
    --fw: min(90vw, 56svh, 440px);    /* frame width = the binding dimension... */
    --top-band: 120px;                /* reserved headroom at the top (for the logo) */
    top: clamp(40%, calc(var(--top-band) + var(--fw) * 0.687), 50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    width: var(--fw);
    aspect-ratio: 534 / 734;          /* ...height follows the artwork, no distortion */
    background: url('/images/layers/div-backgrounds/coming-soon.png') center / cover no-repeat;
    container-type: size;             /* enables cqi/cqh text sizing below */
    display: grid;
    place-items: center;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .38));
}

/* Past the narrow logo-overlap zone there's plenty of width, so just center the panel. */
@media (min-width: 951px) {
    .stage__frame { top: 50%; }
}

.frame__inner {
    width: 76%;                       /* sit inside the cream interior of the art */
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4cqh;
    text-align: center;
}

.frame__title {
    margin: 0;
    font-family: 'Bangers', system-ui, cursive;
    font-weight: 400;
    color: var(--brand-blue);
    line-height: .9;
    letter-spacing: .5px;
    font-size: 15cqi;                 /* scales with the frame */
}

.frame__lead {
    margin: 0;
    line-height: 1.3;
    font-size: 4.6cqi;
    color: #222;
}

.frame__star {
    width: 14cqi;                  /* ~64px at the desktop frame; scales with it */
    height: auto;
    align-self: center;            /* centered in the flex column */
}

/* --- Hero figure: anchored bottom-left, bleeds off the edge --- */
.stage__hero {
    position: absolute;
    z-index: 3;
    left: 0;                       /* his trimmed left edge bleeds off the corner */
    bottom: 0;
    /* Pre-cropped, so he just scales like the logo. 42vw hits ~1000px on a wide
       screen, shrinking with the window. Native width is 972px; above that he
       softens slightly, so re-export larger if you want him bigger than the cap. */
    width: clamp(320px, 42vw, 1000px);
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* --- Brand logo: top-right (shrinks but stays put; centered on phones) --- */
.stage__logo {
    position: absolute;
    z-index: 3;
    top: clamp(1rem, 4vw, 2.5rem);
    right: clamp(1rem, 4vw, 3rem);
    /* ~24vw hits 600px at 2560 wide, then shrinks with the screen; capped 180-600. */
    width: clamp(180px, 24vw, 600px);
    height: auto;
}

/* --- Phones / portrait ---
   Logo becomes a centered top header, the frame owns the middle (sized by svh so it
   leaves clear room above and below), and the hero peeks in from the bottom-left. */
@media (max-width: 640px) {
    .stage {
        --mfw: min(86vw, 51svh, 340px);   /* mobile frame width (shared by frame + logo) */
    }
    .stage__frame {
        width: var(--mfw);
        top: 50%;                          /* panel stays vertically centered (base transform centers it) */
    }
    .stage__logo {
        /* Auto-centered in the gap between the screen top and the panel top.
           panel top = 50svh - half the frame's height; the logo sits at half of that.
           (0.3436 * width = a quarter of the frame's height.) */
        top: calc(25svh - var(--mfw) * 0.3436);
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: min(90vw, 320px);
    }
    .stage__hero {
        /* Always in front (base z-index: 3) so his face is always visible. The svh cap
           limits his HEIGHT so his head stays low and clear of the text. Lower the
           number to shorten him more; raise it for taller. */
        width: min(85vw, 34.5svh, 390px);
        left: -6vw;
    }
}