/* ============================================================================
 * Zenops · Brand layer — watermark system + signature motifs
 * ----------------------------------------------------------------------------
 * Drop-in:  <link rel="stylesheet" href="zenops-brand.css">
 *
 * Everything is pointer-events:none and sits at negative or low z-index, so
 * no watermark can ever intercept a click. All hooks are namespaced zw- / zs-.
 * ========================================================================= */

:root {
    --zw-ink: 26, 29, 46;          /* --dark-text as a triplet, for rgba() */
    --zw-violet: 91, 77, 255;
    --zw-teal: 0, 217, 184;
}

/* ===========================================================================
 * 1. GIANT Z — one oversized outline glyph anchored to a section corner.
 *    Use on any position:relative section that needs weight without noise.
 * ========================================================================= */
.zw-host { position: relative; overflow: hidden; isolation: isolate; }

.zw-giant::before {
    content: 'Z';
    position: absolute;
    right: -3vw;
    bottom: -14vh;
    font: 900 44vw/0.75 -apple-system, 'Segoe UI', Inter, sans-serif;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(var(--zw-ink), 0.045);
    pointer-events: none;
    z-index: -1;
    user-select: none;
}
.zw-giant.zw-on-dark::before { -webkit-text-stroke-color: rgba(255, 255, 255, 0.055); }
.zw-giant.zw-left::before { right: auto; left: -3vw; }

/* ===========================================================================
 * 2. TILED MARK — repeating diagonal Z lattice. The "security paper" look:
 *    reads as a watermarked audit document, which is on-message for a product
 *    whose whole pitch is provable, auditable change.
 * ========================================================================= */
.zw-tiled::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%231A1D2E' stroke-opacity='0.05' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' transform='rotate(-22 75 75)'%3E%3Cpath d='M26 26 H50 L26 50 H50'/%3E%3Cpath d='M101 101 H125 L101 125 H125'/%3E%3C/g%3E%3C/svg%3E");
}
.zw-tiled.zw-on-dark::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.06' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' transform='rotate(-22 75 75)'%3E%3Cpath d='M26 26 H50 L26 50 H50'/%3E%3Cpath d='M101 101 H125 L101 125 H125'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===========================================================================
 * 3. LEDGER GRID — faint graph paper with a violet horizon glow.
 *    Signals "this is a measured system", not a marketing page.
 * ========================================================================= */
.zw-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(var(--zw-ink), 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--zw-ink), 0.032) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}
.zw-grid.zw-on-dark::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

/* ===========================================================================
 * 4. CORNER SEAL — a fixed, rotated "verified by Zenops" chip. Reads like a
 *    document seal on every page.
 * ========================================================================= */
.zw-seal {
    position: fixed;
    left: -1px;
    top: 46%;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 9px;
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: left center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(7px);
    border: 1px solid rgba(var(--zw-ink), 0.09);
    border-radius: 0 0 8px 8px;
    border-top: none;
    font: 700 0.64rem/1 -apple-system, 'Segoe UI', Inter, sans-serif;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(var(--zw-ink), 0.42);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.zw-seal .zw-seal-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgb(var(--zw-teal));
    box-shadow: 0 0 6px rgba(var(--zw-teal), 0.9);
}
@media (max-width: 1100px) { .zw-seal { display: none; } }

/* ===========================================================================
 * 5. SIGNATURE MOTIF — the "gate chain" rail. A vertical L0→L5 spine used as
 *    a section ornament. This is the visual nobody else in the category has,
 *    because nobody else has six named gates.
 * ========================================================================= */
.zs-chain { display: flex; flex-direction: column; gap: 0; user-select: none; }
.zs-link { display: flex; align-items: center; gap: 11px; position: relative; padding: 7px 0; }
.zs-link::after {
    content: '';
    position: absolute;
    left: 11px; top: 30px; bottom: -7px;
    width: 2px;
    background: linear-gradient(rgba(var(--zw-violet), 0.35), rgba(var(--zw-violet), 0.08));
}
.zs-link:last-child::after { display: none; }
.zs-node {
    width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font: 700 0.6rem/1 'SF Mono', Consolas, monospace;
    background: rgba(var(--zw-violet), 0.1);
    color: rgb(var(--zw-violet));
    border: 1px solid rgba(var(--zw-violet), 0.22);
}
.zs-link.zs-veto .zs-node { background: rgba(255, 107, 107, 0.12); color: #D94A4A; border-color: rgba(255, 107, 107, 0.3); }
.zs-link.zs-human .zs-node { background: rgba(var(--zw-teal), 0.14); color: #00937A; border-color: rgba(var(--zw-teal), 0.3); }
.zs-txt { font-size: 0.88rem; line-height: 1.4; }
.zs-txt b { display: block; font-weight: 700; }
.zs-txt span { opacity: 0.66; font-size: 0.92em; }

/* ===========================================================================
 * 6. PRINT — make the watermark explicit on paper, since exported PDFs of
 *    these pages circulate in reviews.
 * ========================================================================= */
@media print {
    .zw-seal { display: none; }
    .zw-giant::before { -webkit-text-stroke-color: rgba(var(--zw-ink), 0.09); }
}

/* ===========================================================================
 * 7. Respect reduced-motion for anything the brand layer animates.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .zw-seal .zw-seal-dot { box-shadow: none; }
}