/* ==========================================================================
   THERA STUDIO — ABOUT PAGE
   ========================================================================== */

.about-page {
  background-color: var(--colors--black);
  color: var(--colors--white);
}

.about-page .page-wrapper {
  width: 100%;
  position: relative;
  overflow: clip;
}

/* ==========================================================================
   ABOUT INTRO
   ========================================================================== */

.section-about-us {
  background-color: var(--colors--black);
  padding-top: 8rem;
  position: relative;
  overflow: clip;
}

.ab-container {
  width: 100%;
  margin: 0 auto;
  padding-left: 4rem;
  padding-right: 4rem;
}

.ab-text-wrap {
  max-width: 67.5rem;
  margin-bottom: 3rem;
  overflow: hidden;
}

.ab-text {
  font-family: var(--font--heading);
  color: var(--colors--white);
  font-size: 4rem;
  font-weight: var(--font--normal);
  line-height: 1.2;
  letter-spacing: -.025em;
}

/* ==========================================================================
   IMAGE MARQUEE
   ========================================================================== */

.ab-marquee {
  width: 100%;
  overflow: hidden;
}

.ab-marquee-images {
  width: max-content;
  display: flex;
}

.marquee-images {
  --about-marquee-gap: 3rem;
  width: max-content;
  display: flex;
  flex: none;
  gap: var(--about-marquee-gap);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: about-marquee 36s linear infinite;
}

.image-marquee {
  width: 12rem;
  height: 15.9375rem;
  flex: none;
  filter: grayscale(1);
  overflow: hidden;
}

.image-marquee.dark {
  filter: grayscale(1) brightness(.7);
}

.image-marquee .image-cover {
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

@keyframes about-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - var(--about-marquee-gap) / 2), 0, 0);
  }
}

/* ==========================================================================
   SCROLL TEXT
   ========================================================================== */

.section-about {
  background-color: var(--colors--black);
  isolation: isolate;
  position: relative;
}

.scroll-text-container {
  height: 300vh;
  width: 100%;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  position: relative;
}

.scroll-text-wrapper {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  contain: layout style paint;
  backface-visibility: hidden;
}

.scroll-text {
  width: 100%;
  padding-top: 8rem;
  padding-bottom: 8rem;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.text-xdisplay {
  z-index: 2;
  display: inline;
  position: relative;
  vertical-align: baseline;
}

.text-xdisplay.scroll-highlight {
  max-width: 54rem;
  font-family: var(--font--heading);
  color: var(--colors--white);
  font-size: 3rem;
  font-weight: var(--font--normal);
  line-height: 1.4;
  text-align: center;
  letter-spacing: -.02em;
  will-change: opacity, transform;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.about-page .section-footer {
  background-color: var(--colors--black);
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media screen and (max-width: 991px) {
  .section-about-us {
    padding-top: 7rem;
  }

  .ab-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .ab-text {
    font-size: 3rem;
  }

  .image-marquee {
    width: 10.5rem;
    height: 14rem;
  }

  .text-xdisplay.scroll-highlight {
    font-size: 2.6rem;
  }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media screen and (max-width: 767px) {
  .section-about-us {
    padding-top: 7rem;
  }

  .ab-container {
    padding-left: var(--spacing--pad-h-mobile);
    padding-right: var(--spacing--pad-h-mobile);
  }

  .ab-text-wrap {
    margin-bottom: 2rem;
  }

  .ab-text {
    font-size: 2rem;
    line-height: 1.2;
  }

  .marquee-images {
    --about-marquee-gap: 1.5rem;
  }

  .image-marquee {
    width: 9rem;
    height: 12rem;
  }

  .scroll-text-container {
    height: 280vh;
    padding-left: var(--spacing--pad-h-mobile);
    padding-right: var(--spacing--pad-h-mobile);
  }

  .scroll-text {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .text-xdisplay.scroll-highlight {
    max-width: 32rem;
    font-size: 2rem;
    line-height: 1.4;
  }
}

/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media screen and (max-width: 479px) {
  .ab-text {
    font-size: 1.8rem;
  }

  .image-marquee {
    width: 8rem;
    height: 10.75rem;
  }

  .text-xdisplay.scroll-highlight {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .marquee-images {
    animation: none !important;
    transform: none !important;
  }

  .scroll-highlight .word {
    opacity: 1 !important;
    transform: none !important;
  }
}