/* body{
    font-family: TTCommons;

} */


@keyframes yellowFill {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes grayRise {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes grayY {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes grayLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}



@keyframes panX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-20%);
  }
}

.animate-pan-x {
  animation: panX 12s linear infinite ;
}

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine .shine {
  position: absolute;
  inset: 0;
  background: #ccfe0f;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 20;
}

.btn-shine:hover .shine {
  animation: sweep 1.2s ease;
}

@keyframes sweep {
  0% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@layer utilities {
  .animate-yellow-fill {
    transform: translateY(100%);
    animation: yellowFill 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .animate-gray-rise {
    transform: translateY(100%);
    animation: grayRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.75s;
  }
  .animate-gray-y{
    transform: translateX(100%);
    animation: grayY 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.75s;
  }
  .animate-gray-left {
  transform: translateX(-100%);
  animation: grayLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.75s;
}
}

/* underline animation */

.link-hover{
    cursor: pointer;
}
.link-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #ccfe0f;

  transform: scaleX(0);
  transform-origin: right; 
  transition: transform 0.4s ease;
}

.link-hover:hover::after {
  transform: scaleX(1);
  transform-origin: left; 
}


/* contact css */

.link-hover2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: black;
  text-decoration: none;
  padding-bottom: 4px;
}

.link-hover2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: black;
}

.link-hover2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #ccfe0f;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.link-hover2:hover::after {
  transform: scaleX(1);
}

.link-hover2:not(:hover)::after {
  transform-origin: right;
}

.link-hover2:hover {
  color: #ccfe0f;
}


/* logo */
.logo-hover {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.logo-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ccfe0f;
  z-index: -1;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.logo-hover:hover::before {
  transform: scaleX(1);
}

.logo-hover:not(:hover)::before {
  transform-origin: right;
}