/* approach3d: styles for js/fx/approach3d.js */

/* slow drift of the faint .dark:before grid; paused off-screen */
#approach.ax:before{right:-120px;animation:ax-drift 48s ease-in-out infinite alternate;animation-play-state:paused}
#approach.ax.ax-on:before{animation-play-state:running}
@keyframes ax-drift{to{transform:translate3d(-120px,0,0)}}

/* soft light that follows the pointer; painted under .wrap */
.ax-light{position:absolute;left:-320px;top:-320px;width:640px;height:640px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#85e0ed12,#85e0ed06 55%,transparent);opacity:0;transition:opacity .8s}
.ax-light.ax-lit{opacity:1}

/* three.js accent: the empty band above "Who I help", never behind text */
.ax-stage{position:absolute;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.ax-stage.ax-in{opacity:1}.ax-stage.ax-small.ax-in{opacity:.75}
.ax-stage canvas{display:block;width:100%;height:100%}

/* pillar icons: strokes draw on, then a gentle hover glow */
.pill.ax-draw svg :is(rect,path,circle){stroke-dasharray:var(--ax-l);stroke-dashoffset:var(--ax-l);
  transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.25,1) var(--ax-d,0s)}
.pill.ax-draw.ax-drawn svg :is(rect,path,circle){stroke-dashoffset:0}
.pill svg{transition:filter .4s,transform .4s}
@media(hover:hover){
  .pill>div:hover svg{filter:drop-shadow(0 0 3px #85e0edb0) drop-shadow(0 0 10px #85e0ed60);transform:translateY(-2px)}
}

@media(prefers-reduced-motion:reduce){
  #approach.ax:before{animation:none;right:0}
  .ax-light{display:none}
  .ax-stage{transition:none}
  .pill svg{transition:none}.pill>div:hover svg{transform:none}
}