/* ===== PHASE 6 (local-only, not pushed): more motion, same hard-edged/stepped
   language as phase5. Delete this file + phase6.js to revert. ===== */

/* 1) page-transition "double slash": the actual "//" logo mark (same font, weight,
   letter-spacing and colour as the header wordmark and every heading - not a hand-drawn
   shape) blown up to fill the screen, sweeping across once. A plain decorative accent,
   not a cover/reveal: nothing is hidden, the white page stays visible the whole time. */
.px-wipe{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden;
  display:flex;align-items:center}
.px-wipe i{font-style:normal;font-weight:700;letter-spacing:-.14em;color:#f40009;
  font-size:130vh;line-height:1;white-space:nowrap;will-change:transform}

/* 2) hover scanline: a thin red line sweeps once top-to-bottom over cards/rows/tiles */
.cases .card,.ind-grid .card,.bento .bx,.plist .prow{position:relative;overflow:hidden}
.cases .card::after,.ind-grid .card::after,.bento .bx::after,.plist .prow::after{
  content:"";position:absolute;left:0;right:0;top:-10%;height:3px;background:#f40009;
  transform:translateY(-20px);opacity:0;pointer-events:none}
.cases .card:hover::after,.ind-grid .card:hover::after,.bento .bx:hover::after,.plist .prow:hover::after{
  animation:scanline .5s steps(10,end) 1}
@keyframes scanline{0%{transform:translateY(0);opacity:1}90%{opacity:1}100%{transform:translateY(150vh);opacity:0}}

/* 3) chip tags: a small pixel jitter on hover instead of a plain color change */
@keyframes chipjit{0%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,0)}100%{transform:translate(0,0)}}
.chip:hover{animation:chipjit .25s steps(1) 1;border-color:#f40009;color:#000}

/* 4) filter/tab switch: the results grid steps in fresh each time the filter changes
   (class toggled by phase6.js via a MutationObserver, no site.js edits needed) */
#svcList.refresh,#blogList.refresh{animation:gridin .3s steps(6,end)}
@keyframes gridin{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){
  .px-wipe{display:none}
  .cases .card:hover::after,.ind-grid .card:hover::after,.bento .bx:hover::after,.plist .prow:hover::after{animation:none}
  .chip:hover{animation:none}
  #svcList.refresh,#blogList.refresh{animation:none}
}