/* ═══════════════════════════════════════════════════════════════════════
   motion.css — loaders, page transitions, title reveals, skeletons, cursor
   Pairs with js/motion.js. Everything respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── page loader: logo draws itself in the middle ───────────────────── */
.pl{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:var(--void);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),visibility .6s;
  animation:pl-failsafe 0s linear 5s forwards}
.pl__inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.pl__intro{width:clamp(180px,22vw,250px);height:auto;display:block}
.pl__mark{width:58px;height:auto;display:none}
.kj-visited .pl__intro{display:none}
.kj-visited .pl__mark{display:block}
.pl__bar{display:block;width:150px;height:1px;background:var(--line);overflow:hidden;border-radius:2px}
.pl__bar i{display:block;height:100%;width:40%;background:var(--accent);animation:pl-bar 1.1s cubic-bezier(.65,0,.35,1) infinite}
.kj-visited .pl__bar{display:none}
html.pl-done .pl{opacity:0;visibility:hidden;pointer-events:none}
body:has(#boot) .pl{display:none}               /* the home page has its own loader */
@keyframes pl-bar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@keyframes pl-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

/* the home page boot: same intro logo, centred, with the real progress */
.boot{background:#0E0C0A}
.boot__inner{display:flex;flex-direction:column;align-items:center;width:min(320px,80vw)}
.boot__logo{width:clamp(190px,22vw,250px);height:auto;display:block;margin:0 auto 26px}
.boot__bar{width:170px;height:1px;background:rgba(241,235,227,.14);border-radius:2px}
.boot__bar span{background:#E3D2BA!important}
.boot__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:none;color:#ADA398;margin-top:14px}
.boot__mark{display:none}

/* ── leaving a page: a curtain rises with the mark ──────────────────── */
.pt{position:fixed;inset:0;z-index:450;background:var(--void);display:grid;place-items:center;
  transform:translateY(100%);pointer-events:none}
.pt img{width:58px;height:auto;opacity:0;transition:opacity .3s .2s}
.pt.go{transform:none;transition:transform .55s cubic-bezier(.76,0,.24,1);pointer-events:auto}
.pt.go img{opacity:1}

/* ── titles: letters rise out of a mask, word by word ───────────────── */
.split{text-shadow:none!important}
.split .kjw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.split .kjl{display:inline-block;transform:translate3d(0,108%,0);opacity:0;
  transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .5s ease;transition-delay:calc(var(--i,0) * 22ms)}
.split.split-in .kjl{transform:none;opacity:1}
.split .kjw--word{transform:translate3d(0,60%,0);opacity:0;overflow:visible;
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .6s ease;transition-delay:calc(var(--i,0) * 60ms)}
.split.split-in .kjw--word{transform:none;opacity:1}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* small titles in cards fade up softly */
.fade-up{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.fade-up.is-in{opacity:1;transform:none}

/* eyebrow scramble */
.eyebrow .scr{display:inline-block;white-space:pre}

/* counters keep their width while they count */
.count{display:inline-block}

/* ── skeletons while images load ────────────────────────────────────── */
.sk-host{position:relative}
.sk-shim{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(100deg,var(--sk-a) 20%,var(--sk-b) 40%,var(--sk-a) 60%);background-size:300% 100%;
  animation:sk 1.4s linear infinite;transition:opacity .45s ease}
.sk-shim::before,.sk-shim::after{content:'';position:absolute;left:8%;height:8%;border-radius:6px;background:var(--sk-b)}
.sk-shim::before{top:12%;width:42%}
.sk-shim::after{top:26%;width:62%;height:5%;opacity:.7}
.sk-shim.gone{opacity:0}
.sk-img{opacity:0}
img.sk-loaded{opacity:1;transition:opacity .55s ease}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ── custom cursor (desktop with a mouse only) ──────────────────────── */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:500;pointer-events:none;border-radius:50%;opacity:0;
  transition:opacity .3s,width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),margin .35s cubic-bezier(.22,1,.36,1),background-color .3s,border-color .3s}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent)}
.cur-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.cur-on .cur-dot,.cur-on .cur-ring{opacity:1}
.cur-hover .cur-ring{width:58px;height:58px;margin:-29px 0 0 -29px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.cur-hover .cur-dot{opacity:0}

/* smooth colour change when switching theme */
html.theme-anim,html.theme-anim body,html.theme-anim section,html.theme-anim .nav,html.theme-anim .foot,
html.theme-anim .panel,html.theme-anim .need-card,html.theme-anim .trust-card,html.theme-anim .biz-card,
html.theme-anim .faq-item,html.theme-anim .care-card,html.theme-anim .secure-item,html.theme-anim .fc__slide,html.theme-anim .proj{
  transition:background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease!important}

@media(max-width:900px),(hover:none),(pointer:coarse){
  .cur-dot,.cur-ring{display:none}
}
@media(prefers-reduced-motion:reduce){
  .split .kjl,.split .kjw--word,.fade-up{transform:none!important;opacity:1!important;transition:none!important}
  .pt{display:none}
  .pl__bar i,.sk-shim{animation:none}
  .cur-dot,.cur-ring{display:none}
}