/* ── ANIMATIONS ── */

/* Subtle particle canvas */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4}

/* Fade-in on scroll */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Typewriter */
.typewriter{overflow:hidden;white-space:nowrap;border-right:2px solid var(--green);animation:typing 2.5s steps(30,end) forwards,blink-caret .7s step-end 3s infinite;width:0}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink-caret{from,to{border-color:transparent}50%{border-color:var(--green)}}

/* Counter */
.counter{transition:all .1s}

/* Terminal log animation */
.log-entry{animation:logIn .4s ease forwards}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* Glow pulse */
@keyframes glowPulse{0%,100%{box-shadow:0 0 8px var(--green-glow)}50%{box-shadow:0 0 20px var(--green),0 0 40px var(--green-glow)}}

/* Float animation for cards */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Grid scan line */
@keyframes scan{0%{background-position:0 0}100%{background-position:0 32px}}

/* Hover glow on cards */
.card:hover{animation:glowPulse 2s infinite}

/* Hero image subtle zoom */
.hero-img img{animation:heroZoom 20s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.03)}}

/* Section separator glow */
.section{position:relative}
.section::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:1px;background:var(--green);opacity:.3}