/* ============================================================
   AiMavrik OS Overview — "Navigate the Operating System"
   Scope: .osmap-   Steward: S9 Engineering   Page: solutions.html
   Sprint 2 signature experience. Additive, deletable unit.
   Loaded after style.css. Does not restyle .ai-ops / .bsx / .sv-*
   (those are relocated, unmodified, into .osmap-window frames).

   Motion: ratified easing cubic-bezier(0.22, 1, 0.36, 1), GPU-only
   (opacity/transform), IntersectionObserver-gated where relevant,
   reduced-motion resolves every sequence to a meaningful end-state.
   ============================================================ */

.osmap { padding: 0; }

.osmap .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.osmap-intro {
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
}

/* --- The row of capabilities + connectors --- */
.osmap-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
}

.osmap-wire {
    flex: 1 1 48px;
    min-width: 28px;
    align-self: center;
    height: 2px;
    background: linear-gradient(90deg, var(--border-hairline), var(--accent), var(--border-hairline));
    background-size: 200% 100%;
    background-position: 50% 0;
    opacity: 0.35;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

.osmap-wire.is-lit {
    opacity: 1;
}

/* the unlabeled continuation — implies growth, names nothing */
.osmap-wire--tail {
    flex: 0 0 64px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity: 0.28;
}

/* --- Capability node --- */
.osmap-node {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 168px;
    padding: 18px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.osmap-node:hover,
.osmap-node:focus-visible {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.osmap-node:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.osmap-node[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-card);
}

.osmap-node-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-text);
    flex-shrink: 0;
}

.osmap-node-icon svg { width: 18px; height: 18px; }

.osmap-node-name {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    text-align: center;
}

.osmap-node-live {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.66rem;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.01em;
}

/* --- Window: looking into a capability --- */
.osmap-windows {
    max-width: 900px;
    margin: 0 auto;
}

.osmap-window {
    margin-top: 28px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.osmap-window.is-open {
    max-height: 640px;
    opacity: 1;
}

.osmap-window-frame {
    position: relative;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-glass);
    padding: 36px 20px 28px;
    overflow: hidden;
}

/* the vignette that makes it read as a window, not a panel */
.osmap-window-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 24px 32px -24px var(--bg-page), inset 0 -24px 32px -24px var(--bg-page);
    z-index: 2;
}

.osmap-window-label {
    position: absolute;
    top: 12px;
    left: 20px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    z-index: 3;
}

/* --- One realization moment (fires once via non-infinite animation) --- */
@keyframes osmap-realize {
    0%   { opacity: 1; }
    35%  { opacity: 1; filter: brightness(1.35); }
    100% { opacity: 1; filter: brightness(1); }
}

.osmap-row.is-realized .osmap-wire {
    animation: osmap-realize 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.osmap-row.is-realized .osmap-node {
    animation: osmap-realize 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reduced motion: fully lit, static, no expand transition --- */
@media (prefers-reduced-motion: reduce) {
    .osmap-wire { opacity: 1; transition: none; }
    .osmap-node { transition: none; }
    .osmap-window { transition: none; }
    .osmap-row.is-realized .osmap-wire,
    .osmap-row.is-realized .osmap-node { animation: none; }
}

/* --- Responsive: stack vertically below 860px --- */
@media (max-width: 860px) {
    .osmap-row {
        flex-direction: column;
        align-items: center;
    }
    .osmap-wire {
        width: 2px;
        height: 28px;
        flex: 0 0 auto;
        background: linear-gradient(180deg, var(--border-hairline), var(--accent), var(--border-hairline));
    }
    .osmap-wire--tail {
        flex: 0 0 40px;
        background: linear-gradient(180deg, var(--accent), transparent);
    }
    .osmap-node { width: 100%; max-width: 280px; }
}

/* Deep-link from the OS map's Website window to the recut chapter
   (Sprint 9 / M1a — the full experience now lives on
   /website-development; this window is a still preview + door). */
.sv-cap-link {
    color: var(--accent-text, var(--accent));
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.sv-cap-link:hover,
.sv-cap-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}