/* =========================================================
   CREATIVITY BUSINESS SOLUTION - AMBIENT BACKGROUND
   Accent-aware, transform-only motion. No blur/backdrop filters.
   ========================================================= */
:root {
    --cbs-ambient-opacity:.70;
    --cbs-ambient-speed:24s;
    --cbs-ambient-grid-opacity:.055;
    --cbs-ambient-spark-opacity:.50;
}
html[data-background-intensity="low"] { --cbs-ambient-opacity:.38; --cbs-ambient-grid-opacity:.032; --cbs-ambient-spark-opacity:.28; }
html[data-background-intensity="medium"] { --cbs-ambient-opacity:.70; --cbs-ambient-grid-opacity:.055; --cbs-ambient-spark-opacity:.50; }
html[data-background-intensity="high"] { --cbs-ambient-opacity:.92; --cbs-ambient-grid-opacity:.078; --cbs-ambient-spark-opacity:.72; }

.cbs-ambient-background {
    position:fixed;
    z-index:0;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    contain:layout paint style;
    background:
        radial-gradient(circle at 15% 12%, color-mix(in srgb,var(--cbs-accent) 9%,transparent) 0, transparent 31%),
        radial-gradient(circle at 88% 88%, color-mix(in srgb,var(--cbs-accent) 7%,transparent) 0, transparent 34%),
        linear-gradient(155deg,var(--cbs-bg),color-mix(in srgb,var(--cbs-bg) 94%,var(--cbs-accent) 6%));
}

.cbs-ambient-grid {
    position:absolute;
    inset:0;
    opacity:var(--cbs-ambient-grid-opacity);
    background-image:
        linear-gradient(color-mix(in srgb,var(--cbs-accent) 70%,transparent) 1px,transparent 1px),
        linear-gradient(90deg,color-mix(in srgb,var(--cbs-accent) 70%,transparent) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
}

.cbs-ambient-orb,
.cbs-ambient-streak,
.cbs-ambient-spark {
    position:absolute;
    will-change:transform,opacity;
    transform:translate3d(0,0,0);
}

.cbs-ambient-orb {
    width:min(46vw,680px);
    aspect-ratio:1;
    border-radius:50%;
    opacity:var(--cbs-ambient-opacity);
    background:radial-gradient(circle,
        color-mix(in srgb,var(--cbs-accent) 19%,transparent) 0%,
        color-mix(in srgb,var(--cbs-accent) 8%,transparent) 34%,
        transparent 70%);
}
.cbs-ambient-orb-a { top:-24%; left:-13%; animation:cbsAmbientA var(--cbs-ambient-speed) ease-in-out infinite alternate; }
.cbs-ambient-orb-b { right:-17%; top:18%; width:min(40vw,610px); animation:cbsAmbientB calc(var(--cbs-ambient-speed) * 1.18) ease-in-out infinite alternate; }
.cbs-ambient-orb-c { left:31%; bottom:-31%; width:min(52vw,760px); opacity:calc(var(--cbs-ambient-opacity) * .72); animation:cbsAmbientC calc(var(--cbs-ambient-speed) * 1.34) ease-in-out infinite alternate; }

.cbs-ambient-streak {
    width:52vw;
    max-width:820px;
    height:1px;
    opacity:calc(var(--cbs-ambient-opacity) * .58);
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cbs-accent) 42%,transparent),transparent);
}
.cbs-ambient-streak-a { top:28%; left:4%; transform:rotate(-14deg); animation:cbsStreakA calc(var(--cbs-ambient-speed) * 1.08) ease-in-out infinite alternate; }
.cbs-ambient-streak-b { right:2%; bottom:24%; transform:rotate(11deg); animation:cbsStreakB calc(var(--cbs-ambient-speed) * 1.24) ease-in-out infinite alternate; }

.cbs-ambient-spark {
    width:4px;
    height:4px;
    border-radius:50%;
    opacity:var(--cbs-ambient-spark-opacity);
    background:var(--cbs-accent);
    box-shadow:0 0 12px color-mix(in srgb,var(--cbs-accent) 70%,transparent);
}
.cbs-ambient-spark-a { left:18%; top:34%; animation:cbsSparkA 19s ease-in-out infinite alternate; }
.cbs-ambient-spark-b { right:24%; top:22%; width:3px; height:3px; animation:cbsSparkB 23s ease-in-out infinite alternate; }
.cbs-ambient-spark-c { left:61%; bottom:17%; width:5px; height:5px; animation:cbsSparkC 27s ease-in-out infinite alternate; }

@keyframes cbsAmbientA { from { transform:translate3d(-5%,0,0) scale(.96); } to { transform:translate3d(18%,14%,0) scale(1.07); } }
@keyframes cbsAmbientB { from { transform:translate3d(7%,-8%,0) scale(1); } to { transform:translate3d(-16%,13%,0) scale(1.08); } }
@keyframes cbsAmbientC { from { transform:translate3d(-7%,8%,0) scale(1); } to { transform:translate3d(13%,-12%,0) scale(.94); } }
@keyframes cbsStreakA { from { transform:translate3d(-6%,0,0) rotate(-14deg); opacity:.20; } to { transform:translate3d(22%,10%,0) rotate(-14deg); opacity:.72; } }
@keyframes cbsStreakB { from { transform:translate3d(8%,0,0) rotate(11deg); opacity:.24; } to { transform:translate3d(-18%,-12%,0) rotate(11deg); opacity:.66; } }
@keyframes cbsSparkA { from { transform:translate3d(0,0,0); opacity:.18; } to { transform:translate3d(44px,-32px,0); opacity:.78; } }
@keyframes cbsSparkB { from { transform:translate3d(0,0,0); opacity:.24; } to { transform:translate3d(-58px,40px,0); opacity:.70; } }
@keyframes cbsSparkC { from { transform:translate3d(0,0,0); opacity:.12; } to { transform:translate3d(34px,-54px,0); opacity:.76; } }

/* Let the ambient layer show through the workspace while cards remain solid/readable. */
.cbs-app-body,
.cbs-app-body #MainForm { background:transparent !important; }
.cbs-app-body #MainForm { position:relative; min-height:100dvh; isolation:isolate; }
.cbs-app-body .cbs-app-main { position:relative; z-index:1; background:transparent !important; }
.cbs-app-body .cbs-app-header,
.cbs-app-body .cbs-sidebar,
.cbs-app-body .cbs-app-footer,
.cbs-app-body .cbs-theme-panel { isolation:isolate; }

/* Very soft edge-lighting gives solid cards depth without glass effects. */
.cbs-app-body :is(.cbs-direct-toolbar,.cbs-direct-grid-card,.cbs-standard-table-card,.cbs-detail-info-card,.cbs-overview-kpi,.cbs-dashboard-center-card,.cbs-dashboard-panel,.cbs-card,.cbs-inline-editor,.cbs-split-panel) {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb,#fff 4%,transparent),
        0 0 0 1px color-mix(in srgb,var(--cbs-accent) 3%,transparent),
        0 10px 28px rgba(0,0,0,.06);
}

html[data-mode="light"] .cbs-ambient-background {
    background:
        radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--cbs-accent) 8%,transparent),transparent 31%),
        radial-gradient(circle at 89% 85%,color-mix(in srgb,var(--cbs-accent) 6%,transparent),transparent 33%),
        linear-gradient(155deg,var(--cbs-bg),color-mix(in srgb,#fff 95%,var(--cbs-accent) 5%));
}
html[data-mode="light"] .cbs-ambient-grid { opacity:calc(var(--cbs-ambient-grid-opacity) * .65); }
html[data-mode="classic"] .cbs-ambient-orb { opacity:calc(var(--cbs-ambient-opacity) * .90); }

html[data-background-motion="still"] :is(.cbs-ambient-orb,.cbs-ambient-streak,.cbs-ambient-spark),
html.cbs-background-paused :is(.cbs-ambient-orb,.cbs-ambient-streak,.cbs-ambient-spark) { animation-play-state:paused !important; }
html[data-background-motion="still"] .cbs-ambient-orb-a { transform:translate3d(8%,8%,0); }
html[data-background-motion="still"] .cbs-ambient-orb-b { transform:translate3d(-5%,6%,0); }
html[data-background-motion="still"] .cbs-ambient-orb-c { transform:translate3d(3%,-4%,0); }

@media (max-width:860px) {
    .cbs-ambient-grid { background-size:42px 42px; }
    .cbs-ambient-orb { width:78vw; }
    .cbs-ambient-orb-c { display:none; }
    .cbs-ambient-streak { width:86vw; }
}

@media (prefers-reduced-motion:reduce) {
    :is(.cbs-ambient-orb,.cbs-ambient-streak,.cbs-ambient-spark) { animation:none !important; }
}