.ag-animated-gradient {
    position: relative;
    width: 100%;
    min-height: var(--ag-min-height, 100vh);
    overflow: hidden;
    isolation: isolate;
    background: var(--ag-base-color, #022C35);
}

/* Fill-body mode: widget acts as fixed full-viewport background */
.ag-animated-gradient[data-fill-body="yes"] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    z-index: var(--ag-fill-z, -1);
}

/* Fill-body + scroll mode: scrolls along with the page over the full
   document height instead of being pinned to the viewport. */
.ag-animated-gradient[data-fill-body="yes"][data-fill-scroll="yes"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

/* Make sure the absolute positioning above resolves against the page,
   not some random ancestor. */
body:has(> .ag-animated-gradient[data-fill-body="yes"][data-fill-scroll="yes"]),
body:has(.ag-animated-gradient[data-fill-body="yes"][data-fill-scroll="yes"]) {
    position: relative;
    min-height: 100vh;
}

.ag-animated-gradient__layer {
    position: absolute;
    pointer-events: none;
}

.ag-animated-gradient__layer--mesh {
    /* Inset scales with blur radius so the blur fade-zone always stays
       outside the visible wrapper, plus an extra "edge bleed" margin. */
    inset: calc(-1 * (var(--ag-blur, 40px) * 2 + var(--ag-edge-bleed, 15%) + var(--ag-intensity, 8%) * 2));
    background-color: transparent;
    /* background-image is injected inline from PHP (built from repeater) */
    filter: blur(var(--ag-blur, 40px));
    will-change: transform, opacity;
    transform-origin: 50% 50%;
    transform: scale(var(--ag-bg-scale, 1));
}

.ag-animated-gradient[data-animated="yes"] .ag-animated-gradient__layer--mesh {
    animation: ag-drift var(--ag-speed, 24s) ease-in-out infinite alternate;
}

/* Static layers stay put even when the wrapper is in animated mode. They
   still inherit blur, scale and edge-bleed so they sit visually in the same
   plane as the animated layers. */
.ag-animated-gradient .ag-animated-gradient__layer--static {
    animation: none !important;
    transform: scale(var(--ag-bg-scale, 1));
}

.ag-animated-gradient[data-style="pulse"] .ag-animated-gradient__layer--mesh {
    animation-name: ag-pulse;
}

.ag-animated-gradient[data-style="combined"] .ag-animated-gradient__layer--mesh {
    animation-name: ag-combined;
}

.ag-animated-gradient[data-style="orbit"] .ag-animated-gradient__layer--mesh {
    animation-name: ag-orbit;
    animation-direction: normal;
    animation-timing-function: linear;
}

.ag-animated-gradient[data-style="float"] .ag-animated-gradient__layer--mesh {
    animation-name: ag-float;
}

.ag-animated-gradient[data-style="sway"] .ag-animated-gradient__layer--mesh {
    animation-name: ag-sway;
}

.ag-animated-gradient[data-style="breathe"] .ag-animated-gradient__layer--mesh {
    animation-name: ag-breathe;
}

.ag-animated-gradient[data-style="wander"] .ag-animated-gradient__layer--mesh {
    animation-name: ag-wander;
}

/* Animations multiply user scale (--ag-bg-scale) with their own motion. */
@keyframes ag-drift {
    0%   { transform: translate3d(0, 0, 0) scale(var(--ag-bg-scale, 1)); }
    50%  { transform: translate3d(var(--ag-intensity, 8%), calc(var(--ag-intensity, 8%) * -1), 0) scale(calc(var(--ag-bg-scale, 1) * 1.05)); }
    100% { transform: translate3d(calc(var(--ag-intensity, 8%) * -1), var(--ag-intensity, 8%), 0) scale(calc(var(--ag-bg-scale, 1) * 1.02)); }
}

@keyframes ag-pulse {
    0%, 100% { transform: scale(var(--ag-bg-scale, 1)); opacity: 1; }
    50%      { transform: scale(calc(var(--ag-bg-scale, 1) * 1.08)); opacity: 0.9; }
}

@keyframes ag-combined {
    0%   { transform: translate3d(0, 0, 0) scale(var(--ag-bg-scale, 1)); }
    50%  { transform: translate3d(var(--ag-intensity, 8%), calc(var(--ag-intensity, 8%) * -1), 0) scale(calc(var(--ag-bg-scale, 1) * 1.08)); }
    100% { transform: translate3d(calc(var(--ag-intensity, 8%) * -1), 0, 0) scale(calc(var(--ag-bg-scale, 1) * 1.03)); }
}

/* Orbit — sanfte, kontinuierliche Kreisbewegung (linear für stetigen Fluss). */
@keyframes ag-orbit {
    0%   { transform: translate3d(var(--ag-intensity, 8%), 0, 0) scale(var(--ag-bg-scale, 1)); }
    25%  { transform: translate3d(0, calc(var(--ag-intensity, 8%) * -1), 0) scale(calc(var(--ag-bg-scale, 1) * 1.02)); }
    50%  { transform: translate3d(calc(var(--ag-intensity, 8%) * -1), 0, 0) scale(var(--ag-bg-scale, 1)); }
    75%  { transform: translate3d(0, var(--ag-intensity, 8%), 0) scale(calc(var(--ag-bg-scale, 1) * 1.02)); }
    100% { transform: translate3d(var(--ag-intensity, 8%), 0, 0) scale(var(--ag-bg-scale, 1)); }
}

/* Float — gemächliches vertikales Schweben mit Mikro-Skalierung. */
@keyframes ag-float {
    0%   { transform: translate3d(0, calc(var(--ag-intensity, 8%) * 0.4), 0) scale(var(--ag-bg-scale, 1)); }
    50%  { transform: translate3d(0, calc(var(--ag-intensity, 8%) * -0.6), 0) scale(calc(var(--ag-bg-scale, 1) * 1.03)); }
    100% { transform: translate3d(0, calc(var(--ag-intensity, 8%) * 0.4), 0) scale(var(--ag-bg-scale, 1)); }
}

/* Sway — weiches horizontales Wiegen, wie ein leichter Pendelschwung. */
@keyframes ag-sway {
    0%   { transform: translate3d(calc(var(--ag-intensity, 8%) * -0.7), 0, 0) scale(var(--ag-bg-scale, 1)); }
    50%  { transform: translate3d(calc(var(--ag-intensity, 8%) * 0.7), calc(var(--ag-intensity, 8%) * -0.15), 0) scale(calc(var(--ag-bg-scale, 1) * 1.02)); }
    100% { transform: translate3d(calc(var(--ag-intensity, 8%) * -0.7), 0, 0) scale(var(--ag-bg-scale, 1)); }
}

/* Breathe — sehr dezentes Atmen (nur Mikro-Skalierung, kein Versatz). */
@keyframes ag-breathe {
    0%, 100% { transform: scale(calc(var(--ag-bg-scale, 1) * 0.99)); opacity: 0.95; }
    50%      { transform: scale(calc(var(--ag-bg-scale, 1) * 1.03)); opacity: 1; }
}

/* Wander — organischer Pfad über mehrere Keyframes (4er-Zyklus). */
@keyframes ag-wander {
    0%   { transform: translate3d(0, 0, 0) scale(var(--ag-bg-scale, 1)); }
    25%  { transform: translate3d(calc(var(--ag-intensity, 8%) * 0.6), calc(var(--ag-intensity, 8%) * -0.4), 0) scale(calc(var(--ag-bg-scale, 1) * 1.03)); }
    50%  { transform: translate3d(calc(var(--ag-intensity, 8%) * -0.3), calc(var(--ag-intensity, 8%) * -0.7), 0) scale(calc(var(--ag-bg-scale, 1) * 1.05)); }
    75%  { transform: translate3d(calc(var(--ag-intensity, 8%) * -0.7), calc(var(--ag-intensity, 8%) * 0.3), 0) scale(calc(var(--ag-bg-scale, 1) * 1.02)); }
    100% { transform: translate3d(0, 0, 0) scale(var(--ag-bg-scale, 1)); }
}

/* Solid layer: same positioning/animation/blur as mesh, but the gradient
   itself has a fully opaque core (solid_hardness) so colors like pure
   black stay truly black after the blur is applied. */
.ag-animated-gradient__layer--solid {
    inset: calc(-1 * (var(--ag-blur, 40px) * 2 + var(--ag-edge-bleed, 15%) + var(--ag-intensity, 8%) * 2));
    background-color: transparent;
    filter: blur(var(--ag-blur, 40px));
    will-change: transform, opacity;
    transform-origin: 50% 50%;
    transform: scale(var(--ag-bg-scale, 1));
}

.ag-animated-gradient[data-animated="yes"] .ag-animated-gradient__layer--solid {
    animation: ag-drift var(--ag-speed, 24s) ease-in-out infinite alternate;
}

.ag-animated-gradient[data-style="pulse"] .ag-animated-gradient__layer--solid {
    animation-name: ag-pulse;
}

.ag-animated-gradient[data-style="combined"] .ag-animated-gradient__layer--solid {
    animation-name: ag-combined;
}

.ag-animated-gradient[data-style="orbit"] .ag-animated-gradient__layer--solid {
    animation-name: ag-orbit;
    animation-direction: normal;
    animation-timing-function: linear;
}

.ag-animated-gradient[data-style="float"] .ag-animated-gradient__layer--solid {
    animation-name: ag-float;
}

.ag-animated-gradient[data-style="sway"] .ag-animated-gradient__layer--solid {
    animation-name: ag-sway;
}

.ag-animated-gradient[data-style="breathe"] .ag-animated-gradient__layer--solid {
    animation-name: ag-breathe;
}

.ag-animated-gradient[data-style="wander"] .ag-animated-gradient__layer--solid {
    animation-name: ag-wander;
}

@media (prefers-reduced-motion: reduce) {
    .ag-animated-gradient .ag-animated-gradient__layer--solid {
        animation: none !important;
        transform: scale(var(--ag-bg-scale, 1));
    }
}

/* Frosted-glass layer between mesh and overlay */
.ag-animated-gradient__layer--frost {
    inset: 0;
    background-color: var(--ag-frost-tint, rgba(255,255,255,0.15));
    backdrop-filter: blur(var(--ag-frost-blur, 20px)) saturate(var(--ag-frost-saturate, 1.2));
    -webkit-backdrop-filter: blur(var(--ag-frost-blur, 20px)) saturate(var(--ag-frost-saturate, 1.2));
}

.ag-animated-gradient__layer--overlay {
    inset: 0;
    background-color: var(--ag-overlay-color, transparent);
    opacity: var(--ag-overlay-opacity, 0);
}

.ag-animated-gradient__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .ag-animated-gradient .ag-animated-gradient__layer--mesh {
        animation: none !important;
        transform: scale(var(--ag-bg-scale, 1));
    }
}