/*-------------------------------------------------------
  Logo Animation
-------------------------------------------------------*/

@keyframes kickflip {
  0% {
    transform: translateY(-4px) scale(1);
    transform-origin: center center;
    animation-timing-function: cubic-bezier(0.585, 0.24, 0.865, 0.445);
  }

  10% {
    transform: translateY(3px) scale(0.9) rotateZ(90deg);
    transform-origin: center center;
    animation-timing-function: cubic-bezier(0.07, 0.405, 0.4, 0.82);
  }

  20% {
    transform: translateY(-4px) scale(1) rotateZ(180deg);
    transform-origin: center center;
    animation-timing-function: cubic-bezier(0.585, 0.5, 0.865, 0.445);
  }

  30% {
    transform: translateY(3px) scale(0.9) rotateZ(270deg);
    transform-origin: center center;
    animation-timing-function: cubic-bezier(0.07, 0.405, 0.4, 0.82);
  }

  40% {
    transform: translateY(-4px) scale(1) rotateZ(360deg);
    transform-origin: center center;
    animation-timing-function: cubic-bezier(0.585, 0.5, 0.865, 0.445);
  }

  100% {
    transform: translateY(-4px) scale(1) rotateZ(360deg);
    transform-origin: center center;
  }
}

header a.logo svg {
  overflow: visible;
}

header a.logo #dot {
  animation: kickflip 5s ease infinite;
}

/*-------------------------------------------------------
  Cursor Animation
-------------------------------------------------------*/

@keyframes pacman {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#mouth-closed {
  opacity: 0;
  animation: pacman 0.2s infinite;
}

/*-------------------------------------------------------
  Title Animation
-------------------------------------------------------*/

@keyframes drawing {
  to {
    stroke-dashoffset: 0;
  }
}

.background-svg svg #squiggle-1 {
  stroke-dashoffset: 500;
  stroke-dasharray: 500;
  animation: drawing 1.5s linear forwards;
  animation-delay: 1s;
}

.background-svg svg #squiggle-2,
.background-svg svg #squiggle-3 {
  stroke-dashoffset: 200;
  stroke-dasharray: 200;
  animation: drawing 1.5s linear forwards;
}

.background-svg svg #squiggle-2 {
  animation-delay: 0.4s;
}

/*-------------------------------------------------------
  Service Box Animation
-------------------------------------------------------*/

@keyframes rotateForward {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes rotateBackward {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.animated svg#background-service-1 {
  animation: rotateForward 44s linear infinite;
}

.animated svg#background-service-2 {
  animation: rotateForward 46s linear infinite;
}

.animated svg#background-service-3 {
  animation: rotateBackward 48s linear infinite;
}

.animated svg#background-service-4 {
  animation: rotateBackward 42s linear infinite;
}

/* .animated svg#background-service-1 path {
  stroke-dashoffset: 4000;
  stroke-dasharray: 4000;
  animation: drawing 1.5s linear forwards;
  animation-delay: 1s;
}

.animated svg#background-service-2 path,
.animated svg#background-service-3 path {
  stroke-dashoffset: 800;
  stroke-dasharray: 800;
  animation: drawing 1.5s linear forwards;
  animation-delay: 1s;
}

.animated svg#background-service-4 path {
  stroke-dashoffset: 1200;
  stroke-dasharray: 1200;
  animation: drawing 1.5s linear forwards;
  animation-delay: 1s;
} */

/*-------------------------------------------------------
  Circled Text
-------------------------------------------------------*/

svg#shape-circled-text {
  z-index: 0;
}

h1 .circled-text.animated svg#shape-circled-text path,
h2 .circled-text.animated svg#shape-circled-text path {
  stroke-dashoffset: 600;
  stroke-dasharray: 600;
  animation: drawing 1s linear forwards;
  animation-delay: 0.5s;
}

h3 .circled-text.animated svg#shape-circled-text path,
h4 .circled-text.animated svg#shape-circled-text path,
h5 .circled-text.animated svg#shape-circled-text path,
h6 .circled-text.animated svg#shape-circled-text path,
p .circled-text.animated svg#shape-circled-text path {
  stroke-dashoffset: 400;
  stroke-dasharray: 400;
  animation: drawing 1s linear forwards;
  animation-delay: 0.5s;
}

/*-------------------------------------------------------
  Footer Animation
-------------------------------------------------------*/

@keyframes rotate_left {
  0% {
    transform: rotate(0);
    transform-origin: bottom;
  }

  50% {
    transform: rotate(10deg);
    transform-origin: bottom;
  }

  100% {
    transform: rotate(0);
    transform-origin: bottom;
  }
}

@keyframes rotate_right {
  0% {
    transform: rotate(0);
    transform-origin: bottom;
  }

  50% {
    transform: rotate(-10deg);
    transform-origin: bottom;
  }

  100% {
    transform: rotate(0);
    transform-origin: bottom;
  }
}

@keyframes lift_left {
  0% {
    transform: rotate(0);
    transform-origin: center;
  }

  30% {
    transform: rotate(20deg);
    transform-origin: center;
  }

  50% {
    transform: rotate(0);
    transform-origin: center;
  }

  100% {
    transform: rotate(0);
    transform-origin: center;
  }
}

@keyframes lift_right {
  0% {
    transform: rotate(0);
    transform-origin: center;
  }

  30% {
    transform: rotate(-20deg);
    transform-origin: center;
  }

  50% {
    transform: rotate(0);
    transform-origin: center;
  }

  100% {
    transform: rotate(0);
    transform-origin: center;
  }
}

@keyframes move_up {
  0% {
    transform: translateY(0);
    transform-origin: center;
  }

  20% {
    transform: translateY(-10px);
    transform-origin: center;
  }

  40% {
    transform: translateY(0);
    transform-origin: center;
  }

  100% {
    transform: translateY(0);
    transform-origin: center;
  }
}

@keyframes move_down {
  0% {
    transform: translateY(0);
    transform-origin: center;
  }

  20% {
    transform: translateY(10px);
    transform-origin: center;
  }

  40% {
    transform: translateY(0);
    transform-origin: center;
  }

  100% {
    transform: translateY(0);
    transform-origin: center;
  }
}

@keyframes spinning {
  0% {
    transform: rotate(0);
    transform-origin: center;
  }

  100% {
    transform: rotate(180deg);
    transform-origin: center;
  }
}

@keyframes flashing {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes pacing_left {
  0% {
    transform: translateX(0);
    transform-origin: center;
  }

  50% {
    transform: translateX(-50px);
    transform-origin: center;
  }

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

@keyframes pacing_right {
  0% {
    transform: translateX(0);
    transform-origin: center;
  }

  50% {
    transform: translateX(100px);
    transform-origin: center;
  }

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

@keyframes sunrise {
  0% {
    transform: translateY(100%) scale(0%);
    transform-origin: center;
  }

  35% {
    transform: translateY(-10%) scale(125%);
    transform-origin: center;
  }

  55% {
    transform: translateY(-10%) scale(125%);
    transform-origin: center;
  }

  100% {
    transform: translateY(100%) scale(0%);
    transform-origin: center;
  }
}

#flower1_petals {
  animation: rotate_right 3s ease infinite;
}

#flower2_leaf1,
#flower3_leaf2 {
  animation: rotate_left 2s ease infinite;
}

#flower2_leaf2,
#flower3_leaf1 {
  animation: rotate_right 2s ease infinite;
}

#flower2_petals1,
#flower2_petals2,
#flower2_petals3 {
  animation: move_down 6s ease infinite;
}

#flower3_petals {
  animation: move_down 4s ease infinite;
}

#flower4_leaf1,
#flower4_leaf3,
#flower4_leaf5,
#flower4_leaf1_detail,
#flower4_leaf3_detail,
#flower4_leaf5_detail {
  animation: lift_left 4s ease infinite;
  animation-delay: 2s;
}

#flower4_leaf2,
#flower4_leaf4,
#flower4_leaf6,
#flower4_leaf2_detail,
#flower4_leaf4_detail,
#flower4_leaf6_detail {
  animation: lift_right 4s ease infinite;
  animation-delay: 2s;
}

#flower5_petals1 {
  animation: spinning 10s ease infinite;
}

#raindrop_1,
#raindrop_2,
#raindrop_3,
#raindrop_4,
#raindrop_5,
#raindrop_6,
#raindrop_7,
#raindrop_8,
#raindrop_9 {
  opacity: 0;
  animation: flashing 1s ease infinite;
}

#raindrop_4 {
  animation-delay: 0.2s;
}

#raindrop_7,
#raindrop_9,
#raindrop_1 {
  animation-delay: 0.7s;
}

#raindrop_2,
#raindrop_6 {
  animation-delay: 1s;
}

#raindrop_8,
#raindrop_3 {
  animation-delay: 1.3s;
}

#cloud1 {
  animation: pacing_left 10s ease infinite;
}

#cloud3 {
  animation: pacing_right 15s ease infinite;
}

#sun {
  animation: sunrise 20s ease infinite;
}