/* ===========================================================
   اهورا · AHURA — ستارهٔ تابان  (Radiant Star)
   Sun at center · light rays w/ flowing particles to each
   platform · fixed layout · parallax float · no zoom
   =========================================================== */

.radiant{position:relative;flex:1;min-height:0;overflow:visible;
  perspective:1200px;touch-action:pan-y}

/* ---- tech grid backdrop + central glow ---- */
.gx-space{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gx-grid{position:absolute;inset:-2%;
  background-image:linear-gradient(rgba(244,180,94,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,180,94,.07) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask:radial-gradient(120% 95% at 50% 50%, #000 12%, rgba(0,0,0,.55) 48%, transparent 82%);
          mask:radial-gradient(120% 95% at 50% 50%, #000 12%, rgba(0,0,0,.55) 48%, transparent 82%);
  animation:gridPan 60s linear infinite}
@keyframes gridPan{from{background-position:0 0}to{background-position:46px 46px}}
.gx-coreglow{position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgba(244,180,94,.16), rgba(124,92,255,.06) 45%, transparent 72%);
  filter:blur(30px);animation:coreGlowPulse 7s ease-in-out infinite}
@keyframes coreGlowPulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.gx-stars{position:absolute;inset:-20%;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 28% 68%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 47% 38%, rgba(255,244,222,.6), transparent),
    radial-gradient(1.1px 1.1px at 63% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 78% 28%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 88% 62%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 38% 88%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 7% 54%, rgba(255,255,255,.5), transparent);
  opacity:.6;animation:starTwinkle 7s ease-in-out infinite}
@keyframes starTwinkle{0%,100%{opacity:.4}50%{opacity:.75}}
body[data-motion="off"] .gx-stars,body[data-motion="off"] .gx-grid,body[data-motion="off"] .gx-coreglow{animation:none}

/* ---- fixed field (no parallax) ---- */
.rad-field{position:absolute;left:50%;top:50%;z-index:2;width:0;height:0;
  transform:translate(-50%,-50%)}

/* =====================  SUN  ===================== */
.rad-sun{position:absolute;left:0;top:0;transform:translate(-50%,-50%);z-index:6;
  width:168px;height:168px;display:grid;place-items:center;border-radius:50%;cursor:pointer}
.rad-sun .s-rays{position:absolute;inset:-62%;z-index:-3;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    transparent 0deg 6deg, rgba(244,180,94,.5) 7deg 8deg, transparent 9deg 15deg);
  -webkit-mask:radial-gradient(closest-side,transparent 50%,#000 60%,transparent 88%);
          mask:radial-gradient(closest-side,transparent 50%,#000 60%,transparent 88%);
  animation:radSpin 64s linear infinite;opacity:.8}
.rad-sun .s-rays.r2{inset:-50%;animation:radSpin 90s linear infinite reverse;opacity:.5;
  background:repeating-conic-gradient(from 4deg,
    transparent 0deg 10deg, rgba(255,244,222,.4) 11deg 12deg, transparent 13deg 22deg)}
@keyframes radSpin{to{transform:rotate(360deg)}}
.rad-sun .s-halo{position:absolute;inset:-44%;z-index:-2;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,244,222,.6),rgba(244,180,94,.3) 42%,rgba(214,99,58,.08) 66%,transparent 78%);
  filter:blur(8px);animation:sunBreathe 5s var(--ease) infinite}
@keyframes sunBreathe{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
/* periodic energy flare ring */
.rad-sun .s-flare{position:absolute;inset:0;z-index:-1;border-radius:50%;
  border:2px solid rgba(255,244,222,.7);opacity:0;animation:sunFlare 6s ease-out infinite}
@keyframes sunFlare{0%{inset:6%;opacity:.7}70%,100%{inset:-50%;opacity:0}}
.rad-sun .s-disc{position:absolute;inset:16%;z-index:-1;border-radius:50%;
  background:radial-gradient(38% 38% at 38% 34%,#fff 0%,rgba(255,244,222,0) 46%),
    radial-gradient(closest-side,#FFE9B8,#F4B45E 52%,#E8923C 82%,#9c5a1e 100%);
  box-shadow:0 0 42px rgba(244,180,94,.6),0 0 96px rgba(244,180,94,.34),inset 0 0 30px rgba(255,255,255,.4);
  animation:sunBreathe 5s var(--ease) infinite}
/* orbiting light particles around the sun */
.rad-sun .s-orbit{position:absolute;inset:-14%;z-index:1;border-radius:50%;pointer-events:none;
  animation:radSpin 18s linear infinite}
.rad-sun .s-orbit.o2{inset:-26%;animation:radSpin 26s linear infinite reverse}
.rad-sun .s-orbit b{position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;
  background:#fff;box-shadow:0 0 9px var(--amber),0 0 16px var(--amber)}
.rad-sun .s-orbit.o2 b{background:#ffe9c8;width:5px;height:5px}
.rad-sun .g-svg{width:58%;height:58%;position:relative;z-index:2;filter:drop-shadow(0 2px 9px rgba(120,60,10,.55))}
.rad-sun .g-svg path,.rad-sun .g-svg circle{stroke:#6a3d12}
.rad-sun .g-svg .g-core{fill:#fff;stroke:none}
.rad-sun .sun-word{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);
  font-weight:800;font-size:21px;color:var(--ink);letter-spacing:.02em;white-space:nowrap;text-shadow:0 2px 18px rgba(244,180,94,.55)}
.rad-sun .sun-word small{display:block;text-align:center;font-family:'Inter';font-weight:600;font-size:8px;letter-spacing:.36em;color:var(--faint);margin-top:3px}
/* hit area = core disc only. The halo/orbit/rays use negative insets and overflow
   the box; making them non-interactive stops the sun from stealing clicks aimed
   at nearby platform nodes. */
.rad-sun{pointer-events:none}
.rad-sun .s-disc{pointer-events:auto;cursor:pointer}
.rad-sun .s-disc:hover{filter:brightness(1.1)}
/* click → light burst (pure motion-graphic, no panel) */
.s-burst{position:absolute;inset:16%;z-index:0;border-radius:50%;pointer-events:none;opacity:0;
  border:2px solid var(--core,#FFF4DE);box-shadow:0 0 26px rgba(255,244,222,.7)}
.rad-sun.burst .s-burst{animation:sunBurst .85s var(--ease-out)}
@keyframes sunBurst{0%{opacity:.95;transform:scale(.5)}100%{opacity:0;transform:scale(3)}}
.rad-sun.burst .s-flare{animation:sunFlareHit .85s var(--ease-out)}
@keyframes sunFlareHit{0%{filter:brightness(1);transform:scale(1)}34%{filter:brightness(1.7);transform:scale(1.14)}100%{filter:brightness(1);transform:scale(1)}}
/* sun light-pulse when planets collide nearby */
.rad-sun.pulse .s-halo{animation:sunHaloPulse .46s ease-out}
@keyframes sunHaloPulse{0%{transform:scale(1);filter:brightness(1)}38%{transform:scale(1.18);filter:brightness(1.7)}100%{transform:scale(1);filter:brightness(1)}}
/* motion trail behind a dragged planet */
.drag-trail{position:absolute;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:3;
  background:radial-gradient(circle,var(--tt,#FFF4DE),transparent 70%);opacity:.5;animation:trailFade .5s ease-out forwards}
@keyframes trailFade{to{opacity:0;transform:translate(-50%,-50%) scale(.25)}}
/* while dragging a planet: keep the others fully lit (no dimming) */
.dragging .rad-arm.dimmed{opacity:1 !important;filter:saturate(1) !important}
/* the grabbed planet's beam softens into a glowing energy stream */
.rad-arm.beam-soft .rad-ray{filter:blur(2.5px) brightness(1.35);opacity:.95;height:3px}
.rad-arm.beam-soft .rad-flow i{filter:blur(1px) brightness(1.3)}
body[data-motion="off"] .rad-sun .s-rays,body[data-motion="off"] .rad-sun .s-orbit,
body[data-motion="off"] .rad-sun .s-flare,body[data-motion="off"] .rad-sun .s-halo,body[data-motion="off"] .rad-sun .s-disc{animation:none}

/* =====================  RAYS  ===================== */
/* arm anchored at sun center, rotated to platform angle, width = distance */
.rad-arm{position:absolute;left:0;top:0;height:0;transform-origin:0 0;
  transform:rotate(var(--ang));z-index:3;pointer-events:none}
.rad-ray{position:absolute;left:0;top:0;height:2px;width:100%;transform:translateY(-1px);
  background:linear-gradient(90deg,rgba(244,180,94,.5),color-mix(in oklab,var(--tint) 70%,transparent) 60%,var(--tint));
  border-radius:2px;opacity:.32;transition:opacity .35s,height .35s,filter .35s}
.rad-ray::after{content:"";position:absolute;inset:0;background:inherit;filter:blur(4px);opacity:.7}
/* flowing energy particles from sun → platform */
.rad-flow{position:absolute;left:0;top:0;height:2px;width:100%;transform:translateY(-1px);pointer-events:none}
.rad-flow i{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 9px var(--tint),0 0 16px var(--tint);transform:translateY(-50%);
  animation:radFlow var(--fdur,3.4s) linear infinite;animation-delay:var(--fdl,0s)}
@keyframes radFlow{0%{left:6%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.rad-arm.lit .rad-ray{opacity:1;height:3px;filter:brightness(1.4) saturate(1.2)}
.rad-arm.lit .rad-flow i{animation-duration:1.5s}
.rad-arm.lit .gx-surface .fx,.rad-arm.lit .gx-surface svg{animation-duration:.62s}
.rad-arm.lit .fx-prism,.rad-arm.lit .fx-orbit,.rad-arm.lit .gx-atmo{animation-duration:3s}
/* focus: dim the platforms you're NOT hovering */
.rad-arm.dimmed{opacity:.3;filter:saturate(.65)}
.rad-arm.lit .gx-node{transform:scale(1.16);box-shadow:0 12px 34px -6px var(--glow),0 0 42px 2px var(--glow),inset 0 -6px 14px rgba(0,0,0,.4),inset 0 6px 16px rgba(255,255,255,.28)}
.rad-arm.lit .gx-surface{filter:brightness(1.3) saturate(1.2)}
.rad-arm.lit .gx-atmo{animation-duration:4s}
.rad-arm{transition:opacity .35s,filter .35s}
body[data-motion="off"] .rad-flow i{animation:none;opacity:.6}

/* =====================  PLATFORM NODES  ===================== */
.rad-node-wrap{position:absolute;left:100%;top:0;transform:translate(-50%,-50%);z-index:4;pointer-events:auto;touch-action:none;cursor:grab}
.rad-node-wrap.dragging{cursor:grabbing;z-index:9}
.rad-node-wrap.dragging .gx-node{transform:scale(1.14);box-shadow:0 16px 40px -8px var(--glow),0 0 50px 2px var(--glow)}
/* counter-rotate so node + label stay upright */
.rad-node-rot{transform:rotate(calc(-1 * var(--ang)))}
.rad-node-float{animation:nodeFloat var(--fl,7s) ease-in-out infinite;animation-delay:var(--fld,0s)}
@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
body[data-motion="off"] .rad-node-float{animation:none}

.gx-node{position:relative;display:grid;place-items:center;cursor:pointer;border-radius:50%;
  width:var(--sz,68px);height:var(--sz,68px);overflow:visible;
  background:radial-gradient(40% 40% at 35% 30%,rgba(255,255,255,.6),transparent 52%),
    radial-gradient(closest-side,var(--tint) 0%,rgba(8,8,14,.92) 128%);
  border:1px solid var(--tint);
  box-shadow:0 8px 26px -8px var(--glow),0 0 24px -4px var(--glow),inset 0 -6px 14px rgba(0,0,0,.4),inset 0 6px 14px rgba(255,255,255,.18);
  transition:transform .35s var(--ease-out),box-shadow .35s}
.gx-node::after{content:"";position:absolute;inset:-7px;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,var(--glow),transparent 72%);opacity:.5;animation:nodeBreathe 4s var(--ease) infinite}
@keyframes nodeBreathe{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.72;transform:scale(1.12)}}
.gx-surface{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:0;
  -webkit-mask:radial-gradient(closest-side,#000 99%,transparent);mask:radial-gradient(closest-side,#000 99%,transparent)}
.gx-ico{position:relative;z-index:2;display:grid;place-items:center;width:100%;height:100%}
.gx-node .gx-ico svg{width:42%;height:42%;color:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.gx-atmo{position:absolute;inset:-3px;border-radius:50%;z-index:1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.7) 30deg,var(--tint) 55deg,transparent 110deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 88%,#000 90%,#000 99%,transparent);
          mask:radial-gradient(closest-side,transparent 88%,#000 90%,#000 99%,transparent);
  opacity:.7;animation:radSpin 14s linear infinite}
.rad-node-wrap:hover .gx-atmo{animation-duration:5s}
.rad-node-wrap:hover .gx-node{transform:scale(1.16);box-shadow:0 12px 34px -6px var(--glow),0 0 42px 2px var(--glow),inset 0 -6px 14px rgba(0,0,0,.4),inset 0 6px 16px rgba(255,255,255,.28)}
.rad-node-wrap:hover .gx-surface{filter:brightness(1.3) saturate(1.2)}
.gx-node.st-building{border-style:dashed}
.gx-node .moon{position:absolute;width:12px;height:12px;border-radius:50%;top:-1px;inset-inline-end:-1px;
  border:2px solid var(--bg);box-shadow:0 0 8px currentColor}
.gx-node.st-available .moon{background:#5FD68C;color:#5FD68C}
.gx-node.st-prototype .moon,.gx-node.st-building .moon{background:var(--amber);color:var(--amber)}
.gx-label{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);
  font-weight:700;font-size:12px;color:var(--ink);white-space:nowrap;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.gx-label .lt{display:block;text-align:center;font-family:'Inter';font-size:9px;color:var(--faint);font-weight:500;margin-top:1px}
body[data-motion="off"] .gx-atmo{animation:none}

/* ---- signature surface motions (per platform) ---- */
.fx{position:absolute}
.fx-ping{inset:34%;border-radius:50%;border:1.5px solid #fff;opacity:0;animation:fxPing 2.6s ease-out infinite}
.fx-ping.d2{animation-delay:.85s}.fx-ping.d3{animation-delay:1.7s}
@keyframes fxPing{0%{inset:42%;opacity:.9}100%{inset:6%;opacity:0}}
.fx-grid{inset:14%;border-radius:8px;
  background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:7px 7px;opacity:.5}
.fx-scan{inset:14%;border-radius:8px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  width:40%;left:0;animation:fxScan 2.2s ease-in-out infinite;mix-blend-mode:screen}
@keyframes fxScan{0%{transform:translateX(-40%)}100%{transform:translateX(280%)}}
.fx-prism{inset:18%;border-radius:50%;
  background:conic-gradient(from 0deg,#5FD68C 0deg 60deg,transparent 60deg 120deg,#F4B45E 120deg 180deg,transparent 180deg 300deg,#FF6B6B 300deg 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 52%,#000 56%);mask:radial-gradient(closest-side,transparent 52%,#000 56%);
  opacity:.85;animation:radSpin 9s linear infinite}
.fx-eq{left:50%;top:54%;transform:translate(-50%,-50%);display:flex;align-items:flex-end;gap:2px;height:42%}
.fx-eq b{width:3px;border-radius:2px;background:linear-gradient(180deg,#fff,var(--tint));animation:fxEq 1.1s ease-in-out infinite}
.fx-eq b:nth-child(2){animation-delay:.18s}.fx-eq b:nth-child(3){animation-delay:.36s}.fx-eq b:nth-child(4){animation-delay:.12s}.fx-eq b:nth-child(5){animation-delay:.5s}
@keyframes fxEq{0%,100%{height:18%}50%{height:96%}}
.fx-ecg{inset:24%;width:52%;height:auto}
.fx-ecg path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;stroke-dashoffset:120;animation:fxEcg 2.2s linear infinite}
@keyframes fxEcg{0%{stroke-dashoffset:120}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-120}}
.fx-orbit{inset:20%;border-radius:50%;border:1px dashed rgba(255,255,255,.3);animation:radSpin 6s linear infinite}
.fx-orbit.r2{inset:34%;animation-duration:4.2s;animation-direction:reverse}
.fx-orbit b{position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;margin-left:-3px;
  background:#fff;box-shadow:0 0 8px var(--tint),0 0 14px var(--tint)}
.fx-slide{inset:26%;border-radius:5px;border:1px solid var(--tint);background:linear-gradient(180deg,var(--glow),transparent);
  display:flex;flex-direction:column;gap:3px;padding:5px}
.fx-slide b{height:3px;border-radius:2px;background:var(--tint);transform-origin:right;animation:fxSlideB 2.4s ease-in-out infinite}
.fx-slide b:nth-child(1){width:60%}
.fx-slide b:nth-child(2){width:100%;opacity:.6;animation-delay:.45s}
@keyframes fxSlideB{0%{transform:scaleX(.2);opacity:.4}55%{opacity:1}100%{transform:scaleX(1)}}
.fx-bars{left:50%;top:56%;transform:translate(-50%,-50%);display:flex;align-items:flex-end;gap:3px;height:40%}
.fx-bars b{width:5px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#fff,var(--tint));animation:fxBars 2.2s var(--ease) infinite}
.fx-bars b:nth-child(2){animation-delay:.3s}.fx-bars b:nth-child(3){animation-delay:.6s}
@keyframes fxBars{0%,100%{height:20%;opacity:.6}50%{height:96%;opacity:1}}
body[data-motion="off"] .fx{animation:none}
.rad-node-wrap.pulse .gx-node{animation:nodePulse .9s var(--ease-out)}
@keyframes nodePulse{0%{transform:scale(1)}35%{transform:scale(1.28);box-shadow:0 0 44px 4px var(--glow)}100%{transform:scale(1)}}


.gx-hint{position:absolute;z-index:8;bottom:18px;left:50%;transform:translateX(-50%);font-size:11.5px;color:var(--faint);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.gx-hint svg{width:15px;height:15px;opacity:.7}
@media (max-width:760px){.gx-hint{display:none}}

/* =====================  CORNER WIDGETS (token + mission)  ===================== */
.corner-cards{position:fixed;left:18px;bottom:18px;z-index:45;display:flex;flex-direction:column;gap:10px;width:262px;max-width:42vw}
.ccard{position:relative;display:flex;align-items:center;gap:11px;text-align:start;cursor:pointer;
  background:linear-gradient(180deg,rgba(20,19,28,.82),rgba(13,12,18,.82));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:15px;padding:11px 13px;overflow:hidden;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.7);
  transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s,background .3s}
.ccard::before{content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(120% 90% at 0% 0%, var(--cc-glow,rgba(244,180,94,.18)), transparent 60%)}
.ccard:hover{transform:translateY(-3px);border-color:var(--cc-tint,var(--line-gold));box-shadow:0 22px 50px -18px var(--cc-glow,rgba(244,180,94,.5))}
.ccard:hover::before{opacity:1}
.cc-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cc-lbl{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--faint);text-transform:uppercase;font-family:'Inter'}
.ccard-mission .cc-lbl,.ccard-token .cc-lbl{font-family:'Vazirmatn';letter-spacing:0;font-size:11px}
.cc-val{font-size:14px;font-weight:700;color:var(--ink)}
.cc-val b{color:#fff}
.cc-desc{font-size:11.5px;color:var(--muted);line-height:1.55;text-wrap:pretty}
/* token coin */
.ccard-token{--cc-tint:#B79BFF;--cc-glow:rgba(124,92,255,.4)}
.cc-coin{position:relative;width:40px;height:40px;flex:none;display:grid;place-items:center}
.cc-coin::after{content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,110,255,.5),transparent 70%);filter:blur(7px);animation:coinHalo 4.5s var(--ease) infinite}
.cc-coin img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 4px 12px rgba(124,92,255,.5));animation:coinFloat 5.5s ease-in-out infinite}
.cc-go{flex:none;color:var(--faint);font-size:15px;opacity:0;transform:translateX(4px);transition:.3s}
.ccard-token:hover .cc-go{opacity:1;transform:translateX(0);color:#B79BFF}
/* mission */
.ccard-mission{--cc-tint:var(--amber);--cc-glow:rgba(244,180,94,.32)}
.cc-ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;color:var(--amber);
  background:rgba(244,180,94,.1);border:1px solid var(--line-gold)}
.cc-ic svg{width:20px;height:20px;animation:radSpin 30s linear infinite}
.cc-more{position:absolute;inset-inline-end:13px;bottom:11px;font-size:10.5px;font-weight:700;color:var(--amber);
  opacity:0;transform:translateY(3px);transition:.3s}
.ccard-mission{padding-bottom:14px}
.ccard-mission:hover .cc-more{opacity:1;transform:translateY(0)}
@media (max-width:760px){
  .corner-cards{width:200px;left:12px;bottom:12px}
  .cc-desc{display:none}
  .ccard-mission:hover .cc-desc{display:block}
}

/* =====================  RICH HOVER CARD  ===================== */
.rad-card{position:absolute;z-index:40;width:280px;opacity:0;pointer-events:none;
  transform:translateY(8px) scale(.97);transform-origin:center;
  background:linear-gradient(180deg,rgba(20,19,28,.97),rgba(13,12,18,.97));
  border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.rad-card.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.rad-card::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--tint),transparent)}
.rc-scene{position:relative;height:116px;overflow:hidden;
  background:radial-gradient(130% 120% at 50% 130%, var(--glow), rgba(255,255,255,.02));
  border-bottom:1px solid var(--line)}
.rc-scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(13,12,18,.5))}
.rc-body{padding:14px 16px 16px}
.rc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.rc-name{display:flex;align-items:baseline;gap:7px}
.rc-name b{font-size:19px;font-weight:800;color:var(--ink)}
.rc-name .lat{font-size:11px;color:var(--faint);font-weight:500}
.rc-stat{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;white-space:nowrap;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line-2)}
.rc-stat i{width:5px;height:5px;border-radius:50%;display:inline-block}
.rc-role{font-size:12px;color:var(--tint);margin-top:5px;font-weight:600}
.rc-desc{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.7}
.rc-models{font-size:11px;color:var(--ink);margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:'Inter'}
.rc-models .rc-lbl{font-family:'Vazirmatn';font-size:10px;color:var(--faint);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.rc-feats{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rc-feats span{font-size:10.5px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  border-radius:999px;padding:4px 10px;white-space:nowrap}
.rc-enter{margin-top:13px;width:100%;border:none;border-radius:11px;padding:10px;font-weight:700;font-size:13px;
  color:#1A1206;background:var(--grad-primary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .2s,box-shadow .2s}
.rc-enter:hover{transform:translateY(-1px);box-shadow:0 10px 24px -6px var(--glow)}

/* mini-scene motifs */
.rc-scene>*{position:absolute}
.bf-ping{inset:50% auto auto 50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:1.5px solid var(--tint);opacity:0;animation:bfPing 2.6s ease-out infinite}
.bf-ping.d2{animation-delay:.85s}.bf-ping.d3{animation-delay:1.7s}
@keyframes bfPing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.bf-chat{left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:5px;width:120px}
.bf-chat b{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--tint),transparent);transform-origin:left;animation:bfStream 2.6s ease-in-out infinite}
.bf-chat b:nth-child(1){width:100%}.bf-chat b:nth-child(2){width:72%;animation-delay:.4s;opacity:.7}.bf-chat b:nth-child(3){width:50%;animation-delay:.8s;opacity:.55}
@keyframes bfStream{0%{transform:scaleX(.1);opacity:.3}55%{opacity:1}100%{transform:scaleX(1)}}
.bf-grid{inset:18px;border-radius:10px;border:1px solid var(--tint);
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:14px 14px;opacity:.6}
.bf-scan{top:18px;bottom:18px;left:18px;width:30%;border-radius:8px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);mix-blend-mode:screen;animation:bfScan 2.4s ease-in-out infinite}
@keyframes bfScan{0%{transform:translateX(-30%)}100%{transform:translateX(330%)}}
.bf-spark{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--tint);top:32px;left:40%;animation:bfTwk 1.8s ease-in-out infinite}
.bf-spark.s2{top:auto;bottom:30px;left:auto;right:36%;animation-delay:.7s}
@keyframes bfTwk{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.bf-beam{left:0;top:50%;height:2px;width:46%;transform:translateY(-50%);background:linear-gradient(90deg,transparent,#fff);box-shadow:0 0 8px #fff}
.bf-prism{left:46%;top:50%;width:0;height:0;transform:translate(-50%,-50%);
  border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:30px solid rgba(255,255,255,.85);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.5));animation:bfPrism 6s ease-in-out infinite}
@keyframes bfPrism{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}50%{transform:translate(-50%,-50%) rotate(8deg)}}
.bf-spec{left:54%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;width:42%}
.bf-spec b{height:5px;border-radius:3px;transform-origin:left;animation:bfStream 3s ease-in-out infinite}
.bf-spec b:nth-child(1){background:linear-gradient(90deg,#5FD68C,transparent)}
.bf-spec b:nth-child(2){background:linear-gradient(90deg,#F4B45E,transparent);animation-delay:.3s}
.bf-spec b:nth-child(3){background:linear-gradient(90deg,#FF6B6B,transparent);animation-delay:.6s}
.bf-eq{left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:flex-end;gap:4px;height:60px}
.bf-eq b{width:5px;border-radius:3px;background:linear-gradient(180deg,#fff,var(--tint));animation:bfEq 1s ease-in-out infinite}
.bf-eq b:nth-child(2n){animation-delay:.2s}.bf-eq b:nth-child(3n){animation-delay:.4s}.bf-eq b:nth-child(4n){animation-delay:.15s}.bf-eq b:nth-child(5n){animation-delay:.55s}
@keyframes bfEq{0%,100%{height:12%}50%{height:100%}}
.bf-ecg{left:50%;top:50%;transform:translate(-50%,-50%);width:86%;height:60px}
.bf-ecg path{fill:none;stroke:var(--tint);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;animation:bfEcg 2.4s linear infinite;filter:drop-shadow(0 0 5px var(--tint))}
@keyframes bfEcg{0%{stroke-dashoffset:260}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-260}}
.bf-beat{left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--tint);animation:bfBeat 1.2s ease-in-out infinite}
@keyframes bfBeat{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.3);opacity:1}}
.bf-face{left:50%;top:48%;transform:translate(-50%,-50%);width:40px;height:46px}
.bf-face .h{position:absolute;left:50%;top:0;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;border:2px solid var(--tint);animation:bfTwk 3s ease-in-out infinite}
.bf-face .b{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:36px;height:20px;border-radius:18px 18px 0 0;border:2px solid var(--tint);border-bottom:none}
.bf-ring{left:50%;top:48%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:1px dashed rgba(255,255,255,.25);animation:bfRot 7s linear infinite}
.bf-ring.r2{width:108px;height:108px;margin:-54px 0 0 -54px;animation-duration:11s;animation-direction:reverse}
.bf-ring b{position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:#fff;box-shadow:0 0 9px var(--tint)}
@keyframes bfRot{to{transform:rotate(360deg)}}
.bf-slide{left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:64px;border-radius:8px;border:1px solid var(--tint);background:rgba(255,255,255,.03);padding:10px;display:flex;flex-direction:column;gap:6px}
.bf-slide b{height:6px;border-radius:3px;background:var(--tint);transform-origin:left;animation:bfStream 2.6s ease-in-out infinite}
.bf-slide b:nth-child(1){width:55%}.bf-slide b:nth-child(2){width:100%;opacity:.7;animation-delay:.3s}.bf-slide b:nth-child(3){width:78%;opacity:.6;animation-delay:.6s}
.bf-bars{display:none}
.bf-orbitcore{left:50%;top:48%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:radial-gradient(closest-side,#fff,var(--tint));box-shadow:0 0 16px var(--tint),0 0 30px var(--glow);animation:bfBeat 2.6s ease-in-out infinite}
body[data-motion="off"] .rc-scene *{animation:none}

/* arzhang — camera iris (small) */
.fx-iris{inset:13%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 16deg,var(--tint) 20deg 28deg,transparent 32deg 76deg,var(--tint) 80deg 88deg,transparent 92deg 136deg,var(--tint) 140deg 148deg,transparent 152deg 196deg,var(--tint) 200deg 208deg,transparent 212deg 256deg,var(--tint) 260deg 268deg,transparent 272deg 316deg,var(--tint) 320deg 328deg,transparent 332deg);
  -webkit-mask:radial-gradient(closest-side,transparent 42%,#000 48%,#000 94%,transparent);
          mask:radial-gradient(closest-side,transparent 42%,#000 48%,#000 94%,transparent);
  opacity:.85;animation:radSpin 8s linear infinite}
.fx-iris.i2{inset:25%;animation-duration:5s;animation-direction:reverse;opacity:.6}
.fx-irisdot{left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:radial-gradient(closest-side,#fff,var(--tint));box-shadow:0 0 9px var(--tint);animation:bfBeat 2.4s ease-in-out infinite}
/* manshoor — spectrum fan (small) */
.fx-fan{left:16%;top:50%;width:0;height:0}
.fx-fan b{position:absolute;left:0;top:0;height:3px;width:42px;border-radius:2px;transform:rotate(var(--r,0)) scaleX(.6);transform-origin:left center;animation:fxFan 3.4s ease-in-out infinite}
.fx-fan b:nth-child(1){--r:-22deg;background:linear-gradient(90deg,#5FD68C,transparent)}
.fx-fan b:nth-child(2){--r:0deg;background:linear-gradient(90deg,#F4B45E,transparent);animation-delay:.2s}
.fx-fan b:nth-child(3){--r:22deg;background:linear-gradient(90deg,#FF6B6B,transparent);animation-delay:.4s}
@keyframes fxFan{0%,100%{transform:rotate(var(--r,0)) scaleX(.5);opacity:.5}50%{transform:rotate(var(--r,0)) scaleX(1);opacity:1}}
.fx-fandot{left:16%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:0 0 9px var(--tint);animation:bfTwk 1.8s ease-in-out infinite}

/* arzhang — iris (big card scene) */
.bf-iris{left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 14deg,var(--tint) 18deg 26deg,transparent 30deg 74deg,var(--tint) 78deg 86deg,transparent 90deg 134deg,var(--tint) 138deg 146deg,transparent 150deg 194deg,var(--tint) 198deg 206deg,transparent 210deg 254deg,var(--tint) 258deg 266deg,transparent 270deg 314deg,var(--tint) 318deg 326deg,transparent 330deg);
  -webkit-mask:radial-gradient(closest-side,transparent 46%,#000 52%,#000 96%,transparent);
          mask:radial-gradient(closest-side,transparent 46%,#000 52%,#000 96%,transparent);
  opacity:.9;animation:radSpin 9s linear infinite}
.bf-iris.i2{width:52px;height:52px;margin:-26px 0 0 -26px;animation-duration:6s;animation-direction:reverse;opacity:.7}
.bf-iriscore{left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(closest-side,#fff,var(--tint));box-shadow:0 0 18px var(--tint),0 0 34px var(--glow);animation:bfBeat 2.6s ease-in-out infinite}
/* manshoor — classic prism (big card scene) */
.bf-pbeam{left:6%;top:50%;height:2px;width:38%;transform:translateY(-50%);background:linear-gradient(90deg,transparent,#fff);box-shadow:0 0 8px #fff;overflow:hidden}
.bf-pbeam::after{content:"";position:absolute;top:0;left:0;width:16px;height:100%;background:#fff;filter:blur(1px);animation:bfBeamFlow 1.8s linear infinite}
@keyframes bfBeamFlow{0%{transform:translateX(-16px);opacity:0}30%{opacity:1}100%{transform:translateX(120px);opacity:0}}
.bf-ptri{left:46%;top:50%;width:0;height:0;transform:translate(-50%,-50%);
  border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:32px solid rgba(255,255,255,.92);
  filter:drop-shadow(0 0 9px rgba(255,255,255,.55));animation:bfPrism 6s ease-in-out infinite}
.bf-pfan{left:52%;top:50%;width:42%;height:0}
.bf-pfan b{position:absolute;left:0;top:0;height:3px;width:100%;border-radius:2px;transform:rotate(var(--r,0)) scaleX(.2);transform-origin:left center;animation:bfRay 3s ease-in-out infinite}
.bf-pfan b:nth-child(1){--r:-17deg;background:linear-gradient(90deg,#5FD68C,transparent)}
.bf-pfan b:nth-child(2){--r:0deg;background:linear-gradient(90deg,#F4B45E,transparent);animation-delay:.25s}
.bf-pfan b:nth-child(3){--r:17deg;background:linear-gradient(90deg,#FF6B6B,transparent);animation-delay:.5s}
@keyframes bfRay{0%{transform:rotate(var(--r,0)) scaleX(.15);opacity:.3}55%{opacity:1}100%{transform:rotate(var(--r,0)) scaleX(1);opacity:.9}}
@media (max-width:760px){.rad-card{width:248px}}

/* ===== header platform counter ===== */
.plat-counter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:7px 15px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(20,19,28,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .3s var(--ease-out),border-color .3s,background .3s}
.plat-counter:hover{transform:translate(-50%,-50%) translateY(-2px);border-color:var(--line-gold);background:rgba(244,180,94,.08)}
.plat-counter .pc-dot{width:7px;height:7px;border-radius:50%;background:#5FD68C;box-shadow:0 0 9px #5FD68C;
  animation:pcDot 2.4s ease-in-out infinite}
@keyframes pcDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}
.plat-counter .pc-num{font-family:'Inter';font-weight:800;font-size:15px;color:#fff}
.plat-counter .pc-lbl{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.plat-counter:hover .pc-lbl{color:var(--ink)}
body[data-motion="off"] .plat-counter .pc-dot{animation:none}
@media (max-width:760px){.plat-counter .pc-lbl{display:none}.plat-counter{padding:7px 12px}}
@media (max-width:480px){.plat-counter{display:none}}

/* luminous underline beneath the topbar */
.topbar{position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,180,94,.5) 30%,rgba(124,92,255,.5) 70%,transparent);
  box-shadow:0 0 12px rgba(244,180,94,.3)}

.brand .word small{font-family:'Vazirmatn';font-weight:500;font-size:9.5px;letter-spacing:0;
  color:var(--faint);margin-top:3px;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}

/* ===== legal/info opener button (inside corner stack) ===== */
.legal-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 14px !important;border-radius:12px;font-size:12.5px;font-weight:600;color:var(--muted);
  background:linear-gradient(180deg,rgba(20,19,28,.82),rgba(13,12,18,.82));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);box-shadow:0 16px 40px -16px rgba(0,0,0,.7);transition:transform .3s var(--ease-out),border-color .3s,color .3s,background .3s}
.legal-btn:hover{transform:translateY(-3px);color:var(--ink);border-color:var(--line-gold);background:rgba(244,180,94,.1)}
.legal-btn svg{width:16px;height:16px;color:var(--amber)}

/* ===== legal panel ===== */
.lg-panel{max-width:680px}
.lg-body{position:relative;z-index:2}
.lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.lg-col{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.lg-col h4{font-size:12px;font-weight:700;color:var(--amber);margin-bottom:10px;letter-spacing:.02em}
.lg-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--line);font-size:12.5px}
.lg-col .lg-row:first-of-type{border-top:none}
.lg-row span{color:var(--faint)}
.lg-row b{color:var(--ink);font-weight:600;text-align:end}
.lg-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.lg-link{font-size:12.5px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:999px;padding:8px 15px;transition:.22s}
.lg-link:hover{color:var(--ink);border-color:var(--amber);background:rgba(244,180,94,.08)}
.lg-seals{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.lg-seal{display:flex;align-items:center;gap:11px;flex:1 1 220px;min-width:0;padding:13px 15px;border-radius:14px;
  background:rgba(244,180,94,.05);border:1px dashed var(--line-gold);transition:.25s}
.lg-seal:hover{background:rgba(244,180,94,.1);border-style:solid}
.lg-seal-ic{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;color:var(--amber);background:rgba(244,180,94,.12)}
.lg-seal-ic svg{width:22px;height:22px}
.lg-seal-tx b{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.lg-seal-tx span{font-size:11px;color:var(--faint)}
.lg-note{font-size:11px;color:var(--faint);margin-top:10px;line-height:1.6}
.lg-copy{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);font-family:'Inter';text-align:center}

/* ===========================================================
   MOBILE — keep every feature visible & creative
   =========================================================== */
@media (max-width:600px){
  .topbar{height:56px;padding:0 14px}
  .brand .word{font-size:18px}
  .brand .word small{font-size:8.5px;max-width:150px}
  .topnav{display:none}
  .gx-hint{display:none}
  /* controls row pinned to the very bottom; the compact wall sits just above it */
  .corner-cards{left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-width:none;flex-direction:row;gap:8px;z-index:46}
  .ccard{flex:1;padding:9px 10px;border-radius:13px;min-width:0}
  .cc-coin,.cc-ic{width:32px;height:32px}
  .cc-ic svg{width:17px;height:17px}
  .cc-lbl{font-size:9px}
  .cc-val{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cc-desc{display:none}
  .cc-go,.cc-more{display:none}
  .legal-btn span{display:none}
  .legal-btn{flex:0 0 auto}
  /* hover card → bottom sheet, raised above the bottom widgets */
  .rad-card{position:fixed!important;left:10px!important;right:10px!important;bottom:auto!important;top:50%!important;transform:translateY(-50%) scale(1)!important;width:auto!important}
  .rad-card:not(.show){transform:translateY(-46%) scale(.97)!important}
  .rc-scene{height:96px}
  /* panel fills the screen comfortably */
  .lg-grid{grid-template-columns:1fr}
  .lg-seal{flex-basis:100%}
}
@media (max-width:600px){
  /* give the constellation more breathing room: shrink sun a touch */
  .rad-sun{width:132px;height:132px}
  .rad-sun .sun-word{font-size:17px;bottom:-28px}
  .gx-node{box-shadow:0 6px 18px -8px var(--glow),0 0 16px -4px var(--glow),inset 0 -5px 12px rgba(0,0,0,.4),inset 0 5px 12px rgba(255,255,255,.16)}
  .gx-label{font-size:11px}
}

/* =====================  SOON / BUILDING (dim) ===================== */
.rad-arm.soon .rad-ray{opacity:.09}
.rad-arm.soon .rad-ray::after{opacity:.28}
.rad-arm.soon .rad-flow{opacity:0}
.gx-node.st-building{filter:grayscale(.55) brightness(.72);opacity:.8;transition:filter .4s,opacity .4s}
.rad-node-wrap:hover .gx-node.st-building,.rad-arm.lit .gx-node.st-building{filter:grayscale(0) brightness(1);opacity:1}
.rad-arm.soon.lit .rad-ray{opacity:.6}
.rad-arm.soon.lit .rad-flow{opacity:1}
.soon-chip{display:block;margin:3px auto 0;width:max-content;font-family:'Vazirmatn';font-size:8.5px;font-weight:600;
  letter-spacing:.02em;color:var(--amber);background:rgba(244,180,94,.12);border:1px solid rgba(244,180,94,.3);
  border-radius:999px;padding:1px 7px;text-shadow:none}
body[dir="ltr"] .soon-chip{font-family:'Inter'}

/* ---- bidar: document + 4-dot confidence light ---- */
.fx-doc{position:absolute;left:50%;top:42%;width:42%;height:48%;transform:translate(-50%,-50%);border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.55));
  box-shadow:0 0 10px var(--tint),inset 0 0 0 1px rgba(255,255,255,.6)}
.fx-doc::before{content:"";position:absolute;left:18%;right:18%;top:26%;height:2px;border-radius:2px;
  background:var(--tint);box-shadow:0 5px 0 color-mix(in oklab,var(--tint) 60%,transparent),0 10px 0 color-mix(in oklab,var(--tint) 40%,transparent)}
.fx-cdots{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);display:flex;gap:3px}
.fx-cdots b{width:5px;height:5px;border-radius:50%;animation:cdot 2.6s ease-in-out infinite}
.fx-cdots b.g{background:#5FD68C;box-shadow:0 0 6px #5FD68C}
.fx-cdots b.y{background:#F4D24E;box-shadow:0 0 6px #F4D24E;animation-delay:.5s}
.fx-cdots b.o{background:#F39A4E;box-shadow:0 0 6px #F39A4E;animation-delay:1s}
.fx-cdots b.r{background:#FF6B6B;box-shadow:0 0 6px #FF6B6B;animation-delay:1.5s}
@keyframes cdot{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}

/* ---- abzar: rotating tool grid ---- */
.fx-tg{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);
  display:grid;grid-template:1fr 1fr/1fr 1fr;gap:3px;animation:tgSpin 7s linear infinite}
.fx-tg b{border-radius:3px;background:rgba(255,255,255,.85);box-shadow:0 0 6px var(--tint);animation:tgCycle 3s ease-in-out infinite}
.fx-tg b:nth-child(1){border-radius:50%}
.fx-tg b:nth-child(2){animation-delay:.4s}
.fx-tg b:nth-child(3){animation-delay:.8s;transform:rotate(45deg)}
.fx-tg b:nth-child(4){animation-delay:1.2s;border-radius:50% 3px 50% 3px}
@keyframes tgSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes tgCycle{0%,100%{opacity:.5}50%{opacity:1}}
body[data-motion="off"] .fx-doc,body[data-motion="off"] .fx-cdots b,body[data-motion="off"] .fx-tg,body[data-motion="off"] .fx-tg b{animation:none}

/* ---- hover-card scenes: bidar + abzar ---- */
.rc-scene .bf-doc{position:absolute;left:50%;top:46%;width:80px;height:62px;transform:translate(-50%,-50%);border-radius:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6));box-shadow:0 6px 22px var(--glow)}
.rc-scene .bf-doc b{position:absolute;left:14%;height:4px;border-radius:3px;background:color-mix(in oklab,var(--tint) 55%,#888)}
.rc-scene .bf-doc b:nth-child(1){top:22%;right:14%}
.rc-scene .bf-doc b:nth-child(2){top:42%;right:34%}
.rc-scene .bf-doc b:nth-child(3){top:62%;right:24%}
.rc-scene .bf-cdots{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.rc-scene .bf-cdots b{width:11px;height:11px;border-radius:50%;animation:cdot 2.4s ease-in-out infinite}
.rc-scene .bf-cdots b.g{background:#5FD68C;box-shadow:0 0 10px #5FD68C}
.rc-scene .bf-cdots b.y{background:#F4D24E;box-shadow:0 0 10px #F4D24E;animation-delay:.4s}
.rc-scene .bf-cdots b.o{background:#F39A4E;box-shadow:0 0 10px #F39A4E;animation-delay:.8s}
.rc-scene .bf-cdots b.r{background:#FF6B6B;box-shadow:0 0 10px #FF6B6B;animation-delay:1.2s}
.rc-scene .bf-scan{position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:bfScan 2.8s linear infinite}
@keyframes bfScan{0%{transform:translateX(-40%)}100%{transform:translateX(360%)}}
.rc-scene .bf-tg{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);
  display:grid;grid-template:1fr 1fr/1fr 1fr;gap:6px;animation:tgSpin 8s linear infinite}
.rc-scene .bf-tg b{border-radius:7px;background:rgba(255,255,255,.9);box-shadow:0 0 12px var(--glow);animation:tgCycle 2.6s ease-in-out infinite}
.rc-scene .bf-tg b:nth-child(1){border-radius:50%}
.rc-scene .bf-tg b:nth-child(2){animation-delay:.5s}
.rc-scene .bf-tg b:nth-child(3){transform:rotate(45deg);animation-delay:1s}
.rc-scene .bf-tg b:nth-child(4){border-radius:50% 7px 50% 7px;animation-delay:1.5s}
.rc-enter.soon{background:rgba(244,180,94,.12);color:var(--amber);box-shadow:none}
.rc-scene.rc-soon{display:grid;place-items:center}
.rc-lock svg{width:40px;height:40px;color:var(--tint);opacity:.85}

@media (prefers-reduced-motion:reduce){
  .rad-sun .s-rays,.rad-sun .s-orbit,.rad-sun .s-flare,.gx-atmo,.fx,.rad-flow i,.gx-stars,.rad-node-float{animation:none !important}
  .rad-node-wrap,.rad-sun{animation:none !important;opacity:1 !important}
  .fx-doc,.fx-cdots b,.fx-tg,.rc-scene .bf-cdots b,.rc-scene .bf-tg,.rc-scene .bf-scan{animation:none !important}
}

/* ===========================================================
   PLAYFUL CONSTELLATION — «بگیر و بازی کن»
   wiggle · grab juice · fling sparks · bump rings · meteors · first-visit hint
   =========================================================== */
.rad-node-wrap{cursor:grab;touch-action:none}
.rad-node-wrap.dragging,body.grabbing .rad-node-wrap{cursor:grabbing}
/* a planet away from its home spot (drag / fling / zero-g float) hides its own
   label so travelling text never lands on top of other planets */
.gx-label{transition:opacity .3s var(--ease)}
.rad-node-wrap.afar .gx-label{opacity:0}
.gx-node{transition:transform .18s var(--ease)}
.gx-node.held{transform:scale(1.1,.94)}
.gx-node.wiggle{animation:gxWiggle .95s var(--ease) both}
@keyframes gxWiggle{
  0%,100%{transform:none}
  15%{transform:scale(1.09,.9) rotate(-3deg)}
  35%{transform:scale(.93,1.08) rotate(2.6deg)}
  55%{transform:scale(1.05,.95) rotate(-1.8deg)}
  75%{transform:scale(.98,1.03)}
}
.gx-node.boing{animation:gxBoing .6s var(--ease-out) both}
@keyframes gxBoing{
  0%{transform:scale(1.14,.86)}
  38%{transform:scale(.92,1.1)}
  68%{transform:scale(1.05,.96)}
  100%{transform:none}
}
.fling-spark{position:absolute;z-index:39;width:5px;height:5px;border-radius:50%;pointer-events:none;
  background:var(--tt,#FFD98C);box-shadow:0 0 8px var(--tt,#FFD98C);transform:translate(-50%,-50%);
  animation:sparkFly .62s var(--ease-out) forwards}
@keyframes sparkFly{to{transform:translate(calc(-50% + var(--sx,0px)),calc(-50% + var(--sy,0px))) scale(.2);opacity:0}}
.bump-ring{position:absolute;z-index:38;width:14px;height:14px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,244,222,.75);transform:translate(-50%,-50%) scale(.4);opacity:.9;
  animation:bumpRing .55s var(--ease-out) forwards}
@keyframes bumpRing{to{transform:translate(-50%,-50%) scale(3.4);opacity:0;border-width:1px}}
/* ---- "drag to play" glass hint card (with a looping motion clip) ---- */
.drag-hint-card{position:absolute;z-index:46;transform:translate(-50%,4px) scale(.96);pointer-events:none;
  display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:16px;
  background:linear-gradient(145deg,rgba(30,26,42,.86),rgba(16,14,22,.9));
  border:1px solid var(--line-gold);box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(244,180,94,.08),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;white-space:nowrap;
  transition:opacity .45s var(--ease),transform .45s var(--ease-out)}
[dir="ltr"] .drag-hint-card{padding:8px 8px 8px 14px}
.drag-hint-card.show{opacity:1;transform:translate(-50%,-4px) scale(1);animation:dhcBob 2.2s ease-in-out .45s infinite}
@keyframes dhcBob{0%,100%{transform:translate(-50%,-4px) scale(1)}50%{transform:translate(-50%,-11px) scale(1)}}
.dhc-media{position:relative;flex:none;width:46px;height:46px;border-radius:12px;overflow:hidden;
  background:radial-gradient(closest-side,rgba(244,180,94,.28),rgba(16,14,22,.6));border:1px solid var(--line-2)}
.dhc-vid{width:100%;height:100%;object-fit:cover;display:block}
/* the hand overlays the media and covers the (still-loading) video until it plays;
   it fades out once the clip is playing. Never sets display:none on the video. */
.dhc-hand{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font-size:22px;
  background:radial-gradient(closest-side,rgba(244,180,94,.28),rgba(16,14,22,.72));
  transition:opacity .45s ease;animation:dhcHand 1.8s var(--ease-out) infinite}
.drag-hint-card.playing .dhc-hand{opacity:0;pointer-events:none;animation:none}
@keyframes dhcHand{0%,100%{transform:translateX(-7px) rotate(-6deg)}50%{transform:translateX(7px) rotate(6deg)}}
.dhc-txt{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.dhc-txt::after{content:" ✦";color:var(--amber)}
.drag-hint-card::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:rgba(16,14,22,.9);border-inline-end:1px solid var(--line-gold);border-block-end:1px solid var(--line-gold)}
body[data-motion="off"] .drag-hint-card.show{animation:none}
body[data-motion="off"] .dhc-hand{animation:none}
.sky-meteor{position:absolute;z-index:2;left:0;top:0;width:3px;height:3px;border-radius:50%;pointer-events:none;
  background:#FFF4DE;box-shadow:0 0 10px 2px rgba(255,244,222,.8);
  transform:translate(var(--mx0),var(--my0));animation:meteorFly 1.8s cubic-bezier(.3,.1,.6,1) forwards}
.sky-meteor::after{content:"";position:absolute;right:1px;top:1px;width:86px;height:1.5px;transform-origin:100% 50%;
  transform:rotate(calc(var(--mrot,0) * 1rad + 3.14159rad));
  background:linear-gradient(90deg,transparent,rgba(255,244,222,.75))}
@keyframes meteorFly{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translate(var(--mx1),var(--my1));opacity:0}}
body[data-motion="off"] .gx-node.wiggle,body[data-motion="off"] .gx-node.boing{animation:none}
body[data-motion="off"] .sky-meteor,body[data-motion="off"] .fling-spark,body[data-motion="off"] .bump-ring{display:none}
@media (prefers-reduced-motion:reduce){
  .gx-node.wiggle,.gx-node.boing{animation:none}
  .sky-meteor,.fling-spark,.bump-ring{display:none}
  /* keep the "drag to play" invite visible (it's guidance, not decoration) — just calm */
  .drag-hint-card.show,.dhc-hand{animation:none}
}