/* NXT GEN WEB | Phase pacing rather than fast-moving artwork.
 * Ambient effects use a gentler 1.10 playback rate; phase timelines are independent.
 * Progress bars finish exactly as JavaScript selects the following scene;
 * standalone CSS stories also change phases sooner.
 */

/* Homepage: 3.5-second chapters, filled bars synchronized to auto-advance. */
body.home .ngh .ngh-team-illustration { --ngt-duration: 3.5s; }

/* Four-service interactive heroes: 3.4 seconds per chapter. */
.ng4m .ng4m__step[aria-pressed=true] i::before {
  animation-duration: 3.4s;
}

/* Social channels: 3.5-second Instagram / Facebook / X previews. */
body.ngs-family #ngx-main .ngsm-stage__progress i {
  animation-duration: 3.5s;
}

/* Web-design interactive four-step visual: 3.5 seconds per phase. */
body.page-id-168 .ngw26-motion__progress > span {
  animation-duration: 3.5s;
}

/* Four independently animated service scenes and their four progress bars:
 * 10-second complete loop = 2.5 seconds for each chapter on screen.
 * Keep scene fades, search typing, editor, toast and progress in phase. */
.ncin .ncin__scene--one,
.ncin .ncin__scene--two,
.ncin .ncin__scene--three,
.ncin .ncin__scene--four,
.ncin .ncin__progress > i::before,
.ncin .ncin__typed,
.ncin .ncin__search-matches > div:first-child,
.ncin .ncin__workspace,
.ncin .ncin__editor-toast {
  animation-duration: 10s;
}

/* SEO visual: lead generation appears sooner within the entire story. */
.ngm-seo .nseo-motion__typed,
.ngm-seo .nseo-motion__result,
.ngm-seo .nseo-motion__website,
.ngm-seo .nseo-motion__lead {
  animation-duration: 8s;
}

/* Web design/development graphic: advance the four visual chapters
 * in less than 10 seconds for a complete loop. */
body.page-id-168 .ngw27-motion__browser,
body.page-id-168 .ngw27-motion__art-mark,
body.page-id-168 .ngw27-motion__palette,
body.page-id-168 .ngw27-motion__connector path,
body.page-id-168 .ngw27-motion__editor,
body.page-id-168 .ngw27-motion__code-row,
body.page-id-168 .ngw27-motion__phone,
body.page-id-168 .ngw27-motion__ready,
body.page-id-168 .ngw27-motion__spark,
body.page-id-168 .ngw27-motion__steps span i {
  animation-duration: 10s;
}
body.page-id-168 .ngw27-motion__steps span:nth-of-type(2) i { animation-delay: 2s; }
body.page-id-168 .ngw27-motion__steps span:nth-of-type(3) i { animation-delay: 4s; }
body.page-id-168 .ngw27-motion__steps span:nth-of-type(4) i { animation-delay: 6s; }

/* Other four-scene service heroes: quicker milestone changes,
 * without forcing faster floating/orbiting ambient details. */
.ngwow .ngwow__search-result,
.ngwow .ngwow__browser,
.ngwow .ngwow__step,
.ngwow .ngwow__server-bars i {
  animation-duration: 7s;
}

/* Show late homepage SVG outcomes within the shorter 3.5 s chapter.
 * Ambient motion remains smooth, but the key result is not skipped. */
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=plan] .ngt-goal-ring {
  animation-delay: 1.9s;
}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=design] .ngt-click {
  animation-delay: 2.0s;
}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=build] .ngt-review-check {
  animation-delay: 2.0s;
}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=promote] .ngt-inquiry {
  animation-delay: 1.9s;
}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=promote] .ngt-inquiry-dot {
  animation-delay: 2.3s;
}
body.home .ngh .ngh-team-illustration.is-stage-playing[data-stage=promote] .ngt-growth-spark {
  animation-delay: 2.1s;
}
/* Google Business Profile content studio: three tasks move in a short,
 * synchronized 6-second workflow instead of a long progress sweep. */
.ngsx-ops-stage .ngsx-ops-task,
.ngsx-ops-stage .ngsx-ops-workspace__progress-bar span {
  animation-duration: 6.6s;
}
.ngsx-ops-stage .ngsx-ops-task--two { animation-delay: -4.4s; }
.ngsx-ops-stage .ngsx-ops-task--three { animation-delay: -2.2s; }

/* The stylesheet does not override existing reduced-motion or pause rules. */