/* =============================================================================
   Motion layer (driven by js/motion.js). Everything here is decoration:
   turn it off by removing css/motion.css and js/motion.js from index.html.
   1. Scroll progress bar   2. Custom cursor   3. Kinetic headings
   4. Wipe reveals          5. Work card entrance   6. Velocity text bands
   7. Hover details         8. Reduced motion
   ============================================================================= */

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

/* 2. Custom cursor (mouse devices only; JS adds html.has-cursor) */
.cur-dot, .cur-ring {
  position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none;
  border-radius: 50%; opacity: 0; transition: opacity .3s;
}
html.has-cursor.cur-on .cur-dot, html.has-cursor.cur-on .cur-ring { opacity: 1; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cur-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(183, 156, 255, .85);
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-display); letter-spacing: .14em; color: #fff;
  transition: opacity .3s, width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out),
              background-color .35s, border-color .35s;
}
html.cur-link .cur-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background-color: rgba(139, 92, 246, .16); }
.cur-trail {
  position: fixed; left: 0; top: 0; z-index: 2147482999; pointer-events: none;
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c);
  opacity: 0; transition: opacity .3s;
}
html.has-cursor.cur-on .cur-trail { opacity: var(--o); }
html.cur-view .cur-trail { opacity: 0 !important; }
.cur-ripple {
  position: fixed; left: 0; top: 0; z-index: 2147482998; pointer-events: none;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, .95); box-shadow: 0 0 18px rgba(59, 99, 255, .6);
  animation: curRipple .65s cubic-bezier(.2, .85, .2, 1) forwards;
}
@keyframes curRipple {
  from { transform: translate3d(var(--x), var(--y), 0) scale(.6); opacity: 1; }
  to   { transform: translate3d(var(--x), var(--y), 0) scale(4.2); opacity: 0; }
}
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: text !important; }

/* 3. Kinetic headings: letters rise out of a mask, one after another */
.kt-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin-bottom: -.1em; }
.kt-c { display: inline-block; will-change: transform; }
.kt-grad .kt-c {
  background-image: var(--kt-bg); background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.js .kt .kt-c {
  transform: translate3d(0, 115%, 0) rotate(10deg);
  transition: transform 1s cubic-bezier(.2, .85, .2, 1) calc(var(--i) * 32ms);
}
.js .kt.kt-in .kt-c { transform: none; }

/* 4. Wipe reveals (a mask opens over the element) */
.js .wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s cubic-bezier(.7, 0, .2, 1), opacity .8s ease, transform .9s var(--ease-out); }
.js .wipe--x { clip-path: inset(0 100% 0 0); }
.js .wipe.is-in { clip-path: inset(-60px); }

/* 5. Work cards: rise + unmask as they scroll in */
.js .wk-anim { opacity: 0; transform: translate3d(0, 50px, 0) scale(.95); clip-path: inset(25% 0 0 0 round 18px); }
.js .wk-anim.wk-in {
  opacity: 1; transform: none; clip-path: inset(-60px);
  transition: opacity .7s ease, transform 1s cubic-bezier(.2, .85, .2, 1), clip-path 1s cubic-bezier(.7, 0, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.wk__btn { transform-style: preserve-3d; }
.tilt-on { transition: transform .15s ease-out !important; }

/* 6. Velocity text bands: scroll speed pushes and skews the text */
.vband {
  position: relative; overflow: hidden; padding: clamp(18px, 3vw, 40px) 0;
  border-block: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(139, 92, 246, .08), rgba(59, 99, 255, .06));
}
.vband__track {
  display: flex; width: max-content; white-space: nowrap; will-change: transform;
  font: 900 clamp(2.4rem, 7vw, 6.5rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.01em;
}
.vband__track span { padding-right: .35em; }
.vband--outline .vband__track { color: transparent; -webkit-text-stroke: 1.5px rgba(207, 203, 247, .55); }
.vband--fill .vband__track span {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.vband i { font-style: normal; color: #8B5CF6; -webkit-text-stroke: 0; -webkit-text-fill-color: #8B5CF6; padding: 0 .25em; }

/* 7. Hover details */
.svc__item, .js .svc__item.reveal {
  background: linear-gradient(90deg, rgba(139, 92, 246, .14), rgba(59, 99, 255, .05)) no-repeat 0 0 / 0% 100%;
  transition: background-size .7s cubic-bezier(.2, .85, .2, 1), opacity .8s ease, transform .9s var(--ease-out);
}
.svc__item:hover { background-size: 100% 100%; }
.svc__num { transition: transform .6s cubic-bezier(.2, .85, .2, 1); }
.svc__item:hover .svc__num { transform: translateX(14px) skewX(-6deg); }
.pimg img { transition: transform 1.2s cubic-bezier(.2, .85, .2, 1); }
.pimg:hover img { transform: scale(1.07); }
.magnet { transition: translate .5s cubic-bezier(.2, .85, .2, 1); }
.magnet.magnet-on { transition: translate .12s linear; }

/* 8. Reduced motion: no motion layer at all */
@media (prefers-reduced-motion: reduce) {
  .scroll-bar, .cur-dot, .cur-ring { display: none; }
  .js .kt .kt-c, .js .wipe, .js .wk-anim { transform: none !important; clip-path: none !important; opacity: 1 !important; transition: none !important; }
  .vband__track { transform: none !important; }
}