/* ==========================================================================
   MetaLink Solutions — Cinema layer
   Scroll-driven motion for every page. Loaded after style.css.
   Everything here is scoped to html.cx, which cinema.js sets only when the
   visitor has not asked for reduced motion. Remove the class and the site
   falls back to the plain design in style.css.
   ========================================================================== */

/* ---------- Smooth-scroll plumbing (Lenis) ---------- */
html.cx{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
html.cx-loading,html.cx-loading body{overflow:hidden}

/* Solid cover from the very first paint, so nothing flashes before the JS runs */
html.cx-loading::after,html.cx-entering::after{content:"";position:fixed;inset:0;z-index:350;background:#241A38}

/* ---------- Scroll progress bar ---------- */
.cx-bar{position:fixed;top:0;left:0;width:100%;height:3px;z-index:300;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#6D3FA0,#8B5FBF 55%,#E8400A);pointer-events:none}

/* ---------- Home loader ---------- */
.cx-loader{position:fixed;inset:0;z-index:400;background:#241A38;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;border-radius:0 0 36px 36px;transition:transform .95s cubic-bezier(.76,0,.24,1)}
.cx-loader.out{transform:translateY(-102%)}
.cx-loader img{height:64px;width:auto;filter:brightness(0) invert(1)}
.cx-ld-tag{font-size:.9rem;color:rgba(255,255,255,.55);text-align:center;max-width:28ch;transition:opacity .4s,translate .4s}
.cx-ld-bar{width:min(22rem,70vw);height:1px;background:rgba(255,255,255,.16)}
.cx-ld-bar i{display:block;height:100%;width:0;background:#8B5FBF}
.cx-ld-row{width:min(22rem,70vw);display:flex;justify-content:space-between;margin-top:-1rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cx-ld-row b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.cx-loader.out .cx-ld-tag{opacity:0;translate:0 -12px}

/* ---------- Page curtain (between pages) ---------- */
.cx-curtain{position:fixed;inset:0;z-index:380;background:#241A38;display:grid;place-items:center;transform:translateY(100%);pointer-events:none;border-radius:36px 36px 0 0}
.cx-curtain img{height:52px;width:auto;filter:brightness(0) invert(1);opacity:0}
.cx-curtain.cover{transform:translateY(0);transition:transform .6s cubic-bezier(.76,0,.24,1);pointer-events:all;border-radius:0}
.cx-curtain.cover img{opacity:1;transition:opacity .3s .25s}
.cx-curtain.hold{transform:translateY(0);border-radius:0}
.cx-curtain.hold img{opacity:1}
.cx-curtain.lift{transform:translateY(-102%);transition:transform .85s cubic-bezier(.76,0,.24,1);border-radius:0 0 36px 36px}
.cx-curtain.lift img{opacity:0;transition:opacity .25s}

/* ---------- Page structure: sections slide over a pinned hero ---------- */
.cx .nav{box-shadow:0 1px 0 rgba(20,19,28,.02);transition:box-shadow .3s}
.cx .nav.cx-scrolled{box-shadow:0 10px 30px rgba(20,19,28,.08)}
.cx .section{overflow:hidden;overflow:clip;background:#fff}
.cx .section.section-alt{background:var(--paper)}
.cx .hero{position:relative}
.cx .hero.cx-pin{position:sticky;top:var(--nav-h,72px);z-index:1}
.cx .hero ~ section,.cx .hero ~ .mq,.cx .hero ~ footer,.cx .hero ~ .cx-ghost{position:relative;z-index:2}
.cx .hero.cx-pin + .cx-over{border-radius:28px 28px 0 0;box-shadow:0 -22px 50px rgba(36,26,56,.14)}
.cx .hero::after{content:"";position:absolute;inset:0;background:#241A38;opacity:calc(var(--hp,0)*.55);pointer-events:none;z-index:6}
.cx .hero > .container{will-change:translate,scale}

/* ---------- Hero entrance ---------- */
.cx .cx-in{opacity:0;translate:0 30px;transition:opacity .9s var(--ease),translate 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.cx-ready .cx-in{opacity:1;translate:0 0}
.cx .hero-card.cx-in{translate:0 70px;scale:.94;transition:opacity 1s var(--ease),translate 1.3s cubic-bezier(.16,1,.3,1),scale 1.3s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,.5s)}
.cx-ready .hero-card.cx-in{scale:1}
.cx .hero-card{animation:none;will-change:transform}
.cx .hero-chip.cx-in{translate:0 0;scale:.5;transition:opacity .7s var(--ease),scale .9s cubic-bezier(.2,1.5,.3,1);transition-delay:var(--d,1.3s)}
.cx-ready .hero-chip.cx-in{scale:1}
.cx .hero-chip{will-change:translate}

.cx .hero > svg line{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1);transition-delay:var(--d,.4s)}
.cx .hero > svg circle{transform-box:fill-box;transform-origin:center;scale:0;transition:scale .9s cubic-bezier(.2,1.5,.3,1);transition-delay:var(--d,.9s)}
.cx-ready .hero > svg line{stroke-dashoffset:0}
.cx-ready .hero > svg circle{scale:1}
.cx .hero > svg,.cx .hero-blob,.cx .hero .float-shape{will-change:translate,rotate,scale}

/* ---------- Split headings ---------- */
.cx .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .16em;margin:0 -.05em -.16em}
.cx .wi{display:inline-block;transform:translateY(115%);transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*65ms + var(--base,0ms))}
.cx .cx-split.go .wi{transform:none}
.cx .ch{display:inline-block;opacity:0;translate:0 .4em;filter:blur(10px);transition:opacity .8s cubic-bezier(.25,1,.5,1),translate .8s cubic-bezier(.25,1,.5,1),filter .8s cubic-bezier(.25,1,.5,1);transition-delay:calc(var(--i,0)*38ms + var(--base,0ms))}
.cx .cx-chars.go .ch{opacity:1;translate:0 0;filter:blur(0)}
.cx .rw{opacity:.16;transition:opacity .2s linear}

/* ---------- Reveal variants (driven by the existing .in class) ---------- */
.cx .reveal{opacity:0;transform:translateY(48px) scale(.975);transition:opacity .9s var(--ease),transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0ms)}
.cx .reveal.in{opacity:1;transform:none}
.cx .reveal.cx-l{transform:translateX(-80px)}
.cx .reveal.cx-r{transform:translateX(80px)}
.cx .reveal.cx-persp{transform:perspective(1200px) rotateX(12deg) translateY(70px);transform-origin:50% 100%}
/* wipe reveal: a cover sweeps away (a clip-path on the card itself would stop IntersectionObserver firing) */
.cx .reveal.cx-clip{opacity:1;transform:none;transition:none}
.cx .cx-clip::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--cx-bg,#fff);transform-origin:100% 50%;transition:transform 1.15s cubic-bezier(.77,0,.18,1);transition-delay:var(--rd,0ms);z-index:5;pointer-events:none}
.cx .cx-clip.in::after{transform:scaleX(0)}
.cx .reveal.in.cx-l,.cx .reveal.in.cx-r,.cx .reveal.in.cx-persp{transform:none}
.cx .reveal.cx-noy{transform:none}

.cx .svc-card .icon-badge,.cx .val-card .icon-badge{scale:.3;rotate:-30deg;transition:scale .9s cubic-bezier(.2,1.5,.3,1) .3s,rotate .9s cubic-bezier(.2,1.2,.3,1) .3s}
.cx .svc-card.in .icon-badge,.cx .val-card.in .icon-badge{scale:1;rotate:0deg}

/* ---------- Pointer tilt on cards ---------- */
.cx .tilt-live{transition:transform .18s ease-out,opacity .35s,box-shadow .3s,border-color .25s !important;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) !important}
.cx .tilt-live:hover{box-shadow:0 26px 54px rgba(36,26,56,.16)}

/* Hovering one card dims the rest of its group */
.cx .svc-grid:has(.svc-card:hover) .svc-card:not(:hover),
.cx .case-grid:has(.case-card:hover) .case-card:not(:hover),
.cx .val-grid:has(.val-card:hover) .val-card:not(:hover),
.cx .testi-grid:has(.testi:hover) .testi:not(:hover){opacity:.5}

/* ---------- Buttons: magnet + shine ---------- */
.cx .btn{position:relative;overflow:hidden;translate:var(--mx,0px) var(--my,0px);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s,translate .35s cubic-bezier(.2,.8,.2,1)}
.cx .btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s}
.cx .btn-primary:hover::after{left:130%}

/* ---------- Hero card bars ---------- */
.cx .hc-bf{width:0 !important;transition:width 1.7s cubic-bezier(.16,1,.3,1);transition-delay:var(--bd,0s)}
.cx .hc-bf.on{width:var(--w,50%) !important}

/* ---------- Marquee driven by scroll velocity ---------- */
.cx .mq-track{animation:none;will-change:transform}

/* ---------- Ghost words (home) ---------- */
.cx-ghost{background:#fff;overflow:hidden;padding:3.2rem 0 2.2rem;user-select:none}
.cx-gh-row{display:block;white-space:nowrap;width:max-content;margin-left:-6vw;font-weight:900;font-size:clamp(3.4rem,10.5vw,9.5rem);line-height:1.02;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1.5px rgba(109,63,160,.3);will-change:translate}
.cx-gh-row b{font-weight:900;color:#6D3FA0;-webkit-text-stroke:0}
.cx-gh-row b.o{color:#E8400A}
.cx-gh-row i{font-style:normal;color:#8B5FBF;-webkit-text-stroke:0;font-size:.5em;vertical-align:middle;padding:0 .35em}

/* ---------- Scroll rails (Why MetaLink list + process steps) ---------- */
.cx-railwrap{position:relative;padding-left:2.4rem}
.cx-rail{position:absolute;left:.3rem;top:.5rem;bottom:.5rem;width:2px;background:rgba(109,63,160,.16);border-radius:2px}
.cx-rail b{position:absolute;left:0;top:0;width:100%;height:calc(var(--rp,0)*100%);background:linear-gradient(#6D3FA0,#8B5FBF);border-radius:2px}
.cx-rail s{position:absolute;left:50%;top:calc(var(--rp,0)*100%);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:#6D3FA0;rotate:calc(var(--rp,0)*720deg);box-shadow:0 0 0 5px rgba(109,63,160,.15);text-decoration:none}
.cx-railwrap > :not(.cx-rail){transition:opacity .3s linear}

.cx .proc{position:relative}
.cx-pt{position:absolute;pointer-events:none;z-index:1}
.cx-pt i{position:absolute;inset:0;background:rgba(109,63,160,.16);border-radius:2px}
.cx-pt b{position:absolute;inset:0;background:linear-gradient(90deg,#6D3FA0,#8B5FBF);border-radius:2px;transform-origin:0 0;transform:scaleX(var(--pp,0))}
.cx-pt.v b{background:linear-gradient(#6D3FA0,#8B5FBF);transform:scaleY(var(--pp,0))}
.cx-pt s{position:absolute;width:13px;height:13px;margin:-5.5px 0 0 -5.5px;background:#6D3FA0;rotate:calc(var(--pp,0)*1080deg);box-shadow:0 0 0 5px rgba(109,63,160,.15);left:calc(var(--pp,0)*100%);top:0;text-decoration:none}
.cx-pt.v s{left:0;top:calc(var(--pp,0)*100%);margin:-6.5px 0 0 -5.5px}
.cx .proc-step{opacity:.4;transition:opacity .5s}
.cx .proc-step .proc-num{transition:color .4s,scale .5s cubic-bezier(.2,1.5,.3,1);transform-origin:0 50%}
.cx .proc-step.lit{opacity:1}
.cx .proc-step.lit .proc-num{scale:1.18}
.cx .proc-step{position:relative}

/* ---------- CTA band & footer ---------- */
.cx .cta-band{position:relative;overflow:hidden;opacity:calc(.25 + var(--cp,1)*.75);transform:scale(calc(.9 + var(--cp,1)*.1));border-radius:calc(46px - var(--cp,1)*26px);will-change:transform}
.cx .cta-band > *{position:relative;z-index:1}
.cx-glow{position:absolute !important;z-index:0 !important;width:560px;height:560px;border-radius:50%;left:50%;top:50%;translate:-50% -50%;background:radial-gradient(circle,rgba(139,95,191,.42),transparent 65%);pointer-events:none;transition:opacity .4s}
.cx-wm{position:absolute;left:50%;bottom:-.3em;translate:-50% calc((1 - var(--wp,1))*45%);font-size:clamp(5rem,18vw,16rem);font-weight:900;line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.04);white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
.cx footer{position:relative;overflow:hidden}
.cx footer > .container{position:relative;z-index:1}
.cx-seam{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:3;display:block}
.cx .mq{position:relative}

/* ---------- Services page: cards stack and recede ---------- */
.cx .cx-stack{position:sticky;top:var(--st,96px);background:#fff;box-shadow:0 22px 44px rgba(20,19,28,.07);margin-bottom:2.2rem !important;transform-origin:50% 0;transform:scale(calc(1 - var(--sp,0)*.055));opacity:1;will-change:transform}
.cx .cx-stack.cx-nostick{position:relative;top:auto;transform:none}
.cx .cx-stack.cx-nostick::after{display:none}
.cx .cx-stack::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#241A38;opacity:calc(var(--sp,0)*.32);pointer-events:none}

/* ---------- Contact page ---------- */
.cx .faq-a{display:block;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .55s var(--ease),opacity .4s,margin-top .4s}
.cx .faq-item.open .faq-a{max-height:320px;opacity:1;margin-top:.75rem}
.cx .faq-item{transition:padding .3s}
.cx .f-group:focus-within .f-label{color:var(--orange)}
.cx .f-input:focus,.cx .f-select:focus,.cx .f-area:focus{box-shadow:0 0 0 4px rgba(109,63,160,.12)}
.cx .contact-ico{transition:scale .5s cubic-bezier(.2,1.5,.3,1),rotate .5s}
.cx .contact-item:hover .contact-ico{scale:1.14;rotate:-8deg}

/* ---------- 404 ---------- */
.cx-big404{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:clamp(9rem,34vw,26rem);font-weight:900;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px rgba(109,63,160,.16);pointer-events:none;user-select:none;line-height:1;z-index:0}

/* ---------- Mobile ---------- */
@media(max-width:899px){
  .cx .hero.cx-pin{position:relative;top:auto}
  .cx .reveal.cx-l,.cx .reveal.cx-r{transform:translateY(40px)}
  .cx .proc{padding-left:1.9rem}
  .cx .proc-step{opacity:.55}
  .cx-gh-row{font-size:clamp(2.8rem,14vw,5rem)}
  .cx-glow{width:360px;height:360px}
}
@media(max-width:600px){
  .cx .cta-band{border-radius:calc(30px - var(--cp,1)*14px)}
}

/* ---------- Base card styling the original design was missing ---------- */
.val-card{padding:1.75rem;border:1px solid var(--line);border-radius:var(--radius)}
.val-grid:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr}
@media(max-width:900px){.val-grid:has(> :nth-child(2):last-child){grid-template-columns:1fr}}