/* ============================================================
   A1 LOGICS — v2 background: drifting source-code columns
   Replaces the WebGL particle field. Pure CSS animation on
   transform only, so every column is GPU-composited.
   ============================================================ */

#code-bg{
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  perspective:900px;perspective-origin:50% 45%;
}

.code-field{
  position:absolute;inset:-8% -4%;
  transform-style:preserve-3d;
  display:flex;justify-content:space-between;gap:clamp(12px,3vw,44px);
  /* fade the stream out at the edges so it never fights the content */
  mask-image:radial-gradient(ellipse 78% 68% at 50% 45%,#000 18%,rgba(0,0,0,.55) 52%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 45%,#000 18%,rgba(0,0,0,.55) 52%,transparent 88%);
  will-change:transform;
}

/* one scrolling column of code */
.code-col{
  flex:1 1 0;min-width:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.code-col-inner{
  display:block;
  animation-name:codeDrift;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
/* the inner block holds the snippet twice, so -50% loops seamlessly */
@keyframes codeDrift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(0,-50%,0)}
}
.code-col.rev .code-col-inner{animation-direction:reverse}

.code-snip{
  margin:0 0 26px;padding:0;
  font-family:'Consolas','SF Mono','Menlo','Courier New',monospace;
  font-size:12.5px;line-height:1.75;
  white-space:pre;
  color:#7C8CA8;
  text-shadow:0 0 12px rgba(0,0,0,.55);
}

/* language chip above each snippet */
.code-lang{
  display:inline-block;margin-bottom:6px;padding:1px 8px;border-radius:4px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid currentColor;opacity:.55;
}
.lang-cs   {color:#A855F7}
.lang-aspx {color:#38BDF8}
.lang-css  {color:#22C55E}
.lang-razor{color:#FB923C}
.lang-sql  {color:#FBBF24}
.lang-js   {color:#EC4899}

/* ---- syntax colours (matched to the site's hue tokens) ---- */
.t-key {color:#C084FC}            /* keywords            */
.t-typ {color:#38BDF8}            /* types / classes     */
.t-str {color:#A3E635}            /* strings             */
.t-num {color:#FBBF24}            /* numbers             */
.t-com {color:#4E5D78;font-style:italic}  /* comments    */
.t-fn  {color:#22D3EE}            /* method names        */
.t-atr {color:#F472B6}            /* attributes / props  */
.t-tag {color:#FB923C}            /* markup tags         */
.t-val {color:#2DD4BF}            /* css values          */

/* depth tiers — far columns are smaller, dimmer and softly blurred */
.d-far  {opacity:.30;filter:blur(1.6px)}
.d-mid  {opacity:.46;filter:blur(.6px)}
.d-near {opacity:.62}

/* a couple of columns glow faintly, like an active editor */
.code-col.hot .code-snip{text-shadow:0 0 18px rgba(56,189,248,.35),0 0 10px rgba(0,0,0,.6)}

@media (max-width:900px){
  .code-snip{font-size:11px;line-height:1.7}
  .code-field{gap:14px}
}
@media (max-width:600px){
  /* keep only the nearest columns on phones — less paint, still legible */
  .code-col.drop-sm{display:none}
  .code-snip{font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  .code-col-inner{animation:none !important}
  #code-bg{opacity:.5}
}