@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(33,160,253,.1),0 0 19px #19bbff}50%{box-shadow:0 0 0 9px rgba(33,160,253,.06),0 0 24px #19bbff}}
@keyframes glowBreathe{0%,100%{opacity:.8;transform:scale(.96)}50%{opacity:1;transform:scale(1.09)}}
@keyframes orbitSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes floatBrand{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1}80%,100%{transform:translateY(12px);opacity:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes brandTurn{to{transform:rotate(380deg)}}
@keyframes twinkle{0%,100%{opacity:.32;transform:scale(.82)}50%{opacity:1;transform:scale(1.25)}}
@keyframes modalPop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes loaderLine{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
/* Add hidden/reveal styles only if JS is running, preserving no-JS content. */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .78s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1)}
.js [data-reveal].is-visible{opacity:1;transform:translateY(0)}
.js .feature-box:nth-child(2),.js .service-small:nth-child(2n),.js .portfolio-card:nth-child(2n){transition-delay:.07s}
.js .feature-box:nth-child(3),.js .service-small:nth-child(3n){transition-delay:.14s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .marquee-track{animation:none}
  .intro-loader{display:none!important}
  .cursor-glow{display:none}
}
html:not(.js) .intro-loader{display:none}