/* ============================================================
   AiMavrik OS Shell — shared chrome (Sprint 1, Phase 1 pilot)
   Scope: .shell-*   Steward: S9 Engineering
   Additive, deletable unit. Loaded AFTER style.css.

   Does NOT restyle .navbar / .mobile-menu / .footer base layout —
   those are shared chrome defined in style.css and wired to the
   locked main.js (scroll, mobile menu) and theme.js (.theme-opt).
   This file adds only what the Shell newly owns: the skip link,
   the editorial exit bridge, and one footer 'view all' accent.
   Motion: ratified easing cubic-bezier(0.22, 1, 0.36, 1), GPU-only
   (opacity/transform), reduced-motion resolves to the end-state.
   ============================================================ */

/* --- Skip to content (visible on keyboard focus) --- */
.shell-skip {
    position: absolute;
    left: 12px;
    top: -56px;
    z-index: 3000;
    background: var(--bg-page);
    color: var(--text-primary);
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.shell-skip:focus {
    top: 12px;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Editorial exit bridge: quiet line + one soft link onward --- */
.shell-bridge {
    border-top: 1px solid var(--border-hairline);
}

.shell-bridge-inner {
    max-width: 620px;
    margin: 0 auto;
    padding: 76px 20px 4px;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.shell-bridge.is-in .shell-bridge-inner {
    opacity: 1;
    transform: none;
}

.shell-bridge-line {
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-wrap: balance;
}

.shell-bridge-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.shell-bridge-link:hover {
    color: var(--text-primary);
    gap: 13px;
}

.shell-bridge-link svg,
.shell-bridge-link i {
    width: 16px;
    height: 16px;
}

/* --- Footer: the single 'see everything' link in the fine-print column --- */
.shell-foot-all {
    color: var(--accent-text);
    font-weight: 500;
}

/* --- Reduced motion: resolve to the meaningful end-state --- */
@media (prefers-reduced-motion: reduce) {
    .shell-bridge-inner {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .shell-skip {
        transition: none;
    }
}