/* ABOUT ANIMATION CONTAINER */

.about-animation-container {
  box-shadow: var(--box-shadow-black);

  grid-column: 47 / 57;
  grid-row: 19 / 21;

  transition: clip-path 0.8s ease-in-out, transform 0.4s ease-in-out;
}

.section--we-do.state-0 .about-animation-container,
.section--we-do.state-1 .about-animation-container {
  background-color: transparent;
}

.section--we-do.state-2 .about-animation-container {
  background-color: transparent;

  transform: translate(0, -110dvh);
}

.section--we-do.state-3 .about-animation-container,
.section--we-do.state-4 .about-animation-container,
.section--we-do.state-5 .about-animation-container,
.section--we-do.state-6 .about-animation-container,
.section--we-do.state-7 .about-animation-container,
.section--we-do.state-8 .about-animation-container,
.section--we-do.state-9 .about-animation-container,
.section--we-do.state-10 .about-animation-container,
.section--we-do.state-11 .about-animation-container {
  clip-path: inset(-1px 110% -110% -1px);
  -webkit-clip-path: inset(-1px 110% -110% -1px);
  display: none;
}

/* Animation-specific styles */

.section--we-do.state-0 .about-second-animation-box {
  display: none;
}

.section--we-do.state-1 .about-second-animation-box {
  display: flex;
}

.section--we-do.state-2 .about-second-animation-box,
.section--we-do.state-3 .about-second-animation-box,
.section--we-do.state-4 .about-second-animation-box,
.section--we-do.state-5 .about-second-animation-box,
.section--we-do.state-6 .about-second-animation-box,
.section--we-do.state-7 .about-second-animation-box,
.section--we-do.state-8 .about-second-animation-box,
.section--we-do.state-9 .about-second-animation-box,
.section--we-do.state-10 .about-second-animation-box,
.section--we-do.state-11 .about-second-animation-box {
  display: none;
}

.about-second-animation-box {
  width: 100%;
  height: 100%;
  /* display: flex;
    align-items: center;
    justify-content: center; */
}

.about-text-box {
  position: relative;
  padding-left: 4dvh;
  padding-right: 4dvh;
  width: 100%;
  height: 100%;

  top: 0;
  left: 0;
  /* display: flex; */
  /* flex-direction: column; */
}

.box-animation-active {
  animation: BoxSlide 6s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  animation-delay: 0.5s;
}

.slideInAnimationActive {
  animation: slideIn 6s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  animation-delay: 0.5s;
}

/* About Text */
.about-text-wrapper {
  position: relative;
  height: 100%; /* wrapper takes the full height */
  width: 100%;
  overflow: hidden; /* hide texts outside the visible area */
}

/* Base styles for the element */
.about-first-animation-box {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2dvh;
  padding-left: 4dvh;
  padding-right: 4dvh;
  width: 100%;
  height: 100%;

  scale: 0.9;
}

.about-title-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  /* align-items: flex-start; */
  /* justify-content: flex-start; */
  align-items: center;
  top: 0;
  left: 2dvh;
  /* top: 2.8dvh; */
  overflow: hidden;
  height: 100%;
  /* background-color: cyan; */
}

.about-main-title {
  font-family: "Crystal";
  text-align: left;
  align-self: flex-start;
}

.about-logo-container {
  display: flex;
  height: 7.4dvh;
  width: 7.4dvh;
  transform: translate(0, -0.3dvh);
}

.about-logo-container.slideAnimation {
  /* transform: translate(22.81dvh, -0.3dvh); */
  background-color: transparent;
}

.qreal-logo-about-text {
  width: 100%;
  height: 100%;
}

.about-title-animated {
  font: var(--font-heading-02);
  font-weight: 300;
  font-size: 7.4dvh;
  letter-spacing: -0.4dvh;
  margin-bottom: -2dvh;
  margin-left: -0.8dvh;

  clip-path: inset(0px 0px 0px -10px);
}

.about-title-text-animated {
  font: var(--font-about-texts);
  font-weight: 300;
  font-size: 8.2dvh;

  position: absolute;
  display: flex;
  top: 0;
  left: 41dvh;
  align-items: center;
  height: 100%;

  width: 44dvh;

  transition: transform 0.4s ease-in-out;
  transform: translate(-6dvh, 0.3dvh);
}

.about-title {
  font: var(--font-heading-02);

  font-weight: 300;
  font-size: 10dvh;
  letter-spacing: -0.4dvh;

  line-height: 11.4dvh;
}

.about-title-text {
  font: var(--font-about-texts);
  font-weight: 300;
  font-size: 8.2dvh;

  position: absolute;
  display: flex;
  left: 45dvh;
  align-items: center;
  height: 100%;

  width: 44dvh;

  transition: transform 0.4s ease-in-out;
  transform: translate(0, 0.3dvh);
}

.question-animated-title {
  /* transition: transform 0.4s ease-in-out, width 0.4s ease-in-out; */
  /* transition: width 0.4s ease-in-out; */
  /* transform: translate(0, 0); */
  transition: clip-path 0.4s ease-out;
}

.about-title-animated.slideAnimation {
  /* transform: translate(23dvh, 0); */
  background-color: transparent;
  /* background-color: red; */

  clip-path: inset(0px 100% 0px 0px);
}

.about-title-text-animated.slideAnimation {
  white-space: nowrap;

  transform: translate(-31dvh, 0.3dvh);
  /* background-color: red; */
}

@keyframes BoxSlide {
  0% {
    transform: translateY(0%);
  }

  60% {
    transform: translateY(0%);
  }

  65% {
    transform: translateY(-100%);
  }

  85% {
    transform: translateY(-100%);
  }

  90% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(0);
  }
  8% {
    transform: translateY(0);
  }
  /* Transition */
  12% {
    transform: translateY(-100%);
  }
  22% {
    transform: translateY(-100%);
  }
  /* Transition */
  26% {
    transform: translateY(-200%);
  }
  34% {
    transform: translateY(-200%);
  }
  /* Transition */
  38% {
    transform: translateY(-300%);
  }
  46% {
    transform: translateY(-300%);
  }
  /* Transition */
  50% {
    transform: translateY(-400%);
  }
  58% {
    transform: translateY(-400%);
  }
  62% {
    transform: translateY(-400%);
  }
  79% {
    transform: translateY(-400%);
  }
  80% {
    transform: translateY(0%);
  }
}

.section--we-do.state-0 .about-text {
  /* background-color: red; */
  clip-path: inset(-1px 110% -110% -1px);
  -webkit-clip-path: inset(-1px 110% -110% -1px);
}

.section--we-do.state-1 .about-text {
  clip-path: inset(-10px -10px -10px -10px);
  -webkit-clip-path: inset(-10px -10px -10px -10px);
}

.section--we-do.state-2 .about-text {
  clip-path: inset(-1px 110% -110% -1px);
  -webkit-clip-path: inset(-1px 110% -110% -1px);
}

.section--we-do.state-3 .about-text,
.section--we-do.state-4 .about-text,
.section--we-do.state-5 .about-text,
.section--we-do.state-6 .about-text,
.section--we-do.state-7 .about-text,
.section--we-do.state-8 .about-text,
.section--we-do.state-9 .about-text,
.section--we-do.state-10 .about-text,
.section--we-do.state-11 .about-text {
  display: none;
}

/* About Subtext */

.about-subtext {
  font: var(--font-heading-05);

  transition: clip-path 0.6s ease-in-out;
  text-align: left;
  align-self: flex-start;
  /* margin-left: 8dvh; */
}

.section--we-do.state-0 .about-subtext,
.section--we-do.state-1 .about-subtext,
.section--we-do.state-2 .about-subtext {
  display: block;
}

/*  */

.section--we-do.state-3 .about-subtext,
.section--we-do.state-4 .about-subtext,
.section--we-do.state-5 .about-subtext,
.section--we-do.state-6 .about-subtext,
.section--we-do.state-7 .about-subtext,
.section--we-do.state-8 .about-subtext,
.section--we-do.state-9 .about-subtext,
.section--we-do.state-10 .about-subtext,
.section--we-do.state-11 .about-subtext {
  display: none;
}

/* **************** */
/* INTRO FIRST LINE */
/* **************** */

.intro-first-line {
  position: relative;

  background-color: var(--grid-item-bg-color);
  box-shadow: var(--box-shadow-black);
  white-space: nowrap;
  overflow: hidden;
  transition: clip-path 0.8s ease-in-out, box-shadow 0.4s ease-in-out,
    transform 0.4s ease-in-out, scale 0.4s ease-in-out;
}

.section--we-do.state-0 .intro-first-line,
.section--we-do.state-1 .intro-first-line {
  display: block;
  grid-column: 47 / 57;
  grid-row: 10 / 19;
}
.section--we-do.state-2 .intro-first-line {
  grid-column: 47 / 57;
  grid-row: 10 / 19;
  transform: translate(0, -110dvh);
}
.section--we-do.state-3 .intro-first-line,
.section--we-do.state-4 .intro-first-line,
.section--we-do.state-5 .intro-first-line,
.section--we-do.state-6 .intro-first-line,
.section--we-do.state-7 .intro-first-line,
.section--we-do.state-8 .intro-first-line,
.section--we-do.state-9 .intro-first-line,
.section--we-do.state-10 .intro-first-line,
.section--we-do.state-11 .intro-first-line {
  display: none;
  transform: translate(0, -110dvh);
  grid-column: 47 / 57;
  grid-row: 9 / 19;
}

/* *********************** */
/* INTRO FIRST LINE - TEXT */
/* *********************** */

.intro-first-line-text {
  font-weight: 400;
  font-size: 9dvh;
  line-height: 15.55dvh;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
  letter-spacing: -0.5dvh;
}

.section--we-do.state-0 .intro-first-line-text {
  transform: translate(16.2dvh, 0);
}

.section--we-do.state-1 .intro-first-line-text,
.section--we-do.state-2 .intro-first-line-text,
.section--we-do.state-3 .intro-first-line-text,
.section--we-do.state-4 .intro-first-line-text,
.section--we-do.state-5 .intro-first-line-text,
.section--we-do.state-6 .intro-first-line-text,
.section--we-do.state-7 .intro-first-line-text,
.section--we-do.state-8 .intro-first-line-text,
.section--we-do.state-9 .intro-first-line-text,
.section--we-do.state-10 .intro-first-line-text,
.section--we-do.state-11 .intro-first-line-text {
  transform: translate(16.2dvh, 0);
}

.we-do-text-title--about {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;

  padding-left: 6dvh;
  padding-top: 6dvh;
  padding-bottom: 4.4dvh;

  font: var(--font-about-texts);

  color: var(--darkest-color);

  /* height: calc(((100dvh - (13 * 0.1dvh)) / 14) * 8 + (7 * 0.1dvh));
    width: calc(((100dvh - (13 * 0.1dvh)) / 14) * 19 + (10 * 0.1dvh)); */

  transition: clip-path 0.6s ease-in-out, transform 0.4s ease-in-out;
  overflow: hidden;
}

.section--we-do.state-0 .we-do-text-title--about,
.section--we-do.state-1 .we-do-text-title--about,
.section--we-do.state-2 .we-do-text-title--about {
  display: flex;
}

.section--we-do.state-3 .we-do-text-title--about,
.section--we-do.state-4 .we-do-text-title--about,
.section--we-do.state-5 .we-do-text-title--about,
.section--we-do.state-6 .we-do-text-title--about,
.section--we-do.state-7 .we-do-text-title--about,
.section--we-do.state-8 .we-do-text-title--about,
.section--we-do.state-9 .we-do-text-title--about,
.section--we-do.state-10 .we-do-text-title--about,
.section--we-do.state-11 .we-do-text-title--about {
  display: none;
}

/* ABOUT IMAGE */

.about-img-container {
  /* display: none; */
  display: block;

  transition: clip-path 0.8s ease-in-out, transform 0.4s ease-in-out;
  /* background-color: white; */

  will-change: clip-path;
  box-shadow: var(--box-shadow-black);
}

.about-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;

  /* display: none; */
  object-fit: cover;
}

.section--we-do.state-0 .about-img-container,
.section--we-do.state-1 .about-img-container,
.section--we-do.state-2 .about-img-container {
  display: block;
  grid-column: 57 / 67;
  grid-row: 10 / 21;
}

.section--we-do.state-2 .about-img-container {
  transform: translate(0, -110dvh);
}

.section--we-do.state-3 .about-img-container,
.section--we-do.state-4 .about-img-container,
.section--we-do.state-5 .about-img-container,
.section--we-do.state-6 .about-img-container,
.section--we-do.state-7 .about-img-container,
.section--we-do.state-8 .about-img-container,
.section--we-do.state-9 .about-img-container,
.section--we-do.state-10 .about-img-container,
.section--we-do.state-11 .about-img-container {
  grid-column: 57 / 68;
  grid-row: 10 / 21;
  display: none;
}

/* ABOUT TITLE */

.we-do-text-title--about-animated {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font: var(--font-about-texts);

  color: var(--darkest-color);
  width: 100%;
  height: 100%;

  z-index: 2;
  grid-column: 44 / 55;
  grid-row: 18 / 20;

  transition: clip-path 0.6s ease-in-out, transform 0.4s ease-in-out;
  overflow: hidden;
}

.section--we-do.state-0 .we-do-text-title--about-animated,
.section--we-do.state-1 .we-do-text-title--about-animated,
.section--we-do.state-2 .we-do-text-title--about-animated {
  background-color: var(--grid-item-bg-color);
}

.section--we-do.state-3 .we-do-text-title--about-animated,
.section--we-do.state-4 .we-do-text-title--about-animated,
.section--we-do.state-5 .we-do-text-title--about-animated,
.section--we-do.state-6 .we-do-text-title--about-animated,
.section--we-do.state-7 .we-do-text-title--about-animated,
.section--we-do.state-8 .we-do-text-title--about-animated,
.section--we-do.state-9 .we-do-text-title--about-animated,
.section--we-do.state-10 .we-do-text-title--about-animated,
.section--we-do.state-11 .we-do-text-title--about-animated {
  display: none;
}

/* WHITE BOXEX GENERAL NAV */