.krdb-effects {
    position: relative;
    width: 100%;
    height: 640px;
    min-height: 200px;
    overflow: hidden;
    display: block;
    background: linear-gradient(40deg, rgb(108, 0, 162), rgb(0, 17, 82));
    --krdb-effects-width: 100%;
    --color-bg1: rgb(108, 0, 162);
    --color-bg2: rgb(0, 17, 82);
    --color1: 18, 113, 255;
    --color2: 221, 74, 255;
    --color3: 100, 220, 255;
    --color4: 200, 50, 50;
    --color5: 180, 180, 50;
    --color-interactive: 140, 100, 255;
    --circle-size: 80%;
    --blending: hard-light;
}

.krdb-effects--viewport {
    position: relative;
    width: min(var(--krdb-effects-width, 100vw), 100vw) !important;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
}

.krdb-effects__goo {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.krdb-effects__gradients {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: url(#krdb-goo) blur(40px);
    z-index: 1;
}

.krdb-effects__layer {
    position: absolute;
    mix-blend-mode: var(--blending);
    opacity: 1;
}

.krdb-effects__layer--g1 {
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
    animation: krdb-move-vertical 30s ease-in-out infinite;
}

.krdb-effects__layer--g2 {
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
    transform-origin: calc(50% - 400px);
    animation: krdb-rotate 20s linear infinite reverse;
}

.krdb-effects__layer--g3 {
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);
    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
    transform-origin: calc(50% + 400px);
    animation: krdb-rotate 40s linear infinite;
}

.krdb-effects__layer--g4 {
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
    transform-origin: calc(50% - 200px);
    animation: krdb-move-horizontal 40s ease-in-out infinite;
    opacity: 0.7;
}

.krdb-effects__layer--g5 {
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    top: calc(50% - var(--circle-size));
    left: calc(50% - var(--circle-size));
    background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: krdb-rotate 20s ease-in-out infinite;
}

.krdb-effects__layer--interactive {
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
    opacity: 0.7;
    transform: translate3d(-50%, -50%, 0);
}

@keyframes krdb-rotate {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

@keyframes krdb-move-vertical {
    0% { transform: translateY(-50%); }
    50% { transform: translateY(50%); }
    100% { transform: translateY(-50%); }
}

@keyframes krdb-move-horizontal {
    0% { transform: translateX(-50%) translateY(-10%); }
    50% { transform: translateX(50%) translateY(10%); }
    100% { transform: translateX(-50%) translateY(-10%); }
}

.krdb-effects__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 24px;
    font-size: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    background: linear-gradient(135deg, #232323, #111);
}

.krdb-effects__effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: block;
    z-index: 2;
}

.krdb-effects__effects--animated-images {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.krdb-effects__bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--bubble-size, 160px);
    height: var(--bubble-size, 160px);
    transform: translate(calc(-50% + var(--bubble-offset-x, 0px) + var(--bubble-anim-x, 0px)), calc(-50% + var(--bubble-offset-y, 0px) + var(--bubble-anim-y, 0px)));
    filter: blur(var(--bubble-blur, 0px));
    transition: filter 0.3s ease, width 0.3s ease, height 0.3s ease;
    will-change: transform, filter;
}

/* Responsywne rozmiary dla tabletu */
@media (min-width: 768px) and (max-width: 1024px) {
    .krdb-effects__bubble {
        width: var(--bubble-size-tablet, var(--bubble-size, 160px));
        height: var(--bubble-size-tablet, var(--bubble-size, 160px));
    }
}

/* Responsywne rozmiary dla telefonu */
@media (max-width: 767px) {
    .krdb-effects__bubble {
        width: var(--bubble-size-mobile, var(--bubble-size-tablet, var(--bubble-size, 160px)));
        height: var(--bubble-size-mobile, var(--bubble-size-tablet, var(--bubble-size, 160px)));
    }
}

.krdb-effects__bubble img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform: scaleX(var(--bubble-scale-x, 1)) scaleY(var(--bubble-scale-y, 1));
    transition: transform 0.3s ease;
}

.krdb-effects__effects-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    z-index: 3;
}