.studio-projects-hero { min-height: 88svh; }

.studio-project-nav { position: relative; }

.studio-project-nav__progress {
  position: absolute;
  inset: -1px 0 auto;
  z-index: 2;
  height: 2px;
  background: var(--studio-gold);
  pointer-events: none;
  transform: scaleX(.166667);
  transform-origin: left;
  transition: transform .5s var(--ease-in-out);
}

.studio-project.is-before { transform: translate3d(0, -3.5%, 0); }
.studio-project.is-after { transform: translate3d(0, 3.5%, 0); }
.studio-project.is-active { transform: translate3d(0, 0, 0); }

.studio-project__desktop,
.studio-project__mobile {
  opacity: 0;
  transform: translate3d(4%, 0, 0) scale(.98);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-in-out);
}

.studio-project.is-before .studio-project__desktop,
.studio-project.is-before .studio-project__mobile {
  transform: translate3d(-4%, 0, 0) scale(.98);
}

.studio-project.is-active .studio-project__desktop,
.studio-project.is-active .studio-project__mobile {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.studio-project__copy > * {
  opacity: 0;
  transform: translate3d(0, 1.1rem, 0);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}

.studio-project.is-active .studio-project__copy > * { opacity: 1; transform: translate3d(0, 0, 0); }
.studio-project.is-active .studio-project__copy > *:nth-child(2) { transition-delay: .08s; }
.studio-project.is-active .studio-project__copy > *:nth-child(3) { transition-delay: .16s; }
.studio-project.is-active .studio-project__copy > *:nth-child(4) { transition-delay: .24s; }

@media (max-width: 900px) {
  .studio-projects-hero { min-height: 84svh; }

  .studio-project,
  .studio-project.is-before,
  .studio-project.is-after,
  .studio-project.is-active { transform: none; }

  .studio-project__desktop,
  .studio-project__mobile,
  .studio-project.is-before .studio-project__desktop,
  .studio-project.is-before .studio-project__mobile,
  .studio-project.is-active .studio-project__desktop,
  .studio-project.is-active .studio-project__mobile,
  .studio-project__copy > *,
  .studio-project.is-active .studio-project__copy > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .studio-project__visual { min-height: min(58svh, 36rem); }
  .studio-project__copy { min-height: 23rem; gap: 1.35rem; }
}

@media (max-width: 620px) {
  .studio-projects-hero {
    min-height: 92svh;
    padding-bottom: 1.5rem;
  }

  .studio-projects-hero__main { padding-block: 3rem; }
  .studio-projects-hero h1 { font-size: clamp(4.65rem, 23vw, 6.6rem); }
  .studio-project__visual { min-height: 22rem; }
  .studio-project__desktop { inset: 8% 5% 16%; }
  .studio-project__copy { min-height: 21rem; gap: 1.15rem; }
  .studio-project__copy h3 { margin-block: .55rem .85rem; }
  .studio-project__services { gap: .4rem; }
  .studio-project__services span { padding: .45rem .52rem; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-project-nav__progress { transition: transform .2s ease; }
  .studio-project__desktop,
  .studio-project__mobile,
  .studio-project__copy > * { transition: opacity .2s ease; transform: none; }
}