.ambient-crystal-field {
    --ambient-particle-a: 214, 222, 255;
    --ambient-particle-b: 142, 126, 255;
    --ambient-particle-c: 105, 158, 255;
    position: fixed;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
}

.ambient-crystal-field::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 42%, transparent 34%, rgba(0, 0, 0, .26) 100%),
        linear-gradient(to bottom, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 25%, color-mix(in srgb, var(--bg) 38%, transparent) 54%, transparent 78%);
}

.ambient-crystal-field__image {
    position: absolute;
    z-index: 1;
    inset: 0;
    background-image: url("../img/ambient/crystal-stage-2.13.6-desktop.webp");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    opacity: .72;
    filter: saturate(.88) brightness(.82);
    transform: scale(1.003);
}

.ambient-crystal-field__glow {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 34%;
    background:
        radial-gradient(ellipse 32% 100% at 5% 100%, rgba(var(--ambient-particle-b), .17), transparent 66%),
        radial-gradient(ellipse 32% 100% at 95% 100%, rgba(var(--ambient-particle-c), .14), transparent 66%);
    mix-blend-mode: screen;
    opacity: .62;
    animation: bmd-crystal-breathe 9s ease-in-out infinite;
}

.ambient-crystal-field canvas {
    position: absolute;
    z-index: 5;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    opacity: .82;
    mix-blend-mode: screen;
}

@keyframes bmd-crystal-breathe {
    0%, 100% { opacity: .48; }
    50% { opacity: .7; }
}

body[data-page="gallery"] .ambient-crystal-field__image {
    filter: saturate(.9) brightness(.84);
}

body[data-page="products"] .ambient-crystal-field__image,
body[data-page="product_category"] .ambient-crystal-field__image,
body[data-page="product_detail"] .ambient-crystal-field__image,
body[data-page="project_parts"] .ambient-crystal-field__image {
    filter: hue-rotate(-9deg) saturate(.78) brightness(.8);
}

body[data-page="account"] .ambient-crystal-field__image,
body[data-page="login"] .ambient-crystal-field__image,
body[data-page="register"] .ambient-crystal-field__image {
    filter: hue-rotate(8deg) saturate(.72) brightness(.78);
}

body[data-page="privacy"] .ambient-crystal-field__image,
body[data-page="cookies"] .ambient-crystal-field__image,
body[data-page="terms"] .ambient-crystal-field__image {
    opacity: .46;
    filter: saturate(.5) brightness(.7);
}

html[data-theme="light"] .ambient-crystal-field {
    --ambient-particle-a: 58, 66, 104;
    --ambient-particle-b: 102, 70, 164;
    --ambient-particle-c: 52, 91, 154;
}

html[data-theme="light"] .ambient-crystal-field::after {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg) 90%, transparent) 0%,
        color-mix(in srgb, var(--bg) 48%, transparent) 24%,
        transparent 50%
    );
}

html[data-theme="light"] .ambient-crystal-field__image {
    opacity: .16;
    filter: invert(1) grayscale(1) contrast(1.65) brightness(1.08);
    mix-blend-mode: multiply;
}

html[data-theme="light"] .ambient-crystal-field__glow {
    display: none;
}

html[data-theme="light"] .ambient-crystal-field canvas {
    opacity: .34;
    mix-blend-mode: multiply;
}

@media (max-width: 700px) {
    .ambient-crystal-field__image {
        background-image: url("../img/ambient/crystal-stage-2.13.6-mobile.webp");
        background-position: center bottom;
        opacity: .68;
        filter: saturate(.82) brightness(.78);
    }
    .ambient-crystal-field::after {
        background:
            radial-gradient(ellipse at 50% 42%, transparent 32%, rgba(0, 0, 0, .25) 100%),
            linear-gradient(to bottom, color-mix(in srgb, var(--bg) 97%, transparent) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 30%, color-mix(in srgb, var(--bg) 42%, transparent) 58%, transparent 80%);
    }
    .ambient-crystal-field__glow { height: 29%; }
    .ambient-crystal-field canvas { opacity: .72; }
    html[data-theme="light"] .ambient-crystal-field__image { opacity: .14; filter: invert(1) grayscale(1) contrast(1.65) brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-crystal-field__glow { animation: none; opacity: .54; }
}

@media (forced-colors: active) {
    .ambient-crystal-field { display: none; }
}