/* Pointer feedback: press, hover, cursor. Colour changes are instant; only transform/opacity animate. */

html{scroll-behavior:smooth}

/* transforms don't apply to inline boxes */
.n-links a,.af-v a{display:inline-block}

/* Press: highlight on pointer-down, spring back on release */
:where(a,button){transition:transform var(--spring-snappy)}
:where(a,button):active{
  transform:scale(var(--press,var(--press-scale)));
  transition:transform var(--spring-interactive);
}
.proj,.ct-link{--press:var(--press-scale-row)}

/* Hover transforms */
.proj-arrow,.ct-arr{transition:transform var(--spring-snappy)}
.btn::after{transition:transform var(--spring-snappy)}

.proj::before{transform:scaleY(0);transition:transform var(--spring-snappy)}
.ct-link::after{width:100%;transform:scaleX(0);transform-origin:left;transition:transform var(--spring-snappy)}

/* Hover backgrounds as opacity layers instead of background-color repaints */
.proj,.sk-cell{isolation:isolate}
.sk-cell{position:relative}
.proj::after,.sk-cell::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--paper2);opacity:0;
  transition:opacity var(--spring-interactive);
}

@media (hover:hover){
  .proj:hover::before{transform:scaleY(1)}
  .ct-link:hover::after{transform:scaleX(1)}
  .proj:hover::after,.sk-cell:hover::before{opacity:1}
}

/* Custom cursor: position + scale are written as one transform by js/motion/cursor.js */
#cur,#cur-r,.trail-dot{left:0;top:0}
#cur-r{transition:opacity var(--spring-interactive)}
/* .mag buttons get pull + press from js/motion/magnetic.js */
.btn.mag.is-sprung,.btn.mag.is-sprung:active{transition:none;transform:none}