/* ==========================================================
   LANZAR FUTURE INFORMATION TERMINAL
   Atomic Age / Retro Futurism
   ========================================================== */


/* ==========================================================
   TERMINAL BASE
   ========================================================== */

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


.future-terminal {
    width:100%;
    height:100vh;

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


/* ==========================================================
   TERMINAL SCENE
   ========================================================== */

.terminal-scene {
    position:relative;

    width:100%;
    height:100%;

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

    flex-direction:column;
}


/* ==========================================================
   BILLBOARD TERMINAL
   ========================================================== */

.journal-billboard {
    position:relative;

    width:min(850px,75vw);

    z-index:10;
}


.journal-billboard > img {
    display:block;

    width:100%;
    height:auto;
}


/* ==========================================================
   TERMINAL SCREEN
   ========================================================== */

.terminal-screen {
    position:absolute;

    top:27%;
    left:26%;

    width:47%;
    height:30%;

    overflow:hidden;

    border-radius:18px;
}


.terminal-screen iframe {
    width:100%;
    height:100%;

    border:none;
}


/* ==========================================================
   TERMINAL CONTROLS
   ========================================================== */

.terminal-controls {
    display:flex;

    gap:20px;

    margin-top:-35px;

    z-index:20;
}


.terminal-controls button {
    padding:12px 24px;

    font-family:var(--font-code);
    font-size:.85rem;

    letter-spacing:2px;
    text-transform:uppercase;

    color:var(--text-light);

    background:var(--rocket-orange);

    border:none;
    border-radius:var(--radius-pill);

    cursor:pointer;

    box-shadow:var(--shadow-medium);

    transition:
        transform var(--speed-normal),
        background var(--speed-normal);
}


.terminal-controls button:hover {
    transform:translateY(-3px);

    background:var(--btn-primary-hover);
}


/* ==========================================================
   TRANSMISSION DISPLAY
   ========================================================== */

.transmission {
    height:100%;

    padding:18px 32px;

    overflow-y:auto;

    text-align:center;

    font-family:var(--font-body);

    color:var(--deep-navy);

    scrollbar-width:none;
}


.transmission::-webkit-scrollbar {
    display:none;
}


/* ==========================================================
   TRANSMISSION LABEL
   ========================================================== */

.transmission-label {
    display:block;

    margin-bottom:14px;

    font-family:var(--font-code);

    font-size:.6rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--rocket-orange);
}


/* ==========================================================
   TRANSMISSION TITLE
   ========================================================== */

.transmission h1 {
    margin:0 0 20px;

    font-family:Georgia,"Times New Roman",serif;

    font-size:clamp(1.4rem,3vw,2rem);

    line-height:1.05;

    letter-spacing:.03em;

    text-transform:uppercase;

    color:var(--deep-navy);
}


/* ==========================================================
   TRANSMISSION BODY
   ========================================================== */

.transmission p {
    max-width:360px;

    margin:0 auto 18px;

    font-size:.78rem;

    line-height:1.7;

    color:var(--text-secondary);
}


.transmission p:last-child {
    margin-top:25px;

    font-family:var(--font-heading);

    font-size:.9rem;

    font-weight:700;

    color:var(--deep-navy);
}

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


.terminal-header {

    position:absolute;

    top:25px;

    left:35px;

    right:35px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    z-index:50;

}


.terminal-logo img {

    width:200px;

}



.terminal-tagline {

    display:flex;

    flex-direction:column;

    text-align:center;

    font-family:var(--font-code);

    font-size:.65rem;

    letter-spacing:4px;

    color:var(--deep-navy);

}



.terminal-return {

    padding:10px 18px;

    border-radius:var(--radius-pill);

    background:var(--rocket-orange);

    color:white;

    font-family:var(--font-code);

    font-size:.65rem;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.25s;

}



.terminal-return:hover {

    transform:translateY(-3px);

    background:var(--btn-primary-hover);

}

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

.terminal-tagline {

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    font-family:var(--font-heading);

    font-size:1.1rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--rocket-orange);

    text-shadow:0 1px 0 rgba(0,0,0,.1);

}

.terminal-tagline small {

    margin-top:5px;

    font-family:var(--font-code);

    font-size:.55rem;

    letter-spacing:3px;

    color:var(--deep-navy);

}