/*
 * Citil Investment — process rail entrance animation v249
 * Isolated layer: existing hover / mouseout rules remain in style.css.
 */

.investment-process-v138__rail-runner{
  display:none;
  pointer-events:none;
}

@media (min-width:1180px){
  .investment-page-v142 .investment-process-v138{
    --investment-process-node-size:78px;
  }

  /* Keep the four-step desktop rail across every desktop width. */
  .investment-page-v142 .investment-process-v138__steps{
    position:relative;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:start;
    gap:clamp(22px,2.2vw,38px)!important;
    width:min(100% - 96px,1560px);
    max-width:none;
    margin:0 auto;
    isolation:isolate;
    --investment-rail-start:39px;
    --investment-rail-length:calc(100% - 78px);
    --investment-process-progress:0px;
  }

  /* Quiet base rail. JS measures the exact first/last node centers. */
  .investment-page-v142 .investment-process-v138__steps::before{
    content:"";
    display:block!important;
    position:absolute;
    z-index:0;
    top:calc((var(--investment-process-node-size) / 2) - 1px);
    left:var(--investment-rail-start);
    right:auto;
    width:var(--investment-rail-length);
    height:2px;
    border:0;
    background:rgba(129,90,255,.20);
    transform:none;
  }

  /* Animated rail fill. */
  .investment-page-v142 .investment-process-v138__steps::after{
    content:"";
    position:absolute;
    z-index:1;
    top:calc((var(--investment-process-node-size) / 2) - 1px);
    left:var(--investment-rail-start);
    width:var(--investment-process-progress);
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,#815AFF 0%,#4D3699 100%);
    box-shadow:0 0 12px rgba(129,90,255,.22);
    transition:width .48s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
  }

  .investment-page-v142 .investment-process-v138__rail-runner{
    position:absolute;
    z-index:3;
    display:block;
    top:calc(var(--investment-process-node-size) / 2);
    left:calc(var(--investment-rail-start) + var(--investment-process-progress));
    width:14px;
    height:14px;
    border:3px solid #815AFF;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 5px rgba(129,90,255,.12),0 5px 14px rgba(77,54,153,.24);
    opacity:0;
    transform:translate(-50%,-50%);
    transition:left .48s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
  }

  .investment-page-v142 .investment-process-v138.is-process-running .investment-process-v138__rail-runner{
    opacity:1;
  }

  .investment-page-v142 .investment-process-v138.is-process-complete .investment-process-v138__rail-runner{
    opacity:0;
  }

  .investment-page-v142 .investment-process-step-v138{
    z-index:4;
  }

  /* Only JS-armed sections hide the number nodes before their turn. */
  .investment-page-v142 .investment-process-v138.is-process-armed .investment-process-step-v138__number{
    opacity:0;
    clip-path:circle(0 at 50% 50%);
    filter:blur(7px);
    transition:
      transform .44s var(--investment-ease-out),
      color .34s var(--investment-ease),
      box-shadow .34s var(--investment-ease),
      opacity .28s ease,
      clip-path .46s cubic-bezier(.22,.61,.36,1),
      filter .38s ease;
  }

  .investment-page-v142 .investment-process-v138.is-process-armed .investment-process-step-v138.is-process-lit .investment-process-step-v138__number{
    opacity:1;
    clip-path:circle(76% at 50% 50%);
    filter:blur(0);
  }
}

@media (min-width:1180px) and (max-width:1439px){
  .investment-page-v142 .investment-process-v138{
    --investment-process-node-size:64px;
  }
  .investment-page-v142 .investment-process-v138__steps{
    width:min(100% - 64px,1280px);
    --investment-rail-start:32px;
    --investment-rail-length:calc(100% - 64px);
  }
}

@media (prefers-reduced-motion:reduce){
  .investment-page-v142 .investment-process-v138__steps::after,
  .investment-page-v142 .investment-process-v138__rail-runner,
  .investment-page-v142 .investment-process-step-v138__number{
    transition:none!important;
  }
}