/* Reduce Motion: no translation, scaling or looping — state changes become fades. */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  nav,.seg,.h-eyebrow,.hero-sql,h1,.h-desc,.h-actions,.hero-panel{animation-name:fade}
  .bg-num::after{animation-name:unfade}
  .avail-dot{animation:none}
  h1.glitch::before,h1.glitch::after{display:none}

  .js .reveal,.js .proj{transform:none}

  :where(a,button):active,.js a.proj.in:active{
    transform:none;opacity:.6;
    transition:opacity var(--spring-interactive);
  }
  :where(a,button){transition:opacity var(--spring-smooth)}

  .proj::before,.ct-link::after,.btn::after{transition:opacity var(--spring-smooth)}
  .proj::before{transform:none;opacity:0}
  .ct-link::after{transform:none;opacity:0}
  @media (hover:hover){.proj:hover::before,.ct-link:hover::after{opacity:1}}
  .btn::after{transform:none;opacity:0}
  .btn-solid:hover::after{opacity:1}
  .proj-arrow,.ct-arr{transition:none}
  .proj:hover .proj-arrow,.ct-link:hover .ct-arr{transform:none}

  .trail-dot{display:none}
  .tsw:active{opacity:1}
}