/* =========================================================
   LetsAdopt AI — Workflow v2 (premium live-data animation)
   Works for home (5 nodes) + products (4-6 nodes each)
   ========================================================= */

.nflow-v2{position:relative;padding:30px 0 20px;perspective:1200px}

/* Grid layout — adapts to node count */
.nflow-v2 .nflow-track{
  display:grid;
  gap:32px 24px;
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
}

/* 4 nodes → 4 columns */
.nflow-v2 .nflow-track:has(.nnode:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
/* 5 nodes → 3+2 layout */
.nflow-v2 .nflow-track:has(.nnode:nth-child(5):last-child){grid-template-columns:repeat(3,1fr)}
.nflow-v2 .nflow-track:has(.nnode:nth-child(5):last-child) > .nnode:nth-child(4){grid-column:1/2;justify-self:end;width:100%;max-width:340px}
.nflow-v2 .nflow-track:has(.nnode:nth-child(5):last-child) > .nnode:nth-child(5){grid-column:3/4;justify-self:start;width:100%;max-width:340px}
/* 6 nodes → 3+3 */
.nflow-v2 .nflow-track:has(.nnode:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}

/* Fallback for browsers without :has() */
@supports not (selector(:has(*))){
  .nflow-v2 .nflow-track{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

@media(max-width:1024px){
  .nflow-v2 .nflow-track,
  .nflow-v2 .nflow-track:has(.nnode:last-child){grid-template-columns:repeat(2,1fr) !important}
  .nflow-v2 .nflow-track:has(.nnode:nth-child(5):last-child) > .nnode:nth-child(4),
  .nflow-v2 .nflow-track:has(.nnode:nth-child(5):last-child) > .nnode:nth-child(5){grid-column:auto;justify-self:stretch;max-width:none}
}
@media(max-width:600px){
  .nflow-v2 .nflow-track,
  .nflow-v2 .nflow-track:has(.nnode:last-child){grid-template-columns:1fr !important}
}

/* ----- Node container ----- */
.nflow-v2 .nnode{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .5s;
  opacity:.42;
}
.nflow-v2 .nnode.lit{opacity:1}
.nflow-v2 .nnode.dimmed{opacity:.32}

/* ----- Node card ----- */
.nflow-v2 .nnode-card{
  position:relative;
  background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border:1px solid var(--line);
  border-radius:8px;
  padding:24px 22px 20px;
  overflow:hidden;
  transition:.45s cubic-bezier(.4,0,.2,1);
  min-height:200px;
  display:flex;
  flex-direction:column;
}
.nflow-v2 .nnode.lit .nnode-card{
  border-color:var(--accent);
  background:linear-gradient(180deg, #1f1813 0%, #2a1f18 100%);
  transform:translateY(-4px);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 60px -10px rgba(255,92,53,.5),
    0 20px 40px -20px rgba(0,0,0,.6);
}

/* ----- Pulsing glow halo (active card) ----- */
.nnode-glow{
  position:absolute;
  inset:-2px;
  border-radius:8px;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,92,53,.35), transparent 70%);
  opacity:0;
  pointer-events:none;
  transition:opacity .6s;
  z-index:0;
}
.nflow-v2 .nnode.lit .nnode-glow{opacity:1;animation:nglow 2.2s ease-in-out infinite}
@keyframes nglow{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.04);opacity:.85}
}

/* ----- Scanning light sweep ----- */
.nnode-scan{
  position:absolute;
  top:0;left:-50%;
  width:50%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,92,53,.18) 50%, transparent);
  pointer-events:none;
  z-index:1;
  opacity:0;
}
.nflow-v2 .nnode.lit .nnode-scan{
  opacity:1;
  animation:nscan 2.4s ease-in-out infinite;
}
@keyframes nscan{
  0%{left:-50%}
  100%{left:100%}
}

/* ----- Node number ----- */
.nflow-v2 .nnum{
  position:relative;z-index:2;
  font-family:'Geist Mono',monospace;
  font-size:11px;color:var(--faint);
  letter-spacing:.08em;
  margin-bottom:14px;
  transition:.3s;
}
.nflow-v2 .nnode.lit .nnum{color:var(--accent)}

/* ----- Icon ----- */
.nflow-v2 .nic{
  position:relative;z-index:2;
  width:44px;height:44px;
  border-radius:6px;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  transition:.5s cubic-bezier(.4,0,.2,1);
}
.nflow-v2 .nnode.lit .nic{
  background:var(--accent);
  color:#1a0f08;
  border-color:var(--accent);
  transform:rotate(360deg) scale(1.05);
  box-shadow:0 0 30px rgba(255,92,53,.6);
}
.nflow-v2 .nic i{width:20px;height:20px;stroke-width:1.8}

/* ----- Title + description ----- */
.nflow-v2 .nnode h5{
  position:relative;z-index:2;
  font-size:16px;font-weight:600;
  margin-bottom:7px;
  letter-spacing:-.01em;
  color:var(--ink);
}
.nflow-v2 .nnode p{
  position:relative;z-index:2;
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
  margin-bottom:14px;
  flex:1;
}

/* ----- Live meter (counter + bar) ----- */
.nnode-meter{
  position:relative;z-index:2;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.05);
  opacity:0;
  transform:translateY(6px);
  transition:.4s;
}
.nflow-v2 .nnode.lit .nnode-meter,
.nflow-v2 .nnode.done .nnode-meter{opacity:1;transform:translateY(0)}

.nnode-meter-label{
  font-family:'Geist Mono',monospace;
  font-size:10.5px;
  color:var(--faint);
  letter-spacing:.04em;
  margin-bottom:6px;
  min-height:14px;
}
.nflow-v2 .nnode.lit .nnode-meter-label{color:var(--accent)}
.nflow-v2 .nnode.done .nnode-meter-label{color:#9fe3b4}

.nnode-meter-bar{
  height:3px;
  background:rgba(255,255,255,.06);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.nnode-meter-bar span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--accent), #ffaa80);
  border-radius:2px;
  transition:width .3s ease;
  box-shadow:0 0 8px rgba(255,92,53,.7);
}
.nflow-v2 .nnode.done .nnode-meter-bar span{
  background:linear-gradient(90deg, #5ec47e, #9fe3b4);
  box-shadow:0 0 6px rgba(94,196,126,.5);
}

/* ----- Connectors between nodes ----- */
.nnode-connector{
  position:absolute;
  top:50%;
  right:-24px;
  width:24px;
  height:36px;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:1;
}
.nnode-connector svg{width:100%;height:100%;display:block;overflow:visible}
.nconn-base{stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 4}
.nconn-active{
  stroke:var(--accent);
  stroke-width:2;
  stroke-dasharray:0;
  stroke-dashoffset:100;
  opacity:0;
  transition:opacity .4s, stroke-dashoffset .8s ease;
}
.nflow-v2 .nnode.done + .nnode-connector .nconn-active,
.nflow-v2 .nnode.lit + .nnode-connector .nconn-active{opacity:.9;stroke-dashoffset:0}

/* Hide connector for last node */
.nflow-v2 .nnode:last-child .nnode-connector{display:none}

/* Particles flowing along connector */
.nconn-packets{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:6px;
  transform:translateY(-50%);
}
.nconn-packets span{
  position:absolute;
  top:50%;
  left:0;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--accent);
  transform:translateY(-50%);
  opacity:0;
  box-shadow:0 0 10px var(--accent);
}
.nflow-v2 .nnode.lit + .nnode-connector .nconn-packets span,
.nflow-v2 .nnode.done + .nnode-connector .nconn-packets span{
  animation:npacket 1.8s linear infinite;
}
.nflow-v2 .nnode.lit + .nnode-connector .nconn-packets span:nth-child(2),
.nflow-v2 .nnode.done + .nnode-connector .nconn-packets span:nth-child(2){animation-delay:.6s}
.nflow-v2 .nnode.lit + .nnode-connector .nconn-packets span:nth-child(3),
.nflow-v2 .nnode.done + .nnode-connector .nconn-packets span:nth-child(3){animation-delay:1.2s}

@keyframes npacket{
  0%{left:-10%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{left:110%;opacity:0}
}

/* Hide connectors on mobile (grid wraps differently) */
@media(max-width:1024px){.nnode-connector{display:none}}

/* Vertical connectors when 3+2 layout — hide the visual connectors since they don't line up nicely */
.nflow-v2 .nflow-track:has(.nnode:nth-child(5):last-child) .nnode:nth-child(3) .nnode-connector,
.nflow-v2 .nflow-track:has(.nnode:nth-child(5):last-child) .nnode:nth-child(4) .nnode-connector{display:none}