/* Animation for the Marketgraph cards */
/* The class naming for the classes corresponds to desktop visibility */
/* 
@media screen and (max-width: 799px) {
  .market_card-tl {
    z-index: 4;
  }
  .market_card-tr {
    z-index: 3;
    transform: translateY(-125px);
  }
  .market_card-bl {
    z-index: 2;
    transform: translateY(-250px);
  }
  .market_card-br {
    z-index: 1;
    transform: translateY(-375px);
  }
} */

@media screen and (min-width: 800px) {
  .market_card-tl {
    transform: translateX(40px) translateY(40px);
  }
  .market_card-tr {
    transform: translateX(-40px) translateY(40px);
  }
  .market_card-bl {
    transform: translateX(40px) translateY(-40px);
  }
  .market_card-br {
    transform: translateX(-40px) translateY(-40px);
  }
}

.animate.market_card-tl {
  animation: animatecardtl 0.5s forwards ease-in;
}
.animate.market_card-tr {
  animation: animatecardtr 0.75s forwards ease-in;
}
.animate.market_card-bl {
  animation: animatecardbl 1s forwards ease-in-out;
}
.animate.market_card-br {
  animation: animatecardbr 1.25s forwards ease-in-out;
}

@keyframes animatecardtl {
  from {
    border: 1px solid black;
  }

  to {
    transform: none;
    border: 1px solid var(--value);
    filter: drop-shadow(8px 8px 0px var(--value));
  }
}

@keyframes animatecardtr {
  from {
    border: 1px solid black;
  }

  to {
    transform: none;
    border: 1px solid var(--value);
    filter: drop-shadow(-8px 8px 0px var(--value));
  }
}

@keyframes animatecardbl {
  from {
    border: 1px solid black;
  }

  to {
    transform: none;
    border: 1px solid var(--liquidity);
    filter: drop-shadow(8px -8px 0px var(--liquidity));
  }
}
@keyframes animatecardbr {
  from {
    border: 1px solid black;
  }

  to {
    transform: none;
    border: 1px solid var(--liquidity);
    filter: drop-shadow(-8px -8px 0px var(--liquidity));
  }
}

/* Animation for the hero section bars */

.hero-section {
  position: relative;
}

.hero-section_content {
  z-index: 3;
  position: relative;
  text-align: center;
}

.hero-section_elipse-mask {
  background-color: var(--yield);
  clip-path: ellipse(86% 91% at -3% 0%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.hero-section_animated-bars-wrapper {
  background-color: var(--yield);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  overflow: hidden;
  grid-gap: 10px;
}

.hero-section_animated-bars {
  transition: opacity 500ms ease-in-out;
  opacity: 0.04;
  height: 100%;
}

.hero-section_animated-bars:hover {
  transition: opacity 500ms ease-in-out;
  opacity: 0.25;
}

.hero-section_animated-bars:nth-child(1) {
  animation: animatebars 0.7s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(2) {
  animation: animatebars 0.8s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(3) {
  animation: animatebars 0.9s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(4) {
  animation: animatebars 1s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(5) {
  animation: animatebars 1.1s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(6) {
  animation: animatebars 1.2s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(7) {
  animation: animatebars 1.3s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(8) {
  animation: animatebars 1.4s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(9) {
  animation: animatebars 1.5s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(10) {
  animation: animatebars 1.6s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(11) {
  animation: animatebars 1.7s forwards ease-in-out;
}

.hero-section_animated-bars:nth-child(12) {
  animation: animatebars 1.8s forwards ease-in-out;
}

/* @media screen and (max-width: 799px) {
  .hero-section_animated-bars-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero-section_animated-bars:nth-child(1) {
    animation: animatebars 1.5s forwards ease-out;
  }

  .hero-section_animated-bars:nth-child(2) {
    animation: animatebars 1.75s forwards ease-out;
  }

  .hero-section_animated-bars:nth-child(3) {
    animation: animatebars 1.85s forwards ease-out;
  }

  .hero-section_animated-bars:nth-child(4) {
    animation: animatebars 2s forwards ease-out;
  }
} */

@keyframes animatebars {
  from {
    transform: translateY(115%);
  }

  to {
    transform: translateY(75px);
  }
}