/* Motion is progressive enhancement: the unanimated page is complete and usable. */
.hero-art-stage{position:relative;transform:none;animation:none}
.hero-art .hero-art-base{animation:none;filter:brightness(.97);opacity:1;transform:none}
.hero-energy{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0}
.hero-art-tilt{transform:none!important;transition:none;will-change:auto}
.hero-current{stroke:#a9edff;stroke-width:4;stroke-dasharray:105 895;stroke-dashoffset:120;opacity:0}
.hero-core{stroke:#e1f9ff;stroke-width:5;stroke-dasharray:190 810;stroke-dashoffset:0;opacity:.85}
.hero-floor-light{transform-origin:69% 82%;opacity:.2}
.hero-metal-sweep{opacity:0;transform:translateX(-900px)}
html.motion-on .hero-art-ready .hero-energy{opacity:1}
html.motion-on .hero-art-base{animation:logo-luminance 7s ease-in-out infinite}
html.motion-on .hero-current{animation:edge-current 5.8s cubic-bezier(.35,0,.25,1) infinite}
html.motion-on .hero-current.current-1{animation-duration:6.8s;animation-delay:-2s;stroke-width:5}
html.motion-on .hero-current.current-2{animation-duration:5.2s;animation-delay:-3.5s;stroke-dasharray:230 770;stroke-width:6}
html.motion-on .hero-current.current-3{animation-duration:6.4s;animation-delay:-4s;stroke-dasharray:180 820;stroke-width:4}
html.motion-on .hero-core{animation:core-current 5s linear infinite}
html.motion-on .hero-metal-sweep{animation:metal-sweep 7.4s cubic-bezier(.25,.1,.35,1) infinite}
html.motion-on .hero-floor-light{animation:floor-energy 7.4s ease-in-out infinite}
@keyframes logo-luminance{0%,100%{filter:brightness(.96) saturate(1.02)}45%{filter:brightness(1.11) saturate(1.12)}70%{filter:brightness(1.02) saturate(1.06)}}
@keyframes edge-current{0%{stroke-dashoffset:130;opacity:0}9%{opacity:.9}70%{opacity:.85}88%,100%{stroke-dashoffset:-1050;opacity:0}}
@keyframes core-current{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
@keyframes metal-sweep{0%,10%{transform:translateX(-900px);opacity:0}19%{opacity:.7}48%{opacity:.62}62%,100%{transform:translateX(950px);opacity:0}}
@keyframes floor-energy{0%,100%{opacity:.14;transform:scaleX(.94)}40%{opacity:.48;transform:scaleX(1.05)}72%{opacity:.22;transform:scaleX(1)}}
/* A short entrance, then the text stays still. */
html.motion-on .hero-copy>*{animation:hero-arrive .85s cubic-bezier(.18,.7,.2,1) both}
html.motion-on .hero-copy>h1{animation-delay:70ms}
html.motion-on .hero-copy>.hero-offer{animation-delay:130ms}
html.motion-on .hero-copy>.hero-description{animation-delay:190ms}
html.motion-on .hero-copy>.actions{animation-delay:250ms}
html.motion-on .hero-copy>.action-note{animation-delay:290ms}
html.motion-on .metrics{animation:hero-arrive 1s cubic-bezier(.18,.7,.2,1) 310ms both}
@keyframes hero-arrive{from{opacity:.25;transform:translateY(15px)}to{opacity:1;transform:none}}
/* Scroll entrances are staggered per row, not across the whole page. */
html.motion-on .reveal.pre-reveal{opacity:0;transform:translateY(28px) scale(.987);transition:none}
html.motion-on .reveal.revealed{animation:section-arrive .75s cubic-bezier(.18,.7,.2,1) var(--reveal-delay,0ms) both}
@keyframes section-arrive{from{opacity:0;transform:translateY(28px) scale(.987)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Finish the reveal before applying hover transforms; animations no longer override hover. */
html.motion-on .reveal.motion-settled{animation:none;transform:none;opacity:1}
.section-heading{position:relative}
.section-heading::after{content:'';display:block;width:72px;height:3px;margin-top:25px;background:linear-gradient(90deg,var(--blue),#8cc8ff);border-radius:4px;transform-origin:left}
html.motion-on .section-heading.pre-reveal::after{transform:scaleX(0)}
html.motion-on .section-heading.revealed::after{animation:heading-line .85s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes heading-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Local light catches the cursor, never follows it over the entire screen. */
.motion-card{position:relative;isolation:isolate;--spot-x:50%;--spot-y:30%;--card-x:0deg;--card-y:0deg}
.motion-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(300px circle at var(--spot-x) var(--spot-y),#8ebdff30,transparent 75%);opacity:0;transition:opacity .3s;z-index:-1}
.service-card.motion-card::before{background:radial-gradient(260px circle at var(--spot-x) var(--spot-y),#d8f0ff38,transparent 73%)}
.motion-card.is-pointer::before{opacity:1}
html.motion-on .motion-card.motion-settled.is-pointer{transform:perspective(950px) rotateX(var(--card-x)) rotateY(var(--card-y)) translateY(-5px);transition:transform .25s ease-out,background .2s,border-color .2s,box-shadow .2s}
html.motion-on .motion-card.motion-settled{transition:transform .45s cubic-bezier(.2,.7,.2,1),background .2s,border-color .2s,box-shadow .2s}
.button{position:relative;isolation:isolate;overflow:hidden}
.button::after{content:'';position:absolute;inset:-40% auto -40% -60%;width:40%;background:linear-gradient(90deg,transparent,#e4f4ff40,transparent);transform:skewX(-22deg);pointer-events:none;opacity:0}
html.motion-on .button:hover::after,html.motion-on .button:focus-visible::after{animation:button-glint .7s ease-out}
@keyframes button-glint{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:125%;opacity:0}}
.brand-symbol{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
html.motion-on .brand:hover .brand-symbol{transform:rotate(-7deg);box-shadow:0 0 24px #167bff44}
.brief-form{transition:box-shadow .3s}
.brief-form:focus-within{box-shadow:0 0 0 3px #6ba9ff70,0 25px 65px #0002}
html.motion-on .blog-card:hover .cover-window{transform:rotate(-1deg) translateY(-4px)}
html.motion-on .blog-card:hover .cover-crm-note{transform:rotate(0deg) translateY(-4px)}
.cover-crm-note{transition:transform .4s}
.reading-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#0367fd,#88d2ff);transform:scaleX(var(--page-progress,0));transform-origin:left;pointer-events:none;opacity:.75}
.footer-note{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-motion-toggle{background:none;border:0;border-bottom:1px solid #425c7c;padding:3px 0;color:#b5cbe5;font-size:14px;cursor:pointer}
.site-motion-toggle:hover{color:white;border-color:#b5cbe5}
/* Pause nonessential loops when their scene is offscreen or the tab is hidden. */
html.motion-scene-paused .hero-art-stage,html.motion-scene-paused .hero-art-base,html.motion-scene-paused .hero-energy *{animation-play-state:paused!important}
html.motion-tab-hidden *,html.motion-tab-hidden *::before,html.motion-tab-hidden *::after{animation-play-state:paused!important}
html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation:none!important;transition:none!important}
html.motion-off .hero-energy,html.motion-off .reading-progress{display:none}
html.motion-off .hero-art-stage,html.motion-off .hero-art-base,html.motion-off .motion-card{transform:none!important}
html.motion-off .reveal.pre-reveal{opacity:1;transform:none}
html.motion-off .motion-card::before{opacity:0}
@media(prefers-reduced-motion:reduce){html:not(.motion-on) .hero-energy{display:none}html:not(.motion-on) .motion-card{transform:none!important}}
@media(max-width:849px){.hero-current{stroke-width:5}.section-heading::after{margin-top:20px}.site-motion-toggle{font-size:13px}}
@media(min-width:850px) and (max-width:1099px){.hero-art{right:-5%}}