/* Small, local effects: transforms and opacity; no animation library. */
.bi{width:18px;height:18px;display:inline-block;vertical-align:-3px;flex-shrink:0;fill:currentColor;stroke:none}
.bi-social{margin-right:8px}.bi-external{width:14px;height:14px;margin-left:6px}
.button .bi-social{margin-right:9px}.social-links a{display:inline-flex;align-items:center}.social-links .bi-social{width:19px;height:19px}
.button>.ui-icon{margin-left:6px}.text-link>.ui-icon{margin-left:4px}
.motion-enabled :is(button,.button,.nav-contact){position:relative;overflow:hidden}
.tap-ripple{position:absolute;pointer-events:none;width:64px;height:64px;border:2px solid currentColor;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.05);animation:tap-spark .45s ease-out both}
@keyframes tap-spark{0%{opacity:.35;transform:translate(-50%,-50%) scale(.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}
.motion-enabled .hero .highlight,.motion-enabled .portfolio-hero .highlight{position:relative;overflow:hidden}
.motion-enabled :is(.hero,.portfolio-hero) .highlight:after{content:'';position:absolute;inset:0 auto 0 0;width:40%;pointer-events:none;background:linear-gradient(110deg,transparent,#fff7,transparent);animation:hello-shine 1.1s .7s ease-out both}
@keyframes hello-shine{0%{opacity:0;transform:translateX(-180%)}20%{opacity:.65}80%{opacity:.65}100%{opacity:0;transform:translateX(380%)}}
/* Animate reading content, keeping the card's snap position and buttons stable. */
.motion-enabled :is(.service-grid,.selected-work,[data-carousel])>.motion-arrived>:is(.service-number,.work-symbol,h3,p){animation:card-hello .45s cubic-bezier(.2,.75,.25,1) both}
@keyframes card-hello{from{opacity:.65;translate:0 8px}to{opacity:1;translate:0 0}}
.motion-enabled .tech-map{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease-out;animation-fill-mode:backwards}
.motion-enabled .portrait-stage.motion-in-view .portrait-orbit:before{content:'';position:absolute;inset:-20px;border:3px solid transparent;border-top-color:#718a3a;border-radius:50%;animation:portrait-orbit 18s linear infinite;pointer-events:none}
@keyframes portrait-orbit{to{transform:rotate(360deg)}}
.motion-enabled .tech-map.motion-in-view .status-dot{animation:status-hello 2s ease-in-out 2}
@keyframes status-hello{50%{transform:scale(1.15);opacity:.65}}
.motion-enabled .result-pop{animation:result-hello .4s ease-out}
@keyframes result-hello{30%{transform:translateY(-3px);opacity:.8}100%{transform:translateY(0);opacity:1}}
.motion-enabled .process-grid>.reveal:nth-child(2){transition-delay:.06s}.motion-enabled .process-grid>.reveal:nth-child(3){transition-delay:.12s}
.motion-enabled :is(.theme-toggle,.carousel-edge,.project-open,.filters button,.calculator-modes button,.workspace-tabs button){transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.motion-enabled :is(.button,.nav-contact,.theme-toggle,.carousel-edge,.calculator-keypad button):active{transform:scale(.97)}
.motion-page-hidden *,.motion-page-hidden *:before,.motion-page-hidden *:after{animation-play-state:paused!important}
.motion-disabled .tap-ripple{display:none}
@media(hover:hover) and (pointer:fine){
 .motion-enabled .map-row:hover .map-icon .ui-icon{animation:icon-hello .5s ease-in-out}
 .motion-enabled :is(.text-link,.project-open):hover>.bi,.motion-enabled .carousel-next:hover>.ui-icon{transform:translateX(3px)}
 .motion-enabled .carousel-prev:hover>.ui-icon{transform:translateX(-3px)}
 .motion-enabled .bi,.motion-enabled .carousel-edge .ui-icon{transition:transform .2s ease}
 .motion-enabled .theme-toggle:hover .ui-icon{transform:rotate(20deg);transition:transform .25s ease}
 .motion-enabled [data-carousel]>article:hover{box-shadow:0 7px 20px #18201b0c;border-color:#8fa66b!important}
}
@media(hover:hover) and (pointer:fine) and (min-width:701px){.motion-enabled .carousel-edge:hover:enabled{transform:scale(1.06)}}
@keyframes icon-hello{25%{transform:rotate(-9deg)}65%{transform:rotate(7deg)}100%{transform:rotate(0)}}
@media(max-width:700px){.motion-enabled .portrait-stage.motion-in-view .portrait-orbit:before{animation-duration:24s}}
@media(prefers-reduced-motion:reduce){.tap-ripple{display:none}.tech-map{transform:none!important}.motion-enabled .highlight:after,.motion-enabled .portrait-orbit:before{display:none}}
@media print{.tap-ripple{display:none}.bi{print-color-adjust:exact;-webkit-print-color-adjust:exact}}