.uc-blur-header .t396__artboard{
    backdrop-filter: blur(6px);
    background-color: #ffffff99;
}


.animated-line .tn-atom {
  animation: lineAnimationVertical 10s ease-in-out infinite;
}

@keyframes lineAnimationVertical {

  0% {
    clip-path: inset(0 0 0 0);
  }

  35% {
    clip-path: inset(100% 0 0 0);
  }

  50% {
    clip-path: inset(0 0 100% 0);
  }

  85% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 479px) {

  .animated-line .tn-atom {
    animation-name: lineAnimationHorizontal;
  }

  @keyframes lineAnimationHorizontal {

    0% {
      clip-path: inset(0 0 0 0);
    }

    35% {
      clip-path: inset(0 0 0 100%);
    }

    50% {
      clip-path: inset(0 100% 0 0);
    }

    85% {
      clip-path: inset(0 0 0 0);
    }

    100% {
      clip-path: inset(0 0 0 0);
    }
  }
}

.animated-circle .tn-atom {
  animation: circlePulse 4s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes circlePulse {
  0%,
  15% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.2);
  }

  40%,
  65% {
    transform: scale(1.2);
  }

  90% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}