/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/styles/animations.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -2vh);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

@keyframes floatBottom {
  0% {
    opacity: 0;
    transform: translateY(10vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/components/background-items/background-items.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************/
.background-item {
  position: absolute;
  width: 120%;
  height: 120%;
  max-width: none;
}

.background-item_cloud {
  mix-blend-mode: screen;
}

.animate-left {
  animation: floatLeft ease-in-out 4;
}

.animate-right {
  animation: floatRight ease-in-out 4;
}

.animate-top {
  animation: floatTop ease-in-out 4;
}

.animate-hide {
  animation: hide 0.2s ease-in-out 1 forwards;
}

.hide-tree {
  transform: translate(-28.5rem);
}

@keyframes floatLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(var(--shift, 9.6rem));
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes floatRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(var(--shift, 9.6rem) * -1));
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes floatTop {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--shift, 9.6rem)));
  }
  100% {
    transform: translateY(0);
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/preview/components/bottles/bottles.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.bottle {
  height: 80vh;
  width: auto;
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards, float 2s ease-in-out 3 forwards,
    fadeOut 0.5s ease-in forwards;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/preview/components/cardboards/cardboards.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
.cardboard {
  height: 80vh;
  width: auto;
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards, float 2s ease-in-out 3 forwards,
    fadeOut 0.5s ease-in forwards;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/preview/components/character-steps/character-steps.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
.character-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.character-section_scan {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: left;
  width: 100%;
  align-items: center;
  justify-items: end;
}

.character-section__text {
  text-align: center;
  animation: floatBottom 0.8s ease-in-out;
  white-space: pre-line;
}

.character-section_scan .character-section__text {
  text-align: left;
}

.character-section__content {
  justify-self: start;
  display: flex;
  flex-direction: column;
  margin-left: 2rem;
  gap: 5.5rem;
  padding-top: 11rem;
}

.character-section__video {
  width: 36.56rem;
  height: 35.18rem;
  position: relative;
  animation: floatBottom 0.8s ease-in-out;
}

.character-section__scan-row {
  display: flex;
  margin-left: 2rem;
  gap: 6rem;
}

.character-section__scan-img {
  width: 17.5rem;
  height: 17.5rem;
}

.character-section__arrows {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4rem;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 3.75rem solid transparent;
  border-bottom: 3.75rem solid transparent;
  border-left: 3.75rem solid var(--color-accent);
  animation: arrowBlink 1.6s infinite;
}

@keyframes arrowBlink {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}