/* PixMatic wires (نفس شكل برنامج PixMatic Studio) */
.pw-wire { fill: none; stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 0.75s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.4s; }
.pw-flow { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 14 420; opacity: 0; transition: opacity 0.4s; }
.pw-flow.is-on { opacity: 0.95; animation: pwFlow 1.6s cubic-bezier(0.5, 0, 0.6, 1) infinite; }
@keyframes pwFlow { from { stroke-dashoffset: 434; } to { stroke-dashoffset: 0; } }
.pw-pin { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.pw-pin.is-on { transform: scale(1); }
.pw-pin-ring { fill: none; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pw-pin-ring.is-on { animation: pwRing 2.6s ease-out infinite; }
@keyframes pwRing { 0% { opacity: 0.7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }

/* طبقة الـ wires فوق الصفحة (للوقوف على العناصر) */
.pw-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 60; }

/* أول الصفحة: اللوجو والـ wires بتمسك فيه */
.pw-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: clamp(320px, 46vw, 520px); margin-top: 28px; }
.pw-hero-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pw-hero-node {
  position: absolute; left: 50%; top: 52%; width: 168px; height: 168px; transform: translate(-50%, -50%) scale(0.86); opacity: 0;
  border-radius: 42px; display: grid; place-items: center; z-index: 2;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45));
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1.5px 0 #fff, 0 30px 70px -28px rgba(32, 38, 32, 0.45), 0 0 0 1px rgba(32, 38, 32, 0.06);
  animation: pwNodeIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;
}
.pw-hero-node img { width: 76px; height: 76px; }
.pw-hero-node span { position: absolute; bottom: 18px; font: 700 10px/1 Inter, sans-serif; letter-spacing: 0.32em; color: #6b665b; }
.pw-hero.is-connected .pw-hero-node { box-shadow: inset 0 1.5px 0 #fff, 0 0 0 6px rgba(252, 176, 23, 0.16), 0 30px 70px -28px rgba(32, 38, 32, 0.45); }
@keyframes pwNodeIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.pw-hero-label { position: absolute; top: calc(52% + 108px); left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2;
  font: 600 12px/1 Inter, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #6b665b; opacity: 0; transition: opacity 0.6s; }
.pw-hero.is-connected .pw-hero-label { opacity: 1; }

/* الـ wire اللي بينزل مع الـ scroll */
.pw-spine { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.pw-spine-wire { fill: none; stroke: #202620; stroke-opacity: 0.55; stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.pw-spine-glow { fill: none; stroke: #fcb017; stroke-opacity: 0.35; stroke-width: 7; stroke-linecap: round; filter: blur(4px); transition: stroke-dashoffset 0.25s linear; }
.pw-spine-branch { fill: none; stroke: #e39a0b; stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 0.7s cubic-bezier(0.45, 0, 0.2, 1); }
.pw-spine .pw-pin { fill: #e39a0b; }
.pw-joint { fill: #202620; opacity: 0; transition: opacity 0.3s; }
.pw-joint.is-on { opacity: 0.7; }
[data-wire-anchor] { transition: box-shadow 0.4s, border-color 0.4s; }
[data-wire-anchor].is-wired { box-shadow: 0 0 0 4px rgba(252, 176, 23, 0.18); }

/* العناصر اللي الـ wire ماسك فيها (باقات، خانات الدخول) */
.is-wired.price-card, .is-wired.dl-card { border-color: rgba(227, 154, 11, 0.85) !important; box-shadow: 0 0 0 4px rgba(252, 176, 23, 0.18), 0 30px 60px -30px rgba(32, 38, 32, 0.35) !important; }

@media (prefers-reduced-motion: reduce) {
  .pw-wire, .pw-spine-wire, .pw-spine-glow, .pw-spine-branch { transition: none; }
  .pw-flow.is-on, .pw-pin-ring.is-on { animation: none; }
  .pw-hero-node { animation: none; opacity: 1; transform: translate(-50%, -50%); }
}
@media (max-width: 760px) {
  .pw-spine-glow { stroke-width: 5; }
  .pw-hero-node { width: 130px; height: 130px; border-radius: 34px; }
  .pw-hero-node img { width: 58px; height: 58px; }
  .pw-hero-label { top: calc(52% + 88px); }
}

/* صفحة الدخول: اللوجو والـ wires في الجزء اللي على الجنب */
.brand { position: relative; }
.pw-aside { position: absolute; left: 0; right: 0; width: auto; margin: 0; top: 9%; height: min(360px, 42vh); z-index: 1; }
.pw-aside .pw-hero-node { top: 50%; }
.field.is-wired input { border-color: #e39a0b !important; box-shadow: 0 0 0 3px rgba(252, 176, 23, 0.18) !important; }
#googleBtn.is-wired, #submitBtn.is-wired { box-shadow: 0 0 0 3px rgba(252, 176, 23, 0.25) !important; }

/* wires الباقات والتحميل: جوه القسم نفسه وبتطلع من تحته */
.pw-sec-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 4; }