/* ============================================================
   Notes — concept animations. All loop; paused when off-screen
   via `.scene:not(.live) *{ animation-play-state:paused }`.
   ============================================================ */

body.js .scene:not(.live) *{ animation-play-state:paused !important; }

.canvas{ position:relative; width:100%; min-height:300px; display:grid; place-items:center; }

/* shared atoms ------------------------------------------------ */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; padding:8px 13px; white-space:nowrap;
}
.chip.mono{ font-family:'Spline Sans Mono',monospace; font-weight:500; }
.dotg{ width:8px; height:8px; border-radius:50%; background:var(--green); }
.dotr{ width:8px; height:8px; border-radius:50%; background:var(--red); }

/* ============================================================
   1 · AGENT — self-correcting ring
   ============================================================ */
.agent .ring{ position:relative; width:300px; height:300px; }
.agent .rcenter{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.agent .rc-t{ font-family:'Newsreader',serif; font-style:italic; font-size:18px; line-height:1.2; color:var(--ink-3); }
.agent .rnode{
  position:absolute; transform:translate(-50%,-50%);
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; box-shadow:var(--shadow-s); white-space:nowrap;
  transition:none;
}
.agent .n1{ left:50%; top:4%; }
.agent .n2{ left:96%; top:50%; }
.agent .n3{ left:50%; top:96%; }
.agent .n4{ left:4%; top:50%; }
.agent .n2.err{ color:var(--red); border-color:var(--red); }
.agent .n3.ok{ color:var(--green); border-color:var(--green); }
.agent .orbit{ position:absolute; left:50%; top:50%; width:0; height:0; animation:ag-spin 5.6s linear infinite; }
.agent .token{
  position:absolute; left:0; top:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:50%; background:var(--terra); box-shadow:0 0 0 5px var(--terra-wash);
  transform:translateX(140px);
}
@keyframes ag-spin{ to{ transform:rotate(360deg); } }
.agent .n1{ animation:ag-pulse 5.6s linear infinite; }
.agent .n2{ animation:ag-pulse 5.6s linear infinite -1.4s; }
.agent .n3{ animation:ag-pulse 5.6s linear infinite -2.8s; }
.agent .n4{ animation:ag-pulse 5.6s linear infinite -4.2s; }
@keyframes ag-pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); box-shadow:var(--shadow-s); }
  6%{ transform:translate(-50%,-50%) scale(1.12); box-shadow:var(--shadow-m); }
  18%{ transform:translate(-50%,-50%) scale(1); box-shadow:var(--shadow-s); }
}

/* ============================================================
   2 · SANDBOX — sealed box vs unreachable files
   ============================================================ */
.sandbox{ min-height:300px; }
.sandbox .lay{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; width:100%; max-width:640px; }
.sandbox .sbox{
  position:relative; background:color-mix(in srgb,var(--green-soft) 26%, var(--panel));
  border:2px solid var(--green); border-radius:18px; padding:20px 18px 18px;
  display:flex; flex-direction:column; gap:9px;
}
.sandbox .sbox-lab{
  position:absolute; top:-10px; left:16px; background:var(--green); color:#fff;
  font-size:10px; letter-spacing:.14em; font-weight:700; padding:3px 9px; border-radius:6px;
}
.sandbox .sbox .chip{ background:var(--panel); }
.sandbox .sbox .chip .dotg{ animation:sb-ok 4.4s ease infinite; }
@keyframes sb-ok{ 0%,30%{ transform:scale(0); opacity:0 } 42%{ transform:scale(1.3) } 50%,100%{ transform:scale(1); opacity:1 } }

.sandbox .gap{ position:relative; width:96px; height:60px; }
.sandbox .gap .line{
  position:absolute; top:50%; left:0; height:3px; width:100%;
  background:repeating-linear-gradient(90deg,var(--slate-2) 0 7px, transparent 7px 14px);
  transform-origin:left center; transform:scaleX(0);
  animation:sb-reach 4.4s ease infinite;
}
@keyframes sb-reach{ 0%{ transform:scaleX(0) } 40%{ transform:scaleX(1) } 60%,100%{ transform:scaleX(1) } }
.sandbox .gap .x{
  position:absolute; top:50%; right:-4px; transform:translate(0,-50%) scale(0);
  width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center; font-size:15px; font-weight:700;
  animation:sb-x 4.4s ease infinite;
}
@keyframes sb-x{ 0%,55%{ transform:translate(0,-50%) scale(0) } 64%{ transform:translate(0,-50%) scale(1.25) } 72%,100%{ transform:translate(0,-50%) scale(1) } }
.sandbox .outside{ display:flex; flex-direction:column; gap:9px; }
.sandbox .outside .chip{ color:var(--slate); opacity:.62; }
.sandbox .outside.shk{ animation:none; }
.sandbox .outside .chip{ animation:sb-shake 4.4s ease infinite; }
@keyframes sb-shake{ 0%,60%,100%{ transform:translateX(0) } 64%{ transform:translateX(-4px) } 68%{ transform:translateX(4px) } 72%{ transform:translateX(-3px) } 76%{ transform:translateX(0) } }

/* ============================================================
   3 · CLAUDE.md — layered files load into a chat
   ============================================================ */
.claudemd .lay{ display:grid; grid-template-columns:auto auto auto; align-items:center; gap:22px; }
.claudemd .layers{ position:relative; width:190px; height:150px; }
.claudemd .sheet{
  position:absolute; left:0; width:178px; padding:13px 15px; border-radius:13px;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-s);
  font-family:'Spline Sans Mono',monospace; font-size:12px; font-weight:600; color:var(--ink);
}
.claudemd .sheet small{ display:block; font-family:'Hanken Grotesk',sans-serif; font-weight:500; font-size:11px; color:var(--ink-3); margin-top:3px; }
.claudemd .s-global{ top:4px; animation:md-in 5s ease infinite; }
.claudemd .s-proj{ top:78px; border-color:var(--terra-3); animation:md-in 5s ease infinite -.5s; }
@keyframes md-in{ 0%{ transform:translateX(-30px); opacity:0 } 16%{ transform:none; opacity:1 } 80%{ transform:none; opacity:1 } 92%,100%{ transform:none; opacity:1 } }
.claudemd .farrow{ color:var(--terra); font-size:26px; animation:md-arr 5s ease infinite; }
@keyframes md-arr{ 0%,30%{ opacity:0; transform:translateX(-6px) } 46%{ opacity:1; transform:none } 100%{ opacity:1 } }
.claudemd .chatwin{
  width:172px; background:var(--panel-2); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.claudemd .cw-top{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:9px 14px; border-bottom:1px solid var(--line); }
.claudemd .cw-body{ padding:16px 14px; min-height:64px; display:grid; place-items:center; }
.claudemd .cw-loaded{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--green); opacity:0; animation:md-load 5s ease infinite; }
@keyframes md-load{ 0%,52%{ opacity:0; transform:translateY(6px) } 64%{ opacity:1; transform:none } 100%{ opacity:1 } }

/* ============================================================
   4 · MEMORY — isolated chats in one project
   ============================================================ */
.memory .proj{
  position:relative; background:var(--panel-2); border:1px dashed var(--line);
  border-radius:18px; padding:30px 20px 20px; display:flex; gap:14px;
}
.memory .proj-lab{ position:absolute; top:-10px; left:16px; background:var(--ink); color:var(--bg);
  font-size:10px; letter-spacing:.14em; font-weight:700; padding:3px 9px; border-radius:6px; }
.memory .chatcard{
  width:130px; background:var(--panel); border:1px solid var(--line); border-radius:13px;
  padding:13px; display:flex; flex-direction:column; gap:9px;
}
.memory .cc-t{ font-size:12.5px; font-weight:700; color:var(--ink); }
.memory .mbar{ height:7px; border-radius:4px; background:var(--line-soft); overflow:hidden; }
.memory .mbar i{ display:block; height:100%; width:0; background:var(--terra); border-radius:4px; }
.memory .cc-note{ font-size:11px; color:var(--ink-3); line-height:1.35; min-height:30px; }
.memory .c-a .mbar i{ animation:mem-fill 5s ease infinite; }
@keyframes mem-fill{ 0%,14%{ width:0 } 34%{ width:88% } 84%{ width:88% } 96%,100%{ width:0 } }
.memory .c-a .fact{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--terra); opacity:0; animation:mem-fact 5s ease infinite; }
@keyframes mem-fact{ 0%,10%{ opacity:0; transform:translateY(4px) } 24%{ opacity:1; transform:none } 84%{ opacity:1 } 96%,100%{ opacity:0 } }
.memory .c-b .cc-note, .memory .c-c .cc-note{ color:var(--slate-2); }
.memory .c-b .cc-note::before, .memory .c-c .cc-note::before{ content:"never sees it"; }

/* ============================================================
   5 · SKILLS — request scans list, match snaps out
   ============================================================ */
.skills .lay{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:380px; }
.skills .req{
  font-family:'Newsreader',serif; font-style:italic; font-size:17px; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  box-shadow:var(--shadow-s); animation:sk-req 5s ease infinite;
}
@keyframes sk-req{ 0%{ opacity:0; transform:translateY(-10px) } 12%{ opacity:1; transform:none } 100%{ opacity:1 } }
.skills .skilllist{ position:relative; display:flex; flex-direction:column; gap:8px; width:100%; }
.skills .srow{
  font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:10px 14px;
  display:flex; align-items:center; gap:9px;
}
.skills .srow::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--slate-2); }
.skills .srow.match{ animation:sk-match 5s ease infinite; }
.skills .srow.match::before{ background:var(--terra); }
@keyframes sk-match{
  0%,40%{ transform:translateX(0); border-color:var(--line); background:var(--panel-2); color:var(--ink-2); box-shadow:none; }
  56%{ transform:translateX(14px); border-color:var(--terra); background:var(--panel); color:var(--ink); box-shadow:var(--shadow-m); }
  90%{ transform:translateX(14px); border-color:var(--terra); background:var(--panel); color:var(--ink); box-shadow:var(--shadow-m); }
  100%{ transform:translateX(0); border-color:var(--line); background:var(--panel-2); color:var(--ink-2); }
}
.skills .scan{
  position:absolute; left:-4px; right:-4px; height:38px; border-radius:11px;
  background:linear-gradient(var(--terra-wash),transparent); border-top:2px solid var(--terra-3);
  opacity:0; animation:sk-scan 5s ease infinite;
}
@keyframes sk-scan{ 0%,14%{ opacity:0; top:0 } 18%{ opacity:.9 } 44%{ opacity:.9; top:114px } 50%{ opacity:0; top:114px } 100%{ opacity:0 } }

/* ============================================================
   6 · MODELS — three sizes, sweeping highlight
   ============================================================ */
.models .lay{ display:flex; align-items:flex-end; gap:16px; }
.models .mcard{
  width:118px; background:var(--panel-2); border:1px solid var(--line); border-radius:15px;
  padding:15px 14px; display:flex; flex-direction:column; gap:8px; text-align:left;
}
.models .m-haiku{ height:130px; }
.models .m-sonnet{ height:166px; }
.models .m-opus{ height:200px; }
.models .mcard b{ font-family:'Newsreader',serif; font-weight:500; font-size:21px; color:var(--ink); }
.models .heft{ display:flex; gap:5px; }
.models .heft i{ width:9px; height:9px; border-radius:50%; background:var(--terra); }
.models .heft i.off{ background:transparent; border:1.5px solid var(--terra-3); }
.models .mcard small{ font-size:11.5px; color:var(--ink-2); margin-top:auto; }
.models .m-haiku{ animation:md-lit 6s ease infinite; }
.models .m-sonnet{ animation:md-lit 6s ease infinite -2s; }
.models .m-opus{ animation:md-lit 6s ease infinite -4s; }
@keyframes md-lit{
  0%,100%{ background:var(--panel-2); border-color:var(--line); box-shadow:none; }
  8%{ background:var(--panel); border-color:var(--terra-3); box-shadow:var(--shadow-m); }
  28%{ background:var(--panel-2); border-color:var(--line); box-shadow:none; }
}

/* ============================================================
   7 · CONTEXT — window fills, degrades past the line
   ============================================================ */
.context .lay{ width:100%; max-width:520px; display:flex; flex-direction:column; gap:14px; }
.context .ctxbar{ position:relative; height:46px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); overflow:hidden; }
.context .fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--green); animation:cx-fill 6s ease infinite; }
@keyframes cx-fill{
  0%{ width:4%; background:var(--green); }
  45%{ width:50%; background:var(--green); }
  60%{ width:66%; background:#C7923E; }
  85%{ width:96%; background:var(--red); }
  92%{ width:96%; background:var(--red); }
  100%{ width:4%; background:var(--green); }
}
.context .thresh{ position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--ink-3); }
.context .thresh.t50{ left:50%; }
.context .thresh::after{ content:"~½ full"; position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:600; color:var(--ink-3); white-space:nowrap; }
.context .ctxrow{ display:flex; justify-content:space-between; align-items:center; }
.context .ctxrow .lbl{ font-family:'Spline Sans Mono',monospace; font-size:12px; color:var(--ink-3); }
.context .warn{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--red); opacity:0; animation:cx-warn 6s ease infinite; }
@keyframes cx-warn{ 0%,62%{ opacity:0 } 74%{ opacity:1 } 92%{ opacity:1 } 100%{ opacity:0 } }

/* ============================================================
   8 · PLUGINS — chips assemble into a bundle
   ============================================================ */
.plugins .bundle{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:11px;
  padding:26px 22px 22px; border:2px dashed var(--terra-3); border-radius:18px; background:color-mix(in srgb,var(--terra-wash) 30%, var(--panel));
}
.plugins .bundle-lab{ position:absolute; top:-11px; left:18px; background:var(--terra); color:#fff; font-size:10px; letter-spacing:.14em; font-weight:700; padding:3px 10px; border-radius:6px; }
.plugins .bchip{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 13px; }
.plugins .bchip .pk{ width:8px; height:8px; border-radius:2px; background:var(--terra); }
.plugins .bchip .cn{ width:8px; height:8px; border-radius:50%; background:var(--blue); }
.plugins .b1{ animation:pg-in 5s ease infinite -0s; }
.plugins .b2{ animation:pg-in 5s ease infinite -.25s; }
.plugins .b3{ animation:pg-in 5s ease infinite -.5s; }
.plugins .b4{ animation:pg-in 5s ease infinite -.75s; }
@keyframes pg-in{ 0%{ opacity:0; transform:scale(.6) translateY(14px) } 18%{ opacity:1; transform:none } 84%{ opacity:1 } 96%,100%{ opacity:0; transform:scale(.9) } }

/* ============================================================
   9 · QC — sub-agent reviews, flags, then approves
   ============================================================ */
.qc .lay{ display:flex; align-items:center; gap:14px; }
.qc .qbox{ width:128px; background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:15px 14px; text-align:center; }
.qc .qbox .qt{ font-size:12.5px; font-weight:700; color:var(--ink); }
.qc .qbox .qs{ font-size:11px; color:var(--ink-3); margin-top:4px; line-height:1.35; }
.qc .qsub{ border-color:var(--terra-3); }
.qc .qarrow{ color:var(--ink-3); font-size:20px; }
.qc .verdict{ width:118px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.qc .vflag, .qc .vok{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:6px 11px; border-radius:999px; }
.qc .vflag{ color:var(--red); background:color-mix(in srgb,var(--red) 12%, transparent); opacity:0; animation:qc-flag 5.2s ease infinite; }
.qc .vok{ color:var(--green); background:color-mix(in srgb,var(--green) 14%, transparent); opacity:0; animation:qc-ok 5.2s ease infinite; }
@keyframes qc-flag{ 0%,30%{ opacity:0; transform:scale(.7) } 40%{ opacity:1; transform:scale(1) } 64%{ opacity:1 } 72%,100%{ opacity:0 } }
@keyframes qc-ok{ 0%,70%{ opacity:0; transform:scale(.7) } 80%{ opacity:1; transform:scale(1) } 100%{ opacity:1 } }

@media (max-width:560px){
  .sandbox .lay{ grid-template-columns:1fr; gap:30px; justify-items:center; }
  .sandbox .gap{ transform:rotate(90deg); }
  .claudemd .lay{ grid-template-columns:1fr; gap:14px; justify-items:center; }
  .claudemd .farrow{ transform:rotate(90deg); }
  .memory .proj{ flex-direction:column; }
  .memory .chatcard{ width:200px; }
  .qc .lay{ flex-direction:column; }
  .qc .qarrow{ transform:rotate(90deg); }
}