/* =========================================================
   N WORKS v5.6
   Section-title motion layer
   ========================================================= */

.motion-ready .js-section-title .section-label,
.motion-ready .js-section-title h2,
.motion-ready .js-section-title > p:last-child {
  will-change: opacity, transform, filter, clip-path;
}

/* PROBLEM: left slide */
.motion-ready .title-motion-left:not(.is-motion-visible) .section-label {
  opacity: 0;
  transform: translate3d(-44px, 0, 0);
}
.motion-ready .title-motion-left:not(.is-motion-visible) h2 {
  opacity: 0;
  transform: translate3d(-92px, 0, 0) rotate(-2deg);
}
.motion-ready .title-motion-left:not(.is-motion-visible) > p:last-child {
  opacity: 0;
  transform: translate3d(-38px, 0, 0);
}
.title-motion-left .section-label {
  transition: opacity .46s ease, transform .62s cubic-bezier(.22,1,.36,1);
}
.title-motion-left h2 {
  transition: opacity .62s ease, transform .88s cubic-bezier(.22,1,.36,1) .06s;
}
.title-motion-left > p:last-child {
  transition: opacity .54s ease .18s, transform .72s cubic-bezier(.22,1,.36,1) .18s;
}

/* WHAT WE DO: rise + zoom */
.motion-ready .title-motion-rise:not(.is-motion-visible) .section-label {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}
.motion-ready .title-motion-rise:not(.is-motion-visible) h2 {
  opacity: 0;
  transform: translate3d(0, 64px, 0) scale(.86);
  filter: blur(7px);
}
.motion-ready .title-motion-rise:not(.is-motion-visible) > p:last-child {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
.title-motion-rise .section-label {
  transition: opacity .42s ease, transform .58s cubic-bezier(.22,1,.36,1);
}
.title-motion-rise h2 {
  transition: opacity .68s ease, transform .96s cubic-bezier(.22,1,.36,1) .05s, filter .72s ease .05s;
}
.title-motion-rise > p:last-child {
  transition: opacity .55s ease .2s, transform .72s cubic-bezier(.22,1,.36,1) .2s;
}

/* TOOLS: right slide + skew */
.motion-ready .title-motion-right:not(.is-motion-visible) .section-label {
  opacity: 0;
  transform: translate3d(56px, 0, 0);
}
.motion-ready .title-motion-right:not(.is-motion-visible) h2 {
  opacity: 0;
  transform: translate3d(105px, 0, 0) skewX(-8deg);
}
.motion-ready .title-motion-right:not(.is-motion-visible) > p:last-child {
  opacity: 0;
  transform: translate3d(48px, 0, 0);
}
.title-motion-right .section-label {
  transition: opacity .44s ease, transform .58s cubic-bezier(.22,1,.36,1);
}
.title-motion-right h2 {
  transition: opacity .62s ease, transform .9s cubic-bezier(.22,1,.36,1) .06s;
}
.title-motion-right > p:last-child {
  transition: opacity .52s ease .18s, transform .7s cubic-bezier(.22,1,.36,1) .18s;
}

/* N WORKS STYLE: wipe */
.title-motion-wipe {
  position: relative;
}
.title-motion-wipe::after {
  content: "";
  display: block;
  width: 0;
  height: 7px;
  margin-top: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3498DB, #1ABC9C, #F1C40F, #9B59B6);
  transition: width .9s cubic-bezier(.22,1,.36,1) .18s;
}
.motion-ready .title-motion-wipe:not(.is-motion-visible) .section-label {
  opacity: 0;
  transform: translate3d(0,-18px,0);
}
.motion-ready .title-motion-wipe:not(.is-motion-visible) h2 {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translate3d(0,16px,0);
}
.title-motion-wipe .section-label {
  transition: opacity .45s ease, transform .62s cubic-bezier(.22,1,.36,1);
}
.title-motion-wipe h2 {
  transition: opacity .55s ease, clip-path .98s cubic-bezier(.22,1,.36,1) .05s, transform .8s cubic-bezier(.22,1,.36,1) .05s;
}
.title-motion-wipe.is-motion-visible::after {
  width: 82%;
}

/* Q&A: tilt settle */
.motion-ready .title-motion-tilt:not(.is-motion-visible) .section-label {
  opacity: 0;
  transform: translate3d(-34px,-18px,0) rotate(-9deg);
}
.motion-ready .title-motion-tilt:not(.is-motion-visible) h2 {
  opacity: 0;
  transform: translate3d(0,42px,0) rotate(3deg);
}
.motion-ready .title-motion-tilt:not(.is-motion-visible) > p:last-child {
  opacity: 0;
  transform: translate3d(0,24px,0);
}
.title-motion-tilt .section-label,
.title-motion-tilt h2,
.title-motion-tilt > p:last-child {
  transition-property: opacity, transform;
  transition-timing-function: ease, cubic-bezier(.22,1,.36,1);
}
.title-motion-tilt .section-label { transition-duration: .5s, .7s; }
.title-motion-tilt h2 { transition-duration: .62s, .86s; transition-delay: .06s; }
.title-motion-tilt > p:last-child { transition-duration: .5s, .72s; transition-delay: .18s; }

/* CONTACT: drop + blur */
.motion-ready .title-motion-drop:not(.is-motion-visible) .section-label {
  opacity: 0;
  transform: translate3d(0,-28px,0);
}
.motion-ready .title-motion-drop:not(.is-motion-visible) h2 {
  opacity: 0;
  transform: translate3d(0,-62px,0) scale(.94);
  filter: blur(7px);
}
.motion-ready .title-motion-drop:not(.is-motion-visible) > p:last-child {
  opacity: 0;
  transform: translate3d(0,30px,0);
}
.title-motion-drop .section-label {
  transition: opacity .45s ease, transform .62s cubic-bezier(.22,1,.36,1);
}
.title-motion-drop h2 {
  transition: opacity .64s ease, transform .9s cubic-bezier(.22,1,.36,1) .05s, filter .7s ease .05s;
}
.title-motion-drop > p:last-child {
  transition: opacity .52s ease .18s, transform .72s cubic-bezier(.22,1,.36,1) .18s;
}

/* Visible state */
.js-section-title.is-motion-visible .section-label,
.js-section-title.is-motion-visible h2,
.js-section-title.is-motion-visible > p:last-child {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* COMPANY: split entrance */
.motion-ready .js-company-motion {
  will-change: opacity, transform;
}
.motion-ready .company-motion-left:not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(-72px,0,0) rotate(-2deg);
}
.motion-ready .company-motion-right:not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(78px,0,0);
}
.company-motion-left,
.company-motion-right {
  transition: opacity .62s ease, transform .88s cubic-bezier(.22,1,.36,1);
}
.company-motion-right {
  transition-delay: .09s;
}
.js-company-motion.is-motion-visible {
  opacity: 1;
  transform: none;
}

/* Extra scroll depth. Existing top.js supplies these variables. */
.problem-grid {
  translate: 0 var(--motion-y-small-neg, 0px);
}
.service-scroller {
  translate: 0 var(--motion-y-small, 0px);
}
.tools-section .project-list {
  translate: 0 var(--motion-y-small-neg, 0px);
}
.faq-list {
  translate: 0 var(--motion-y-small-neg, 0px);
}
.contact-form {
  translate: 0 var(--motion-y-small, 0px);
}
.company-grid {
  translate: 0 var(--motion-y-small-neg, 0px);
}

/* Small secondary fade/parallax feel */
.problem-grid,
.service-scroller,
.tools-section .project-list,
.faq-list,
.contact-form,
.company-grid {
  will-change: translate;
}

/* Mobile: same patterns, shorter travel */
@media (max-width: 768px) {
  .motion-ready .title-motion-left:not(.is-motion-visible) h2 {
    transform: translate3d(-42px,0,0);
  }
  .motion-ready .title-motion-rise:not(.is-motion-visible) h2 {
    transform: translate3d(0,38px,0) scale(.92);
  }
  .motion-ready .title-motion-right:not(.is-motion-visible) h2 {
    transform: translate3d(48px,0,0) skewX(-4deg);
  }
  .motion-ready .title-motion-drop:not(.is-motion-visible) h2 {
    transform: translate3d(0,-38px,0) scale(.97);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .motion-ready .js-section-title .section-label,
  .motion-ready .js-section-title h2,
  .motion-ready .js-section-title > p:last-child,
  .motion-ready .js-company-motion {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .title-motion-wipe::after {
    width: 82% !important;
    transition: none !important;
  }
  .problem-grid,
  .service-scroller,
  .tools-section .project-list,
  .faq-list,
  .contact-form,
  .company-grid {
    translate: none !important;
  }
}