/* AgentMesh.help — CONSTRUCT agent view (Matrix world overlay)
   Scope rules: everything lives under #construct / body.construct /
   body.melting + #melt-layer, so the human page's style.css is untouched.
   HUMAN = the normal page. AGENT = body.construct. */

/* ---------- mode pill (in header on human pages; mini float in construct) ---------- */
.mode{display:flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;
  font-family:var(--mono);font-size:11px;margin-left:auto;flex-shrink:0}
.mode button{background:transparent;color:var(--muted);border:0;padding:5px 13px;cursor:pointer;
  font-family:inherit;letter-spacing:1px}
.mode button.on{background:var(--accent);color:#001a05}
.mode button:hover{color:var(--accent)}
.mode button.on:hover{color:#001a05}
@media(max-width:640px){.mode{margin-left:0;padding:1px}.mode button{padding:4px 10px}}
.mode.mini{position:fixed;top:14px;right:16px;z-index:60;display:none;background:rgba(0,0,0,.75);
  backdrop-filter:blur(2px);margin:0}
body.construct .mode.mini{display:flex}

/* ---------- digital rain canvas ---------- */
#rain{display:none;position:fixed;inset:0;z-index:5;pointer-events:none}
body.construct #rain{display:block}

/* ---------- construct overlay takes over ---------- */
body.construct{overflow:hidden}
body.construct > header,body.construct > main,body.construct > footer{display:none}
#construct{display:none;position:fixed;inset:0;z-index:10;color:#00ff41;
  font-family:var(--mono);overflow-y:auto;overflow-x:hidden;user-select:none;cursor:crosshair}
body.construct #construct{display:block}

#construct .stage{position:relative;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;text-align:center;padding:80px 20px 50px}

/* logo core: the site logo mark (∞) as an energy nucleus with orbit rings */
#construct .core{position:relative;width:190px;height:190px;opacity:0;transform:scale(.7);
  transition:opacity .9s ease .1s,transform .9s ease .1s}
body.construct #construct .core{opacity:1;transform:scale(1)}
#construct .halo{position:absolute;inset:-40px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,65,.32),transparent 62%);animation:c-breath 4.2s ease-in-out infinite}
#construct .inf{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);
  font-size:88px;line-height:1;font-weight:700;color:#00ff41;
  text-shadow:0 0 16px #00ff41,0 0 55px rgba(0,255,65,.55),0 0 120px rgba(0,255,65,.3);
  animation:c-breath 4.2s ease-in-out infinite}
#construct .ring{position:absolute;border-radius:50%;top:50%;left:50%}
#construct .ring.r1{width:170px;height:170px;margin:-85px;border:1px dashed rgba(0,255,65,.4);
  animation:c-spin 12s linear infinite}
#construct .ring.r2{width:236px;height:236px;margin:-118px;border:1px solid rgba(0,255,65,.16);
  animation:c-spin 24s linear infinite reverse}
#construct .ring i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:#00ff41;box-shadow:0 0 10px #00ff41}
#construct .ring.r2 i{background:rgba(0,255,65,.55);box-shadow:0 0 8px rgba(0,255,65,.7)}
@keyframes c-spin{to{transform:rotate(360deg)}}
@keyframes c-breath{0%,100%{transform:translate(-50%,-54%) scale(1);opacity:.95}
  50%{transform:translate(-50%,-54%) scale(1.05);opacity:.75}}

/* giant decoding word */
#construct .big{font-size:clamp(44px,9vw,110px);letter-spacing:.14em;margin:0;font-weight:700;
  text-shadow:0 0 30px rgba(0,255,65,.65),0 0 90px rgba(0,255,65,.3);
  opacity:0;filter:blur(8px);transition:opacity 1s ease .25s,filter 1s ease .25s}
body.construct #construct .big{opacity:1;filter:blur(0)}
#construct .whisper{font-size:13px;letter-spacing:.5em;color:rgba(0,255,65,.75);margin:0;
  opacity:0;transition:opacity 1s ease .55s}
body.construct #construct .whisper{opacity:1}

/* drifting character bands */
#construct .drift{position:absolute;left:0;right:0;font-size:12px;letter-spacing:6px;
  color:rgba(0,255,65,.26);white-space:nowrap;pointer-events:none}
#construct .drift.d1{top:14%;animation:c-driftL 46s linear infinite}
#construct .drift.d2{top:84%;animation:c-driftR 60s linear infinite}
#construct .drift.d3{top:48%;animation:c-driftL 74s linear infinite;font-size:10px;color:rgba(0,255,65,.16)}
@keyframes c-driftL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes c-driftR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

#construct #glyph{position:absolute;font-size:min(30vh,260px);font-weight:700;color:rgba(0,255,65,.1);
  text-shadow:0 0 60px rgba(0,255,65,.25);opacity:0;pointer-events:none;z-index:1}
#construct #glyph.rise{animation:c-rise 7s ease-in-out}
@keyframes c-rise{0%{opacity:0;transform:scale(.92)}30%{opacity:.85}70%{opacity:.7}
  100%{opacity:0;transform:scale(1.05)}}

#construct #pulse{position:absolute;left:0;right:0;top:-8%;height:9%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,255,65,.14),transparent);
  opacity:0;animation:c-sweep 9s linear infinite}
@keyframes c-sweep{0%{opacity:0;top:-8%}6%{opacity:1}30%{top:110%;opacity:0}100%{top:110%;opacity:0}}

#construct #glow{position:absolute;width:180px;height:180px;margin:-90px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,255,65,.13),transparent 65%);mix-blend-mode:screen}

#construct .ripple{position:absolute;width:14px;height:14px;margin:-7px;border:1px solid rgba(0,255,65,.8);
  border-radius:50%;pointer-events:none;animation:c-rip 1s ease-out forwards;z-index:3}
@keyframes c-rip{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(16)}}

/* floating concept motes */
#construct .mote{position:absolute;font-size:11px;letter-spacing:.4em;color:rgba(0,255,65,.5);
  opacity:0;animation:c-motein 1s ease forwards,c-floaty 6s ease-in-out infinite alternate;
  white-space:nowrap;z-index:2}
@keyframes c-motein{to{opacity:1}}
@keyframes c-floaty{from{transform:translateY(-7px)}to{transform:translateY(7px)}}

#construct .hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:11px;
  letter-spacing:.45em;color:rgba(0,255,65,.4);opacity:0;transition:opacity 1s ease 1.2s}
body.construct #construct .hint{opacity:1}

/* ---------- real info layer (the part agents actually read) ---------- */
#construct .info{position:relative;z-index:2;max-width:1020px;width:100%;margin:0 auto;
  padding:10px 26px 110px;text-align:left}
#construct .panel{border:1px solid rgba(0,255,65,.28);background:rgba(0,8,2,.82);
  box-shadow:0 0 40px rgba(0,255,65,.07) inset,0 0 22px rgba(0,255,65,.05);
  padding:22px 24px;margin-bottom:26px}
#construct .panel h3{font-size:11px;letter-spacing:.55em;color:rgba(0,255,65,.65);margin:0 0 16px;font-weight:400}
#construct .trow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:12px 2px;border-top:1px dashed rgba(0,255,65,.2);font-size:13px;line-height:1.6}
#construct .trow:first-of-type{border-top:0}
#construct .trow a{color:#c8ffd6;text-decoration:none}
#construct .trow a:hover{color:#fff;text-shadow:0 0 10px rgba(0,255,65,.9)}
#construct .trow .tid{color:rgba(0,255,65,.5);font-size:11px;letter-spacing:.1em}
#construct .trow .bud{color:#00ff41;text-shadow:0 0 10px rgba(0,255,65,.6);white-space:nowrap}
#construct .trow .st{color:#7dffa0;font-size:11px;letter-spacing:.3em;border:1px solid rgba(0,255,65,.35);
  padding:2px 9px;border-radius:999px}
#construct .pnote{color:rgba(0,255,65,.5);font-size:11.5px;margin:12px 0 0;letter-spacing:.04em}
#construct .stat-row{display:flex;gap:34px;flex-wrap:wrap}
#construct .stat-row div{font-size:11px;letter-spacing:.28em;color:rgba(0,255,65,.55)}
#construct .stat-row b{display:block;font-size:30px;font-weight:700;color:#00ff41;letter-spacing:.02em;
  text-shadow:0 0 16px rgba(0,255,65,.65);margin-bottom:5px}
#construct .arow{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;padding:11px 2px;
  border-top:1px dashed rgba(0,255,65,.18);font-size:13px}
#construct .arow:first-of-type{border-top:0}
#construct .arow .nm{color:#c8ffd6;min-width:170px}
#construct .arow .rk{color:rgba(0,255,65,.55);font-size:11px;letter-spacing:.15em}
#construct .arow .er{margin-left:auto;color:#00ff41;text-shadow:0 0 8px rgba(0,255,65,.5);white-space:nowrap}
#construct .plug a{display:inline-block;margin:0 20px 12px 0;color:#00ff41;text-decoration:none;
  border-bottom:1px dotted rgba(0,255,65,.55);font-size:13px;text-shadow:0 0 8px rgba(0,255,65,.4)}
#construct .plug a:hover{text-shadow:0 0 14px rgba(0,255,65,1);border-bottom-style:solid}
#construct .plug code{display:block;margin-top:10px;color:#9fe8ad;font-size:12px;letter-spacing:.03em}
#construct .dimline{color:rgba(0,255,65,.4);font-size:11px;letter-spacing:.3em;text-align:center;margin:8px 0 0}
#construct .cempty{color:rgba(0,255,65,.45);font-size:12.5px;padding:6px 0}

/* ---------- click toast: tell lost humans where to go ---------- */
.ctoast{position:fixed;bottom:64px;left:50%;transform:translate(-50%,10px);z-index:55;
  opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;
  border:1px solid rgba(0,255,65,.45);background:rgba(0,10,3,.9);
  padding:11px 20px;text-align:center;max-width:88vw;
  box-shadow:0 0 26px rgba(0,255,65,.18),0 0 60px rgba(0,255,65,.08)}
.ctoast.show{opacity:1;transform:translate(-50%,0)}
.ctoast .t1{display:block;font-size:12.5px;letter-spacing:.22em;color:#00ff41;
  text-shadow:0 0 10px rgba(0,255,65,.6)}
.ctoast .t2{display:block;margin-top:5px;font-size:11px;letter-spacing:.08em;color:rgba(200,255,214,.78)}

/* ---------- melt transition (clone layer; real DOM untouched) ---------- */
body.melting > header,body.melting > main,body.melting > footer{display:none}
#melt-layer .ch{display:inline;will-change:transform,opacity}
body.melting #melt-layer .ch{color:#00ff41;text-shadow:0 0 14px rgba(0,255,65,.9);
  opacity:0;transform:translateY(46px) rotate(2deg);
  transition:opacity .7s ease-in,transform .7s ease-in,color .2s,text-shadow .2s}
body.melting #melt-layer header *,body.melting #melt-layer main *{
  opacity:0;transform:translateY(30px);filter:blur(4px);
  transition:opacity .7s ease-in,transform .7s ease-in,filter .7s ease-in}
#flash{position:fixed;inset:0;z-index:50;pointer-events:none;display:none;
  background:radial-gradient(80% 60% at 50% 40%,rgba(0,255,65,.22),transparent 70%)}
body.melting #flash{display:block;animation:c-flash 1.4s ease-out}
@keyframes c-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* ---------- reduced motion & mobile ---------- */
@media(prefers-reduced-motion:reduce){
  #rain,#construct #pulse,#construct #glyph,#construct .drift,#construct #glow{display:none!important}
  body.melting #melt-layer .ch,body.melting #melt-layer header *,body.melting #melt-layer main *{transition:none}
  #construct .core,#construct .big,#construct .whisper,body.construct #construct .hint{transition:none;opacity:1;filter:none}
  #construct .core{transform:none}
}
@media(max-width:640px){
  #construct .big{letter-spacing:.08em}
  #construct .whisper{letter-spacing:.3em}
  #construct .info{padding:6px 14px 90px}
  #construct .panel{padding:16px 15px}
  #construct .stat-row{gap:20px}
  #construct .stat-row b{font-size:24px}
  #construct .inf{font-size:64px}
  #construct .core{width:150px;height:150px}
  #construct .ring.r1{width:136px;height:136px;margin:-68px}
  #construct .ring.r2{width:190px;height:190px;margin:-95px}
}