:root {
    --ambient-bg-0: #040c1a;
    --ambient-bg-1: #071622;
    --ambient-bg-2: #0a1a2b;
    --ambient-teal: 60, 210, 165;
}

body.home-ambient {
    min-height: 100vh;
    background-color: var(--ambient-bg-0) !important;
    background-image:
        linear-gradient(rgba(60, 210, 165, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 210, 165, .08) 1px, transparent 1px),
        linear-gradient(rgba(60, 210, 165, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 210, 165, .028) 1px, transparent 1px),
        radial-gradient(900px 560px at 86% -8%, rgba(var(--ambient-teal), .12), transparent 62%),
        radial-gradient(760px 520px at 8% 108%, rgba(20, 184, 166, .10), transparent 62%),
        linear-gradient(160deg, var(--ambient-bg-0), var(--ambient-bg-1) 45%, var(--ambient-bg-2));
    background-size: 108px 108px, 108px 108px, 18px 18px, 18px 18px, auto, auto, auto;
    background-attachment: fixed;
}

body.home-ambient .app {
    background-color: transparent;
}

body.home-ambient::before {
    content: none;
}

/* Modals inside the app must share the root stacking context with their backdrop. */
body.home-ambient .app { position: relative; z-index: auto; }

body.home-ambient.driver-ambient {
    background-image:
        linear-gradient(rgba(60, 210, 165, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 210, 165, .08) 1px, transparent 1px),
        linear-gradient(rgba(60, 210, 165, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 210, 165, .028) 1px, transparent 1px),
        radial-gradient(900px 560px at 86% -8%, rgba(var(--ambient-teal), .07), transparent 62%),
        radial-gradient(760px 520px at 8% 108%, rgba(20, 184, 166, .06), transparent 62%),
        linear-gradient(160deg, var(--ambient-bg-0), var(--ambient-bg-1) 45%, var(--ambient-bg-2));
}

@media (prefers-reduced-motion: reduce) {
    body.home-ambient { background-attachment: scroll; }
}

/* Alternate demo canvas. This is intentionally defined after the default canvas. */
html.demo-light body.home-ambient,
body.home-ambient.demo-background {
    background:
        linear-gradient(rgba(60, 210, 165, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 210, 165, .08) 1px, transparent 1px),
        linear-gradient(rgba(60, 210, 165, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 210, 165, .028) 1px, transparent 1px),
        radial-gradient(1100px 700px at 80% -10%, rgba(60, 210, 165, .08), transparent 60%),
        radial-gradient(900px 600px at 10% 110%, rgba(20, 184, 166, .08), transparent 60%),
        linear-gradient(160deg, #212b35, #27343d 45%, #202a33) !important;
    background-size: 108px 108px, 108px 108px, 18px 18px, 18px 18px, auto, auto, auto !important;
}

html.demo-light body.home-ambient .app,
body.home-ambient.demo-background .app {
    background-color: transparent !important;
}

/* Panel light mode uses the original demo canvas beneath its translucent chrome.
   app.min.css and template-fixes.css already supply the demo's html gradient. */
html.demo-light body.home-ambient.panel-canvas {
    background: transparent !important;
    background-size: auto !important;
}

/* Restore the demo texture suppressed by the ambient theme. Keep the original
   fixed positioning and z-index from app.min.css, below the app and its modals. */
html.demo-light body.home-ambient.panel-canvas::before {
    content: "";
    background-image: url("/Admin/assets/css/images/pattern.png");
    background-size: 4.6875rem;
    background-repeat: repeat;
}

/* The demo admin layout has its own green glow on both the root and body. */
html.demo-light.admin-panel-page,
html.demo-light body.home-ambient.admin-panel-canvas {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(16, 185, 129, .22), transparent 60%),
        radial-gradient(1000px 550px at -10% 110%, rgba(16, 185, 129, .14), transparent 55%),
        #212b35 !important;
}

@keyframes demo-grid-shift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 54px 54px, 54px 54px; }
}