@use "@styles/abstracts/functions" as fun;

@keyframes pulse {
  from {
    transform: scale(1);
  }

  50% {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

@keyframes draw-borders {
  0% {
    background-position: top left, top right, bottom right, bottom left;
    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%,
      0% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%;
  }

  25% {
    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%,
      100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%;
  }

  50% {
    background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%,
      100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 100%;
  }

  75% {
    background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 0%,
      100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 100%;
  }

  100% {
    background-position: top left, top right, bottom right, bottom left;
    background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 100%,
      100% var(--draw-border-thickness, fun.convert-px(3)),
      var(--draw-border-thickness, fun.convert-px(3)) 100%;
  }
}

@keyframes slide-in-from-bottom {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slide-in-from-top {
  0% {
    transform: translateY(-200%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes flip-logo {
  0%,
  85% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

@keyframes branding-name-typing {
  0%,
  20% {
    transform: scaleX(1) translateX(0);
    transform-origin: right;
    visibility: visible;
  }

  100% {
    transform: scaleX(1) translateX(100%);
    transform-origin: right;
  }
}

@keyframes branding-job-typing {
  0% {
    transform: scaleX(1) translateX(0);
    transform-origin: right;
    content: "";
    visibility: visible;
  }

  48% {
    content: "";
  }

  49% {
    content: "|";
  }

  51% {
    transform: scaleX(1) translateX(0);
    transform-origin: right;
  }

  70% {
    transform: scaleX(1) translateX(100%);
    transform-origin: right;
  }

  100% {
    transform: scaleX(0) translateX(100%);
    transform-origin: right;
  }
}

@keyframes blink {
  0% {
    color: var(--color-primary-darker);
  }

  100% {
    color: var(--color-bg-tertiary);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}