:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion-opening-pending::before {
  position: fixed;
  z-index: 999;
  inset: 0;
  background: #080907;
  content: "";
  pointer-events: none;
}

html.motion-opening-pending.motion-director-mounted::before {
  opacity: 0;
}

html.motion-opening-pending,
html.motion-opening-pending body {
  overflow: hidden;
}

.opening-sequence {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow: hidden;
  color: #f2f0e9;
  pointer-events: all;
}

.opening-sequence__gate {
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  height: 50.1%;
  overflow: hidden;
  background:
    linear-gradient(rgba(254, 122, 49, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(254, 122, 49, 0.045) 1px, transparent 1px),
    #080907;
  background-size: 72px 72px;
  will-change: transform;
}

.opening-sequence__gate--top {
  top: 0;
  border-bottom: 1px solid rgba(254, 122, 49, 0.35);
}

.opening-sequence__gate--bottom {
  bottom: 0;
}

.opening-sequence__content {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  width: min(100% - 64px, 1700px);
  margin-inline: auto;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding-block: 44px;
  pointer-events: none;
}

.opening-sequence__brand-wrap {
  align-self: center;
  grid-column: 1 / -1;
  overflow: hidden;
}

.opening-sequence__brand {
  display: block;
  width: fit-content;
  font-size: clamp(72px, 12vw, 210px);
  font-weight: 650;
  line-height: 0.78;
  letter-spacing: -0.075em;
  transform-origin: left center;
}

.opening-sequence__brand i {
  color: #fe7a31;
  font-style: normal;
}

.opening-sequence__meta {
  align-self: end;
  color: rgba(242, 240, 233, 0.62);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.opening-sequence__counter {
  align-self: end;
  color: #fe7a31;
  font-size: clamp(28px, 4vw, 64px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
}

.opening-sequence__line {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fe7a31 15%, #fe7a31 85%, transparent);
  box-shadow: 0 0 20px rgba(254, 122, 49, 0.42);
  transform: scaleX(0);
  transform-origin: left;
}

.motion-opening-pending .site-header,
.motion-opening-pending .hero__eyebrow,
.motion-opening-pending .hero__role,
.motion-opening-pending .hero__title-script,
.motion-opening-pending .hero__support,
.motion-opening-pending .hero__brand-tile {
  opacity: 0;
}

.motion-opening-pending .hero__title-accent,
.motion-opening-pending .hero__title-main {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(90px) scaleX(0.74);
  transform-origin: left bottom;
}

.motion-opening-pending .hero__title-accent .split-text__char,
.motion-opening-pending .hero__title-main .split-text__char,
.motion-opening-pending .hero__title-accent .split-preview-char,
.motion-opening-pending .hero__title-main .split-preview-char {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.motion-opening-pending .hero__video {
  transform: scale(1.12);
}

.motion-directed .section-heading {
  position: relative;
  isolation: isolate;
}

.motion-section-word {
  position: absolute;
  z-index: -1;
  top: -0.48em;
  left: -0.04em;
  max-width: 100%;
  overflow: hidden;
  color: transparent;
  font-size: clamp(72px, 11vw, 190px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.055em;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(254, 122, 49, 0.17);
}

@media (min-width: 761px) {
  .content-rays__sections > .experience.section-pad {
    padding-top: 131px !important;
  }

  .content-rays__sections > .work.section-pad {
    padding-top: 100px !important;
  }

  .content-rays__sections > .strengths.section-pad {
    padding-top: 131px !important;
  }
}

.motion-directed [data-motion-heading="pending"] h2,
.motion-directed [data-motion-heading="pending"] .section-heading__meta,
.motion-directed [data-motion-heading="pending"] > p {
  opacity: 0;
}

.motion-directed [data-motion-group="pending"] .work-group__heading,
.motion-directed [data-motion-group="pending"] .project-cell,
.motion-directed [data-motion-profile="pending"] .profile-copy,
.motion-directed [data-motion-profile="pending"] .profile-lanyard,
.motion-directed [data-motion-list="pending"] article,
.motion-directed [data-motion-strengths="pending"] article,
.motion-directed [data-motion-gallery="pending"] {
  opacity: 0;
}

.motion-directed [data-motion-strengths="done"] article {
  opacity: 1 !important;
  clip-path: none !important;
}

.motion-directed [data-motion-list="done"] article {
  overflow: visible !important;
  opacity: 1 !important;
  clip-path: none !important;
}

.motion-directed .project-card__media {
  --motion-parallax-y: 0px;
}

.motion-directed .project-card__media img {
  transform: translate3d(
      var(--shift-x, 0px),
      calc(var(--shift-y, 0px) + var(--motion-parallax-y, 0px) + var(--cover-offset-y, 0px)),
      0
    )
    scale(1.045) !important;
}

@media (hover: hover) {
  .motion-directed .project-card:hover .project-card__media img {
    transform: translate3d(
        var(--shift-x, 0px),
        calc(var(--shift-y, 0px) + var(--motion-parallax-y, 0px) + var(--cover-offset-y, 0px)),
        0
      )
      scale(1.1) !important;
  }
}

.motion-directed .project-card__media,
.motion-directed .project-cell,
.motion-directed .section-heading h2,
.motion-directed .work-group__heading,
.motion-directed .strength-grid article {
  backface-visibility: hidden;
}

@media (max-width: 760px) {
  .content-rays__sections > .experience.section-pad,
  .content-rays__sections > .strengths.section-pad {
    padding-top: 135px !important;
  }

  .content-rays__sections > .work.section-pad {
    padding-top: 37px !important;
  }

  .opening-sequence__content {
    width: calc(100% - 40px);
    padding-block: 28px;
  }

  .opening-sequence__brand {
    font-size: clamp(64px, 24vw, 112px);
  }

  .motion-section-word {
    top: -0.2em;
    font-size: clamp(58px, 20vw, 104px);
  }

}

@media (prefers-reduced-motion: reduce) {
  html.motion-opening-pending::before,
  .opening-sequence {
    display: none !important;
  }

  html.motion-opening-pending,
  html.motion-opening-pending body {
    overflow: auto;
  }

  .motion-opening-pending .site-header,
  .motion-opening-pending .hero__eyebrow,
  .motion-opening-pending .hero__role,
  .motion-opening-pending .hero__title-script,
  .motion-opening-pending .hero__support,
  .motion-opening-pending .hero__brand-tile,
  .motion-opening-pending .hero__title-accent,
  .motion-opening-pending .hero__title-main,
  .motion-directed [data-motion-heading="pending"] h2,
  .motion-directed [data-motion-heading="pending"] .section-heading__meta,
  .motion-directed [data-motion-heading="pending"] > p,
  .motion-directed [data-motion-group="pending"] .work-group__heading,
  .motion-directed [data-motion-group="pending"] .project-cell,
  .motion-directed [data-motion-profile="pending"] .profile-copy,
  .motion-directed [data-motion-profile="pending"] .profile-lanyard,
  .motion-directed [data-motion-list="pending"] article,
  .motion-directed [data-motion-strengths="pending"] article,
  .motion-directed [data-motion-gallery="pending"] {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }

  .motion-section-word {
    display: none;
  }
}