:root {
  /* ==== Skills ==== */
  --skills-item-animation-height: -12px;
  --skills-item-ending-animation-duration: 0.25s;
}

.skills-title-intro {
  opacity: 0;
  animation: slide-title-intro 0.6s ease-in-out 0s 1 normal forwards;
}

@keyframes slide-title-intro {
  0% {
    transform: scale(0);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
  }
}

.skills-tree-left-intro {
  opacity: 0;
  animation: skills-tree-intro 0.85s cubic-bezier(0.09, 0.66, 0.72, 1.03) 0.45s 1 normal forwards;
}

.skills-tree-center-intro {
  opacity: 0;
  animation: skills-tree-intro 0.85s cubic-bezier(0.09, 0.66, 0.72, 1.03) 0.9s 1 normal forwards;
}

.skills-tree-right-intro {
  opacity: 0;
  animation: skills-tree-intro 0.85s cubic-bezier(0.09, 0.66, 0.72, 1.03) 1.35s 1 normal forwards;
}

@keyframes skills-tree-intro {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }
  100% {
    opacity: 1;
  }
}

.skills-items-hover {
  animation: skills-items-hover 0.75s ease-in-out 0s infinite none;
}

@keyframes skills-items-hover {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--skills-item-animation-height));
  }
  100% {
    transform: translateY(0);
  }
}

.skills-text-intro {
  opacity: 0;
  animation: skills-text-intro 2.25s cubic-bezier(0.31, -0.39, 0.95, 0.7) 1.1s 1 normal forwards;
}

@keyframes skills-text-intro {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (max-height: 590px), (max-width: 768px) {
  .skills-title-intro {
    opacity: 0;
    animation: slide-title-intro 0.6s ease-in-out 0.16s 1 normal forwards;
  }

  .skills-tree-left-intro {
    opacity: 0;
    animation: skills-tree-intro 0.7s cubic-bezier(0.09, 0.66, 0.72, 1.03) 0.4s 1 normal forwards;
  }

  .skills-tree-center-intro {
    opacity: 0;
    animation: skills-tree-intro 0.7s cubic-bezier(0.09, 0.66, 0.72, 1.03) 0.65s 1 normal forwards;
  }

  .skills-tree-right-intro {
    opacity: 0;
    animation: skills-tree-intro 0.7s cubic-bezier(0.09, 0.66, 0.72, 1.03) 0.9s 1 normal forwards;
  }

  .skills-text-intro {
    /* opacity: 1;
    animation: skills-text-intro 1.75s cubic-bezier(0.31, -0.39, 0.95, 0.7) 0.9s 1 normal forwards; */
  }
}