/* ════════════════════════════════════════════════════════════════
   Onority — Interactive enhancements (subtle & premium)
   Scroll-reactive WebGL sphere · 3D tilt · magnetic buttons · parallax
   All motion is gated behind prefers-reduced-motion below.
   ════════════════════════════════════════════════════════════════ */

/* WebGL sphere canvas sits in the same wrap as the 2D fallback,
   below the orbiting chips (which remain the last children). */
#hero-webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  border-radius: 50%;
}

/* 3D tilt — transition is swapped at runtime for snappy move / smooth reset */
.onority-tilt {
  will-change: transform;
  transform-style: preserve-3d;
}
.onority-tilt.is-tilting {
  transition: transform 0.08s linear !important;
}
.onority-tilt.is-resetting {
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Magnetic buttons */
.onority-magnetic {
  will-change: transform;
}
.onority-magnetic.is-magnetic {
  transition: transform 0.12s ease-out !important;
}
.onority-magnetic.is-resetting {
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Scroll parallax layers */
.parallax-scroll {
  will-change: transform;
}

/* Respect users who prefer reduced motion — neutralise everything new */
@media (prefers-reduced-motion: reduce) {
  .onority-tilt,
  .onority-magnetic,
  .parallax-scroll {
    transform: none !important;
    transition: none !important;
  }
}