/* Wali Impex: shared motion layer (v2)
   Inertial scroll, word-mask headings, curtain image reveals, card lift + tilt,
   magnetic buttons, hide-on-scroll header, scroll-velocity product ribbon.
   Every moving part is switched off under prefers-reduced-motion. */
:root{
  --mo-ease:cubic-bezier(.16,1,.3,1);      /* expo-out: fast start, long soft landing */
  --mo-ease-io:cubic-bezier(.65,0,.35,1);
  --mo-bar:#1F3A93;
  --mo-shadow:0 30px 60px -28px rgba(15,30,80,.45);
}

/* Lenis (inertial scroll) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* reading progress */
.mo-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;background:var(--mo-bar);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

@media (prefers-reduced-motion:no-preference){

  /* ---------- 1. block reveal: rise + fade + focus ---------- */
  html.mo-ready .mo{opacity:0 !important;filter:blur(8px) !important}
  html.mo-ready .mo:not(.mo-keep){transform:translate3d(0,48px,0) scale(.98) !important}
  html.mo-ready .mo.mo-go{
    opacity:1 !important;filter:none !important;
    transition:opacity .9s var(--mo-ease) var(--mo-d,0ms),transform 1.2s var(--mo-ease) var(--mo-d,0ms),filter .9s var(--mo-ease) var(--mo-d,0ms) !important}
  html.mo-ready .mo.mo-go:not(.mo-keep){transform:none !important}

  /* ---------- 2. media reveal: curtain wipe + slow zoom-out ---------- */
  /* the zoomed photo must not widen the page (mobile sideways scroll) */
  .mo-media{overflow:clip}
  html.mo-ready .mo-media.mo{opacity:1 !important;filter:none !important;transform:none !important;clip-path:inset(0 0 100% 0)}
  html.mo-ready .mo-media.mo > img,html.mo-ready .mo-media.mo > div > img,html.mo-ready .mo-media.mo > picture > img{scale:calc(var(--mo-s,1) * 1.3)}
  html.mo-ready .mo-media.mo.mo-go{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--mo-ease-io) var(--mo-d,0ms) !important}
  html.mo-ready .mo-media.mo.mo-go > img,html.mo-ready .mo-media.mo.mo-go > div > img,html.mo-ready .mo-media.mo.mo-go > picture > img{scale:var(--mo-s,1);transition:scale 1.9s var(--mo-ease) var(--mo-d,0ms) !important}
  html.mo-ready .mo-media.mo.mo-go > :not(img){animation:mo-lift 1.1s var(--mo-ease) calc(var(--mo-d,0ms) + .35s) both}
  @keyframes mo-lift{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  /* ---------- 3. headings: words rise out of a mask ---------- */
  .mo-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
  .mo-wi{display:inline-block;will-change:transform}
  html.mo-ready .mo-split .mo-wi{transform:translate3d(0,115%,0) rotate(5deg);transform-origin:0 100%}
  html.mo-ready .mo-split.mo-split-go .mo-wi{transform:none;transition:transform 1.1s var(--mo-ease) calc(var(--mo-d,0ms) + var(--i,0) * 55ms)}

  /* ---------- 4. parallax photos ---------- */
  .mo-px{scale:var(--mo-s,1.14);will-change:translate}

  /* ---------- 5. cards: lift, 3D tilt, photo zoom ---------- */
  .mo-card{transition:transform .7s var(--mo-ease),box-shadow .7s var(--mo-ease),background-color .4s ease,border-color .4s ease,color .4s ease !important}
  .mo-card img{transition:scale 1.1s var(--mo-ease),transform .9s var(--mo-ease),filter .6s var(--mo-ease),opacity .6s ease !important}
  @media (hover:hover) and (pointer:fine){
    .mo-card:hover{transform:perspective(1000px) translate3d(0,-10px,0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) !important;box-shadow:var(--mo-shadow) !important}
    .mo-card.mo-tilting{transition:transform .25s ease-out,box-shadow .7s var(--mo-ease),background-color .4s ease,border-color .4s ease,color .4s ease !important}
    .mo-card:hover img{scale:calc(var(--mo-s,1) * 1.08) !important}
  }

  /* ---------- 6. buttons: magnetic pull + press ---------- */
  .mo-mag{transition:translate .6s var(--mo-ease),scale .25s var(--mo-ease),box-shadow .4s var(--mo-ease),background-color .25s ease,color .25s ease,border-color .25s ease !important}
  .mo-mag.mo-pulling{transition:translate .18s ease-out,scale .25s var(--mo-ease),box-shadow .4s var(--mo-ease),background-color .25s ease,color .25s ease,border-color .25s ease !important}
  @media (hover:hover){.mo-mag:hover{box-shadow:0 14px 30px -12px rgba(31,58,147,.55)}}
  .mo-mag:active{scale:.96}

  /* ---------- 7. header hides on the way down, returns on the way up ---------- */
  .mo-hdr{transition:translate .55s var(--mo-ease),box-shadow .4s ease,background-color .3s ease,border-color .3s ease !important}
  .mo-hdr.mo-hdr-hide{translate:0 -105%}
  .mo-hdr.mo-hdr-float{box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
}

/* ---------- 8. product ribbon (static under reduced motion) ---------- */
.mo-ribbon{overflow:hidden;background:var(--mq-bg,#1F3A93);color:var(--mq-fg,#fff);padding:clamp(18px,2.4vw,30px) 0;border-block:1px solid rgba(255,255,255,.08);user-select:none}
.mo-ribbon .mo-track{display:flex;width:max-content;will-change:transform}
.mo-ribbon .mo-set{display:flex;align-items:center;flex:none}
.mo-ribbon span{font-family:var(--mq-font,inherit);font-weight:700;font-size:clamp(1.4rem,3vw,2.6rem);letter-spacing:-.01em;white-space:nowrap;padding:0 .9em;line-height:1.1}
.mo-ribbon img{width:clamp(22px,2.4vw,34px);height:auto;flex:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
}

/* ---------- touch comfort (shared) ---------- */
@media (max-width:820px){
  .topbar .wrap{height:auto;min-height:44px}
  .topbar a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ================= branded intro ================= */
html.mo-intro{overflow:hidden}
html.mo-intro body::before{content:"";position:fixed;inset:0;z-index:2000;background:var(--intro-bg)}
html.mo-intro.mo-intro-out body::before{opacity:0}
/* hero entrances wait for the intro, then play */
html.mo-intro:not(.mo-intro-out) body section:first-of-type,html.mo-intro:not(.mo-intro-out) body section:first-of-type *{animation-play-state:paused !important}
.mo-intro-panel{position:fixed;inset:0;z-index:2001;background:var(--intro-bg);display:grid;place-items:center;color:var(--intro-fg);
  transition:transform .85s cubic-bezier(.76,0,.24,1)}
html.mo-intro-out .mo-intro-panel{transform:translate3d(0,-115%,0)}
.mo-intro-panel .mi-wave{position:absolute;left:0;right:0;top:100%;width:100%;height:clamp(60px,9vw,140px);fill:var(--intro-wave);margin-top:-1px}
.mi-in{display:flex;flex-direction:column;align-items:center;gap:22px;transition:transform .8s cubic-bezier(.76,0,.24,1),opacity .5s ease}
html.mo-intro-out .mi-in{transform:translate3d(0,-60px,0);opacity:0}
.mi-mark{width:clamp(84px,11vw,128px);height:auto;animation:mi-mark 1s cubic-bezier(.16,1,.3,1) both}
@keyframes mi-mark{from{clip-path:circle(0% at 50% 50%);transform:rotate(-40deg) scale(.85)}to{clip-path:circle(75% at 50% 50%);transform:none}}
.mi-mask{display:block;overflow:hidden;padding:2px 0}
.mi-word{display:block;height:clamp(14px,1.6vw,20px);width:auto;animation:mi-up .9s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes mi-up{from{transform:translate3d(0,120%,0)}to{transform:none}}
.mi-line{display:block;width:120px;height:2px;background:color-mix(in srgb,var(--intro-fg) 22%,transparent);overflow:hidden;border-radius:2px}
.mi-line i{display:block;height:100%;background:var(--intro-fg);transform-origin:0 50%;animation:mi-line 1.2s cubic-bezier(.65,0,.35,1) .15s both}
@keyframes mi-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ================= cursor (desktop) =================
   precise dot + trailing ring; brand blue on light areas, white on dark areas and photos */
html.mo-cur-on,html.mo-cur-on *{cursor:none !important}
html.mo-cur-on input,html.mo-cur-on textarea,html.mo-cur-on select,html.mo-cur-on [contenteditable]{cursor:auto !important}
html.mo-cur-on input[type=text],html.mo-cur-on input[type=email],html.mo-cur-on input:not([type]),html.mo-cur-on textarea{cursor:text !important}
.mo-cur{--c:#1F3A93;--cf:#fff;position:fixed;left:0;top:0;z-index:1500;pointer-events:none;opacity:0;transition:opacity .25s ease}
.mo-cur.is-on{opacity:1}
.mo-cur.on-dark{--c:#fff;--cf:#1F3A93}
.mo-cur-dot,.mo-cur-ring{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.mo-cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--c);transition:background-color .3s ease,scale .3s cubic-bezier(.16,1,.3,1)}
.mo-cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid var(--c);opacity:.45;display:grid;place-items:center;
  transition:width .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),margin .45s cubic-bezier(.16,1,.3,1),
  opacity .3s ease,background-color .3s ease,border-color .3s ease,scale .25s cubic-bezier(.16,1,.3,1)}
.mo-cur-label{font:700 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;color:var(--cf);opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.mo-cur.is-link .mo-cur-ring{width:58px;height:58px;margin:-29px 0 0 -29px;opacity:1;background:color-mix(in srgb,var(--c) 14%,transparent)}
.mo-cur.is-link .mo-cur-dot{scale:.6}
.mo-cur.is-card .mo-cur-ring{width:84px;height:84px;margin:-42px 0 0 -42px;opacity:1;background:var(--c);border-color:var(--c)}
.mo-cur.is-card .mo-cur-dot{scale:0}
.mo-cur.is-card .mo-cur-label{opacity:1;transform:none}
.mo-cur.is-down .mo-cur-ring{scale:.82}
.mo-cur.is-text{opacity:0}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.mo-cur{display:none}}

/* ================= custom scrollbar: native one hidden, floating thumb instead ================= */
html{scrollbar-width:none}
html::-webkit-scrollbar{width:0;height:0;display:none}
body{-ms-overflow-style:none}
.mo-sb{position:fixed;top:6px;right:3px;bottom:6px;width:14px;z-index:1400;opacity:0;transition:opacity .4s ease}
.mo-sb.is-on,.mo-sb:hover,.mo-sb.is-drag{opacity:1;transition-duration:.15s}
.mo-sb-thumb{position:absolute;top:0;right:3px;width:5px;border-radius:999px;background:var(--sb-thumb,#1F3A93);opacity:.75;
  min-height:44px;will-change:transform;transition:width .25s cubic-bezier(.16,1,.3,1),right .25s cubic-bezier(.16,1,.3,1),opacity .2s}
.mo-sb:hover .mo-sb-thumb,.mo-sb.is-drag .mo-sb-thumb{width:8px;right:2px;opacity:1}
html.sb-dark .mo-sb-thumb{--sb-thumb:#6F8FF0}
html.mo-sb-dragging,html.mo-sb-dragging *{user-select:none !important;cursor:grabbing !important}
@media (hover:none),(pointer:coarse){.mo-sb{pointer-events:none;width:8px;right:2px}.mo-sb-thumb{width:3px;right:2px;opacity:.6}}
@media print{.mo-sb{display:none}}
/* small inner scroll areas (dropdown lists, phone menu) */
.wsel-list,.oc-body{scrollbar-width:thin;scrollbar-color:rgba(31,58,147,.45) transparent}
.wsel-list::-webkit-scrollbar,.oc-body::-webkit-scrollbar{width:6px}
.wsel-list::-webkit-scrollbar-thumb,.oc-body::-webkit-scrollbar-thumb{background:rgba(31,58,147,.45);border-radius:999px}

/* ================= back to top (with scroll progress ring) ================= */
.mo-top{position:fixed;right:var(--tt-right,22px);bottom:var(--tt-bottom,22px);z-index:70;width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;background:var(--tt-bg,#fff);color:var(--tt-fg,#1F3A93);box-shadow:0 12px 30px -12px rgba(10,20,60,.45);
  opacity:0;visibility:hidden;transform:translate3d(0,14px,0) scale(.9);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s linear .35s,background-color .25s,color .25s}
.mo-top.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s,background-color .25s,color .25s}
.mo-top svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mo-top .ring circle{fill:none;stroke-width:2.5}
.mo-top .ring .bg{stroke:var(--tt-track,rgba(31,58,147,.14))}
.mo-top .ring .fg{stroke:var(--tt-fg,#1F3A93);stroke-linecap:round;stroke-dasharray:150.8;stroke-dashoffset:150.8}
.mo-top .arrow{width:18px;height:18px;position:relative;transition:transform .45s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.mo-top:hover{background:var(--tt-fg,#1F3A93);color:var(--tt-bg,#fff)}.mo-top:hover .arrow{transform:translateY(-3px)}.mo-top:hover .ring .fg{stroke:var(--tt-bg,#fff)}.mo-top:hover .ring .bg{stroke:rgba(255,255,255,.25)}}
.mo-top:active{transform:scale(.94)}
.mo-top:focus-visible{outline:3px solid var(--tt-fg,#1F3A93);outline-offset:3px}
html.sb-dark .mo-top{--tt-bg:#11141B;--tt-fg:#8EA8FF;--tt-track:rgba(255,255,255,.12)}
@media (max-width:720px){.mo-top{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.mo-top,.mo-top.is-on{transition:opacity .2s ease,visibility 0s}}