/* NXT GEN WEB • Cinematic motion system v2 (2026-11-08)
   Intentionally visible, accessible, progressive enhancement.
   Uses independent translate/scale so existing transform-driven hero demos keep running. */

@media (prefers-reduced-motion: no-preference) {
  /* Headline remains full size and crisp while rising into its final baseline. */
  @keyframes ngw-motion-hero-in {
    0%   { opacity: 0; translate: 0 38px; }
    65%  { opacity: 1; }
    100% { opacity: 1; translate: 0 0; }
  }
  @keyframes ngw-motion-nav-in {
    0%   { opacity: 0; translate: 0 -24px; }
    100% { opacity: 1; translate: 0 0; }
  }
  @keyframes ngw-motion-brand-float {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -5px; }
  }
  @keyframes ngw-motion-cta-sweep {
    0%, 14% { translate: -100% 0; opacity: 0; }
    19% { opacity: 1; }
    33%,100% { translate: 670% 0; opacity: 0; }
  }
  @keyframes ngw-motion-section-line {
    0% { transform: scaleX(0); opacity: .3; }
    100% { transform: scaleX(1); opacity: 1; }
  }
  @keyframes ngw-motion-scroll-nudge {
    0%,100% { translate: 0 0; opacity: .6; }
    50% { translate: 0 5px; opacity: 1; }
  }
  @keyframes ngw-motion-page-progress {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.32); }
    100% { filter: brightness(1); }
  }

  /* Header and hero entrance: occurs every page navigation, even without scrolling. */
  html.ngw-motion-on .ngc-brand {
    animation: ngw-motion-nav-in 900ms both cubic-bezier(.18,.9,.27,1);
  }
  html.ngw-motion-on .ngc-desktop-nav > a,
  html.ngw-motion-on .ngc-desktop-nav > details,
  html.ngw-motion-on .ngc-quote {
    animation: ngw-motion-nav-in 760ms both cubic-bezier(.18,.9,.27,1);
  }
  html.ngw-motion-on .ngc-desktop-nav > :nth-child(1) { animation-delay: 120ms; }
  html.ngw-motion-on .ngc-desktop-nav > :nth-child(2) { animation-delay: 200ms; }
  html.ngw-motion-on .ngc-desktop-nav > :nth-child(3) { animation-delay: 280ms; }
  html.ngw-motion-on .ngc-desktop-nav > :nth-child(4) { animation-delay: 360ms; }
  html.ngw-motion-on .ngc-quote { animation-delay: 410ms; }

  /* Keyframe-based first-screen reveals are unmistakable on reload. */
  html.ngw-motion-on .ngw-motion-target.ngw-motion-hero.ngw-go {
    animation: ngw-motion-hero-in 1020ms both cubic-bezier(.16,1,.3,1);
    animation-delay: var(--ngw-motion-delay, 0ms);
  }
  /* Movement no longer shrinks or blurs text / cards during reveal. */
  html.ngw-motion-on .ngw-motion-target {
    opacity: 0;
    translate: 0 28px;
    transition:
      opacity 620ms cubic-bezier(.2,.85,.24,1),
      translate 790ms cubic-bezier(.14,1,.24,1);
    transition-delay: var(--ngw-motion-delay, 0ms);
  }
  html.ngw-motion-on .ngw-motion-target.ngw-motion-hero {
    /* The hero uses its own entrance keyframes instead of a transition. */
    transition: none;
  }
  /* City illustrations remain permanently visible; only their internal SVG parts animate. */
  html.ngw-motion-on .ngcity .nght-hero-visual,
  html.ngw-motion-on .ngcity .ngcity-hero-visual,
  html.ngw-motion-on .ngcity .nght-hero-visual.ngw-motion-target,
  html.ngw-motion-on .ngcity .ngcity-hero-visual.ngw-motion-target {
    opacity: 1 !important;
    visibility: visible !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* Direction comes from fade timing, not sideways offsets that make rows crooked. */
  html.ngw-motion-on .ngw-motion-target.ngw-motion-left,
  html.ngw-motion-on .ngw-motion-target.ngw-motion-right,
  html.ngw-motion-on .ngw-motion-target.ngw-motion-visual {
    translate: 0 26px;
  }
  html.ngw-motion-on .ngw-motion-target.ngw-motion-card { translate: 0 32px; }
  html.ngw-motion-on .ngw-motion-target.ngw-motion-heading { translate: 0 24px; }
  html.ngw-motion-on .ngw-motion-target.ngw-go:not(.ngw-motion-hero) {
    opacity: 1;
    translate: 0 0;
  }

  /* Do not inject decorative bars into headings.
     They change intrinsic heading heights and throw adjacent columns out of alignment.
     Page-specific heading artwork and accents remain unchanged. */

  /* Existing SEO/PPC/contact reveals use the same level vertical entrance. */
  html.ngw-motion-on .ngm.ngm-motion [data-ngm-reveal] {
    opacity: 0;
    transform: none;
    translate: 0 26px;
    transition: opacity 620ms cubic-bezier(.2,.85,.24,1),
                translate 790ms cubic-bezier(.14,1,.24,1);
  }
  html.ngw-motion-on .ngm.ngm-motion [data-ngm-reveal].ngm-visible {
    opacity: 1;
    transform: none;
    translate: 0 0;
  }

  /* Brand names rise in once (from their existing .ngw-motion-card classes),
     then stay aligned to a single baseline. No staggered perpetual bobbing. */
  html.ngw-motion-on .ngh-brands__names > span {
    display: inline-block;
  }

  /* A visible but non-blocking moving highlight on primary calls to action. */
  html.ngw-motion-on a.ngw-motion-cta,
  html.ngw-motion-on button.ngw-motion-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  html.ngw-motion-on .ngw-motion-cta .ngw-motion-sheen {
    display: block;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    top: -95%;
    bottom: -95%;
    left: -25%;
    width: 38%;
    rotate: 18deg;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
    animation: ngw-motion-cta-sweep 5.8s ease-in-out infinite;
    opacity: 0;
  }
  html.ngw-motion-on .ngw-motion-cta:hover .ngw-motion-sheen {
    animation-duration: 2s;
  }

  html.ngw-motion-on a.ngw-motion-card.ngw-go:hover,
  html.ngw-motion-on a.ngw-motion-card.ngw-go:focus-visible,
  html.ngw-motion-on article.ngw-motion-card.ngw-go:hover {
    translate: 0 -4px;
    transition-delay: 0ms;
  }

  /* A slim moving top bar communicates scroll position across every page. */
  .ngw-motion-progress {
    position: fixed;
    z-index: 2147482000;
    left: 0;
    top: 0;
    height: 4px;
    width: var(--ngw-scroll-progress, 0%);
    pointer-events: none;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg,#84c041 0%,#a6d66b 70%,#d8f7a8 100%);
    box-shadow: 0 0 13px rgba(132,192,65,.36);
    transition: width 120ms linear;
    animation: ngw-motion-page-progress 3.4s infinite linear;
  }
  /* Draft-only preview control: replay the effects to verify changes. */
  .ngw-motion-replay {
    appearance: none;
    position: fixed;
    z-index: 2147482500;
    right: 18px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border-radius: 999px;
    border: 1px solid #a6d66b;
    color: #fff;
    background: #202720;
    box-shadow: 0 12px 34px rgba(0,0,0,.28);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: .01em;
  }
  .ngw-motion-replay:hover { background: #33442e; }
  .ngw-motion-replay:focus-visible { outline: 3px solid #84c041; outline-offset: 3px; }
  .ngw-motion-replay__icon {
    font-size: 20px;
    line-height: .8;
    animation: ngw-motion-scroll-nudge 2.4s infinite ease-in-out;
  }

  @media (max-width: 767px) {
    html.ngw-motion-on .ngw-motion-target { translate: 0 18px; transition-duration: 540ms, 670ms; }
    html.ngw-motion-on .ngw-motion-target.ngw-motion-card { translate: 0 22px; }
    html.ngw-motion-on .ngw-motion-target.ngw-motion-visual,
    html.ngw-motion-on .ngw-motion-target.ngw-motion-right,
    html.ngw-motion-on .ngw-motion-target.ngw-motion-left { translate: 0 18px; }
    html.ngw-motion-on .ngw-motion-target.ngw-motion-hero.ngw-go { animation-duration: 740ms; }
    /* Preview replay button overlaps the live chat bubble on narrow phones. */
    .ngw-motion-replay { display: none !important; }
  }
}
/* No hidden content or continuous movement for reduced-motion visitors. */
@media (prefers-reduced-motion: reduce) {
  html.ngw-motion-on .ngw-motion-target { opacity: 1!important; translate: none!important; scale: 1!important; filter: none!important; animation: none!important; transition: none!important; }
  html.ngw-motion-on .ngc-brand,
  html.ngw-motion-on .ngc-desktop-nav > *,
  html.ngw-motion-on .ngc-quote,
  html.ngw-motion-on .ngh-brands__names > span,
  html.ngw-motion-on .ngw-motion-cta .ngw-motion-sheen { animation: none!important; }
  .ngw-motion-progress, .ngw-motion-replay { display: none!important; }
}