/* Skapi product section: the hero of web-skapi's landing page
   (src/views/landing.vue, components/asciiBanner.vue), ported to plain CSS.
   Every rule is scoped under .p-skapi; the --bq-* tokens are the light theme
   of src/assets/less/bq-tokens.less, defined on the section itself. Sizes are
   in px (1rem = 16px in the original) so the host page's root font size does
   not rescale the section. Needs the "Google Sans Code" font (see hero.html
   notes / the page <head>). */

.p-skapi {
    --bq-mono: "Google Sans Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --bq-ink: #141a2b;
    --bq-paper: #fff;
    --bq-muted: #5c6578;
    --bq-line: #d3d9e4;
    --bq-hover-bg: #eef2f8;
    --bq-pink: #0b57d0;
    --bq-btn-bg: var(--bq-pink);
    --bq-pink-bg: #ebf2fd;
    --bq-shadow: rgba(20, 26, 43, 0.14);
    --bq-text-shadow: 2px 2px rgba(20, 26, 43, 0.12);
    /* one step off the paper, for the shaded face of a drawn solid */
    --bq-shade: color-mix(in srgb, var(--bq-line) 60%, var(--bq-paper));

    /* the page shell's base text (body + .bq-landing in the original) */
    color: var(--bq-ink);
    font-family: var(--bq-mono);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    line-height: 1.7;
    letter-spacing: -0.3px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: default;
    overflow-x: hidden;
    overflow-x: clip;

    /* The brand tint, strongest at the top and gone by the bottom edge, over
       the paper, with a dot grid laid over it that fades out the same way. */
    position: relative;
    isolation: isolate;
    padding: 72px 0 64px;
    background: linear-gradient(var(--bq-pink-bg), transparent) var(--bq-paper);
}

.p-skapi::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(var(--bq-line) 1px, transparent 1.5px);
    background-size: 24px 24px;
    background-position: center top;
    -webkit-mask-image: linear-gradient(#000 30%, transparent);
    mask-image: linear-gradient(#000 30%, transparent);
}

.p-skapi *,
.p-skapi *::before,
.p-skapi *::after {
    box-sizing: border-box;
}

.p-skapi p {
    line-height: 1.5;
}

.p-skapi a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    cursor: pointer;
}

.p-skapi a:hover {
    text-decoration: underline;
}

.p-skapi svg {
    vertical-align: middle;
}

.p-skapi .wordset {
    display: inline-block;
}

/* ─── layout ─── */
.p-skapi .bq-wrap {
    max-width: 1116px;
    margin: 0 auto;
    padding: 0 32px;
}

.p-skapi .bq-hero-grid {
    display: grid;
    /* minmax(0, ...) so neither column can be widened by its content */
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 40px;
    align-items: center;
}

/* ─── the Skapi mark over the headline ─── */
.p-skapi .bq-hero-logo {
    display: block;
    width: auto;
    height: 112px;
    margin: 0;
}

/* ─── copy ─── */
.p-skapi .bq-hero-title {
    margin: 32px 0 0;
    color: var(--bq-ink);
    font-family: var(--bq-mono);
    font-size: clamp(27.2px, 3.1vw, 37.6px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: var(--bq-text-shadow);
}

.p-skapi .bq-hero-sub {
    margin: 14.4px 0 0;
    max-width: 480px;
    color: var(--bq-muted);
    font-size: 16.32px;
}

/* the button, and the documentation link on its own line under it */
.p-skapi .bq-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17.6px;
    margin-top: 36px;
}

.p-skapi .bq-btn {
    display: inline-block;
    padding: 14.4px 28px;
    border: 1px solid var(--bq-btn-bg);
    background: var(--bq-btn-bg);
    color: var(--bq-paper);
    font: inherit;
    font-size: 14.72px;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 2px 2px var(--bq-shadow);
}

.p-skapi a.bq-btn:hover {
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .p-skapi a.bq-btn:hover {
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px var(--bq-shadow);
    }
}

.p-skapi a.bq-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
    transition-duration: 0.04s;
}

.p-skapi .bq-cta-link {
    color: var(--bq-ink);
    cursor: pointer;
}

.p-skapi .bq-cta-link:hover {
    color: var(--bq-pink);
}

/* the arrow is an atomic inline, so the link's underline stops before it */
.p-skapi .bq-arrow {
    display: inline-block;
    text-decoration: none;
}

.p-skapi .bq-arrow--trail {
    margin-left: 0.35em;
}

/* ─── the drawing ─── */
.p-skapi .bq-hero-art {
    min-width: 0;
}

.p-skapi .bq-art {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.p-skapi .bq-art-floor line {
    stroke: var(--bq-line);
    stroke-width: 1;
}

.p-skapi .bq-art-wire {
    stroke: var(--bq-line);
    stroke-width: 1.5;
}

/* Short dashes running along the wire: in toward the stack on the left, out
   from it on the right. */
.p-skapi .bq-art-flow {
    stroke: var(--bq-pink);
    stroke-width: 2;
    stroke-dasharray: 3 21;
    animation: p-skapi-flow 1.6s linear infinite;
}

.p-skapi .bq-art-flow--out {
    animation-direction: reverse;
}

.p-skapi .bq-art-slab polygon {
    stroke: var(--bq-ink);
    stroke-width: 1.5;
}

.p-skapi .bq-art-face-top {
    fill: var(--bq-paper);
}

.p-skapi .bq-art-face-left {
    fill: var(--bq-hover-bg);
}

.p-skapi .bq-art-face-right {
    fill: var(--bq-shade);
}

.p-skapi .bq-art-slab--top .bq-art-face-top {
    fill: var(--bq-pink-bg);
}

.p-skapi .bq-art-slab .bq-art-led {
    fill: var(--bq-pink);
    stroke: none;
    animation: p-skapi-blink 2.4s steps(1, end) infinite;
}

.p-skapi .bq-art-slab .bq-art-led:nth-of-type(5) {
    animation-delay: 0.8s;
}

.p-skapi .bq-art-slab .bq-art-led:nth-of-type(6) {
    fill: var(--bq-muted);
    animation: none;
}

/* the units do not blink in step */
.p-skapi .bq-art-slab:nth-of-type(odd) .bq-art-led {
    animation-duration: 3.1s;
}

.p-skapi .bq-art-vent {
    stroke: var(--bq-ink);
    stroke-width: 1.5;
    opacity: 0.45;
}

.p-skapi .bq-art-port {
    fill: var(--bq-pink);
}

.p-skapi .bq-art-pad {
    stroke: var(--bq-pink);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

.p-skapi .bq-art-beam {
    stroke: var(--bq-pink);
    stroke-width: 1.5;
    stroke-dasharray: 2 5;
}

/* the agent's window hovers over the stack */
.p-skapi .bq-art-term--bob {
    animation: p-skapi-bob 4.5s ease-in-out infinite;
}

.p-skapi .bq-art-term-box {
    fill: var(--bq-paper);
    stroke: var(--bq-ink);
    stroke-width: 1.5;
}

.p-skapi .bq-art-term-bar {
    stroke: var(--bq-ink);
    stroke-width: 1.5;
}

.p-skapi .bq-art-term-dot {
    fill: var(--bq-muted);
}

/* the window's lines are a line box each; the beam and the wire pass behind them */
.p-skapi .bq-art-term-text {
    fill: var(--bq-ink);
    font-family: var(--bq-mono);
    font-size: 11px;
    pointer-events: none;
}

.p-skapi .bq-art-cursor {
    fill: var(--bq-pink);
    animation: p-skapi-blink 1s steps(1, end) infinite;
}

.p-skapi .bq-art-tile-shadow {
    fill: var(--bq-shadow);
}

.p-skapi .bq-art-tile-box {
    fill: var(--bq-paper);
    stroke: var(--bq-line);
    stroke-width: 1;
}

.p-skapi .bq-art-tile g {
    stroke: var(--bq-ink);
    stroke-width: 2;
}

.p-skapi .bq-art-label {
    fill: var(--bq-muted);
    font-family: var(--bq-mono);
    font-size: 13.5px;
    text-anchor: middle;
}

@keyframes p-skapi-flow {
    to {
        stroke-dashoffset: -24;
    }
}

/* One blink for the lights and the cursor alike: the original page defines
   bq-blink twice, and the later definition (this one) is the one in effect. */
@keyframes p-skapi-blink {
    50% {
        opacity: 0;
    }
}

@keyframes p-skapi-bob {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* off screen the loops hold still (skapi.js sets the class) */
.p-skapi.is-paused .bq-art-flow,
.p-skapi.is-paused .bq-art-led,
.p-skapi.is-paused .bq-art-term--bob,
.p-skapi.is-paused .bq-art-cursor {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .p-skapi .bq-art-flow,
    .p-skapi .bq-art-slab .bq-art-led,
    .p-skapi .bq-art-term--bob,
    .p-skapi .bq-art-cursor {
        animation: none;
    }
}

/* ─── responsive ─── */
@media (max-width: 1000px) {
    .p-skapi .bq-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    /* one column: a smaller mark over the stacked copy */
    .p-skapi .bq-hero-logo {
        height: 88px;
    }

    /* stacked, the drawing is as wide as it needs and no wider */
    .p-skapi .bq-hero-art {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    .p-skapi {
        padding: 36px 0 48px;
    }

    .p-skapi .bq-wrap {
        padding: 0 24px;
    }
}

@media (max-width: 640px) {
    /* the drawing's labels are too small to read here, so they go */
    .p-skapi .bq-art-label {
        display: none;
    }

    /* The terminal's lines would be too small as well, so the window is drawn
       twice as large instead, growing upward from its bottom edge into the
       headroom the viewBox gains on a phone (skapi.js swaps the viewBox). */
    .p-skapi .bq-art-term-scale {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        transform: scale(2);
    }

    .p-skapi .bq-hero-actions .bq-btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

}