/* The finishing layer: smooth, professional motion across the whole site. Everything here is optional decoration:
   with "reduce motion" switched on in a visitor's device settings, all of it is turned off at the bottom of this file. */
:root{--ease:cubic-bezier(.22,.8,.24,1);--ease-soft:cubic-bezier(.4,0,.2,1);}
html{scroll-padding-top:96px;}
::selection{background:rgba(124,58,237,.28);}
@supports (background:color-mix(in srgb,red,blue)){::selection{background:color-mix(in srgb,var(--accent,#7C3AED) 35%,transparent);}}
a,button,summary{-webkit-tap-highlight-color:transparent;}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--accent,#7C3AED);outline-offset:3px;border-radius:10px;}

/* ---- pages fade into each other instead of flashing white (supported browsers only) */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:var(--ease-soft);}

/* ---- buttons */
.btn{position:relative;overflow:hidden;border-radius:10px;padding:13px 26px;font-weight:600;letter-spacing:.01em;line-height:1.2;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .25s var(--ease-soft),border-color .25s var(--ease-soft),color .25s var(--ease-soft),filter .25s var(--ease-soft);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.08s;}
.btn-primary{box-shadow:0 8px 20px -10px rgba(124,58,237,.75);}
@supports (background:color-mix(in srgb,red,blue)){.btn-primary{box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 75%,transparent);}}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 16px 30px -12px rgba(124,58,237,.85);}
@supports (background:color-mix(in srgb,red,blue)){.btn-primary:hover{box-shadow:0 16px 30px -12px color-mix(in srgb,var(--accent) 85%,transparent);}}
.btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%);transition:transform .75s var(--ease);}
.btn-primary:hover::after{transform:translateX(130%);}
.btn-ghost-on-ink:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.45);}
.btn-ghost:hover{background:var(--card-bg);border-color:var(--accent);color:var(--accent);}

/* ---- menu links: an underline that draws itself */
.navlinks a:not(.btn){position:relative;padding:6px 0;transition:opacity .25s var(--ease-soft),color .25s var(--ease-soft);}
.navlinks a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.navlinks a:not(.btn):hover::after,.navlinks a[aria-current="page"]::after{transform:scaleX(1);}
.foot-links a,.clients-teaser a,.client-links a,.pillar a,.client-product a{transition:color .2s var(--ease-soft),opacity .2s var(--ease-soft);}
.foot-links a:hover{color:var(--accent);}

/* ---- header: frosted glass and a soft shadow once the page scrolls */
.site-header{transition:box-shadow .35s var(--ease-soft),background-color .35s var(--ease-soft),border-color .35s var(--ease-soft);}
@supports (backdrop-filter:blur(8px)) and (background:color-mix(in srgb,red,blue)){
  .site-header.is-scrolled{background:color-mix(in srgb,var(--bg-page) 82%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);}
}
.site-header.is-scrolled{box-shadow:0 10px 34px -18px rgba(20,10,40,.45);}

/* ---- cards and tiles lift a little when you point at them */
.client-card,.pillar,.svc,.brand,.sc-logo,.lab-chip,.problem-card,.clients-jump a,.client-chips span,.brand-chips span{transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .28s var(--ease-soft),background-color .28s var(--ease-soft);}
.client-card:hover,.pillar:hover,.svc:hover,.brand:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 22px 44px -26px rgba(20,10,40,.55);}
.sc-logo:hover,.lab-chip:hover,.clients-jump a:hover{transform:translateY(-2px);}
.brand img{transition:transform .6s var(--ease);}
.brand:hover img{transform:scale(1.05);}
.stack-name{transition:color .25s var(--ease-soft),transform .35s var(--ease);}
.stack-row:hover .stack-name{color:var(--accent);transform:translateX(3px);}
.shots .dev{transition:transform .55s var(--ease),filter .55s var(--ease);}
.shots .dev:hover{transform:translateY(-6px);}
.stack-clients summary{transition:border-color .25s var(--ease-soft),background-color .25s var(--ease-soft),transform .25s var(--ease);}
.stack-clients summary:hover{transform:translateY(-1px);}
.stack-clients[open] .sc-list{animation:ddIn .38s var(--ease) both;}
@keyframes ddIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* ---- the first screen settles in; the hero artwork drifts gently */
.hero .kicker,.hero h1,.hero-lead,.hero-sub,.hero-ctas,.proof-strip{animation:rise .9s var(--ease) both;}
.hero h1{animation-delay:.08s;}.hero-lead{animation-delay:.18s;}.hero-sub{animation-delay:.28s;}.hero-ctas{animation-delay:.4s;}.proof-strip{animation-delay:.52s;}
.hero-art svg,.hero-art img{animation:drift 9s ease-in-out infinite;}
@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes drift{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* ---- content fades up as it scrolls into view (the script adds .reveal and .in; nothing is hidden without it) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms);}
.js .reveal.in{opacity:1;transform:none;}
.js .reveal.in.card-lift{transition-delay:0ms;}
@media print{.js .reveal{opacity:1!important;transform:none!important;}}

/* ---- people who asked their device for less motion get none of it */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .js .reveal{opacity:1;transform:none;}
  .hero-art svg,.hero-art img{animation:none;}
}

/* ---- footer links wrap onto a second line on narrow screens instead of running off the edge */
footer .wrap{flex-wrap:wrap;row-gap:12px;}
.foot-links{flex-wrap:wrap;row-gap:6px;}