/* ==========================================================================
   NEXIFY STUDIO: barber-tool cursor + service-row response (js/cursor.js)
   The menu itself is unchanged (css/sections.css); this adds the tool that
   follows the pointer, a spotlight that follows it along the row, and a
   livelier arrow button. Mouse and pen only.
   ========================================================================== */

/* ---- the tool ------------------------------------------------------------- */
.tcur {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 0;
  height: 0;
  pointer-events: none;             /* never takes a click */
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tcur.is-on { opacity: 1; }
.tcur__body {
  position: absolute;
  left: 0;
  top: 0;
  scale: 0.6;
  transform-origin: 0 0;            /* everything pivots on the tool's tip */
  transition: scale 0.5s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.tcur.is-on .tcur__body { scale: 1; }
.tcur.is-on.is-btn .tcur__body { scale: 0.86; }      /* aims at the arrow button */
.tcur.is-on.is-press .tcur__body { scale: 0.82; transition-duration: 0.12s; }
.tcur.is-pop .tcur__body { animation: tcur-pop 0.5s cubic-bezier(0.3, 1.4, 0.4, 1); }
@keyframes tcur-pop { 0% { scale: 0.9; } 100% { scale: 1; } }
.tcur__img {
  position: absolute;
  display: block;
  max-width: none;
  opacity: 0;
  scale: 0.72;
  rotate: -22deg;
  transform-origin: var(--tip-x, 0) var(--tip-y, 0);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.65));
  transition: opacity 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.55s cubic-bezier(0.3, 1.4, 0.4, 1), rotate 0.55s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.tcur__img.is-on { opacity: 1; scale: 1; rotate: 0deg; }
.tcur__img:not(.is-on) { rotate: 18deg; }            /* the old tool turns away as the new one turns in */

/* the system cursor stays hidden only while a tool is showing */
.tcur-active .menu__item,
.tcur-active .menu__item * { cursor: none !important; }

/* ---- the row answers the pointer ----------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .menu__item { isolation: isolate; }
  .menu__item::after {              /* a low spotlight that travels with the tool */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(32rem 9rem at var(--mx, 50%) 50%, rgba(255, 250, 245, 0.05), rgba(255, 250, 245, 0) 70%);
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .menu__item.is-tool::after { opacity: 1; }
  .menu__item { position: relative; }
  .menu__name, .menu__desc { transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.4, 1), color 0.3s; }
  .menu__item.is-tool .menu__name { transform: translateX(0.45rem); }
  .menu__item.is-tool .menu__desc { transform: translateX(0.3rem); }
  .menu__index { transition: color 0.3s; }
  .menu__item.is-tool .menu__index { color: #fff; }

  /* the arrow button: fills (as before), the arrow runs through, a press gives */
  .menu__book { overflow: hidden; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), scale 0.5s cubic-bezier(0.3, 1.4, 0.4, 1), box-shadow 0.4s; }
  .menu__item.is-tool .menu__book svg { animation: tcur-arrow 0.6s cubic-bezier(0.6, 0, 0.2, 1); }
  .menu__book:hover { scale: 1.08; box-shadow: 0 0 0 6px rgba(240, 238, 236, 0.07), 0 8px 22px -8px rgba(0, 0, 0, 0.8); }
  .menu__book:active { scale: 0.9; transition-duration: 0.25s, 0.25s, 0.25s, 0.12s, 0.2s; }
}
@keyframes tcur-arrow {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(140%); }
  46%  { transform: translateX(-140%); }
  100% { transform: translateX(0); }
}

/* reduced motion (unless ?motion=full): the tools stand still and change by fading */
.lg-calm .tcur__img, .mo-reduce .tcur__img { rotate: 0deg !important; scale: 1 !important; }
.lg-calm .menu__item.is-tool .menu__book svg, .mo-reduce .menu__item.is-tool .menu__book svg { animation: none; }
.mo-reduce .menu__item.is-tool .menu__name, .mo-reduce .menu__item.is-tool .menu__desc { transform: none; }