/* eye animation */
.eye {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  background: black;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.3s;
  animation: blink 4s linear infinite;
}
@keyframes blink {
  0%,
  85%,
  89%,
  93%,
  100% {
    transform: scaleY(1);
  }
  87% {
    transform: scaleY(0.05);
  }
  91% {
    transform: scaleY(0.05);
  }
}
.ball {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  position: absolute;
  will-change: transform;
}
/* eye animation */

/*  BASE ANIMATION  */
.dl-1,
.dl-2 {
  animation-timeline: view(10% 0%) !important;
}
@media (min-width: 768px) {
  .dl-1 {
    animation-timeline: view(20% 10%) !important;
  }
  .dl-2 {
    animation-timeline: view(30% 20%) !important;
  }
}
.b-l,
.b-r {
  transform-origin: unset;
}
@media (min-width: 1020px) {
  .b-l {
    transform-origin: bottom left;
  }
  .b-r {
    transform-origin: bottom right;
  }
}

.slide-up {
  transform: translate(0, 300px);
  filter: blur(5px);
}
.srcl {
  transform: translate(0, 150px);
  filter: blur(4px);
  opacity: 0.3;
}
.shine {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  background-image: linear-gradient(
    120deg,
    color-mix(in srgb, black 10%, var(--secondary-color)) 45%,
    var(--accent-color) 50%,
    color-mix(in srgb, black 10%, var(--secondary-color)) 55%
  );
}

/*  SINGLE USE ACTIVATORS  */
.slide-up:not(.shine):not(.srcl) {
  animation: slide-up 0.5s ease-in-out forwards;
}
.srcl:not(.shine):not(.slide-up) {
  animation: testing ease-in-out both;
  animation-timeline: view(10% 0%);
  animation-range: entry 0% cover 40%;
}
.shine:not(.slide-up):not(.srcl) {
  animation: shine 3s linear infinite;
}

/*  COMBINATION ACTIVATORS  */
.slide-up.shine {
  animation: slide-up 0.5s ease-in-out forwards, shine 3s linear infinite;
}
.srcl.shine {
  animation: testing ease-in-out both, shine 3s linear infinite;
  animation-timeline: view(10% 0%), auto;
  animation-range: entry 0% cover 40%, normal;
}

/*  KEYFRAMES  */
@keyframes slide-up {
  to {
    transform: translate(0px, 0px);
    filter: blur(0px);
  }
}
@keyframes testing {
  to {
    transform: translate(0px, 0px) scale(1);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes shine {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: -100%;
  }
}