/* ===== PHASE 2: more pixel vibe (loaded after site.css; delete this file + phase2.js to revert) ===== */
:root{--o:#f40009}

/* scroll progress: a stepped pixel bar at the very top (width snapped to 12px blocks by phase2.js) */
.px-prog{position:fixed;top:0;left:0;height:6px;width:0;z-index:300;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--o) 0 10px,transparent 10px 12px)}

/* click burst pixels (spawned by phase2.js) */
.px-burst{position:fixed;width:6px;height:6px;background:var(--o);z-index:400;pointer-events:none}

/* selection, scrollbar, focus */
::selection{background:var(--o);color:#000}
html{scrollbar-color:var(--o) #fff}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#fff;border-left:1px solid rgba(0,0,0,.16)}
::-webkit-scrollbar-thumb{background:var(--o);border:2px solid #000;border-radius:0}
:focus-visible{outline:2px solid #000;outline-offset:3px;box-shadow:4px 4px 0 var(--o)}

/* tech tiles: logo drops 2px in a hard step on hover */
.tc img{transition:transform .1s steps(1)}
.tc:hover img{transform:translate(2px,2px)}

/* chips / tags on cards: square orange corner ticks on hover */
.chip{transition:background .1s steps(1),border-color .1s steps(1)}
.card:hover .chip{border-color:#000;background:#fff}

@media (prefers-reduced-motion:reduce){
  .px-prog{display:none}
}