/* ==========================================================================
   habb motion — global polish layer
   Custom cursor · grain overlay · view transitions · magnetic buttons
   Pairs with motion.js. Loaded site-wide except /quiz.
   ========================================================================== */

/* --- View Transitions API ------------------------------------------------- */
@view-transition {
  navigation: auto;
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

::view-transition-old(root) {
  animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both vt-fade-out;
}
::view-transition-new(root) {
  animation: 380ms cubic-bezier(0.4, 0, 0.2, 1) both vt-fade-in;
}

/* --- Magnetic button base ------------------------------------------------- */
.shop-btn,
.btn-primary,
.btn-secondary,
[data-magnetic] {
  will-change: transform;
}

/* --- Grain overlay -------------------------------------------------------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* --- Reduced motion guards ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .grain-overlay { opacity: 0.03; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}