/* *{border:solid 1px red;} */
/* =========================
   PAGE STRUCTURE
========================= */

/* Makes the whole page a vertical layout */
body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* =========================
   HEADER
========================= */

/* Header stays natural height instead of forcing 100px */
header{
    flex:0 0 auto;
}

/* =========================
   CONTENT
========================= */

/* Main content expands to fill available vertical space */
#content{
    flex:1 0 auto;
}

/* =========================
   FOOTER
========================= */

/* Footer stays at the bottom when content is short */
footer{
    flex:0 0 auto;
    padding:24px 20px 20px;

    text-align:center;

    color:var(--text-faint);

    font-family:var(--font-mono);
    font-size:0.58rem;
    letter-spacing:0.22em;
    line-height:2.1;
    text-transform:uppercase;
}

/* =========================
   CONSTRUCT HOME
========================= */

.construct-home{
    position:relative;

    min-height:100vh;

    background:var(--bg-main);
}

/* =========================
   LANDING COMPOSITION
========================= */

/*
    This section displays the full homepage concept art
    as the main visual composition.

    Since the mockup already includes the nav, logo,
    sketch, title, subtitle, and enter text, we are not
    duplicating those elements in live HTML yet.
*/

.construct-landing{
    width:100%;
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

/*
    The artwork is sized to cover the viewport while
    preserving the original mockup proportions.

    object-fit:cover makes it feel like the full-page
    design shown in the reference image.
*/

.construct-home-art{
    width:100vw;
    height:100vh;

    object-fit:cover;
    object-position:center;

    user-select:none;
    pointer-events:none;
}

/* =========================
   MOBILE
========================= */

@media(max-width:750px){

    /*
        On mobile, the wide artwork needs extra width
        so the central sketch remains dominant.
    */

    .construct-home-art{
        width:180vw;
        max-width:none;

        object-fit:cover;
        object-position:center;
    }

}

/* =========================
   CONSTRUCT HEADER
========================= */

/*
    Floating architectural navigation.

    This should feel subtle and integrated
    into the environment — not like a heavy
    traditional website navbar.
*/

.construct-header{
    position:fixed;
    top:0;
    left:0;

    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:26px 34px;

    z-index:100;

    /*
        Extremely subtle glass effect.

        We want atmosphere, not obvious blur.
    */
    backdrop-filter:blur(6px);

    border-bottom:1px solid rgba(0,0,0,0.035);
}

/* =========================
   BRAND / LOGO
========================= */

/*
    Left-side logo + title container.
*/

.construct-brand{
    display:flex;
    align-items:center;
    gap:6px;

    /*
        Prevent accidental line wrapping.
    */
    white-space:nowrap;

    /*
        Technical / architectural typography.
    */
    font-size:0.82rem;
    letter-spacing:0.34em;
    text-transform:uppercase;
}

/*
    Hand-drawn Construct cube logo.
*/

.construct-logo{
    width:64px;
    height:auto;

    /*
        Slight softness keeps it integrated
        with the sketch aesthetic.
    */
    filter:contrast(1.02);
}

/* =========================
   CENTER NAVIGATION
========================= */

.construct-nav{
    display:flex;
    align-items:center;
    gap:54px;
}

/*
    Minimal navigation styling.

    Hover states should feel restrained
    and atmospheric.
*/

.construct-nav-link{
    position:relative;

    font-size:0.78rem;
    letter-spacing:0.28em;
    text-transform:uppercase;

    transition:
        color 180ms ease,
        opacity 180ms ease;
}

.construct-nav-link:hover{
    color:var(--accent-primary);
}


/* =========================
   RIGHT-SIDE ENTER LINK
========================= */

.construct-enter{
    font-size:0.78rem;
    letter-spacing:0.28em;
    text-transform:uppercase;

    color:var(--accent-primary);

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

/*
    Very subtle movement only.
*/

.construct-enter:hover{
    transform:translateX(2px);
}

.construct-enter.active{
    opacity:0.5;

    cursor:default;

    pointer-events:none;
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

    .construct-header{
        padding:22px 18px;
        flex-wrap:wrap;
        row-gap:12px;
    }

    /*
        Hide desktop navigation temporarily.

        Later we can build a proper
        Construct-style mobile menu.
    */

  .construct-brand{
      order:1;
  }

  .construct-enter{
      order:2;
  }

  .construct-nav{
      order:3;

      width:100%;

      display:flex;
      justify-content:center;
      gap:22px;
  }

  .construct-nav-link{
      font-size:0.58rem;
      letter-spacing:0.18em;
  }

    .construct-brand{
        gap:12px;

        font-size:0.7rem;
        letter-spacing:0.22em;
    }

    .construct-logo{
        width:34px;
    }

    .construct-enter{
        font-size:0.7rem;
        letter-spacing:0.2em;
    }

}

/* =========================
   INFO TERMINAL PANEL
========================= */

/*
    Dropdown diagnostic/interface panel
    triggered by top navigation buttons.
*/

.construct-info-panel{
    position:fixed;

    top:100px;
    left:50%;

    transform:translateX(-50%);

    width:min(920px, calc(100% - 32px));

    z-index:90;

    pointer-events:none;
}

/*
    Frosted terminal glass container.
*/

.construct-info-terminal{
    padding:22px 26px;

    background:rgba(255,255,255,0.07);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,0.12);

    box-shadow:
        0 12px 40px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.03);

    pointer-events:auto;
}

/* =========================
   PANEL LABEL
========================= */

.construct-info-label{
    margin-bottom:12px;

    color:var(--accent-primary);

    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.24em;
    text-transform:uppercase;

    opacity:0.92;
}

/* =========================
   PANEL TEXT
========================= */

.construct-info-text{
    color:var(--text-main);

    font-family:var(--font-mono);
    font-size:0.74rem;
    letter-spacing:0.12em;
    line-height:2;

    text-transform:uppercase;

    white-space:pre-line;
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

    .construct-info-panel{
        top:88px;

        width:calc(100% - 20px);
    }

    .construct-info-terminal{
        padding:18px 18px;
    }

    .construct-info-text{
        font-size:0.68rem;
        line-height:1.8;
    }

}

/* =========================
   CONSTRUCT ANNOTATIONS
========================= */

/*
    Small atmospheric system notes.

    These are intentionally live HTML instead of
    being baked into the image so they can scale,
    animate, and remain editable.
*/

.construct-note{
    position:absolute;
    z-index:5;

    color:var(--text-main);

    font-family:var(--font-mono);
    font-size:0.58rem;
    font-weight:500;
    letter-spacing:0.2em;
    line-height:2.1;
    text-transform:uppercase;

    opacity:0.82;

    pointer-events:none;
}

.construct-note-left{
    top:25%;
    left:15.5%;
}

.construct-note-right{
    top:28%;
    right:15.5%;
}

.construct-note-version{
    bottom:34%;
    left:14.5%;
}

.construct-note-status{
    bottom:34%;
    right:14.5%;
}

/* Tiny loading bars */
.construct-note span{
    display:block;

    width:38px;
    height:4px;

    margin-top:6px;

    background:repeating-linear-gradient(
        to right,
        var(--text-main) 0 4px,
        transparent 4px 7px
    );

    opacity:0.5;
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

    /*
        Hide annotations on smaller screens for now.

        Later we can reintroduce one or two of them
        as mobile-specific system labels.
    */

    .construct-note{
      font-size:0.48rem;
      letter-spacing:0.14em;
      line-height:1.8;

  }

  .construct-note-left,
  .construct-note-right{
      display:none;
  }

  .construct-note-version{
      display:block;

      bottom:32%;
      left:10%;
  }

  .construct-note-status{
      display:block;

      bottom:32%;
      right:10%;

      text-align:right;
  }

}

/* =========================
   HERO TEXT
========================= */

/*
    Main homepage identity block.

    Positioned near the bottom center
    like the original concept artwork.
*/

.construct-hero{
    position:absolute;

    left:50%;
    bottom:10%;

    transform:translateX(-50%);

    z-index:10;

    width:min(90vw, 1200px);

    text-align:center;
}

/* =========================
   MAIN TITLE
========================= */

/*
    Extremely spaced typography is part
    of the Construct identity language.
*/

.construct-hero h1{
    font-size:clamp(2.5rem, 5vw, 4.6rem);
    font-weight:500;

    letter-spacing:0.42em;
    text-transform:uppercase;

    white-space:nowrap;
}

/* =========================
   TAGLINE
========================= */

.construct-tagline{
    margin-top:26px;

    color:var(--text-main);

    font-family:var(--font-mono);
    font-size:0.82rem;
    letter-spacing:0.34em;
    line-height:2;

    text-transform:uppercase;

    opacity:0.84;
}

/* =========================
   ENTER BUTTON
========================= */

.construct-enter-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:36px;

    color:var(--accent-primary);

    font-family:var(--font-mono);
    font-size:0.8rem;
    letter-spacing:0.34em;
    text-transform:uppercase;

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

/*
    Subtle movement only.
*/

.construct-enter-btn:hover{
    transform:translateY(-2px);
}

/*
    Decorative lines beside button text.
*/

.construct-enter-btn::before,
.construct-enter-btn::after{
    content:"";

    width:48px;
    height:1px;

    margin-inline:16px;

    background:var(--accent-primary);

    opacity:0.5;
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

    .construct-hero{
        bottom:8%;
    }

    .construct-hero h1{
        font-size:clamp(1.7rem, 9vw, 3rem);

        letter-spacing:0.22em;
        line-height:1.2;

        white-space:normal;
    }

    .construct-tagline{
        margin-top:18px;

        font-size:0.62rem;
        letter-spacing:0.18em;
        line-height:1.8;
    }

    .construct-enter-btn{
        margin-top:26px;

        font-size:0.64rem;
        letter-spacing:0.18em;
    }

    .construct-enter-btn::before,
    .construct-enter-btn::after{
        width:24px;
        margin-inline:10px;
    }

}

/* =========================
   GLOBAL PAPER TEXTURE
========================= */

/*
    Extremely subtle paper / graphite grain.

    This helps the site feel physical,
    architectural, and atmospheric instead
    of perfectly flat digital white.
*/

.page-texture{
    position:fixed;
    inset:0;

    z-index:9999;

    pointer-events:none;

    background-image:url("../images/textures/paper-noise.png");
    background-repeat:repeat;

    opacity:var(--noise-opacity);

    mix-blend-mode:multiply;
}


/* =========================
   PROPOSE FORM
========================= */

.construct-propose-form{
    display:grid;
    gap:14px;

    margin-top:20px;
    padding-top:18px;

    border-top:1px solid rgba(255,255,255,0.14);
}

.construct-propose-form[hidden]{
    display:none;
}

.construct-propose-form label{
    display:grid;
    gap:7px;

    color:var(--text-main);

    font-family:var(--font-mono);
    font-size:0.62rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
}

.construct-propose-form input,
.construct-propose-form textarea{
    width:100%;

    padding:11px 12px;

    color:var(--text-main);

    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.08em;

    background:rgba(0,0,0,0.22);

    border:1px solid rgba(255,255,255,0.14);
    outline:none;

    resize:vertical;
}

.construct-propose-form textarea{
    min-height:92px;
}

.construct-propose-form input:focus,
.construct-propose-form textarea:focus{
    border-color:var(--accent-primary);

    box-shadow:0 0 18px rgba(255,255,255,0.08);
}

.construct-propose-form button{
    justify-self:start;

    margin-top:4px;
    padding:10px 14px;

    color:var(--accent-primary);

    font-family:var(--font-mono);
    font-size:0.66rem;
    letter-spacing:0.2em;
    text-transform:uppercase;

    background:transparent;

    border:1px solid rgba(255,255,255,0.22);

    cursor:pointer;

    transition:
        border-color 180ms ease,
        transform 180ms ease,
        opacity 180ms ease;
}

.construct-propose-form button:hover{
    transform:translateY(-1px);

    border-color:var(--accent-primary);
}

/*
|--------------------------------------------------------------------------
| BOOT OVERLAY
|--------------------------------------------------------------------------
|
| Full-screen overlay displayed while
| transitioning into the Construct system.
|
*/
body.construct-booting::before{

    /*
    |--------------------------------------------------------------------------
    | BOOT MESSAGE
    |--------------------------------------------------------------------------
    */
    content:"BOOTING CONSTRUCT CORE...";

    position:fixed;
    inset:0;

    z-index:99999;

    /*
    |--------------------------------------------------------------------------
    | CENTER CONTENT
    |--------------------------------------------------------------------------
    */
    display:flex;
    align-items:center;
    justify-content:center;

    /*
    |--------------------------------------------------------------------------
    | TERMINAL TYPOGRAPHY
    |--------------------------------------------------------------------------
    */
    color:var(--accent-primary);

    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.24em;
    text-transform:uppercase;

    /*
    |--------------------------------------------------------------------------
    | OVERLAY BACKGROUND
    |--------------------------------------------------------------------------
    |
    | Slightly warm/off-white tone
    | matching the Construct atmosphere.
    |
    */
    background:rgba(245,242,232,0.92);

    /*
    |--------------------------------------------------------------------------
    | FLICKER ANIMATION
    |--------------------------------------------------------------------------
    */
    animation:
        constructBootFlicker 700ms steps(2, end) infinite;
}

/*
|--------------------------------------------------------------------------
| BOOT FLICKER
|--------------------------------------------------------------------------
|
| Subtle opacity flicker to simulate
| a system waking up.
|
*/
@keyframes constructBootFlicker{

    0%,
    100%{
        opacity:1;
    }

    50%{
        opacity:0.86;
    }

}