/* @font-face {
    font-family:chacha ;
    src: url(https://ik.imagekit.io/sheryians/Fonts/neueMachina/NeueMachina-Light_gwWCZxVuQl.ttf?updatedAt=1713347904991);
}

h1{
    font-family: chacha;
} */




.fade-element {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-visible {
  opacity: 1;
  transform: translateY(0);
}

 @keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeIn 1s ease-in-out forwards;
}

#ak {
  
  position: relative;
  padding: 8px;
  border: 2px solid #333;
  overflow: hidden;
  border-radius: 10px;
}

/* Image styling */
#in {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  z-index: 1;
  position: relative;
}

#ak::before,
#ak::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, transparent, white, transparent);
  animation: move 2s linear infinite;
}

#ak::before {
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
}
#ak::after {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 3px;
  animation-delay: 1s;
}


/* Animations */
@keyframes move {
  0% { left: -100%; }
  100% { left: 100%; }
}





@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 222222222222 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 1.5s ease-in-out forwards;
}

#ash {
  position: relative;
  padding: 8px;
  border: 2px solid #333;
  overflow: hidden;
  border-radius: 10px;
}
#trainer-img {
 
  border-radius: 10px;
  object-fit: cover;
  z-index: 1;
  position: relative;
  transition: 0.3s;
}

#ash::before,
#ash::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, transparent, white, transparent);
  animation: move 2s linear infinite;
}

#ash::before {
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
}

#ash::after {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 3px;
  animation-delay: 1s;
}