.morphing-gradient-container canvas.loaded {
  opacity: 1;
}

/* Upewnij się, że elementy z morphing gradient mają pozycję relative */
[data-morphing-gradient="true"] {
  position: relative;
  
}

/* Upewnij się, że dzieci elementów z morphing gradient mają wyższy z-index */
[data-morphing-gradient="true"] > * {
  position: relative;
  z-index: 3;
}

/* Specjalne style dla różnych elementów */
[data-morphing-gradient="true"].brxe-section {
  position: relative;
}

[data-morphing-gradient="true"].brxe-container {
  position: relative;
}

[data-morphing-gradient="true"].brxe-div {
  position: relative;
}

[data-morphing-gradient="true"].brxe-block {
  position: relative;
}
.morphing-gradient-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  
  border-radius: inherit;
}

.morphing-gradient-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
 

 

/* Optymalizacja wydajności */
.morphing-gradient-container canvas {
  will-change: opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Dodatkowe style dla lepszego blendingu */
.morphing-gradient-container {
  mix-blend-mode: normal;
}

 

 

/* -- Nakładki gradientowe -- */
[data-morphing-gradient-overlay-top="true"]::before,
[data-morphing-gradient-overlay-bottom="true"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    height: var(--morphing-gradient-overlay-size, 30%);
    --overlay-color: var(--morphing-gradient-overlay-color-rgb, 255, 255, 255);
}

[data-morphing-gradient-overlay-top="true"]::before {
    top: 0;
    background: linear-gradient(to bottom, 
    color-mix(in srgb, var(--morphing-gradient-overlay-color), transparent 0%) 0%,
    color-mix(in srgb, var(--morphing-gradient-overlay-color), transparent 30%) 50%,
    color-mix(in srgb, var(--morphing-gradient-overlay-color), transparent 70%) 80%,
    color-mix(in srgb, var(--morphing-gradient-overlay-color), transparent 100%) 100%
  );
    -webkit-mask:
        radial-gradient(ellipse at bottom, transparent 0%, black 60%),
        linear-gradient(to top, transparent 0px, black var(--morphing-gradient-overlay-size, 30%));
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(ellipse at bottom, transparent 0%, black 60%),
        linear-gradient(to top, transparent 0px, black var(--morphing-gradient-overlay-size, 30%));
    mask-composite: intersect;
}

[data-morphing-gradient-overlay-bottom="true"]::after {
    bottom: 0;
    background: linear-gradient(to top, 
    color-mix(in srgb, var(--morphing-gradient-overlay-color), transparent 0%) 0%,
    color-mix(in srgb, var(--morphing-gradient-overlay-color), transparent 30%) 50%,
    color-mix(in srgb, var(--morphing-gradient-overlay-color), transparent 70%) 80%,
    color-mix(in srgb, var(--morphing-gradient-overlay-color), transparent 100%) 100%
  );
    
    -webkit-mask:
        radial-gradient(ellipse at top, transparent 0%, black 60%),
        linear-gradient(to bottom, transparent 0px, black var(--morphing-gradient-overlay-size, 30%));
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(ellipse at top, transparent 0%, black 60%),
        linear-gradient(to bottom, transparent 0px, black var(--morphing-gradient-overlay-size, 30%));
    mask-composite: intersect;
}