.king-addons-gradient-mesh {
    --kng-mesh-speed: 40;
    --kng-mesh-saturate: 110%;
    --kng-mesh-contrast: 105%;
    --kng-mesh-blur: 0px;
    --kng-mesh-brightness: 100%;
    --kng-mesh-hue: 0deg;
    --kng-mesh-noise-opacity: 0.12;
    --kng-mesh-vignette-opacity: 0;
    --kng-mesh-vignette-color: rgba(0, 0, 0, 0.6);

    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.king-addons-gradient-mesh--valign-top {
    align-items: flex-start;
}

.king-addons-gradient-mesh--valign-bottom {
    align-items: flex-end;
}

.king-addons-gradient-mesh::before,
.king-addons-gradient-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.king-addons-gradient-mesh::before {
    background: radial-gradient(circle at center, transparent 0%, var(--kng-mesh-vignette-color) 85%);
    opacity: var(--kng-mesh-vignette-opacity);
}

.king-addons-gradient-mesh::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
    opacity: 0;
    mix-blend-mode: soft-light;
}

.king-addons-gradient-mesh.has-noise::after {
    opacity: var(--kng-mesh-noise-opacity);
}

.king-addons-gradient-mesh__bg,
.king-addons-gradient-mesh__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.king-addons-gradient-mesh__bg,
.king-addons-gradient-mesh__canvas {
    background-size: 200% 200%;
    filter: saturate(var(--kng-mesh-saturate)) contrast(var(--kng-mesh-contrast)) blur(var(--kng-mesh-blur)) brightness(var(--kng-mesh-brightness)) hue-rotate(var(--kng-mesh-hue));
    transition: filter 0.3s ease;
}

.king-addons-gradient-mesh__canvas {
    display: none;
}

.king-addons-gradient-mesh.is-canvas .king-addons-gradient-mesh__bg {
    opacity: 0;
}

.king-addons-gradient-mesh.is-canvas .king-addons-gradient-mesh__canvas {
    display: block;
}

.king-addons-gradient-mesh.is-animated[data-motion="drift"] .king-addons-gradient-mesh__bg {
    animation: kng-mesh-drift calc(80s - (var(--kng-mesh-speed) * 0.6s)) ease-in-out infinite;
}

.king-addons-gradient-mesh.is-animated[data-motion="pulse"] .king-addons-gradient-mesh__bg {
    animation: kng-mesh-pulse calc(90s - (var(--kng-mesh-speed) * 0.6s)) ease-in-out infinite;
}

.king-addons-gradient-mesh.is-animated[data-motion="wave"] .king-addons-gradient-mesh__bg {
    animation: kng-mesh-wave calc(70s - (var(--kng-mesh-speed) * 0.5s)) ease-in-out infinite;
}

@keyframes kng-mesh-drift {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

@keyframes kng-mesh-pulse {
    0% {
        background-position: 40% 40%;
        transform: scale(1);
    }
    50% {
        background-position: 60% 60%;
        transform: scale(1.02);
    }
    100% {
        background-position: 40% 40%;
        transform: scale(1);
    }
}

@keyframes kng-mesh-wave {
    0% {
        background-position: 20% 30%;
    }
    50% {
        background-position: 80% 40%;
    }
    100% {
        background-position: 20% 30%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .king-addons-gradient-mesh.is-animated .king-addons-gradient-mesh__bg {
        animation: none;
    }
}

.king-addons-gradient-mesh__overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

.king-addons-gradient-mesh--align-left .king-addons-gradient-mesh__overlay {
    text-align: left;
}

.king-addons-gradient-mesh--align-right .king-addons-gradient-mesh__overlay {
    text-align: right;
}

.king-addons-gradient-mesh__content {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* The copy is white and the mesh can be any colour the user picks, including
       very pale ones. This scrim sits only behind the text, fades out well before
       the edges, and keeps the wording readable on any mesh. */
    padding: 26px 22px;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.20) 55%,
        rgba(0, 0, 0, 0) 78%);
}

.king-addons-gradient-mesh__template {
    width: 100%;
}

.king-addons-gradient-mesh--align-left .king-addons-gradient-mesh__content {
    margin-left: 0;
}

.king-addons-gradient-mesh--align-right .king-addons-gradient-mesh__content {
    margin-right: 0;
}

/* The mesh defaults to pale colours while the copy is white, so without this the
   heading and eyebrow are close to invisible. A soft shadow restores legibility
   over any mesh, and leaves the colours themselves to the widget's controls. */
.king-addons-gradient-mesh__subtitle,
.king-addons-gradient-mesh__title,
.king-addons-gradient-mesh__text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45);
}

.king-addons-gradient-mesh__subtitle {
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
}

.king-addons-gradient-mesh__title {
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
    color: #ffffff;
}

.king-addons-gradient-mesh__text {
    color: rgba(255, 255, 255, 0.94);
    font-size: 16px;
    line-height: 1.6;
}

.king-addons-gradient-mesh__actions {
    margin-top: 8px;
}

.king-addons-gradient-mesh__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease, background 0.2s ease;
}

.king-addons-gradient-mesh__button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.22);
}

.king-addons-gradient-mesh__export {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    padding: 12px;
    max-width: 320px;
    color: #e2e8f0;
    display: none;
    gap: 8px;
}

.king-addons-gradient-mesh__export textarea {
    width: 100%;
    background: transparent;
    color: inherit;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    resize: vertical;
}

.king-addons-gradient-mesh__export-copy {
    background: rgba(56, 189, 248, 0.24);
    color: #e0f2fe;
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

.king-addons-gradient-mesh.is-editor .king-addons-gradient-mesh__export {
    display: grid;
}

.king-addons-gradient-mesh.is-fallback .king-addons-gradient-mesh__bg {
    background-image: none !important;
}