/* ==========================================================================
   Space — ONE continuous 3D universe behind the whole marketing home page.
   Driven by space.js. Folds together what used to be two separate
   stylesheets (space-hero.css for the hero-only canvas, journey.css for the
   pinned "How it works" journey) into a single fixed full-viewport layer.

   Base (default) rules render everything exactly like a plain page: the
   `.qa-stars` CSS-only starfield (theme.css) stays visible, and the five
   `.qa-feature-block` cards are always-visible, always in-flow content
   (`.showcase` grid rules already come from home.css). Only once space.js's
   WebGL scene has actually booted (WebGL available, motion allowed, viewport
   wide enough) does it add `#qaFeatureList.is-enhanced`, which pins the
   region and shows exactly one card at a time (prototype behavior) — nothing
   here may hide content when that class is absent.
   ========================================================================== */

/* single fixed, full-viewport canvas sitting behind the entire page */
.qa-space-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* once the real scene is running, the cheap CSS starfield steps aside */
body.qa-space-active .qa-stars {
    display: none;
}

/* ================= "How it works" feature list ================= */

/* Default (no JS / fallback): a plain, always-in-flow section — the five
   `.qa-feature-block` cards stack normally (grid layout, gaps, alternating
   reverse order all come from home.css's `.showcase` rules), all visible,
   never pinned, never hidden. */
.qa-feature-list {
    position: relative;
}

.qa-feature-stage {
    position: static;
}

.qa-feature-hud,
.qa-feature-num,
.qa-browser-bar {
    display: none;
}

/* persistent bottom-left counter, shown only while the pinned stage is in view */
.qa-feature-list.is-enhanced .qa-feature-hud {
    display: block;
    position: fixed;
    left: clamp(1rem, 5vw, 4rem);
    bottom: 6vh;
    z-index: 5;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--qa-faint);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.qa-feature-hud.is-visible {
    opacity: 1;
}

.qa-feature-hud b {
    color: var(--qa-ink);
    font-size: 1.4rem;
}

.qa-feature-list.is-enhanced .qa-feature-num {
    display: block;
    font-size: .78rem;
    letter-spacing: .3em;
    color: var(--qa-cyan);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: .5rem;
}

/* ================= enhanced / pinned mode (prototype behavior) =================
   Added only once space.js's WebGL scene has actually booted (`body.qa-space-active`
   / `#qaFeatureList.is-enhanced`). Pins the region for (cards + 1)×100vh of scroll
   and shows exactly one `.qa-feature-block` at a time, in the same spot, like the
   quickask-landing/journey-demo.html prototype's single-card overlay. */

.qa-feature-list.is-enhanced {
    height: 600vh; /* 5 cards × 100vh + 1×100vh arrival buffer */
}

.qa-feature-list.is-enhanced .qa-feature-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.qa-feature-list.is-enhanced .qa-feature-cards {
    position: relative;
    height: 100%;
}

/* Enlarge the card/video in the pinned stage — desktop (two-column) only.
   home.css stacks `.showcase` to a single column at <=880px, where the video
   should stay full-width; gating by min-width keeps that fallback intact. */
@media (min-width: 881px) {
    .qa-feature-list.is-enhanced .qa-feature-cards {
        max-width: 1360px; /* modest bump over the default 1200px .container cap */
    }

    .qa-feature-list.is-enhanced .showcase-visual.qa-browser {
        max-width: min(64vw, 900px);
        margin-inline: auto;
    }
}

/* In the pinned journey, keep text left / video right on EVERY card (undo the
   alternating .reverse) — the extension's content sits on the right of the clip. */
.qa-feature-list.is-enhanced .showcase.reverse .showcase-text { order: 0; }

.qa-feature-list.is-enhanced .qa-feature-block {
    position: absolute;
    inset: 0;
    margin: 0;
    align-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease, visibility .5s ease;
}

.qa-feature-list.is-enhanced .qa-feature-block.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* browser-framed video chrome — always on, independent of the 3D scene */
.showcase-visual.qa-browser {
    aspect-ratio: auto;
    /* override home.css's default flex-row (which pushed the mac titlebar to the
       side): stack the bar ON TOP of the video like a real macOS window */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: #150a29;
    border: 1px solid var(--qa-line-soft);
    box-shadow: var(--qa-shadow), var(--qa-glow);
}

.showcase-visual.qa-browser::after {
    display: none;
}

.qa-browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    background: linear-gradient(180deg, var(--qa-panel-2), var(--qa-panel));
    border-bottom: 1px solid var(--qa-line-soft);
    position: relative;
}

.qa-browser-bar i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5b4a7d;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.qa-browser-bar i:nth-child(1) { background: #ff5f57; }
.qa-browser-bar i:nth-child(2) { background: #febc2e; }
.qa-browser-bar i:nth-child(3) { background: #28c840; }

/* subtle centered "address" pill — reads as a real mac window titlebar */
.qa-browser-bar::after {
    content: "quickask.me";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 3px 14px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--qa-faint);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--qa-line-soft);
    border-radius: var(--qa-radius-pill);
    white-space: nowrap;
    pointer-events: none;
}

@media (max-width: 480px) {
    .qa-browser-bar::after { display: none; }
}

.qa-browser .showcase-video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 64vh;
    object-fit: cover;
    object-position: right center;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: block;
}

@media (max-width: 860px) {
    .qa-feature-list.is-enhanced .qa-feature-hud {
        display: none;
    }
    .qa-feature-list.is-enhanced .qa-feature-block {
        text-align: center;
    }
}