/* ============================================================
   Website Development — "The Composition" (Compose module)
   Steward: S9 Engineering   Page: website-development.html
   Sprint 9 (Phase 2, v3.1, M1a) signature experience. Additive,
   scoped IIFE + this sheet, deletable unit. Does not touch
   main.js, theme.js, or any other namespace. Reuses the visual
   language of the retired solutions .wd- artifact, authored fresh
   here under .cmp- and gated by the visitor's composition rather
   than an auto-loop.

   Motion: ratified grammar, cubic-bezier(0.22, 1, 0.36, 1),
   GPU-only (transform/opacity). Nothing animates until the
   visitor composes a capability; the LIVE operating sequence runs
   a fixed count and settles — never a perpetual loop. Reduced
   motion renders the fully composed, operating presence static.
   ============================================================ */

/* --- Hero soft cue --- */
.cmp-soft-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.cmp-soft-cue:hover,
.cmp-soft-cue:focus-visible {
    color: var(--text-primary);
    gap: 9px;
}

.cmp-soft-cue i {
    width: 16px;
    height: 16px;
}

/* --- Stage layout --- */
.cmp-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    max-width: 960px;
    margin: 40px auto 0;
}

@media (min-width: 860px) {
    .cmp-stage {
        grid-template-columns: 1.25fr 1fr;
        gap: 36px;
    }
}

/* --- The surface (browser frame + SVG) --- */
.cmp-frame {
    border: 1px solid var(--border-hairline, var(--border));
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    padding: 18px 18px 14px;
}

.cmp-svg {
    width: 100%;
    height: auto;
    color: var(--text-primary);
    display: block;
}

.cmp-status {
    margin: 12px 2px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
    min-height: 2.3em;
}

/* --- SVG chrome --- */
.cmp-scr-edge { fill: none; stroke: currentColor; stroke-opacity: 0.14; stroke-width: 1; }
.cmp-hair { stroke: #fff; stroke-opacity: 0.1; stroke-width: 1; }
.cmp-dot { fill: #fff; opacity: 0.22; }
.cmp-url { fill: #fff; opacity: 0.06; }

/* --- Wireframe (the dead page) --- */
.cmp-wire { transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.cmp-wire rect {
    fill: none; stroke: #fff; stroke-opacity: 0.26; stroke-width: 1.2; stroke-dasharray: 4 4;
}
.cmp-stage.cmp-has-answer .cmp-wire { opacity: 0; }

/* --- Capability layers: hidden until composed --- */
.cmp-cap { opacity: 0; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.cmp-stage.cmp-has-found .cmp-cap-found { opacity: 1; }
.cmp-stage.cmp-has-answer .cmp-cap-answer { opacity: 1; }
.cmp-stage.cmp-has-next .cmp-cap-next { opacity: 1; }
.cmp-stage.cmp-has-hand .cmp-cap-hand { opacity: 1; }

/* answer-layer materials (rendered on the dark device screen) */
.cmp-ac { fill: var(--accent); opacity: 0.85; }
.cmp-faint { fill: #fff; opacity: 0.28; }
.cmp-faint2 { fill: #fff; opacity: 0.18; }
.cmp-hero-card { fill: #fff; fill-opacity: 0.05; stroke: #fff; stroke-opacity: 0.14; stroke-width: 1; }
.cmp-avatar { fill: #fff; opacity: 0.2; }

/* found: discovery pass + reachable signal */
.cmp-found-pill { fill: rgba(139, 124, 255, 0.16); stroke: #8B7CFF; stroke-opacity: 0.5; stroke-width: 1; }
.cmp-scan { opacity: 0; }
.cmp-stage.cmp-has-found .cmp-scan { animation: cmp-scan 0.9s ease-out both; }

/* next: the action button label + cursor */
.cmp-btn-label { fill: #fff; opacity: 0.85; }
.cmp-cursor { fill: #fff; opacity: 0.9; }

/* hand: the connector to the system */
.cmp-wire-conn {
    fill: none; stroke: url(#cmpGrad); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 96; stroke-dashoffset: 96;
}
.cmp-stage.cmp-has-hand .cmp-wire-conn { animation: cmp-draw 0.55s ease-out forwards; }

/* the system node (outside the screen; reads on the page ground) */
.cmp-sys { opacity: 0.4; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.cmp-stage.cmp-has-hand .cmp-sys { opacity: 1; }
.cmp-sys-box { fill: var(--bg-elevated); stroke: currentColor; stroke-opacity: 0.2; stroke-width: 1.2; }
.cmp-sys-row { fill: currentColor; opacity: 0.14; }
.cmp-stage.cmp-has-hand .cmp-sys-row { fill: var(--accent); opacity: 0.55; }
.cmp-mono { fill: currentColor; fill-opacity: 0.5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; letter-spacing: 0.1em; }

/* live + operating */
.cmp-live { opacity: 0; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.cmp-stage.cmp-is-live .cmp-live { opacity: 1; }
.cmp-live-badge { fill: rgba(16, 185, 129, 0.16); stroke: var(--success); stroke-opacity: 0.5; stroke-width: 1; }
.cmp-live-dot { fill: var(--success); }
.cmp-mono-live { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7.5px; font-weight: 700; letter-spacing: 0.12em; }
.cmp-cap-found .cmp-mono-live { fill: #a99cff; }
.cmp-live .cmp-mono-live { fill: var(--success-text); }
.cmp-operating { fill: var(--success-text); fill-opacity: 0.75; }

.cmp-visitor, .cmp-parcel { opacity: 0; }
.cmp-stage.cmp-is-live .cmp-visitor { animation: cmp-visitor 1.7s ease-in 3 both; }
.cmp-stage.cmp-is-live .cmp-visitor-2 { animation-delay: 0.55s; }
.cmp-stage.cmp-is-live .cmp-visitor-3 { animation-delay: 1.1s; }
.cmp-stage.cmp-is-live .cmp-parcel { animation: cmp-parcel 1.7s ease-in-out 3 both; animation-delay: 0.5s; }
.cmp-stage.cmp-is-live .cmp-parcel-2 { animation-delay: 1.05s; }
.cmp-stage.cmp-is-live .cmp-parcel-3 { animation-delay: 1.6s; }

@keyframes cmp-scan {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 0.75; }
    88% { transform: translateY(150px); opacity: 0.75; }
    100% { transform: translateY(150px); opacity: 0; }
}
@keyframes cmp-draw { to { stroke-dashoffset: 0; } }
@keyframes cmp-visitor {
    0% { transform: translateY(22px); opacity: 0; }
    22% { opacity: 1; }
    78% { opacity: 1; }
    100% { transform: translateY(-6px); opacity: 0; }
}
@keyframes cmp-parcel {
    0% { transform: translate(238px, 176px); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate(340px, 128px); opacity: 0; }
}

/* --- The capability controls --- */
.cmp-controls-head {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 14px;
}

.cmp-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.cmp-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-hairline, var(--border));
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.cmp-btn:disabled { cursor: default; }
.cmp-btn:not(.is-done):disabled { opacity: 0.45; }

.cmp-btn.is-active { border-color: var(--accent); background: var(--surface-hover); }
.cmp-btn:not(:disabled):hover { border-color: var(--accent); transform: translateX(2px); }
.cmp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cmp-btn-num {
    flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted);
    border: 1.5px solid var(--border-hairline, var(--border));
}

.cmp-btn.is-active .cmp-btn-num { color: var(--accent-text, var(--accent)); border-color: var(--accent); }

.cmp-btn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-btn-title { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.cmp-btn-sub { font-size: 0.8rem; color: var(--text-secondary); }

.cmp-btn-mark {
    flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid var(--border-hairline, var(--border));
    position: relative;
}

.cmp-btn.is-done { opacity: 0.72; }
.cmp-btn.is-done .cmp-btn-num { color: var(--success-text); border-color: var(--success); }
.cmp-btn.is-done .cmp-btn-mark { background: var(--success); border-color: var(--success); }
.cmp-btn.is-done .cmp-btn-mark::after {
    content: ""; position: absolute; left: 6px; top: 3px;
    width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.cmp-reset {
    margin-top: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-hairline, var(--border));
    border-radius: 999px;
    background: none; cursor: pointer;
    font: inherit; font-size: 0.85rem; color: var(--text-secondary);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.cmp-reset:hover, .cmp-reset:focus-visible { color: var(--text-primary); border-color: var(--accent); }

/* --- Supporting notes (quiet — no performance section) --- */
.cmp-notes {
    max-width: 720px;
    margin: 44px auto 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cmp-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.cmp-note i { width: 18px; height: 18px; color: var(--accent-text, var(--accent)); flex-shrink: 0; margin-top: 2px; }
.cmp-note a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }

/* --- CTA --- */
.cmp-cta {
    max-width: 640px; margin: 0 auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cmp-cta-actions {
    margin-top: 18px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
}

/* --- Mobile sticky-CTA guard (Sprints 3–6 pattern) --- */
.cmp-hide-sticky .mobile-sticky-cta {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

@media (max-width: 600px) {
    .cmp-frame { padding: 14px 12px 10px; }
    .cmp-btn { padding: 12px 14px; gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .cmp-wire, .cmp-cap, .cmp-sys, .cmp-live, .cmp-btn, .cmp-soft-cue { transition: none; }
    .cmp-stage.cmp-has-found .cmp-scan { animation: none; opacity: 0; }
    .cmp-stage.cmp-has-hand .cmp-wire-conn { animation: none; stroke-dashoffset: 0; }
    .cmp-stage.cmp-is-live .cmp-visitor,
    .cmp-stage.cmp-is-live .cmp-parcel { animation: none; opacity: 0; }
}