/*
 * Client Mode edge-to-edge technical canvases.
 *
 * Sections without operator artwork get a chapter-specific visual language:
 * topology, data lanes, trust graph, signal trace and publication pipeline.
 * The layer is decorative only; all operational data remains runtime/CMS-owned.
 */

.client-public-shell .client-plans,
.client-public-shell .client-portal-showcase,
.client-public-shell .client-customer-proof,
.client-public-shell .client-faq,
.client-public-shell .client-documents {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
}

.client-public-shell .client-plans > .client-shell,
.client-public-shell .client-portal-showcase > .client-shell,
.client-public-shell .client-customer-proof > .client-shell,
.client-public-shell .client-faq > .client-shell,
.client-public-shell .client-documents > .client-shell {
    position: relative;
    z-index: 2;
}

.client-public-shell .client-plans::before,
.client-public-shell .client-portal-showcase::before,
.client-public-shell .client-customer-proof::before,
.client-public-shell .client-faq::before,
.client-public-shell .client-documents::before,
.client-public-shell .client-plans::after,
.client-public-shell .client-portal-showcase::after,
.client-public-shell .client-customer-proof::after,
.client-public-shell .client-faq::after,
.client-public-shell .client-documents::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.client-public-shell .client-plans::before,
.client-public-shell .client-portal-showcase::before,
.client-public-shell .client-customer-proof::before,
.client-public-shell .client-faq::before,
.client-public-shell .client-documents::before {
    z-index: 0;
    opacity: .74;
    transform: translate3d(0, 0, 0) scale(1.01);
    transform-origin: center;
}

/* Tariffs: a full-section topology map. */
.client-public-shell .client-plans::before {
    background:
        radial-gradient(circle at 8% 24%, color-mix(in srgb, var(--client-accent) 70%, transparent) 0 .25rem, transparent .33rem),
        radial-gradient(circle at 27% 66%, color-mix(in srgb, var(--client-brand) 56%, transparent) 0 .22rem, transparent .3rem),
        radial-gradient(circle at 51% 31%, color-mix(in srgb, var(--client-accent) 62%, transparent) 0 .29rem, transparent .37rem),
        radial-gradient(circle at 73% 72%, color-mix(in srgb, var(--client-brand) 54%, transparent) 0 .24rem, transparent .32rem),
        radial-gradient(circle at 92% 35%, color-mix(in srgb, var(--client-accent) 68%, transparent) 0 .27rem, transparent .35rem),
        linear-gradient(24deg, transparent 0 24%, color-mix(in srgb, var(--client-accent) 16%, transparent) 24.15% 24.42%, transparent 24.66%),
        linear-gradient(154deg, transparent 0 54%, color-mix(in srgb, var(--client-brand) 14%, transparent) 54.16% 54.42%, transparent 54.68%),
        linear-gradient(color-mix(in srgb, var(--client-line) 34%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--client-line) 34%, transparent) 1px, transparent 1px),
        radial-gradient(circle at 72% 44%, color-mix(in srgb, var(--client-accent) 15%, transparent), transparent 38%);
    background-size: auto, auto, auto, auto, auto, auto, auto, 3.5rem 3.5rem, 3.5rem 3.5rem, auto;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}

/* Portal: dashboard panes and data lanes across the complete canvas. */
.client-public-shell .client-portal-showcase::before {
    background:
        linear-gradient(90deg, transparent 0 12%, color-mix(in srgb, var(--client-brand) 9%, transparent) 12% 31%, transparent 31% 38%, color-mix(in srgb, var(--client-accent) 8%, transparent) 38% 59%, transparent 59% 67%, color-mix(in srgb, var(--client-brand) 8%, transparent) 67% 88%, transparent 88%),
        repeating-linear-gradient(0deg, transparent 0 2.7rem, color-mix(in srgb, var(--client-line) 31%, transparent) 2.7rem calc(2.7rem + 1px)),
        repeating-linear-gradient(90deg, transparent 0 5.5rem, color-mix(in srgb, var(--client-line) 27%, transparent) 5.5rem calc(5.5rem + 1px)),
        linear-gradient(145deg, transparent 0 34%, color-mix(in srgb, var(--client-accent) 13%, transparent) 34.2% 34.52%, transparent 34.78% 68%, color-mix(in srgb, var(--client-brand) 11%, transparent) 68.2% 68.5%, transparent 68.78%),
        radial-gradient(circle at 72% 50%, color-mix(in srgb, var(--client-brand) 18%, transparent), transparent 40%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

/* Customer proof: a trust graph, without invented brands or metrics. */
.client-public-shell .client-customer-proof::before {
    background:
        radial-gradient(circle at 10% 58%, transparent 0 2.1rem, color-mix(in srgb, var(--client-accent) 19%, transparent) 2.18rem 2.3rem, transparent 2.38rem),
        radial-gradient(circle at 34% 25%, transparent 0 1.7rem, color-mix(in srgb, var(--client-brand) 18%, transparent) 1.78rem 1.9rem, transparent 1.98rem),
        radial-gradient(circle at 58% 67%, transparent 0 2.8rem, color-mix(in srgb, var(--client-accent) 17%, transparent) 2.88rem 3rem, transparent 3.08rem),
        radial-gradient(circle at 87% 32%, transparent 0 2.25rem, color-mix(in srgb, var(--client-brand) 17%, transparent) 2.33rem 2.45rem, transparent 2.53rem),
        radial-gradient(circle at 10% 58%, color-mix(in srgb, var(--client-accent) 70%, transparent) 0 .21rem, transparent .28rem),
        radial-gradient(circle at 34% 25%, color-mix(in srgb, var(--client-brand) 64%, transparent) 0 .2rem, transparent .27rem),
        radial-gradient(circle at 58% 67%, color-mix(in srgb, var(--client-accent) 62%, transparent) 0 .22rem, transparent .29rem),
        radial-gradient(circle at 87% 32%, color-mix(in srgb, var(--client-brand) 60%, transparent) 0 .21rem, transparent .28rem),
        linear-gradient(23deg, transparent 0 39%, color-mix(in srgb, var(--client-brand) 13%, transparent) 39.2% 39.45%, transparent 39.7%),
        linear-gradient(157deg, transparent 0 57%, color-mix(in srgb, var(--client-accent) 13%, transparent) 57.2% 57.45%, transparent 57.7%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* FAQ: a readable signal trace and decision path. */
.client-public-shell .client-faq::before {
    background:
        linear-gradient(135deg, transparent 0 14%, color-mix(in srgb, var(--client-accent) 13%, transparent) 14.18% 14.46%, transparent 14.72% 37%, color-mix(in srgb, var(--client-brand) 11%, transparent) 37.18% 37.46%, transparent 37.72% 63%, color-mix(in srgb, var(--client-accent) 12%, transparent) 63.18% 63.46%, transparent 63.72%),
        repeating-linear-gradient(0deg, transparent 0 3rem, color-mix(in srgb, var(--client-line) 27%, transparent) 3rem calc(3rem + 1px)),
        radial-gradient(circle at 18% 72%, color-mix(in srgb, var(--client-brand) 12%, transparent), transparent 24%),
        radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--client-accent) 13%, transparent), transparent 28%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}

/* Documents: publication rails and layered document flow. */
.client-public-shell .client-documents::before {
    background:
        linear-gradient(90deg, transparent 0 7%, color-mix(in srgb, var(--client-brand) 8%, transparent) 7% 27%, transparent 27% 34%, color-mix(in srgb, var(--client-accent) 7%, transparent) 34% 55%, transparent 55% 63%, color-mix(in srgb, var(--client-brand) 8%, transparent) 63% 84%, transparent 84%),
        repeating-linear-gradient(0deg, transparent 0 2rem, color-mix(in srgb, var(--client-line) 32%, transparent) 2rem calc(2rem + 1px)),
        linear-gradient(122deg, transparent 0 28%, color-mix(in srgb, var(--client-accent) 11%, transparent) 28.2% 28.48%, transparent 28.75% 66%, color-mix(in srgb, var(--client-brand) 10%, transparent) 66.2% 66.48%, transparent 66.75%),
        radial-gradient(circle at 80% 48%, color-mix(in srgb, var(--client-brand) 14%, transparent), transparent 34%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}

/* A slow scanner creates movement without animating semantic content. */
.client-public-shell .client-plans::after,
.client-public-shell .client-portal-showcase::after,
.client-public-shell .client-customer-proof::after,
.client-public-shell .client-faq::after,
.client-public-shell .client-documents::after {
    z-index: 1;
    left: -35%;
    width: 35%;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--client-accent) 12%, transparent) 46%,
        color-mix(in srgb, var(--client-brand) 9%, transparent) 54%,
        transparent
    );
    filter: blur(.2rem);
    transform: skewX(-12deg);
}

.client-public-shell .client-plans.client-section--dark::before,
.client-public-shell .client-plans.client-section--brand::before,
.client-public-shell .client-plans.client-section--image::before,
.client-public-shell .client-portal-showcase.client-section--dark::before,
.client-public-shell .client-portal-showcase.client-section--brand::before,
.client-public-shell .client-portal-showcase.client-section--image::before,
.client-public-shell .client-customer-proof.client-section--dark::before,
.client-public-shell .client-customer-proof.client-section--brand::before,
.client-public-shell .client-customer-proof.client-section--image::before,
.client-public-shell .client-faq.client-section--dark::before,
.client-public-shell .client-faq.client-section--brand::before,
.client-public-shell .client-faq.client-section--image::before,
.client-public-shell .client-documents.client-section--dark::before,
.client-public-shell .client-documents.client-section--brand::before,
.client-public-shell .client-documents.client-section--image::before {
    opacity: .94;
    filter: saturate(1.1) contrast(1.04);
}

@media (prefers-reduced-motion: no-preference) {
    .client-public-shell .client-plans::before,
    .client-public-shell .client-portal-showcase::before,
    .client-public-shell .client-customer-proof::before,
    .client-public-shell .client-faq::before,
    .client-public-shell .client-documents::before {
        animation: client-technical-canvas-drift 28s ease-in-out infinite alternate;
        animation-play-state: paused;
    }

    .client-public-shell .client-plans::after,
    .client-public-shell .client-portal-showcase::after,
    .client-public-shell .client-customer-proof::after,
    .client-public-shell .client-faq::after,
    .client-public-shell .client-documents::after {
        animation: client-technical-canvas-scan 18s ease-in-out infinite;
        animation-play-state: paused;
    }

    .client-public-shell .client-plans.client-technical-canvas--active::before,
    .client-public-shell .client-portal-showcase.client-technical-canvas--active::before,
    .client-public-shell .client-customer-proof.client-technical-canvas--active::before,
    .client-public-shell .client-faq.client-technical-canvas--active::before,
    .client-public-shell .client-documents.client-technical-canvas--active::before,
    .client-public-shell .client-plans.client-technical-canvas--active::after,
    .client-public-shell .client-portal-showcase.client-technical-canvas--active::after,
    .client-public-shell .client-customer-proof.client-technical-canvas--active::after,
    .client-public-shell .client-faq.client-technical-canvas--active::after,
    .client-public-shell .client-documents.client-technical-canvas--active::after {
        animation-play-state: running;
        will-change: transform, opacity;
    }
}

@keyframes client-technical-canvas-drift {
    from { transform: translate3d(-.4%, .2%, 0) scale(1.01); }
    to { transform: translate3d(.55%, -.4%, 0) scale(1.035); }
}

@keyframes client-technical-canvas-scan {
    0%, 18% { transform: translate3d(0, 0, 0) skewX(-12deg); opacity: 0; }
    28% { opacity: .5; }
    72% { opacity: .28; }
    82%, 100% { transform: translate3d(390%, 0, 0) skewX(-12deg); opacity: 0; }
}

@media (max-width: 699px) {
    .client-public-shell .client-plans::before,
    .client-public-shell .client-portal-showcase::before,
    .client-public-shell .client-customer-proof::before,
    .client-public-shell .client-faq::before,
    .client-public-shell .client-documents::before {
        opacity: .5;
        background-size: auto;
        -webkit-mask-image: linear-gradient(180deg, transparent 0 5%, #000 24% 100%);
        mask-image: linear-gradient(180deg, transparent 0 5%, #000 24% 100%);
    }

    .client-public-shell .client-plans::after,
    .client-public-shell .client-portal-showcase::after,
    .client-public-shell .client-customer-proof::after,
    .client-public-shell .client-faq::after,
    .client-public-shell .client-documents::after {
        display: none;
    }
}

@media (prefers-contrast: more) {
    .client-public-shell .client-plans::before,
    .client-public-shell .client-portal-showcase::before,
    .client-public-shell .client-customer-proof::before,
    .client-public-shell .client-faq::before,
    .client-public-shell .client-documents::before,
    .client-public-shell .client-plans::after,
    .client-public-shell .client-portal-showcase::after,
    .client-public-shell .client-customer-proof::after,
    .client-public-shell .client-faq::after,
    .client-public-shell .client-documents::after {
        display: none;
    }
}

@media print {
    .client-public-shell .client-plans::before,
    .client-public-shell .client-portal-showcase::before,
    .client-public-shell .client-customer-proof::before,
    .client-public-shell .client-faq::before,
    .client-public-shell .client-documents::before,
    .client-public-shell .client-plans::after,
    .client-public-shell .client-portal-showcase::after,
    .client-public-shell .client-customer-proof::after,
    .client-public-shell .client-faq::after,
    .client-public-shell .client-documents::after {
        display: none;
        animation: none !important;
    }
}