/* Homepage / NXT GEN PROJECT THINKING.
 * A short, scroll-triggered story: discover -> build -> improve -> outcome.
 * Scoped to the existing editorial illustration; the live content and layout stay intact.
 */
@media (prefers-reduced-motion: no-preference) {
  body.home .ngh #experience .nghd-process__windowbar {
    position: relative;
    isolation: isolate;
  }

  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__windowbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #84c041, #b5e66a 72%, #e3f3d5);
    transform-origin: left;
    animation: ngpt-progress 7.2s linear infinite;
    pointer-events: none;
  }

  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node {
    position: relative;
    isolation: isolate;
    transition: none;
    backface-visibility: hidden;
  }

  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node:nth-child(1) {
    animation: ngpt-discover 7.2s ease-in-out infinite;
  }

  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node:nth-child(3) {
    animation: ngpt-build 7.2s ease-in-out infinite;
  }

  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-node:nth-child(5) {
    animation: ngpt-improve 7.2s ease-in-out infinite;
  }

  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-arrow:nth-child(2) {
    animation: ngpt-first-arrow 7.2s ease-in-out infinite;
  }
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-arrow:nth-child(4) {
    animation: ngpt-second-arrow 7.2s ease-in-out infinite;
  }

  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__dots i:nth-child(1) {
    animation: ngpt-dot-one 7.2s linear infinite;
  }
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__dots i:nth-child(2) {
    animation: ngpt-dot-two 7.2s linear infinite;
  }
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__dots i:nth-child(3) {
    animation: ngpt-dot-three 7.2s linear infinite;
  }
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__windowmark {
    animation: ngpt-mark 7.2s ease-in-out infinite;
    transform-origin: center;
  }

  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__outcome {
    animation: ngpt-outcome 7.2s ease-in-out infinite;
  }
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__outcome-icon {
    animation: ngpt-check 7.2s ease-in-out infinite;
  }

  /* Consistent active beat, with a pause to read every phase. */
  @keyframes ngpt-discover {
    0%, 4%, 29%, 100% { transform: translateY(0); border-color: #555; box-shadow: none; }
    8%, 23% { transform: translateY(-3px); border-color: #b5e66a; box-shadow: 0 0 0 1px #b5e66a66, 0 10px 20px #84c04124; }
  }
  @keyframes ngpt-build {
    0%, 30%, 56%, 100% { transform: translateY(0); box-shadow: none; }
    35%, 50% { transform: translateY(-3px); box-shadow: 0 0 0 2px #e3f3d5, 0 0 20px #b5e66a55; }
  }
  @keyframes ngpt-improve {
    0%, 57%, 83%, 100% { transform: translateY(0); border-color: #555; box-shadow: none; }
    62%, 77% { transform: translateY(-3px); border-color: #b5e66a; box-shadow: 0 0 0 1px #b5e66a66, 0 10px 20px #84c04124; }
  }
  @keyframes ngpt-first-arrow {
    0%, 20%, 33%, 100% { opacity: .48; transform: translateX(0); color: #a6d66b; }
    24%, 28% { opacity: 1; transform: translateX(5px); color: #f7fff0; }
  }
  @keyframes ngpt-second-arrow {
    0%, 49%, 61%, 100% { opacity: .48; transform: translateX(0); color: #a6d66b; }
    53%, 57% { opacity: 1; transform: translateX(5px); color: #f7fff0; }
  }
  @keyframes ngpt-outcome {
    0%, 75%, 99%, 100% { border-color: #ffffff2d; background: #ffffff0c; }
    82%, 95% { border-color: #84c041a0; background: #84c0411a; }
  }
  @keyframes ngpt-check {
    0%, 76%, 99%, 100% { transform: scale(1); box-shadow: none; }
    83% { transform: scale(1.17); box-shadow: 0 0 0 7px #84c04122; }
    91% { transform: scale(1); box-shadow: 0 0 0 1px #84c0410a; }
  }
  @keyframes ngpt-progress {
    0% { transform: scaleX(0); opacity: 1; }
    94% { transform: scaleX(1); opacity: 1; }
    99%, 100% { transform: scaleX(1); opacity: 0; }
  }
  @keyframes ngpt-dot-one {
    0%, 29%, 100% { background: #84c041; }
    30%, 98% { background: #c9c9c9; }
  }
  @keyframes ngpt-dot-two {
    0%, 31%, 55%, 100% { background: #c9c9c9; }
    35%, 51% { background: #b5e66a; }
  }
  @keyframes ngpt-dot-three {
    0%, 59%, 84%, 100% { background: #c9c9c9; }
    64%, 79% { background: #b5e66a; }
  }
  @keyframes ngpt-mark {
    0%, 76%, 95%, 100% { transform: rotate(0deg); opacity: .78; }
    84% { transform: rotate(45deg); opacity: 1; }
  }
}

/* Prevent the animated arrows from widening the grid on narrow devices. */
body.home .ngh #experience .nghd-process__path {
  min-width: 0;
}
body.home .ngh #experience .nghd-process__path-arrow {
  will-change: transform;
}
/* The mobile journey is vertical, so arrows retain their downward orientation. */
@media (max-width: 600px) {
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-arrow:nth-child(2) {
    animation-name: ngpt-first-arrow-mobile;
  }
  body.home .ngh #experience .nghd-process__visual.ngpt-active .nghd-process__path-arrow:nth-child(4) {
    animation-name: ngpt-second-arrow-mobile;
  }
  @keyframes ngpt-first-arrow-mobile {
    0%, 20%, 33%, 100% { opacity: .48; transform: rotate(90deg) translateX(0); color: #a6d66b; }
    24%, 28% { opacity: 1; transform: rotate(90deg) translateX(4px); color: #f7fff0; }
  }
  @keyframes ngpt-second-arrow-mobile {
    0%, 49%, 61%, 100% { opacity: .48; transform: rotate(90deg) translateX(0); color: #a6d66b; }
    53%, 57% { opacity: 1; transform: rotate(90deg) translateX(4px); color: #f7fff0; }
  }
}