.symbol-tilt {
  width: 510px;
  height: 510px;
  position: relative;
  transform-origin: bottom center;
  animation: maskTilt 5s ease-in-out infinite alternate;
  z-index: 2;
}

.symbol-mask {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  -webkit-mask-image: url("../images/home/zdj52.webp");
  mask-image: url("../images/home/zdj52.webp");

  -webkit-mask-size: contain;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;
}

.background-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #dbb36b;
  animation: changeColor 18s linear infinite;
}

.image-track {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  width: max-content;
  animation: moveImages 18s linear infinite;
}

.image-track img {
  width: 510px;
  height: 510px;
  flex: 0 0 510px;
  object-fit: contain;
}

.line-layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 6;

  width: 10px;
  height: 155px;

  background: #dbb36b;
  border-radius: 999px;

  transform: translateX(-50%);
  pointer-events: none;

  animation: changeColor 18s linear infinite;
}

.line-layer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22px;

  width: 41px;
  height: 41px;

  background: #dbb36b;
  border-radius: 50%;

  transform: translateX(-50%);
  box-shadow: 0 0 22px rgba(219, 179, 107, 0.75);

  animation: changeColor 18s linear infinite, changeDotShadow 18s linear infinite;
}

/* kształty po lewej stronie maski */
.floating-shapes {
  position: absolute;
  left: -249px;
  top: 115px;

  width: 279px;
  height: 340px;

  z-index: 3;
  pointer-events: none;
}

.floating-shape {
  position: absolute;
  overflow: visible;
  pointer-events: none;

  color: #dbb36b;
}

.floating-shape path {
  fill: currentColor;
}

.floating-shape.shape-one {
  width: 104px;
  height: 231px;

  left: 24px;
  top: 0;

  opacity: 0.3;

  animation:
    changeShapeColor 18s linear infinite,
    floatShapeOne 6s ease-in-out infinite alternate;
}

.floating-shape.shape-two {
  width: 63px;
  height: 141px;

  left: 182px;
  top: 182px;

  opacity: 0.22;

  animation:
    changeShapeColor 18s linear infinite,
    floatShapeTwo 7s ease-in-out infinite alternate;
}

/* 3 zdjęcia x 510px = 1530px */
@keyframes moveImages {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-1530px);
  }
}

/* 3 kolory pod 3 zdjęcia */
@keyframes changeColor {
  0%, 30% {
    background: #dbb36b;
  }

  33.333%, 63% {
    background: #6c9ddb;
  }

  66.666%, 96% {
    background: #5d9e95;
  }

  100% {
    background: #dbb36b;
  }
}

@keyframes changeShapeColor {
  0%, 30% {
    color: #dbb36b;
  }

  33.333%, 63% {
    color: #6c9ddb;
  }

  66.666%, 96% {
    color: #5d9e95;
  }

  100% {
    color: #dbb36b;
  }
}

@keyframes changeDotShadow {
  0%, 30% {
    box-shadow: 0 0 22px rgba(219, 179, 107, 0.75);
  }

  33.333%, 63% {
    box-shadow: 0 0 22px rgba(108, 157, 219, 0.75);
  }

  66.666%, 96% {
    box-shadow: 0 0 22px rgba(93, 158, 149, 0.75);
  }

  100% {
    box-shadow: 0 0 22px rgba(219, 179, 107, 0.75);
  }
}

/* przechylanie maski */
@keyframes maskTilt {
  0% {
    transform: rotate(-7deg);
  }

  100% {
    transform: rotate(7deg);
  }
}

/* pływanie większego kształtu */
@keyframes floatShapeOne {
  0% {
    transform: translate(0, 0) rotate(-14deg);
  }

  50% {
    transform: translate(16px, -14px) rotate(-6deg);
  }

  100% {
    transform: translate(-10px, 12px) rotate(-20deg);
  }
}

/* pływanie mniejszego kształtu */
@keyframes floatShapeTwo {
  0% {
    transform: translate(0, 0) rotate(12deg);
  }

  50% {
    transform: translate(-14px, 16px) rotate(4deg);
  }

  100% {
    transform: translate(18px, -10px) rotate(18deg);
  }
}

.banner_txt_prawa_trzymak {
  position: relative;
  min-height: 360px;
  overflow: hidden;
}

.banner-text-slide {
  position: absolute;
  inset: 0;

  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;

  animation: changeBannerText 18s linear infinite;
}

.banner-text-slide.slide-one {
  animation-delay: 0s;
}

.banner-text-slide.slide-two {
  animation-delay: 6s;
}

.banner-text-slide.slide-three {
  animation-delay: 12s;
}

@keyframes changeBannerText {
  0% {
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
  }

  5% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  28% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  33.333% {
    opacity: 0;
    transform: translateY(-24px);
    pointer-events: none;
  }

  100% {
    opacity: 0;
    transform: translateY(-24px);
    pointer-events: none;
  }
}



.banner-progress {
  position: relative;
  width: 38px;
  height: 250px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-line {
  width: 2px;
  height: 86px;
  background: #47478f;
  opacity: 0.9;
}

.progress-dot {
  width: 28px;
  height: 28px;

  border: 4px solid #47478f;
  border-radius: 50%;
  background: transparent;

  position: relative;
}

/* aktywna kropka — wypełnienie */
.progress-dot::before {
  content: "";
  position: absolute;
  inset: 4px;

  border-radius: 50%;
  background: #47478f;

  opacity: 0;
  transform: scale(0.4);

  animation: dotActive 18s linear infinite;
}

/* opóźnienia jak przy 3 zdjęciach */
.progress-dot.dot-one::before {
  animation-delay: 0s;
}

.progress-dot.dot-two::before {
  animation-delay: 6s;
}

.progress-dot.dot-three::before {
  animation-delay: 12s;
}

@keyframes dotActive {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  5% {
    opacity: 1;
    transform: scale(1);
  }

  28% {
    opacity: 1;
    transform: scale(1);
  }

  33.333% {
    opacity: 0;
    transform: scale(0.4);
  }

  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}