/* Konnar site-wide motion layer. Pairs with kora-motion.js. Skipped entirely for reduced motion; nothing is
   hidden unless the script has run (html.km-on), except the short CSS-only intro curtain. */
:root{
  --km-ease:cubic-bezier(.16,1,.3,1);--km-spring:cubic-bezier(.34,1.56,.64,1);
  --km-mark-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='32 -3 40 38'%3E%3Cpath d='M65.1338 11.8445H68.3502V26.3091H51.5814V23.0926H65.1338V11.8445Z' fill='%2399C8FF'/%3E%3Cpath d='M40.4187 16.7188H43.6352V27.9669H57.1876V31.1833H40.4187V16.7188Z' fill='%23fff'/%3E%3Cpath d='M46.8044 0H63.5733V14.4646H60.3568V3.21647H46.8044V0Z' fill='%23fff'/%3E%3Cpath d='M35.5444 4.86255H50.2679V8.07902H38.7632V19.6193H35.5444V4.86255Z' fill='%2399C8FF'/%3E%3C/svg%3E");
  --km-mark-brand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='32 -3 40 38'%3E%3Cpath d='M65.1338 11.8445H68.3502V26.3091H51.5814V23.0926H65.1338V11.8445Z' fill='%2399C8FF'/%3E%3Cpath d='M40.4187 16.7188H43.6352V27.9669H57.1876V31.1833H40.4187V16.7188Z' fill='%23000066'/%3E%3Cpath d='M46.8044 0H63.5733V14.4646H60.3568V3.21647H46.8044V0Z' fill='%23000066'/%3E%3Cpath d='M35.5444 4.86255H50.2679V8.07902H38.7632V19.6193H35.5444V4.86255Z' fill='%2399C8FF'/%3E%3C/svg%3E");
}

/* Layout tweak (not motion): on phones the Clients / Merchants switch stays a compact pill, as on desktop. */
@media(max-width:900px){
  header .audience-switch{width:auto;margin:0 auto 0 0}
  header .audience-switch a{flex:0 0 auto;min-height:44px;padding:8px 18px;font-size:14px}
}

@media(prefers-reduced-motion:no-preference){
  html.km-on,html.km-on body{overflow-x:clip}

  /* ---------- Intro curtain + page-leave cover (CSS only, always resolves) ---------- */
  html::before{content:'';position:fixed;inset:0;z-index:9998;background:#000066;pointer-events:none;animation:km-curtain .85s cubic-bezier(.76,0,.24,1) .5s both}
  html::after{content:'';position:fixed;left:50%;top:50%;width:84px;height:84px;margin:-42px;z-index:9999;background:var(--km-mark-light) center/contain no-repeat;pointer-events:none;animation:km-mark 1.05s var(--km-ease) both}
  html.km-leave::before{animation:km-cover .42s cubic-bezier(.76,0,.24,1) both}
  html.km-leave::after{animation:none;opacity:0}
  html.km-hold .hero,html.km-hold .hero *{animation-play-state:paused!important}

  /* ---------- Header ---------- */
  .km-on header{animation:km-drop .9s var(--km-ease) 1s backwards}
  @media(min-width:1101px){
    .km-on header{position:sticky;top:0;z-index:15;transition:transform .55s var(--km-ease),box-shadow .3s,background .3s;clip-path:inset(0 -100vmax)}
    .km-on.km-scrolled header{background:#fff;box-shadow:0 0 0 100vmax #fff,0 1px 0 100vmax #00006614}
    .km-on.km-hide header{transform:translateY(-105%)}
  }

  /* ---------- Buttons: arrow loops through on hover ---------- */
  .km-on .button .button-icon{overflow:hidden}
  .km-on .button:hover .button-icon svg{animation:km-arrow .55s var(--km-ease)}

  /* ---------- Hero ---------- */
  .km-on .title-line>span{animation:none!important}
  .km-wd{display:inline-block;white-space:nowrap}
  .km-ch{display:inline-block;transform-origin:50% 100%;translate:0 var(--lift,0px);transition:translate .35s var(--km-ease);animation:km-char 1s var(--km-ease) calc(var(--i)*34ms + var(--l)*110ms) backwards}
  .hero h1 em .km-ch{animation:km-char 1s var(--km-ease) calc(var(--i)*34ms + var(--l)*110ms) backwards,km-glint 5s ease-in-out calc(3s + var(--i)*90ms) infinite}
  .km-titled .title-line{overflow:visible}
  .km-dust,.km-spot{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .km-spot{background:radial-gradient(circle 420px at var(--mx,70%) var(--my,40%),#99c8ff30,transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .6s}
  .hero:hover .km-spot{opacity:1}
  @media(min-width:901px){
    .km-on .hero{scale:calc(1 - var(--km-hero,0)*.07);border-radius:calc(14px + var(--km-hero,0)*30px);transform-origin:50% 100%}
    .km-on .hero-copy{opacity:calc(1 - var(--km-hero,0)*1.6);translate:0 calc(var(--km-hero,0)*-80px)}
  }

  /* ---------- Intro band: words light up as you scroll ---------- */
  .km-word{transition:opacity .6s ease,filter .6s ease;opacity:.14;filter:blur(1.5px)}
  .km-word.is-lit{opacity:1;filter:none}

  /* ---------- Marquee ---------- */
  .km-marquee{overflow:hidden;padding:clamp(26px,4vw,48px) 0;border-bottom:1px solid #dce1ed;user-select:none}
  .km-track{display:flex;align-items:center;width:max-content;will-change:transform;font:800 clamp(54px,9.5vw,136px)/1 'Cabinet Grotesk',sans-serif;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap}
  .km-track span{padding:0 .22em;color:transparent;-webkit-text-stroke:1.5px #000066}
  .km-track span.is-fill{color:#000066;-webkit-text-stroke:0}
  .km-track i{flex:none;width:.5em;height:.5em;background:var(--km-mark-brand) center/contain no-repeat;animation:km-spin 7s linear infinite}

  /* ---------- Headings: words rise out of a mask ---------- */
  .km-split .km-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .16em;margin:0 -.05em -.16em}
  .km-split .km-w>span{display:inline-block;transform:translateY(118%) rotate(8deg);transform-origin:0 100%;transition:transform 1.1s var(--km-ease) calc(var(--i)*60ms)}
  .km-split.km-in .km-w>span{transform:none}

  /* ---------- Vision: navy takeover ---------- */
  .km-on .vision{position:relative;isolation:isolate}
  .km-on .vision::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;z-index:-1;background:#000066;clip-path:circle(0 at 50% 55%);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
  .km-on .vision.km-dark::before{clip-path:circle(80vmax at 50% 55%)}
  .km-on .vision p,.km-on .vision .eyebrow{transition:color .45s ease .2s}
  .km-on .vision.km-dark{--ink:#fff;--muted:#cfdcf7}
  .km-on .vision.km-dark .eyebrow{color:#99c8ff}
  .km-on .vision.km-dark .vision-grid h2{background-image:linear-gradient(90deg,#fff var(--vision-fill,0%),#7d8cd6 var(--vision-fill,0%))}
  .km-vmark{position:absolute;right:-3%;top:50%;width:min(42vw,440px);aspect-ratio:1;translate:0 -50%;rotate:calc(var(--km-vision-r,0)*1deg);z-index:-1;background:var(--km-mark-light) center/contain no-repeat;opacity:0;transition:opacity .7s ease;pointer-events:none}
  .km-dark .km-vmark{opacity:.1}

  /* ---------- Closing ---------- */
  .km-on .closing{isolation:isolate}
  .km-on .closing h2{scale:calc(.82 + var(--km-close,1)*.18)}
  .km-on .closing .button{animation:km-pulse 2.4s ease-out infinite}
  .km-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(50px);pointer-events:none;animation:km-orbit 14s ease-in-out infinite alternate}
  .km-orb:nth-of-type(1){width:46%;aspect-ratio:1;left:-12%;top:-40%;background:#ffffff85}
  .km-orb:nth-of-type(2){width:38%;aspect-ratio:1;right:-8%;bottom:-50%;background:#3d5cff55;animation-duration:18s;animation-direction:alternate-reverse}
  .km-orb:nth-of-type(3){width:26%;aspect-ratio:1;left:38%;top:30%;background:#d7ecff;animation-duration:11s}
  .km-bub{position:absolute;z-index:-1;left:var(--x);bottom:-50px;width:54px;height:34px;border-radius:17px 17px 17px 4px;background:#ffffffc7 radial-gradient(circle,#00006670 2.6px,transparent 3.2px) center/13px 100% repeat-x;background-clip:padding-box;border:0 solid transparent;border-width:0 8px;scale:var(--s,1);opacity:0;pointer-events:none;animation:km-rise var(--t,12s) linear var(--d,0s) infinite}
  .km-bub:nth-child(even){border-radius:17px 17px 4px 17px;background-color:#000066c9;background-image:radial-gradient(circle,#ffffffb0 2.6px,transparent 3.2px)}

  /* ---------- Cursor ---------- */
  /* Three stacked discs: invert what is underneath, recolour it to the navy hue, then floor it at navy. The result stays in navy, blue and white. */
  .km-cursor{position:fixed;left:0;top:0;z-index:9990;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--c);pointer-events:none;opacity:0;transition:opacity .3s,width .35s var(--km-ease),height .35s var(--km-ease),margin .35s var(--km-ease),background .3s}
  .km-c1{--c:#fff;mix-blend-mode:difference}
  .km-c2{--c:#000066;mix-blend-mode:color}
  .km-c3{--c:#000066;mix-blend-mode:lighten}
  .km-cursor.is-on{opacity:1}
  .km-cursor.is-link{width:70px;height:70px;margin:-35px 0 0 -35px;background:var(--c)}
  .km-cursor.is-down{width:24px;height:24px;margin:-12px 0 0 -12px}

  /* ---------- Merchants + About ---------- */
  .km-on .merchant-photo{animation:km-photo 1.5s cubic-bezier(.65,0,.35,1) .45s backwards;translate:0 calc(var(--km-hero,0)*70px)}
  .km-on .merchant-photo img{animation:km-zoom 18s ease-in-out infinite alternate;transform-origin:60% 40%}
  .km-on .steps article{transition:opacity .9s ease var(--reveal-delay,0ms),transform 1.1s var(--km-ease) var(--reveal-delay,0ms),filter .9s ease var(--reveal-delay,0ms),translate .5s var(--km-ease)}
  .km-on .steps article:hover{translate:0 -10px}
  .km-on .about-purpose article{border-top-color:transparent;position:relative}
  .km-on .about-purpose article::before{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:#000066;transform-origin:left;transform:scaleX(0);transition:transform 1.5s var(--km-ease) .25s}
  .km-on .about-purpose article.km-ruled::before{transform:scaleX(1)}
  .km-on .closing .button~.button,.km-on .about-actions .button~.button{animation:none}

  @keyframes km-photo{from{clip-path:inset(100% 0 0 0 round 12px);transform:scale(1.15)}to{clip-path:inset(0 0 0 0 round 12px);transform:none}}
  @keyframes km-zoom{from{transform:scale(1)}to{transform:scale(1.14)}}
  @keyframes km-curtain{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
  @keyframes km-cover{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes km-mark{0%{opacity:0;transform:rotate(-130deg) scale(.25)}42%,66%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-70px) scale(.7)}}
  @keyframes km-drop{from{opacity:0;transform:translateY(-40px)}}
  @keyframes km-arrow{0%{transform:none}49%{transform:translateX(130%)}50%{transform:translateX(-130%)}100%{transform:none}}
  @keyframes km-char{from{opacity:0;transform:translateY(112%) rotate(14deg) scale(.8)}}
  @keyframes km-glint{0%,24%,100%{color:inherit;transform:none}10%{color:#fff;transform:translateY(-.07em)}}
  @keyframes km-spin{to{transform:rotate(1turn)}}
  @keyframes km-pulse{0%{box-shadow:0 0 0 0 #00006666}70%,100%{box-shadow:0 0 0 22px #00006600}}
  @keyframes km-orbit{from{transform:translate(0,0) scale(1)}to{transform:translate(18%,14%) scale(1.25)}}
  @keyframes km-rise{0%{opacity:0;transform:translate(0,0) rotate(-6deg)}12%{opacity:.9}80%{opacity:.7}100%{opacity:0;transform:translate(var(--sway,30px),-460px) rotate(8deg)}}
}