/* =========================================================
   KRUSHCOMICS HOME PAGE
   ========================================================= */


/* ---------------------------------------------------------
   Banner
   --------------------------------------------------------- */

.hero {
    position: relative;
}

.hero-banner {
    position: relative;

    height: clamp(260px, 33vw, 520px);

    overflow: hidden;

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

.hero-banner-image {
    display: block;

    width: 100%;
    height: 100%;

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

/*
    Fade the artwork into the page background at the bottom and
    darken the left edge slightly so the terminal reads cleanly.
*/

.hero-banner::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(11, 12, 15, 0) 35%,
            rgba(11, 12, 15, 0.6) 70%,
            var(--bg) 100%
        ),
        linear-gradient(
            to right,
            rgba(11, 12, 15, 0.45),
            rgba(11, 12, 15, 0) 45%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   Terminal Introduction
   --------------------------------------------------------- */

.hero-inner {
    position: relative;
    z-index: 1;

    width: min(100% - 2 * var(--gutter), var(--content));

    margin: calc(-1 * clamp(96px, 11vw, 170px)) auto 0;
}

.terminal {
    max-width: 600px;

    overflow: hidden;

    background-color: rgba(15, 17, 21, 0.88);

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.terminal-bar {
    display: grid;

    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 10px 14px;

    font-size: 0.75rem;

    color: var(--text-faint);

    border-bottom: 1px solid var(--border);
}

.terminal-dots {
    display: flex;

    gap: 6px;
}

.terminal-dots span {
    width: 10px;
    height: 10px;

    background-color: var(--border-strong);

    border-radius: 50%;
}

.terminal-dots span:first-child {
    background-color: var(--accent);
}

.terminal-body {
    padding: 20px 24px 22px;
}

.terminal-command {
    font-size: 0.875rem;

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

.terminal-prompt {
    margin-right: 6px;

    color: var(--accent);
}

.terminal-name {
    margin: 4px 0 2px;

    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
    line-height: 1.15;
}

.terminal-output {
    margin-bottom: 18px;

    font-size: 0.9rem;

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

.terminal-ls {
    display: flex;

    flex-wrap: wrap;

    gap: 4px 24px;

    margin: 2px 0 14px;
}

.terminal-ls a {
    font-weight: 600;

    text-decoration: none;
}

.terminal-ls a:hover {
    text-decoration: underline;
}

.terminal-cursor {
    display: inline-block;

    width: 0.55em;
    height: 1.1em;

    vertical-align: text-bottom;

    background-color: var(--accent);

    animation: cursor-blink 1.1s steps(1) infinite;
}


/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.home-page {
    padding-top: 64px;
}


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

@media (max-width: 700px) {

    .hero-banner {
        height: 220px;
    }

    .hero-inner {
        margin-top: -64px;
    }

    .terminal-body {
        padding: 16px 18px 18px;
    }

    .home-page {
        padding-top: 48px;
    }

}