/* ===== PHASE 5 (local-only, not pushed): more motion, kept in the site's own hard-edged/
   stepped language — no blur, no soft glow, no smooth easing on the pixel bits.
   Delete this file + phase5.js to revert. ===== */

/* 1) staggered reveal wave: repeating cards/rows/tiles cascade in one after another
   instead of all fading in at once (site.js already adds .in when a .rv scrolls into view) */
.cases .card.rv:nth-child(1),.ind-grid .card.rv:nth-child(1),.trust-grid .tc:nth-child(1),.bento .bx:nth-child(1){transition-delay:0s}
.cases .card.rv:nth-child(2),.ind-grid .card.rv:nth-child(2),.trust-grid .tc:nth-child(2),.bento .bx:nth-child(2){transition-delay:.08s}
.cases .card.rv:nth-child(3),.ind-grid .card.rv:nth-child(3),.trust-grid .tc:nth-child(3),.bento .bx:nth-child(3){transition-delay:.16s}
.cases .card.rv:nth-child(4),.ind-grid .card.rv:nth-child(4),.trust-grid .tc:nth-child(4),.bento .bx:nth-child(4){transition-delay:.24s}
.cases .card.rv:nth-child(5),.ind-grid .card.rv:nth-child(5),.trust-grid .tc:nth-child(5){transition-delay:.32s}
.cases .card.rv:nth-child(6),.ind-grid .card.rv:nth-child(6),.trust-grid .tc:nth-child(6){transition-delay:.4s}
.trust-grid .tc:nth-child(7){transition-delay:.48s}
.trust-grid .tc:nth-child(8){transition-delay:.56s}
.plist .prow:nth-child(1){transition-delay:0s}
.plist .prow:nth-child(2){transition-delay:.06s}
.plist .prow:nth-child(3){transition-delay:.12s}
.plist .prow:nth-child(4){transition-delay:.18s}
.plist .prow:nth-child(5){transition-delay:.24s}

/* 2) framework bars fill in (from 0) when the bento scrolls into view, in pixel steps */
.fw .bar u{width:0!important;transition:width 1s steps(12,end)}
.fw.in .bar u{width:var(--w)!important}

/* 3) magnetic pixel-tilt on cards and bento tiles: follows the cursor, but snapped to
   whole degrees so it reads as stepped, not a smooth 3D glide */
@media(hover:hover) and (pointer:fine){
  .cases .card,.ind-grid .card,.bento .bx{transform:perspective(700px) rotateX(var(--ry,0)) rotateY(var(--rx,0));transition:transform .18s steps(4)}
}

/* 4) nav links: a quick pixel jitter + red flash on hover, not a smooth underline slide */
@keyframes navglitch{0%{transform:translate(0,0);color:var(--mut)}20%{transform:translate(-2px,1px);color:#f40009}40%{transform:translate(2px,-1px);color:var(--mut)}60%{transform:translate(-1px,0);color:#f40009}100%{transform:translate(0,0);color:#000}}
.links a:hover{animation:navglitch .35s steps(1) 1}

/* 5) hero pixel cluster drifts a little opposite the cursor (set by phase5.js), snapped to a 6px grid */
.hero::before{transform:translate(var(--hx,0),var(--hy,0));transition:transform .12s steps(3)}

/* 6) count-up numbers: no extra styling needed, phase5.js swaps the text content directly */

@media(prefers-reduced-motion:reduce){
  .links a:hover{animation:none}
  .hero::before{transition:none}
  .cases .card,.ind-grid .card,.bento .bx{transition:none}
  .fw .bar u{transition:none}
}