/* Global premium effects: page transitions, film grain, ambient light, magnetic buttons */

/* ---- smooth page-to-page transitions (cross-document View Transitions) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ---- film grain over everything (very subtle) ---- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---- ambient light: follows the mouse on desktop, a soft glow at the top on phones ---- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42vmax 42vmax at var(--mx, 50%) var(--my, 8%), rgba(255,255,255,.075), transparent 62%);
  transition: background-position .2s;
}

/* ---- magnetic buttons (desktop): JS sets --mgx/--mgy, applied with the independent `translate` property ---- */
.magnetic { translate: var(--mgx, 0) var(--mgy, 0); transition: translate .35s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .magnetic { translate: none; }
}