/* Disappearing elements animation */
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fade-out {
  animation: fade-out 0.3s ease-out forwards;
}

/* Phone rising animation */
@keyframes rise-up {
  0% {
    transform: translate();
  }
  100% {
    transform: translate(0, -290px);
  }
}
@keyframes rise-up-he {
  0% {
    transform: translate();
  }
  100% {
    transform: translate(0, -280px);
  }
}
@keyframes rise-up2 {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0, -26rem);
  }
}

.rise-up {
  animation: move-left 0.6s ease-out forwards;
}
.rise-up-he {
  animation: rise-up-he 0.6s ease-out forwards;
}

@keyframes move-left {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateX(-250px);
  }
}
@keyframes move-left2 {
  0% {
    transform: translate();
  }
  100% {
    transform: translate(-100px, 0);
  }
}
@keyframes move-left-he {
  0% {
    transform: translate();
  }
  100% {
    transform: translate(-80px, 0);
  }
}
/* Text change animation */
@keyframes text-change {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes text-change2 {
  0% {
    opacity: 0;
    transform: translate(0px, 10px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0);
  }
}
@keyframes text-change-he {
  0% {
    opacity: 0;
    transform: translate(0, 10px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.text-change {
  animation: text-change 0.3s ease-out forwards;
}
.text-change2 {
  animation: text-change2 0.3s ease-out forwards;
}
.text-change-he {
  animation: text-change-he 0.3s ease-out forwards;
}
@keyframes text-rise {
  0% {
    opacity: 0;
    transform: translateY(-190px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-change {
  animation: text-change 0.3s ease-out forwards;
}

/* Initial styles */
.hero-p,
.circle-container {
  opacity: 1;
  transition: opacity 0.1s ease-out;
}

.hero-image {
  transform: translateY(0);
  transition: transform 0.4s ease-out;
}

/* Glow Effect for profile picture */
@keyframes glowAnimation {
  0% {
    box-shadow: 0 0 5px rgba(46, 137, 255, 0.5);
  }
  60% {
    box-shadow: 0 0 22px rgba(46, 137, 255, 0.9);
  }
  100% {
    box-shadow: 0 0 5px rgba(46, 137, 255, 0.5);
  }
}

/* animation: glowAnimation 2s infinite; */
.glowAnimation {
  animation: glowAnimation 1s infinite ease;
}
/* Wavy GRADIANT ANIMATION FOR CARD HEADER */
@keyframes wavyRadialGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
  /* 0% 
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
  }
  60% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.45);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
  } */
}

.wavyRadialGradient {
  animation: wavyRadialGradient 1.6s infinite ease;
  background-image: radial-gradient(
    circle at top left,
    #000000 0%,
    rgba(46, 137, 255, 0.5) 50%,
    #000000 100%
  ) !important;
  background-position: center;
  background-size: 200% 200%;
}
/* TextGlow */
@keyframes textGlow {
  0% {
    text-shadow: 0 0 2px rgba(46, 137, 255, 0.412);
  }
  60% {
    text-shadow: 0 0 14px #2e89ffce;
  }
  100% {
    text-shadow: 0 0 2px rgba(46, 137, 255, 0.412);
  }
}

.textGlow {
  animation: textGlow 1.4s infinite ease;
}
/* Tutorial pointer animation  */
@keyframes hover {
  0% {
    transform: translate(0, 0) rotate(-15deg);
  }
  25% {
    transform: translate(5px, -5px) rotate(-10deg);
  }
  50% {
    transform: translate(0, 0) rotate(-15deg);
  }
  75% {
    transform: translate(-5px, 5px) rotate(-20deg);
  }
  100% {
    transform: translate(0, 0) rotate(-15deg);
  }
}
.pointer-container-profile {
  width: 48px;
  height: 48px;
  animation: hover 2s ease-in-out infinite;
  transform-origin: center;
  position: absolute;
  top: 145px;
  left: 160px;
  pointer-events: none;
  transition: all 0.32s ease;
  z-index: 101;
}
.pointer-container-header-pic {
  top: 18px;
  left: 240px;
}
.pointer-container-header-text {
  top: 285px;
  left: 184px;
}
.pointer-container-p-text {
  top: 325px;
  left: 165px;
}
.pointer-container-easylink {
  top: 460px;
  left: 155px;
}
.pointer-container-options {
  top: 450px;
  left: 190px;
}
.pointer-container-confirm {
  top: 510px;
  left: 190px;
}

.pointer {
  width: 100%;
  height: 100%;
  animation: click 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes click {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  55% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
/* easylink btn animation */

.sparkle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: sparkleMove 0.3s linear;
  z-index: 10;
}

@keyframes sparkleMove {
  0% {
    background-position: 200% 200%;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  /* 100% {
    background-position: -200% -200%;
    opacity: 0;
  } */
}
@keyframes colorPulseWave {
  0% {
    transform: scale(1);
    filter: saturate(100%) brightness(100%);
    box-shadow: 0 0 0 0 rgba(var(--main-color), 0.7);
    
  }
  50% {
    transform: scale(1.03);
    filter: saturate(150%) brightness(120%);
    box-shadow: 0 0 20px 10px rgba(var(--main-color), 0.2);
  }
  100% {
    transform: scale(1);
    filter: saturate(100%) brightness(100%);
    box-shadow: 0 0 0 0 rgba(var(--main-color), 0);
  }
}

.colorPulseWave {
  animation: colorPulseWave 0.35s ease-out forwards;
}
@keyframes colorPulseWave2 {
  0% {
    transform: scale(1) translate(50%, -45%);
    filter: saturate(100%) brightness(100%);
    box-shadow: 0 0 0 0 rgba(var(--main-color), 0.7);
  }
  50% {
    transform: scale(1.03) translate(50%, -45%);
    filter: saturate(150%) brightness(120%);
    box-shadow: 0 0 20px 10px rgba(var(--main-color), 0.2);
  }
  100% {
    transform: scale(1) translate(50%, -45%);
    filter: saturate(100%) brightness(100%);
    box-shadow: 0 0 0 0 rgba(var(--main-color), 0);
  }
}
.colorPulseWave2 {
  animation: colorPulseWave2 0.35s ease-out forwards;
}