/* Motion enhances the existing composition without changing its geometry. */
.hero-spotlight{will-change:translate;transition:none}
.hero-spotlight::after{animation:raqim-soft-glow 10s ease-in-out infinite;transform-origin:50% 50%}
.hero-spotlight::before{content:"";position:absolute;inset:1% 8% auto;height:53%;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 45% 0,#677eff12,transparent 63%);opacity:.7;animation:raqim-atmosphere 14s ease-in-out infinite;filter:blur(22px)}
.hero .curve-halo{animation:raqim-neon-breathe 5.8s ease-in-out infinite}
.curve-energy-streak{filter:drop-shadow(0 0 3px #ebaeff80)}
.growth-stage h2{transition:color .35s,text-shadow .35s,translate .35s}
.growth-stage.is-passing h2{color:#f4e9ff;text-shadow:0 0 19px #d569ed60;translate:0 -2px}
.chart-points circle{transition:filter .4s}
.chart-points circle.is-passing{filter:drop-shadow(0 0 8px #cd87ff88)}
.growth-stage.is-passing .stage-mobile-dot{box-shadow:0 0 16px #b869ff70}

/* Pointer easing is shared with the feature cards and remains deliberately small. */
.motion-ready .services-section .service-card.is-visible{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .07s linear,opacity .65s,border-color .3s,box-shadow .3s,translate .3s}
.motion-ready .services-section .service-card::before{background:radial-gradient(310px circle at var(--pointer-x,70%) var(--pointer-y,25%),rgba(var(--service-rgb),.13),transparent 70%),linear-gradient(115deg,#ffffff05,transparent 33%,transparent 67%,rgba(var(--service-rgb),.07))}
.motion-ready .services-section .service-top .service-icon{translate:var(--art-shift-x,0px) var(--art-shift-y,0px);transition:translate .1s linear,border-color .3s,box-shadow .3s}
.js-motion .service-card.is-visible .service-top{animation:raqim-detail-arrive .75s cubic-bezier(.2,.7,.3,1) both}
.js-motion .service-card.is-visible h3{animation:raqim-detail-arrive .75s .06s cubic-bezier(.2,.7,.3,1) both}
.js-motion .service-card.is-visible>p{animation:raqim-detail-arrive .75s .11s cubic-bezier(.2,.7,.3,1) both}
.js-motion .service-card.is-visible .service-tags{animation:raqim-detail-arrive .75s .16s cubic-bezier(.2,.7,.3,1) both}
.feature-card .feature-art{translate:var(--art-shift-x,0px) var(--art-shift-y,0px);transition:translate .1s linear}
.js-motion .feature-card.is-visible .feature-body{animation:raqim-detail-arrive .8s .12s cubic-bezier(.2,.7,.3,1) both}

/* Small visual stories in the portfolio, with text and controls held steady. */
.motion-ready .project-card .project-art{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .09s linear,box-shadow .4s,border-color .4s}
.motion-ready .project-open:hover .project-art,.motion-ready .project-open:focus-visible .project-art{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:#b6a3e943;box-shadow:0 10px 28px #0005}
.motion-ready .poster-orbit{animation:raqim-orbit-drift 17s ease-in-out infinite;transform-origin:50% 50%}
.motion-ready .poster-asterisk{animation:raqim-emblem-turn 26s linear infinite}
.motion-ready .browser-mockup{animation:raqim-browser-float 7s ease-in-out infinite}
.motion-ready .mini-chart i{transform-origin:50% 100%;animation:raqim-chart-rise 5s ease-in-out infinite}
.motion-ready .mini-chart i:nth-child(2){animation-delay:-.5s}.motion-ready .mini-chart i:nth-child(3){animation-delay:-1s}.motion-ready .mini-chart i:nth-child(4){animation-delay:-1.5s}.motion-ready .mini-chart i:nth-child(5){animation-delay:-2s}.motion-ready .mini-chart i:nth-child(6){animation-delay:-2.5s}
.motion-ready .motion-rings i{animation:raqim-lens-breathe 6s ease-in-out infinite;transform-origin:center}
.motion-ready .motion-rings i:nth-child(2){animation-delay:-2s}.motion-ready .motion-rings i:nth-child(3){animation-delay:-4s}
.motion-ready .playhead{animation:raqim-timeline-scan 8s ease-in-out infinite}
.motion-ready .record-mark{animation:raqim-record-glow 4s ease-in-out infinite}
.js-motion .project-card.is-visible .project-info{animation:raqim-detail-arrive .8s .12s cubic-bezier(.2,.7,.3,1) both}

/* The process reveals follow reading order: right to left. */
.motion-ready .process-grid>li{position:relative}
.motion-ready .process-grid>li::before{content:"";position:absolute;right:0;left:0;top:-1px;width:auto;height:1px;border-radius:0;pointer-events:none;background:linear-gradient(270deg,#b19ae5aa,#737cff55,transparent 86%);transform:scaleX(0);transform-origin:right;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.motion-ready .process-grid>li.is-visible::before{transform:scaleX(1)}
.motion-ready .process-grid>li:nth-child(2)::before{transition-delay:.1s}.motion-ready .process-grid>li:nth-child(3)::before{transition-delay:.2s}.motion-ready .process-grid>li:nth-child(4)::before{transition-delay:.3s}
.js-motion .process-grid>li.is-visible .step-number{animation:raqim-step-arrive .8s cubic-bezier(.2,.7,.3,1) both}
.js-motion .process-grid>li:nth-child(2) .step-number{animation-delay:.1s}.js-motion .process-grid>li:nth-child(3) .step-number{animation-delay:.2s}.js-motion .process-grid>li:nth-child(4) .step-number{animation-delay:.3s}
.process-grid>li h3,.process-grid>li .step-number{transition:color .3s,text-shadow .3s}
.process-grid>li:hover h3{color:#ede6ff}.process-grid>li:hover .step-number{color:#cfb4f2;text-shadow:0 0 20px #9761d829}

@keyframes raqim-soft-glow{0%,100%{opacity:.74;scale:1;translate:-10px 0}50%{opacity:.98;scale:1.055;translate:14px 5px}}
@keyframes raqim-atmosphere{0%,100%{opacity:.45;translate:12px 0;scale:1}50%{opacity:.8;translate:-20px 10px;scale:1.07}}
@keyframes raqim-neon-breathe{0%,100%{opacity:.16}50%{opacity:.31}}
@keyframes raqim-detail-arrive{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes raqim-step-arrive{from{opacity:0;translate:0 12px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes raqim-orbit-drift{0%,100%{translate:0 0;scale:1}50%{translate:11px -5px;scale:1.035}}
@keyframes raqim-emblem-turn{to{rotate:360deg}}
@keyframes raqim-browser-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes raqim-chart-rise{0%,100%{scale:1 1;opacity:.95}50%{scale:1 .75;opacity:.72}}
@keyframes raqim-lens-breathe{0%,100%{scale:1;opacity:.75}50%{scale:1.045;opacity:1}}
@keyframes raqim-timeline-scan{0%,100%{translate:-12px 0}50%{translate:66px 0}}
@keyframes raqim-record-glow{0%,100%{opacity:.72}50%{opacity:1}}

/* CSS and JS share visibility gates; offscreen and background tabs do no animation work. */
.motion-ready .motion-scene:not(.is-motion-visible),.motion-ready .motion-scene:not(.is-motion-visible) *,.motion-ready .motion-scene:not(.is-motion-visible)::before,.motion-ready .motion-scene:not(.is-motion-visible)::after,.motion-ready .motion-scene:not(.is-motion-visible) *::before,.motion-ready .motion-scene:not(.is-motion-visible) *::after{animation-play-state:paused!important}
.motion-document-hidden *,.motion-document-hidden *::before,.motion-document-hidden *::after{animation-play-state:paused!important}
html.motion-paused .services-section .service-card,html.motion-paused .project-card .project-art{transform:none!important}
html.motion-paused .feature-card .feature-art,html.motion-paused .service-top .service-icon,html.motion-paused .growth-stage h2{translate:none!important}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important}
@media(hover:none),(pointer:coarse){.motion-ready .service-card,.motion-ready .project-card .project-art{transform:none!important}.motion-ready .feature-card .feature-art,.motion-ready .service-top .service-icon{translate:none!important}}
@media(prefers-reduced-motion:reduce){.hero-spotlight{translate:none!important;will-change:auto}.motion-ready .service-card,.motion-ready .project-card .project-art{transform:none!important}.motion-ready .feature-card .feature-art,.motion-ready .service-top .service-icon,.growth-stage h2{translate:none!important}.motion-ready .process-grid>li::before{transform:scaleX(1);transition:none}.motion-ready .motion-scene *,.motion-ready .motion-scene *::before,.motion-ready .motion-scene *::after{animation:none!important;transition:none!important}.curve-energy-streak,.curve-trail,.chart-selection-pulses{display:none}}