/**
 * Főoldal hero – animált, interaktív rendszer-grafika.
 *
 * Inline SVG "vezetékek" áramló fénypulzussal + hover-reakciók (:has) és egy
 * kurzorkövető fényudvar (a koordinátát a hero-eco.js adja át). Pehelykönnyű,
 * éles bármekkora méretben. Csak a főoldalon töltődik be (lásd functions.php).
 *
 * A színeket .eco-scope-olt változókban tartjuk, hogy ne ütközzenek a téma
 * globális tokenjeivel (pl. --line itt más, mint a téma szürke vonalszíne).
 *
 * @package NFB_Growth
 */

.eco{
  --a:#E59A32;            /* amber */
  --al:#F2B24A;           /* világos amber (pulzus, glow) */
  --soft:#9fb4b2;         /* halvány felirat */
  --ln:rgba(229,154,50,.18);

  position:relative; width:100%; max-width:468px; aspect-ratio:1122/1402;
  margin:0 auto; border-radius:30px;
  background:radial-gradient(130% 90% at 50% 42%, #1a4b56 0%, #103840 55%, #0b282f 100%);
  border:1px solid rgba(229,154,50,.28);
  box-shadow:0 34px 80px rgba(0,0,0,.45), inset 0 0 70px rgba(229,154,50,.05);
}

/* kurzorkövető fényudvar (háttér, a csomópontok alatt) */
.eco-glow{
  position:absolute; inset:0; border-radius:30px; pointer-events:none; z-index:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(242,178,74,.16), transparent 62%);
  opacity:0; transition:opacity .35s ease;
}
.eco:hover .eco-glow{ opacity:1; }

.eco .wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.eco .wire{ fill:none; stroke:rgba(229,154,50,.20); stroke-width:3; stroke-linecap:round; transition:stroke .25s ease; }
.eco .pulse{
  fill:none; stroke:var(--al); stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:16 230; filter:drop-shadow(0 0 5px rgba(242,178,74,.9));
  animation:eco-flow 2.6s linear infinite;
  transition:stroke-width .25s ease, filter .25s ease;
}
.eco .pulse.d1{ animation-delay:0s; } .eco .pulse.d2{ animation-delay:.5s; }
.eco .pulse.d3{ animation-delay:1s; } .eco .pulse.d4{ animation-delay:1.5s; }
.eco .pulse.down{ animation-duration:2s; }
@keyframes eco-flow{ to{ stroke-dashoffset:-246; } }
.eco .joint{ fill:var(--al); filter:drop-shadow(0 0 4px rgba(242,178,74,.9)); }

.eco .node{
  position:absolute; transform:translate(-50%,-50%); width:30%; z-index:2;
  background:rgba(255,255,255,.04); border:1px solid var(--ln);
  border-radius:16px; padding:14px 10px 12px; text-align:center; backdrop-filter:blur(2px);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .3s ease, background .25s ease;
}
.eco a.node{ text-decoration:none; }
.eco .node .ic{
  width:40px; height:40px; margin:0 auto 9px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(229,154,50,.4); background:rgba(229,154,50,.08); box-shadow:0 0 16px rgba(229,154,50,.18);
  transition:box-shadow .3s ease, transform .3s ease, background .25s ease;
}
.eco .node .ic svg{ width:20px; height:20px; stroke:var(--a); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s ease; }
.eco .node strong{ display:block; color:#fff; font-size:13px; font-weight:700; margin-bottom:3px; }
.eco .node span{ display:block; color:var(--soft); font-size:10.5px; line-height:1.3; }

.eco .n-strat{ left:28%; top:17%; } .eco .n-web{ left:72%; top:17%; }
.eco .n-gmb{ left:23.5%; top:46%; } .eco .n-cont{ left:76.5%; top:46%; } .eco .n-ads{ left:50%; top:70%; }

.eco .center{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:2;
  width:120px; height:120px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, #16454f, #0e2f37); border:2px solid var(--al);
  box-shadow:0 0 0 6px rgba(229,154,50,.08), 0 0 40px 6px rgba(242,178,74,.35);
  transition:box-shadow .3s ease;
}
.eco .center::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(242,178,74,.35); animation:eco-breathe 2.8s ease-in-out infinite; }
.eco .center b{ font-weight:800; font-size:22px; letter-spacing:1px; line-height:1; color:#fff; }
.eco .center i{ font-style:normal; font-size:8px; letter-spacing:3px; color:var(--soft); margin-top:3px; }
@keyframes eco-breathe{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.12); opacity:1; } }

.eco .result{
  position:absolute; left:5%; right:5%; bottom:4.5%; z-index:2;
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px;
  background:rgba(229,154,50,.1); border:1.5px solid var(--a); box-shadow:0 0 30px rgba(229,154,50,.2);
  transition:box-shadow .3s ease, transform .3s ease;
}
.eco .result .ic{ flex:none; width:42px; height:42px; border-radius:50%; background:rgba(229,154,50,.15); border:1px solid rgba(229,154,50,.5); display:flex; align-items:center; justify-content:center; }
.eco .result .ic svg{ width:22px; height:22px; stroke:var(--al); fill:none; stroke-width:1.8; }
.eco .result b{ display:block; color:#fff; font-size:17px; font-weight:800; }
.eco .result span{ display:block; color:var(--soft); font-size:11px; margin-top:2px; }

/* ===== HOVER-FŰSZER ===== */
.eco .node:hover{
  transform:translate(-50%,-50%) translateY(-5px) scale(1.03);
  border-color:var(--a); background:rgba(229,154,50,.1);
  box-shadow:0 14px 34px rgba(0,0,0,.35), 0 0 26px rgba(242,178,74,.28);
}
.eco .node:hover .ic{ box-shadow:0 0 26px rgba(242,178,74,.55); background:rgba(229,154,50,.18); transform:scale(1.08); }
.eco .node:hover .ic svg{ stroke:var(--al); }

/* a csomóponthoz tartozó vezetéken energialöket a központba */
.eco:has(.n-strat:hover) .w-strat,
.eco:has(.n-web:hover)   .w-web,
.eco:has(.n-gmb:hover)   .w-gmb,
.eco:has(.n-cont:hover)  .w-cont,
.eco:has(.n-ads:hover)   .w-ads{
  animation-duration:.9s; stroke-width:5.2; filter:drop-shadow(0 0 10px rgba(242,178,74,1));
}
.eco:has(.n-strat:hover) .b-strat,
.eco:has(.n-web:hover)   .b-web,
.eco:has(.n-gmb:hover)   .b-gmb,
.eco:has(.n-cont:hover)  .b-cont,
.eco:has(.n-ads:hover)   .b-ads{ stroke:rgba(242,178,74,.6); }

.eco:has(.node:hover) .center{ box-shadow:0 0 0 7px rgba(229,154,50,.12), 0 0 55px 10px rgba(242,178,74,.5); }

/* a központ fölé húzva: az egész rendszer feltöltődik */
.eco:has(.center:hover) .pulse{ animation-duration:1s; stroke-width:5; filter:drop-shadow(0 0 10px rgba(242,178,74,1)); }
.eco:has(.center:hover) .wire{ stroke:rgba(242,178,74,.5); }
.eco .center:hover{ box-shadow:0 0 0 8px rgba(229,154,50,.16), 0 0 70px 14px rgba(242,178,74,.65); }

.eco .result:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.3), 0 0 46px rgba(242,178,74,.4); }

@media (prefers-reduced-motion: reduce){
  .eco .pulse, .eco .center::after{ animation:none; }
  .eco .pulse{ stroke-dasharray:none; opacity:.6; }
  .eco .node, .eco .center, .eco .result, .eco .node .ic{ transition:none; }
}