/* =============================================================
   NovaWebDesign — Motion Kit styles (pairs with js/motion-kit.js)
   Everything here is scoped to opt-in attributes or to classes the
   kit adds at runtime, so linking this file changes nothing by itself.
   Only transform / opacity are ever animated.
   ============================================================= */

/* ---------- 1. Scroll reveal: hidden ONLY when JS is confirmed ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mk-js [data-reveal]:not(.mk-in),
  .mk-js [data-reveal-stagger]:not(.mk-in) > :not([aria-hidden="true"]) {
    opacity: 0;
  }
}

@media print {
  .mk-js [data-reveal],
  .mk-js [data-reveal-stagger] > * {
    opacity: 1 !important;
  }
}

/* ---------- 2. Count-up: fixed-width digits = no jitter ---------- */
[data-count-to] {
  font-variant-numeric: tabular-nums;
}

/* ---------- 3. Magnetic (fine pointer only; JS never runs it on touch) ---------- */
.mk-mag-on {
  will-change: transform;
}
.mk-mag-on > span,
.mk-mag-on > svg {
  translate: var(--mk-mx, 0px) var(--mk-my, 0px);
}

/* ---------- 4. Tilt 3D sheen ---------- */
.mk-tilt-on {
  will-change: transform;
}

.mk-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mk-tilt-on > .mk-glare {
  opacity: 1;
}

.mk-glare-dot {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 0.09),
    rgba(var(--nv-acc-rgb), 0.07) 45%,
    rgba(var(--nv-acc2-rgb), 0) 72%
  );
  will-change: transform;
}

/* ---------- 5. Press feedback (touch + mouse) ---------- */
[data-press],
[data-mk-press-all] .btn-primary,
[data-mk-press-all] .btn-secondary {
  -webkit-tap-highlight-color: transparent;
}

.mk-ripple-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.mk-ripple {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 0.42),
    rgba(var(--nv-acc-pale-rgb), 0.16) 55%,
    rgba(255, 255, 255, 0) 72%
  );
}

/* style.css already squishes .btn-primary on :active for touch; the kit does
   its own (composable) scale, so neutralise the old one where the kit is on
   to avoid a double 0.97 × 0.97 squish and the sticky-:hover lift. */
@media (hover: none) and (pointer: coarse) {
  .mk-js .btn-primary[data-press]:active,
  .mk-js .btn-secondary[data-press]:active,
  .mk-js[data-mk-press-all] .btn-primary:active,
  .mk-js[data-mk-press-all] .btn-secondary:active {
    transform: none;
  }
}

/* ---------- 6. Spotlight (desktop) ---------- */
.mk-spot-host {
  isolation: isolate;
}

.mk-spotlight {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mk-spotlight.mk-on {
  opacity: 1;
}

.mk-spotlight-dot {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(var(--nv-acc-rgb), 0.14),
    rgba(var(--nv-acc2-rgb), 0.05) 52%,
    rgba(var(--nv-bg-rgb), 0) 76%
  );
  will-change: transform;
}

/* ---------- 7. Accessibility ---------- */
[data-magnetic]:focus-visible,
[data-press]:focus-visible,
[data-tilt3d]:focus-visible {
  outline: 2px solid var(--accent-secondary, var(--nv-acc2));
  outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
  .mk-glare,
  .mk-spotlight {
    display: none;
  }
}

/* Reduced motion: no tilt sheen / spotlight. The press ripple stays, but the
   JS switches it to an opacity-only flash (no expansion). */
@media (prefers-reduced-motion: reduce) {
  .mk-glare,
  .mk-spotlight {
    display: none;
  }
}