/* =====================================================================
   CONNECT PAGE — minimal "Tap to join"
   one orb button (orbiting ring · sonar waves · draw-on tick) · typewriter address ·
   a light that travels along three steps · a few drifting blocks in the background
   ===================================================================== */
#page-connect > *{ max-width:760px; margin-left:auto; margin-right:auto; }
.cx{ position:relative; isolation:isolate; text-align:center; padding:6px 0 30px; }
.cx h2{ font-size:clamp(32px,5vw,50px); margin:10px 0 8px; }
.cx-sub{ color:var(--cream-dim); margin:0 0 26px; font-size:16px; }

/* drifting blocks */
.cx-cubes{ position:absolute; inset:-20px -40px; z-index:-1; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent); mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent); }
.cx-cubes i{ position:absolute; bottom:-30px; left:var(--x); width:var(--s); height:var(--s); border:1px solid rgba(150,170,255,.4); background:rgba(120,140,255,.09); border-radius:2px; opacity:0;
  animation:cxRise var(--t) linear infinite; animation-delay:calc(var(--d) * -1); }
@keyframes cxRise{ 0%{ transform:translateY(0) rotate(0); opacity:0; } 10%{ opacity:.8; } 90%{ opacity:.5; } 100%{ transform:translateY(-640px) rotate(200deg); opacity:0; } }

/* edition tabs */
.cx-tabs{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:5px; border-radius:40px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); margin-bottom:44px; }
.cx-tabs button{ appearance:none; position:relative; z-index:1; border:0; background:none; cursor:pointer; font:inherit; font-size:15px; font-weight:800; color:var(--cream-dim); padding:11px 34px; border-radius:30px; transition:color .3s; display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; }
.cx-tabs button.is-on{ color:#fff; } .cx-tabs button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* 3D block icon inside Connect tabs */
.tab-block-ico{ image-rendering:pixelated; image-rendering:-moz-crisp-edges; image-rendering:crisp-edges; width:20px; height:20px; flex-shrink:0; display:inline-block; }
.cx-thumb{ position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:30px; background:linear-gradient(135deg,#8f63ff,#4f8bff); box-shadow:0 8px 24px -6px rgba(124,92,255,.85); transition:transform .5s cubic-bezier(.34,1.5,.64,1); }
.cx[data-ed="bedrock"] .cx-thumb{ transform:translateX(100%); }

/* the orb */
.cx-stage{ position:relative; width:220px; height:220px; margin:0 auto 6px; display:grid; place-items:center; }
.cx-wave{ position:absolute; inset:14px; border-radius:50%; border:2px solid rgba(124,140,255,.55); opacity:0; animation:cxWave 3.6s ease-out infinite; pointer-events:none; }
.cx-wave.w2{ animation-delay:1.2s; } .cx-wave.w3{ animation-delay:2.4s; }
@keyframes cxWave{ 0%{ transform:scale(.8); opacity:.7; } 100%{ transform:scale(1.75); opacity:0; } }
.cx-orb{ appearance:none; position:relative; width:180px; height:180px; padding:0; border:0; border-radius:50%; cursor:pointer; background:none; color:#fff; transition:transform .35s cubic-bezier(.3,1.6,.5,1); }
.cx-orb:hover{ transform:scale(1.07); } .cx-orb:active{ transform:scale(.95); }
.cx-orb:focus-visible{ outline:3px solid #fff; outline-offset:6px; }
.cx-ring{ position:absolute; inset:0; border-radius:50%; padding:3px; background:conic-gradient(from var(--cx-a,0deg), #4f8bff, #8f63ff, #ff6ad5, transparent 70%, #4f8bff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:cxSpin 5s linear infinite; filter:drop-shadow(0 0 12px rgba(124,92,255,.8)); }
@property --cx-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes cxSpin{ to{ --cx-a:360deg; } }
.cx-orb:hover .cx-ring{ animation-duration:1.8s; }
.cx-disc{ position:absolute; inset:9px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden;
  background:radial-gradient(circle at 35% 28%, rgba(150,135,255,.35), rgba(20,22,60,.92) 62%); box-shadow:inset 0 0 30px rgba(0,0,0,.45), 0 0 60px -10px rgba(124,92,255,.7); }
.cx-ico, .cx-tick{ transition:opacity .3s, transform .5s cubic-bezier(.3,1.7,.5,1); }
.cx-tick{ position:absolute; top:34px; width:58px; height:58px; opacity:0; transform:scale(.4); }
.cx-tick path{ stroke-dasharray:22; stroke-dashoffset:22; }
.cx-lab{ font-size:14px; letter-spacing:.4px; transition:opacity .25s; margin-top:34px; }
.cx-orb.done .cx-lab{ margin-top:48px; color:#b9ffd0; }
.cx-orb.done .cx-ring{ background:conic-gradient(#3ddc84,#7ee7ff,#3ddc84); animation:none; filter:drop-shadow(0 0 16px rgba(61,220,132,.9)); }
.cx-orb.done .cx-ico{ opacity:0; transform:scale(.4); } .cx-orb.done .cx-tick{ opacity:1; transform:none; color:#8ff29e; }
.cx-orb.done .cx-tick path{ animation:cxDraw .35s ease-out forwards; }
@keyframes cxDraw{ to{ stroke-dashoffset:0; } }
.cx-orb.pop::after{ content:''; position:absolute; inset:0; border-radius:50%; border:3px solid #fff; animation:cxPop .7s ease-out forwards; pointer-events:none; }
@keyframes cxPop{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(1.9); opacity:0; } }

/* address + port */
.cx-ip{ margin-top:18px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(20px,5.6vw,32px); font-weight:800; color:#fff; letter-spacing:.5px; min-height:1.4em; text-shadow:0 0 22px rgba(124,92,255,.9), 0 0 50px rgba(79,139,255,.5); }
.cx-caret{ display:inline-block; width:.12em; height:1.05em; margin-left:4px; vertical-align:-.15em; background:#9fd0ff; animation:cxBlink 1s steps(1) infinite; }
@keyframes cxBlink{ 50%{ opacity:0; } }
.cx-port{ appearance:none; cursor:pointer; margin:12px auto 0; display:flex; width:fit-content; align-items:center; gap:10px; font:inherit; font-size:14px; font-weight:700; color:var(--cream-dim); padding:9px 18px; border-radius:30px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); transition:transform .2s, border-color .2s, background .2s; }
.cx-port[hidden]{ display:none; } .cx-port:hover{ transform:translateY(-2px); border-color:rgba(160,140,255,.8); background:rgba(143,99,255,.15); }
.cx-port b{ color:#fff; font-size:16px; letter-spacing:.5px; } .cx-port em{ font-style:normal; font-size:11px; opacity:.7; } .cx-port.done em{ color:#8ff29e; opacity:1; }
.cx[data-ed="bedrock"] .cx-port{ animation:cxIn .5s cubic-bezier(.2,.9,.2,1); }
@keyframes cxIn{ from{ opacity:0; transform:translateY(10px); } }
.cx-live{ display:flex; width:fit-content; align-items:center; gap:9px; margin:14px auto 0; padding:6px 14px; border-radius:30px; font-size:12.5px; font-weight:700; color:#d8ffe8; background:rgba(61,220,132,.1); border:1px solid rgba(61,220,132,.3); }
.cx-live[hidden]{ display:none; } .cx-live i{ width:8px; height:8px; border-radius:50%; background:#3ddc84; animation:cxPing 1.8s infinite; }
@keyframes cxPing{ 0%{ box-shadow:0 0 0 0 rgba(61,220,132,.7); } 70%{ box-shadow:0 0 0 9px rgba(61,220,132,0); } 100%{ box-shadow:0 0 0 0 rgba(61,220,132,0); } }

/* three steps with a travelling light */
.cx-steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; list-style:none; margin:50px auto 0; padding:0; max-width:700px; text-align:center; }
.cx-steps::before{ content:''; position:absolute; left:calc(100% / 6); right:calc(100% / 6); top:19px; height:2px; background:rgba(255,255,255,.12); }
.cx-steps li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 8px; transition:opacity .35s, transform .35s; }
.cx-steps.swap li{ opacity:0; transform:translateY(8px); }
.cx-num{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff; background:#14173f; border:2px solid rgba(255,255,255,.22); animation:cxLit 6s ease-in-out infinite; position:relative; z-index:1; }
.cx-steps li:nth-child(2) .cx-num{ animation-delay:2s; } .cx-steps li:nth-child(3) .cx-num{ animation-delay:4s; }
@keyframes cxLit{ 0%,36%,100%{ border-color:rgba(255,255,255,.22); box-shadow:none; background:#14173f; transform:none; } 8%,26%{ border-color:#fff; background:linear-gradient(135deg,#8f63ff,#4f8bff); box-shadow:0 0 24px rgba(124,92,255,.95); transform:scale(1.14); } }
.cx-steps strong{ font-size:15px; color:#fff; margin-top:6px; } .cx-steps small{ font-size:12.5px; color:var(--cream-dim); line-height:1.4; }
.cx-spark{ position:absolute; top:15px; left:calc(100% / 6); width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#fff; box-shadow:0 0 14px 4px #8f63ff; animation:cxRun 6s linear infinite; pointer-events:none; }
@keyframes cxRun{ 0%{ left:calc(100% / 6); opacity:0; } 6%{ opacity:1; } 94%{ opacity:1; } 100%{ left:calc(100% * 5 / 6); opacity:0; } }
.cx-help{ margin:44px 0 0; font-size:14px; color:var(--cream-dim); } .cx-help a{ color:#9fd0ff; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .cx-tabs button{ padding:10px 28px; } .cx-tabs{ margin-bottom:34px; }
  .cx-steps{ grid-template-columns:1fr; gap:22px; margin-top:40px; } .cx-steps::before, .cx-spark{ display:none; }
  .cx-steps li{ flex-direction:column; }
}
@media (prefers-reduced-motion: reduce){
  .cx-cubes i, .cx-wave, .cx-ring, .cx-caret, .cx-num, .cx-spark, .cx-live i, .cx-port{ animation:none !important; }
  .cx-thumb, .cx-orb, .cx-ico, .cx-tick{ transition:none !important; }
}