// page animations
.page-enter,
.page-enter-active,
.page-enter-to {
  transition: opacity 0.25s ease;
  opacity: 1;
}
.page-leave,
.page-leave-to,
.page-leave-active {
  opacity: 0;
  transition: opacity 0.5s;
}

.from-bottom {
  transform: translate(0%, 10%) matrix(1, 0, 0, 1, 0, 0);
  //   opacity: 0;
  transition: all 1.5s ease-in-out;
}
.from-bottom.in-viewport {
  opacity: 1;
  transform: translate(0);
}

.from-bottom2 {
  transform: translate(0%, 10%) matrix(1, 0, 0, 1, 0, 0);
  transition: all 0.5s ease-in-out;
}
.from-bottom2.in-viewport {
  transform: translate(0);
}

.from-top {
  transform: translate(0%, -20px) matrix(1, 0, 0, 1, 0, 0);
  transition: all 0.5s ease-in-out;
}
.from-top.in-viewport {
  transform: translate(0);
}

.from-right {
  transform: translate(10%, 5%) matrix(1, 0, 0, 1, 0, 0);
  //   opacity: 0;
  transition: all 1s ease-in-out;
}
.from-right.in-viewport {
  opacity: 1;
  transform: translate(0);
}

.anim-opacity {
  opacity: 0;
  transition: all 1s ease;
}
.anim-opacity.in-viewport {
  opacity: 1;
}

.from-opacity {
  opacity: 0;
  transform: scale(0.9);
  transition: all 1s ease;
}
.from-opacity.in-viewport {
  opacity: 1;
  transform: scale(1);
}

.reveal-wrapper {
  transform: translate3d(0, 50px, 0);
  transition: all 2.5s cubic-bezier(0.49, 0.01, 0.27, 1);
}
.reveal-wrapper.in-viewport {
  transform: translateZ(0);
}
.reveal-left {
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
  transition: all 2s cubic-bezier(0.49, 0.01, 0.27, 1);
}
.reveal-left.in-viewport {
  opacity: 1;
  transform: translateZ(0);
}
.reveal-right {
  // opacity: 0;
  transform: translate3d(50px, 0, 0);
  transition: all 2s cubic-bezier(0.49, 0.01, 0.27, 1);
}
.reveal-right.in-viewport {
  opacity: 1;
  transform: translateZ(0);
}

@keyframes bottle-bounce {
  0% {
    transform: matrix3d(
      0.999992,
      -0.00407499,
      0,
      0,
      0.00407499,
      0.999992,
      0,
      0,
      0,
      0,
      1,
      0,
      11.9713,
      7.41742,
      0,
      1
    );
  }

  100% {
    transform: matrix3d(
      0.99969,
      0.0249164,
      0,
      0,
      -0.0249164,
      0.99969,
      0,
      0,
      0,
      0,
      1,
      0,
      -13.0304,
      -2.9634,
      0,
      1
    );
  }
}

@keyframes scale-md {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.8) rotate(15deg);
  }
}

@keyframes wavy {
  0% {
    d: path(
      'M0,64L40,80C80,96,160,128,240,154.7C320,181,400,203,480,197.3C560,192,640,160,720,133.3C800,107,880,85,960,112C1040,139,1120,213,1200,234.7C1280,256,1360,224,1400,208L1440,192L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z'
    );
  }
  100% {
    d: path(
      'M0,32L40,37.3C80,43,160,53,240,90.7C320,128,400,192,480,186.7C560,181,640,107,720,96C800,85,880,139,960,133.3C1040,128,1120,64,1200,58.7C1280,53,1360,107,1400,133.3L1440,160L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z'
    );
  }
}

.wave-wrap path {
  animation: wavy 8s linear 0s infinite alternate;
}

@media (max-width: 1000px) {
  .reveal-wrapper {
    transform: translate3d(0, 20px, 0);
  }
  .reveal-right {
    transform: translate3d(-10px, 0, 0);
  }
  .from-right {
    transform: translate(-2%, 5%) matrix(1, 0, 0, 1, 0, 0);
  }
}