/* Shared motion styles for every page (behaviour in motion.js).
   Home page heroes are .gk-hero; legal and 404 pages use .hero. */

/* Floating header height. Scripts measure and update it, but starting from the real value
   stops the hero jumping up under the header once they run (a layout shift). */
:root{--gk-hh:78px}
@media (max-width:767px){:root{--gk-hh:70px}}

/* Hero grid: a canvas redraws the 48px grid once motion.js is running */
.gk-hero,.hero{position:relative;isolation:isolate}
.gk-hero>canvas.gk-mesh,.hero>canvas.gk-mesh{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.gk-hero[data-mesh],.hero[data-mesh]{background-image:none}

/* Hero accent word gets an underline that draws itself in */
.gk-js .gk-hero h1>span,.gk-js .hero h1 em{background:linear-gradient(currentColor,currentColor) 0 96%/0 3px no-repeat;animation:gk-draw .9s .5s cubic-bezier(.65,0,.35,1) forwards}
@keyframes gk-draw{to{background-size:100% 3px}}

/* Pulsing "accepting projects" dot (home) */
.gk-hero span[aria-hidden]{position:relative}
.gk-hero span[aria-hidden]::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #1F9D55;opacity:0;animation:gk-ping 2.2s 1s ease-out infinite}
@keyframes gk-ping{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.8);opacity:0}}

/* Reveal on scroll (only once JS has marked the page, so content is never hidden without it) */
.gk-js [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.gk-js [data-rv=in]{opacity:1;transform:none}

/* Buttons: lift on hover, press on click */
main a[href^="#"][style*="border-radius"],main .btn,.gk-btn,button[type=submit]{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
main a[href^="#"][style*="border-radius"]:hover,main .btn:hover,.gk-btn:hover,button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(17,87,206,.22)}
main a[href^="#"][style*="border-radius"]:active,main .btn:active,.gk-btn:active,button[type=submit]:active{transform:translateY(0) scale(.98);box-shadow:none}

/* Header: buttons lift, wordmark breathes out, mobile menu drops in */
.gk-ctas a{white-space:nowrap}
.gk-ctas a,.gk-menu-ctas a{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease}
.gk-ctas a:hover,.gk-menu-ctas a:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(17,87,206,.18)}
.gk-ctas a[data-waitlist]:hover,.gk-ctas .btn-ghost:hover{background:#EEF3FC}
.gk-ctas a:active,.gk-menu-ctas a:active{transform:scale(.97);box-shadow:none}
.gk-wordmark{transition:letter-spacing .4s ease}
.gk-wordmark:hover{letter-spacing:.1em!important}
.gk-menu[open] .gk-menu-panel{animation:gk-drop .28s cubic-bezier(.2,.7,.2,1)}
@keyframes gk-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.gk-menu summary{transition:background-color .2s ease,transform .2s ease}
.gk-menu summary:active{transform:scale(.94)}
.gk-nav a{position:relative}
.gk-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:#1157CE;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.gk-nav a:hover::after{transform:scaleX(1)}

/* Cards: soft light that follows the cursor (home) */
.gk-card,.gk-pcard{position:relative}
.gk-card::after,.gk-pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(17,87,206,.08),transparent 70%)}
.gk-pcard::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(118,172,255,.16),transparent 70%)}
.gk-card:hover::after,.gk-pcard:hover::after{opacity:1}

/* Process numbers pop in as they appear (home) */
#process li[data-rv=in]>span:first-child{animation:gk-pop .5s var(--d,0s) cubic-bezier(.34,1.56,.64,1) both}
@keyframes gk-pop{from{transform:scale(.4)}to{transform:scale(1)}}

/* Legal pages: contents links nudge right, footer links underline smoothly */
.toc a{transition:color .2s ease,border-color .2s ease,padding-left .25s ease}
.toc a:hover{padding-left:18px}
footer a{transition:color .2s ease}

/* Liquid Glass, after Apple's guidance: only on the floating navigation and control layer
   (header and the bear's controls), never on content, never glass on glass (so the menu
   that opens inside the header stays solid).
   Falls back to solid surfaces for Reduce Transparency, higher contrast, or no backdrop-filter. */
.gk-glass,.gk-hcard{
  background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.56))!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.8)!important;backdrop-filter:blur(20px) saturate(1.8)!important;
  border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(17,87,206,.06),0 10px 30px rgba(0,25,68,.10),0 1px 2px rgba(0,0,0,.04)!important}
/* Specular highlight that follows the pointer across the header, like light on glass */
.gk-hcard{position:relative}
.gk-hcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(220px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.75),transparent 60%);mix-blend-mode:soft-light}
.gk-hcard:hover::before{opacity:1}
/* Small accents floating over something visual (the hero grid, the dark products section).
   Soft keeps the element's own border; dark is a smoky variant for dark backgrounds. */
.gk-glass-soft{
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.48))!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),0 6px 18px rgba(17,87,206,.10)}
.gk-glass-dark{
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05))!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(0,0,0,.25)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.gk-glass,.gk-hcard,.gk-glass-soft{background:#FFFFFF!important}.gk-glass-dark{background:rgba(255,255,255,.08)!important}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.gk-glass-soft{background:#FFFFFF!important;-webkit-backdrop-filter:none;backdrop-filter:none}.gk-glass-dark{background:#1F2430!important;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-transparency:reduce){.gk-glass,.gk-hcard{background:#FFFFFF!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:#E5E5E5!important}}
@media (prefers-contrast:more){.gk-glass,.gk-hcard{background:#FFFFFF!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid #525252!important}}

/* Cookie choice card (analytics.js): floating control, so it uses the glass surface */
.gk-consent{position:fixed;left:20px;bottom:20px;z-index:70;max-width:420px;padding:18px 20px;border-radius:18px;font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14.5px;line-height:1.5;color:#262626;opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.gk-consent.gk-consent-in{opacity:1;transform:none}
.gk-consent p{margin:0 0 14px}
.gk-consent strong{display:block;margin-bottom:2px;font-size:15.5px;color:#171717}
.gk-consent a{color:#1157CE;text-underline-offset:3px}
.gk-consent-actions{display:flex;gap:8px}
.gk-consent button{min-height:42px;padding:0 20px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;transition:transform .18s ease,background-color .18s ease}
.gk-consent-yes{border:1px solid #1157CE;background:#1157CE;color:#fff}
.gk-consent-yes:hover{background:#04409F;transform:translateY(-1px)}
.gk-consent-no{border:1px solid #C9D3E3;background:rgba(255,255,255,.7);color:#262626}
.gk-consent-no:hover{border-color:#1157CE;color:#1157CE;transform:translateY(-1px)}
@media (max-width:767px){.gk-consent{left:10px;right:10px;bottom:10px;max-width:none}.gk-consent-actions button{flex:1}}
@media print{.gk-consent{display:none}}

/* The Geneki bear (mascot.js): waddles in from the right, waves and says hello, waddles back out */
.gk-bear{position:fixed;right:20px;bottom:14px;z-index:60;display:flex;align-items:flex-end;gap:4px;pointer-events:none;transform:translateX(calc(100% + 40px));transition:transform 1.6s cubic-bezier(.25,.8,.35,1);font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
.gk-bear.gk-in{transform:translateX(0)}
.gk-bear:not(.gk-in){transition:transform 1.6s cubic-bezier(.55,0,.75,.2)}
.gk-bear-bubble{margin:0 0 128px;padding:12px 16px;max-width:200px;border-radius:18px 18px 4px 18px;font-size:14px;line-height:1.45;color:#333;opacity:0;transform:translateY(8px) scale(.9);transform-origin:100% 100%;transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.gk-bear-bubble strong{display:block;font-size:18px;color:#1157CE}
.gk-talk .gk-bear-bubble{opacity:1;transform:none;transition-delay:.3s}
.gk-bear-body{pointer-events:auto;display:block;width:190px;padding:0;margin:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gk-bear-body svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 100%;animation:gk-bear-jiggle 2.8s ease-in-out infinite}
/* Idle: a slow, squishy jiggle (wider than it is tall, because chonk) */
@keyframes gk-bear-jiggle{0%,100%{transform:scale(1,1) rotate(-1.5deg)}50%{transform:scale(1.03,.97) rotate(1.5deg)}}
.gk-bear-body:hover svg{animation-duration:1.2s}
/* Walking: a heavy side-to-side waddle with a little squash on each step */
.gk-walk .gk-bear-body svg{animation:gk-bear-waddle .5s ease-in-out infinite alternate}
@keyframes gk-bear-waddle{0%{transform:rotate(-7deg) scale(1.04,.96)}50%{transform:rotate(0) scale(.98,1.03) translateY(-5px)}100%{transform:rotate(7deg) scale(1.04,.96)}}
.gk-bear .b-arm{transform-origin:206px 126px;transform-box:view-box}
.gk-wave .b-arm{animation:gk-bear-wave .5s .15s ease-in-out 6 alternate}
@keyframes gk-bear-wave{from{transform:rotate(-16deg)}to{transform:rotate(14deg)}}
.gk-bear .b-eyes{transform-origin:120px 76px;transform-box:view-box;animation:gk-bear-blink 4.5s 2s infinite}
@keyframes gk-bear-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.gk-bear-x{pointer-events:auto;position:absolute;top:-8px;right:0;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;color:#525252;cursor:pointer;opacity:0;transition:opacity .3s ease}
.gk-talk .gk-bear-x{opacity:1;transition-delay:.6s}
.gk-bear-x:hover{color:#1157CE}
@media (max-width:767px){.gk-bear{right:8px;bottom:8px}.gk-bear-body{width:124px}.gk-bear-bubble{margin-bottom:88px;max-width:160px;font-size:13px;padding:10px 13px}.gk-bear-bubble strong{font-size:16px}}
@media print{.gk-bear{display:none}.gk-js [data-rv]{opacity:1!important;transform:none!important}}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.gk-js [data-rv]{opacity:1;transform:none}
.gk-js .gk-hero h1>span,.gk-js .hero h1 em{background-size:100% 3px}
}