/* NP Pulse Flow (Loop)
   Layout + pulse animation between two boxes.
*/

.np-pulse-flow{position:relative;width:100%;display:flex;justify-content:center;
  /* Preferred public variables */
  --np-pf-pulse-rgb: 180,120,255;
  --np-pf-pulse-duration: 1.6s;
  /* Backwards compatible internal variables used below */
  --np_pf_pulse_rgb: var(--np-pf-pulse-rgb);
  --np_pf_speed: var(--np-pf-pulse-duration);
}

/* The module markup includes an extra wrapper (.np-pf-row). If we don't set this
   to flex, the boxes will stack (block layout). */
.np-pf-row{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center;justify-content:center;gap:0}

.np-pf-shell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;

  /* Theme variables (set via inline CSS vars) */
  background: var(--np_pf_shell_bg, rgba(255,255,255,0.035));
  border: var(--np_pf_shell_border_w, 1px) solid var(--np_pf_shell_border_color, rgba(255,255,255,0.08));
  border-radius: var(--np_pf_shell_radius, 18px);
  backdrop-filter: blur(calc(var(--np_pf_shell_blur, 14) * 1px));

  box-shadow:
    0 18px 60px rgba(0,0,0, calc(var(--np_pf_shell_shadow_opacity, 55) / 100)),
    inset 0 1px 0 rgba(255,255,255,0.08);

  padding: 26px;
  overflow: hidden; /* keeps box glow inside the frame */
}


.np-pf-box{width:190px;height:170px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;overflow:hidden;flex:0 0 auto}

.np-pf-box-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}


/* Box style variables (set inline by the module) */
.np-pf-box.np-pf-left{
  background: var(--np_pf_left_bg, rgba(255,255,255,.03));
  border-color: var(--np_pf_left_border_color, rgba(255,255,255,.10));
  border-width: var(--np_pf_left_border_w, 1px);
  border-radius: calc(var(--np_pf_left_radius, 14) * 1px);
}
.np-pf-box.np-pf-right{
  background: var(--np_pf_right_bg, rgba(255,255,255,.03));
  border-color: var(--np_pf_right_border_color, rgba(255,255,255,.10));
  border-width: var(--np_pf_right_border_w, 1px);
  border-radius: calc(var(--np_pf_right_radius, 14) * 1px);
}

.np-pf-icon{width:54px;height:54px;object-fit:contain;display:block;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}

.np-pf-label{font-size:13px;line-height:1.2;color:rgba(255,255,255,.85)}

.np-pf-connector{position:relative;flex:1 1 auto;min-width:60px;height:48px;display:flex;align-items:center;justify-content:center;
  /* This padding makes the lines visually start/end right next to the boxes. */
  padding:0 calc(var(--np_pf_connector_padding, 10) * 1px)}

.np-pf-lines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;opacity:.85}

.np-pf-line{position:relative;display:block;height:2px;width:100%;border-radius:999px;background:var(--np-pf-line-color, rgba(255,255,255,.18));overflow:hidden}

/* Tail / flare behind the pulse dot (matches the Framer style more closely) */
.np-pf-line::before{content:"";position:absolute;left:0;top:50%;width:84px;height:8px;transform:translate(-95%,-50%);border-radius:999px;
  /* multiple layers: soft tail + tiny hot-spot at the front */
  background:
    radial-gradient(circle at 92% 50%, rgba(var(--np_pf_pulse_rgb,180,120,255),.95) 0%, rgba(var(--np_pf_pulse_rgb,180,120,255),.0) 55%),
    linear-gradient(90deg,
      rgba(var(--np_pf_pulse_rgb,180,120,255),0) 0%,
      rgba(var(--np_pf_pulse_rgb,180,120,255),.22) 30%,
      rgba(var(--np_pf_pulse_rgb,180,120,255),.55) 55%,
      rgba(var(--np_pf_pulse_rgb,180,120,255),.0) 100%);
  filter:blur(0.6px);
  opacity:0}

.np-pf-line::after{content:"";position:absolute;left:0;top:50%;width:38px;height:12px;border-radius:999px;transform:translate(-50%,-50%);
background:linear-gradient(90deg,transparent,rgba(var(--np_pf_pulse_rgb,180,120,255),.95),transparent);
box-shadow:0 0 18px rgba(var(--np_pf_pulse_rgb,180,120,255),.55),0 0 34px rgba(var(--np_pf_pulse_rgb,180,120,255),.35);
opacity:0}

/* JS toggles this animation by adding .is-running on the root */
.np-pulse-flow.is-running .np-pf-line::before,
.np-pulse-flow.is-running .np-pf-line::after{animation:np_pf_pulse var(--np_pf_speed,1.6s) linear infinite}

.np-pf-line[data-line="2"]::before,
.np-pf-line[data-line="2"]::after{animation-delay:calc(var(--np_pf_speed,1.6s) / 6)}
.np-pf-line[data-line="3"]::before,
.np-pf-line[data-line="3"]::after{animation-delay:calc(var(--np_pf_speed,1.6s) / 3)}

@keyframes np_pf_pulse{
  0%{left:0%;opacity:0}
  10%{opacity:1}
  78%{opacity:1}
  100%{left:100%;opacity:0}
}

/* Right side: multiple targets can cycle */
.np-pf-right .np-pf-targets{position:relative;width:100%;height:100%}

.np-pf-right .np-pf-target{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;transform:scale(.985);transition:opacity .35s ease,transform .35s ease}

.np-pf-right .np-pf-target.is-active{opacity:1;transform:scale(1)}


/* Hit effect when the pulse reaches the right box */
.np-pf-box.np-pf-hit{box-shadow:0 0 0 1px rgba(var(--np_pf_pulse_rgb,180,120,255),.25),0 0 28px rgba(var(--np_pf_pulse_rgb,180,120,255),.25),0 0 60px rgba(var(--np_pf_pulse_rgb,180,120,255),.18);transform:scale(1.02)}

/* Prevent boxes from visually "escaping" the shell */
.np-pf-card{overflow:hidden;}
/* Remove the old negative margins – they cause misalignment */
.np-pf-lines{margin:0}


/* Impact feedback on right box (tunable via vars) */
.np-pf-box.np-pf-right.np-pf-hit{
  animation: np-pf-hit calc(var(--np_pf_hit_ms, 180) * 1ms) ease-out 1;
}
@keyframes np-pf-hit{
  0%{ transform: scale(1); box-shadow:none; }
  40%{
    transform: scale(calc(var(--np_pf_hit_scale, 102) / 100));
    box-shadow:
      0 0 calc(var(--np_pf_hit_blur, 18) * 1px) rgba(var(--np_pf_pulse_rgb, 180,120,255), calc(var(--np_pf_hit_opacity, 30) / 100)),
      0 0 calc(var(--np_pf_hit_blur, 18) * 2px) rgba(var(--np_pf_pulse_rgb, 180,120,255), calc(var(--np_pf_hit_opacity, 30) / 200));
  }
  100%{ transform: scale(1); box-shadow:none; }
}
/* Text colors (themeable) */
.np-pf-box-label{
  color: var(--np_pf_text_color, rgba(255,255,255,0.92));
}
.np-pf-target{
  color: var(--np_pf_text_color, rgba(255,255,255,0.92));
}
/* Keep secondary text slightly softer */
.np-pf-target{
  opacity: 0.92;
}