/* =========================================================
   PT MUDA JAYA MULTINIAGA
   MOTION FOUNDATION
   ========================================================= */


/* =========================================================
   01. GSAP PERFORMANCE HINTS
   ========================================================= */

.home-hero__title,
.home-hero__description,
.btn--hero,
.hero-stat,
.hero-project,
.project-showcase,
.project-showcase__content,
.project-showcase__title,
.project-showcase__dots,
.selected-project-card {
  will-change:
    transform,
    opacity;
}

.home-hero__title,
.home-hero__description,
.btn--hero,
.hero-stat,
.hero-project,
.project-showcase__title {
  will-change:
    transform,
    opacity,
    filter;
}


/* =========================================================
   02. SHARED ODOMETER FOUNDATION
   ========================================================= */

.hero-stat__number,
.reach-stat__number {
  display: inline-flex;
  align-items: baseline;

  overflow: hidden;

  white-space: nowrap;

  font-variant-numeric: tabular-nums;
}


/* WINDOW FOR EACH DIGIT */

.stat-digit {
  position: relative;

  display: inline-block;

  height: 1em;

  overflow: hidden;

  margin-right: -0.035em;

  vertical-align: top;
}


/* ROLLING TRACK */

.stat-digit__track {
  display: flex;
  flex-direction: column;

  height: auto;

  will-change:
    transform,
    filter;
}


/* EACH NUMBER */

.stat-digit__value {
  display: block;

  flex: 0 0 1em;

  height: 1em;

  line-height: 1em;

  text-align: center;
}


/* =========================================================
   03. HERO ODOMETER
   ========================================================= */

.hero-stat__number {
  letter-spacing: -0.05em;
}

.hero-stat__suffix {
  display: inline-block;

  margin-left: -0.025em;

  line-height: 1;
  letter-spacing: -0.045em;
}


/* =========================================================
   04. OUR REACH — INTERACTION STATES
   ========================================================= */

.reach-location {
  transform-origin: left center;
}

.reach-location.is-active {
  transform:
    translateX(4px)
    scale(1.045);
}

.reach-location__color {
  transition:
    transform 320ms var(--ease-standard),
    box-shadow 320ms var(--ease-standard);
}

.reach-location.is-active .reach-location__color {
  transform: scale(1.35);

  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.08);
}

.reach-hotspot.is-active {
  transform: scale(1.45);

  box-shadow:
    0 0 0 7px rgba(255, 194, 38, 0.20);
}


/* =========================================================
   05. OUR REACH — ODOMETER
   ========================================================= */

.reach-stat__suffix {
  display: inline-block;

  margin-left: -0.025em;

  line-height: 1;
  letter-spacing: -0.045em;
}


/* =========================================================
   06. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .home-hero__title,
  .home-hero__description,
  .btn--hero,
  .hero-stat,
  .hero-project,
  .project-showcase,
  .project-showcase__content,
  .project-showcase__title,
  .project-showcase__dots,
  .selected-project-card,
  .stat-digit__track,
  .about-hero__media,
  .about-hero__inner,
  .about-hero__image,
  .about-hero__title,
  .about-stat,
  .about-intro__title,
  .about-intro-value,
  .about-intro-value__icon,
  .about-intro__copy p,
  .about-intro__button,
  .about-purpose__title,
  .about-purpose__vision,
  .about-purpose__mission li,
  .about-leadership__title,
  .about-leadership__next,
  .leadership-card,
  .leadership-card__image,
  .leadership-card__active-content,
  .leadership-card__collapsed-content {
    will-change: auto;
  }

}

.home-partners__label,
.home-partners__title,
.home-partners__row,
.partner-logo {
  will-change:
    transform,
    opacity;
}

.home-partners__title {
  will-change:
    transform,
    opacity,
    filter;
}

/* =========================================================
   CTA — MOTION PERFORMANCE
   ========================================================= */

.home-cta__media,
.home-cta__image,
.home-cta__label,
.home-cta__title,
.home-cta__description,
.home-cta__button {
  will-change:
    transform,
    opacity;
}

.home-cta__title {
  will-change:
    transform,
    opacity,
    filter,
    clip-path;
}

/* =========================================================
   ABOUT PAGE — MOTION
   ========================================================= */

.about-hero__media,
.about-hero__inner,
.about-hero__image,
.about-hero__title,
.about-stat {
  will-change:
    transform,
    opacity;
}

.about-hero__title {
  will-change:
    transform,
    opacity,
    filter;
}


/* =========================================================
   ABOUT HERO — ODOMETER
   ========================================================= */

.about-stat__number {
  display: inline-flex;
  align-items: baseline;

  overflow: hidden;

  white-space: nowrap;

  font-variant-numeric: tabular-nums;
}

.about-stat__suffix {
  display: inline-block;

  margin-left: -0.025em;

  line-height: 1;
  letter-spacing: -0.045em;
}

/* =========================================================
   ABOUT INTRO — MOTION PERFORMANCE
   ========================================================= */

.about-intro__title,
.about-intro-value,
.about-intro-value__icon,
.about-intro__copy p,
.about-intro__button {
  will-change:
    transform,
    opacity;
}

.about-intro__title {
  will-change:
    transform,
    opacity,
    filter;
}

/* =========================================================
   ABOUT PURPOSE — MOTION PERFORMANCE
   ========================================================= */

.about-purpose__title,
.about-purpose__vision,
.about-purpose__mission li {
  will-change:
    transform,
    opacity;
}

.about-purpose__title {
  will-change:
    transform,
    opacity,
    filter;
}

/* =========================================================
   LEADERSHIP — MOTION PERFORMANCE
   ========================================================= */

.about-leadership__title,
.about-leadership__next,
.leadership-card,
.leadership-card__image,
.leadership-card__active-content,
.leadership-card__collapsed-content {
  will-change:
    transform,
    opacity;
}

.about-leadership__title {
  will-change:
    transform,
    opacity,
    filter;
}