/* Nawat Tech V4.8 — balanced motion enhancement; progressive and accessible */
:root{--nw-motion-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{overflow-x:clip}
/* Ambient light stays subtle and does not intercept interactions */
.ambient{pointer-events:none;will-change:transform;animation:nw-ambient-drift 19s ease-in-out infinite alternate}
.ambient.a2{animation-duration:24s;animation-direction:alternate-reverse}
@keyframes nw-ambient-drift{from{transform:translate3d(-12px,0,0) scale(1)}to{transform:translate3d(22px,-18px,0) scale(1.08)}}
.hero .spark{animation:nw-spark 3.6s ease-in-out infinite}
@keyframes nw-spark{0%,100%{opacity:.65;transform:scale(.88)}50%{opacity:1;transform:scale(1.16)}}
.hero-art .orbit{animation:nw-orbit-breathe 12s ease-in-out infinite alternate;transform-origin:center}
.hero-art .o2{animation-delay:-5s;animation-duration:16s}
@keyframes nw-orbit-breathe{from{transform:scale(.97) rotate(-4deg)}to{transform:scale(1.035) rotate(5deg)}}
.hero-art .glass-card{animation:nw-float 7s ease-in-out infinite;will-change:transform}
.hero-art .pill{animation:nw-float 8s ease-in-out infinite;animation-delay:-3s}
.hero-art .pill.p2{animation-delay:-6s}
@keyframes nw-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
/* Hover effects use transforms, not layout-changing properties */
.service,.ref-card,.detail-card,.approach-panel,.contact-panel{transition:transform .4s var(--nw-motion-ease),box-shadow .4s ease,border-color .35s ease}
@media(hover:hover) and (pointer:fine){
.service:hover,.ref-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(4,7,28,.27);border-color:rgba(158,137,255,.56)}
.detail-card:hover{transform:translateY(-3px)}
.btn,.detail-cta,.nw-all-projects a{transition:transform .25s var(--nw-motion-ease),box-shadow .25s ease,filter .25s ease}
.btn:hover,.detail-cta:hover,.nw-all-projects a:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn.primary:hover{box-shadow:0 12px 30px rgba(91,86,250,.26)}
.ref-card:hover .ref-card-visual img{transform:scale(1.045)}
}
.ref-card-visual img{transition:transform .7s var(--nw-motion-ease)}
/* Reveals are only enabled after JS sets the ready class; no-JS content remains visible. */
html.nw-motion-ready .nw-reveal{opacity:0;transform:translate3d(0,23px,0);transition:opacity .72s ease,transform .72s var(--nw-motion-ease);transition-delay:var(--nw-reveal-delay,0ms)}
html.nw-motion-ready .nw-reveal.nw-in-view{opacity:1;transform:translate3d(0,0,0)}
:where(a,button,select,input,textarea):focus-visible{outline:2px solid #b4a5ff;outline-offset:4px}
@media(max-width:700px){.ambient{animation-duration:26s}.hero-art .glass-card{animation-duration:9s}html.nw-motion-ready .nw-reveal{transform:translate3d(0,14px,0)}}
@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}html.nw-motion-ready .nw-reveal{opacity:1!important;transform:none!important}}