/* ===========================================================
   اهورا · per-platform hero motion graphics (panel + node)
   Each active platform gets a signature animation themed to it.
   Pure CSS/SVG, transform/opacity only, reduced-motion safe.
   =========================================================== */

/* ---------- panel hero banner ---------- */
.phero{ position:relative; height:112px; margin:2px 0 16px; border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 150% at 50% -10%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 68%),
    linear-gradient(180deg, rgba(12,14,22,.35), rgba(8,10,16,.62));
  border:1px solid color-mix(in srgb, var(--tint) 32%, rgba(255,255,255,.08)); }
.phero svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.phero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.phero-vid{ background:#000; }
.phero .glin{ stroke:var(--tint); fill:none; }
.phero .gfil{ fill:var(--tint); }
@media (prefers-reduced-motion: reduce){ .phero *{ animation:none !important; } }
@media (max-width:600px){ .phero{ height:96px; } }

/* sweeping sheen shared by all heroes */
.phero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(75deg, transparent 40%, color-mix(in srgb, var(--tint) 22%, transparent) 50%, transparent 60%);
  transform:translateX(-120%); animation:phSheen 5.5s ease-in-out 1s infinite; }
@keyframes phSheen{ 0%,100%{ transform:translateX(-120%);} 55%,100%{ transform:translateX(120%);} }

/* ---- PARTO · radiating light rays + chat sparks ---- */
.ph-parto .ray{ transform-origin:160px 60px; opacity:.0; animation:partoRay 3.6s ease-in-out infinite; }
.ph-parto .ray:nth-child(2){ animation-delay:.25s } .ph-parto .ray:nth-child(3){ animation-delay:.5s }
.ph-parto .ray:nth-child(4){ animation-delay:.75s } .ph-parto .ray:nth-child(5){ animation-delay:1s } .ph-parto .ray:nth-child(6){ animation-delay:1.25s }
@keyframes partoRay{ 0%,100%{ opacity:0; transform:scale(.6);} 45%{ opacity:.85; transform:scale(1);} }
.ph-parto .core{ transform-origin:160px 60px; animation:partoCore 3.2s ease-in-out infinite; }
@keyframes partoCore{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.15); opacity:1 } }
.ph-parto .bub{ opacity:0; animation:partoBub 4s ease-in-out infinite; }
.ph-parto .bub.b2{ animation-delay:1.3s } .ph-parto .bub.b3{ animation-delay:2.4s }
@keyframes partoBub{ 0%{ opacity:0; transform:translateY(8px) } 20%{ opacity:.9 } 70%{ opacity:.5 } 100%{ opacity:0; transform:translateY(-10px) } }

/* ---- MANSHOOR · prism splitting a beam into a spectrum ---- */
.ph-manshoor .beam{ stroke-dasharray:180; stroke-dashoffset:180; animation:mnBeam 4s ease-in-out infinite; }
@keyframes mnBeam{ 0%{ stroke-dashoffset:180 } 40%,100%{ stroke-dashoffset:0 } }
.ph-manshoor .spec{ opacity:0; transform-origin:175px 60px; animation:mnSpec 4s ease-out infinite; }
.ph-manshoor .spec.s1{ animation-delay:.9s } .ph-manshoor .spec.s2{ animation-delay:1.0s } .ph-manshoor .spec.s3{ animation-delay:1.1s }
.ph-manshoor .spec.s4{ animation-delay:1.2s } .ph-manshoor .spec.s5{ animation-delay:1.3s } .ph-manshoor .spec.s6{ animation-delay:1.4s }
@keyframes mnSpec{ 0%,30%{ opacity:0; transform:rotate(0deg) } 60%{ opacity:.95 } 100%{ opacity:.55; transform:rotate(0deg) } }
.ph-manshoor .prism{ animation:mnGlow 3s ease-in-out infinite; transform-origin:175px 60px; }
@keyframes mnGlow{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }

/* ---- SINA · ECG heartbeat sweep + pulse ring ---- */
.ph-sina .ecg{ stroke-dasharray:360; stroke-dashoffset:360; animation:snEcg 2.6s linear infinite; }
@keyframes snEcg{ 0%{ stroke-dashoffset:360 } 70%,100%{ stroke-dashoffset:0 } }
.ph-sina .beat{ transform-origin:160px 60px; animation:snBeat 1.2s ease-in-out infinite; }
@keyframes snBeat{ 0%,100%{ transform:scale(1) } 18%{ transform:scale(1.18) } 36%{ transform:scale(1) } }
.ph-sina .ring{ transform-origin:160px 60px; opacity:0; animation:snRing 2.4s ease-out infinite; }
.ph-sina .ring.r2{ animation-delay:1.2s }
@keyframes snRing{ 0%{ opacity:.5; transform:scale(.4) } 100%{ opacity:0; transform:scale(1.6) } }

/* ---- BIDAR · open book + sequenced confidence dots ---- */
.ph-bidar .page{ transform-origin:160px 38px; animation:bdPage 4.5s ease-in-out infinite; }
@keyframes bdPage{ 0%,100%{ transform:rotateY(0) skewX(0deg) } 50%{ transform:skewX(-10deg) } }
.ph-bidar .cdot{ opacity:.3; animation:bdDot 3.2s ease-in-out infinite; }
.ph-bidar .cdot.d2{ animation-delay:.4s } .ph-bidar .cdot.d3{ animation-delay:.8s } .ph-bidar .cdot.d4{ animation-delay:1.2s }
@keyframes bdDot{ 0%,100%{ opacity:.25; transform:scale(.85) } 50%{ opacity:1; transform:scale(1.15) } }

/* ---- ABZAR · rotating gear + orbiting sparks ---- */
.ph-abzar .gear{ transform-origin:160px 60px; animation:abGear 9s linear infinite; }
@keyframes abGear{ to{ transform:rotate(360deg) } }
.ph-abzar .gear2{ transform-origin:212px 40px; animation:abGear 6s linear infinite reverse; }
.ph-abzar .spark{ transform-origin:160px 60px; animation:abOrbit 5s linear infinite; }
.ph-abzar .spark.k2{ animation-delay:-1.7s } .ph-abzar .spark.k3{ animation-delay:-3.3s }
@keyframes abOrbit{ to{ transform:rotate(360deg) } }

/* ---- NEGAHBAN · shield + radar sweep ---- */
.ph-negahban .shield{ animation:ngGlow 3s ease-in-out infinite; transform-origin:160px 58px; }
@keyframes ngGlow{ 0%,100%{ opacity:.9 } 50%{ opacity:1 } }
.ph-negahban .sweep{ transform-origin:160px 58px; animation:ngSweep 3.4s linear infinite; }
@keyframes ngSweep{ to{ transform:rotate(360deg) } }
.ph-negahban .tick{ stroke-dasharray:26; stroke-dashoffset:26; animation:ngTick 3.4s ease-in-out infinite; }
@keyframes ngTick{ 0%,55%{ stroke-dashoffset:26 } 75%,100%{ stroke-dashoffset:0 } }
.ph-negahban .ping{ transform-origin:160px 58px; opacity:0; animation:ngPing 3.4s ease-out infinite; }
@keyframes ngPing{ 0%,60%{ opacity:0; transform:scale(.5) } 70%{ opacity:.7 } 100%{ opacity:0; transform:scale(1.5) } }

/* ---- ARZHANG · cinematic frame + play + sparkles ---- */
.ph-arzhang .play{ transform-origin:160px 60px; animation:azPlay 2.4s ease-in-out infinite; }
@keyframes azPlay{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.18); opacity:1 } }
.ph-arzhang .spk{ transform-origin:center; opacity:0; animation:azSpk 2.8s ease-in-out infinite; }
.ph-arzhang .spk.k2{ animation-delay:.9s } .ph-arzhang .spk.k3{ animation-delay:1.7s }
@keyframes azSpk{ 0%,100%{ opacity:0; transform:scale(.4) } 50%{ opacity:1; transform:scale(1) } }
.ph-arzhang .scan{ animation:azScan 3.2s ease-in-out infinite; }
@keyframes azScan{ 0%{ transform:translateX(-60px); opacity:0 } 40%{ opacity:.8 } 100%{ transform:translateX(60px); opacity:0 } }

/* ---- NAVA · audio equalizer bars + ripple ---- */
.ph-nava .bar{ transform-origin:center bottom; animation:nvBar 1.1s ease-in-out infinite; }
.ph-nava .bar.n1{ animation-delay:0s } .ph-nava .bar.n2{ animation-delay:.15s } .ph-nava .bar.n3{ animation-delay:.3s }
.ph-nava .bar.n4{ animation-delay:.45s } .ph-nava .bar.n5{ animation-delay:.2s } .ph-nava .bar.n6{ animation-delay:.35s } .ph-nava .bar.n7{ animation-delay:.1s }
@keyframes nvBar{ 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1) } }
.ph-nava .rip{ transform-origin:160px 60px; opacity:0; animation:nvRip 2.6s ease-out infinite; }
.ph-nava .rip.r2{ animation-delay:1.3s }
@keyframes nvRip{ 0%{ opacity:.5; transform:scale(.4) } 100%{ opacity:0; transform:scale(1.5) } }

/* ---- NEGAR · portrait + live ring + sparkle ---- */
.ph-negar .lring{ transform-origin:160px 56px; opacity:0; animation:ngrRing 2.6s ease-out infinite; }
.ph-negar .lring.r2{ animation-delay:1.3s }
@keyframes ngrRing{ 0%{ opacity:.55; transform:scale(.6) } 100%{ opacity:0; transform:scale(1.35) } }
.ph-negar .face{ animation:ngrGlow 3s ease-in-out infinite; transform-origin:160px 56px; }
@keyframes ngrGlow{ 0%,100%{ opacity:.9 } 50%{ opacity:1 } }
.ph-negar .spk{ transform-origin:center; opacity:0; animation:azSpk 2.6s ease-in-out infinite; }
.ph-negar .spk.k2{ animation-delay:1.1s }

/* ---- GUYA · slide build + rising bars ---- */
.ph-guya .gbar{ transform-origin:center bottom; animation:gyBar 2.4s ease-in-out infinite; }
.ph-guya .gbar.g2{ animation-delay:.3s } .ph-guya .gbar.g3{ animation-delay:.6s }
@keyframes gyBar{ 0%{ transform:scaleY(.15) } 45%,100%{ transform:scaleY(1) } }
.ph-guya .gline{ stroke-dasharray:90; stroke-dashoffset:90; animation:gyLine 3.2s ease-in-out infinite; }
.ph-guya .gline.l2{ animation-delay:.4s } .ph-guya .gline.l3{ animation-delay:.8s }
@keyframes gyLine{ 0%{ stroke-dashoffset:90 } 50%,100%{ stroke-dashoffset:0 } }

/* ===========================================================
   node signature accent on the constellation (active nodes)
   ONE calm breathing ring per active node — no rotation/mask so it
   never jitters; colour comes from each node's --tint.
   =========================================================== */
.rad-node-wrap[data-status="available"] .gx-node{ position:relative; }
.rad-node-wrap[data-status="available"] .gx-node::after{
  content:""; position:absolute; inset:-18%; border-radius:50%; pointer-events:none; z-index:-1;
  border:1.5px solid color-mix(in srgb, var(--tint) 55%, transparent); opacity:0;
  animation:nodeBreathe 3.4s ease-in-out infinite; will-change:transform,opacity; }
@keyframes nodeBreathe{ 0%,100%{ opacity:.18; transform:scale(.92) } 50%{ opacity:.6; transform:scale(1.08) } }
/* sina beats a touch faster (heartbeat) */
.rad-node-wrap[data-panel="sina"] .gx-node::after{ animation-duration:2s; }
/* manshoor — spectrum ring (prism theme); opacity-only so it never jitters */
.rad-node-wrap[data-panel="manshoor"] .gx-node::after{
  inset:-16%; border:0; border-radius:50%;
  background:conic-gradient(from 0deg, #ff5c72, #ffb65c, #ffe25c, #5cff9e, #5cc0ff, #b65cff, #ff5c72);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%); mask:radial-gradient(circle, transparent 58%, #000 60%);
  animation:mnNodeRing 3.4s ease-in-out infinite; }
@keyframes mnNodeRing{ 0%,100%{ opacity:.25 } 50%{ opacity:.7 } }
@media (prefers-reduced-motion: reduce){
  .rad-node-wrap .gx-node::after{ animation:none !important; }
}