/* Hallmark · v2.0.0 · custom: the locked Jarvis system · the pointer effects of jarvisdota2.com, shared by every page */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: R, three effects at once; each stays under 3 degrees, 8 px and 12 % amber, and only for a mouse */

/* Only with a real mouse and motion allowed: phones and reduced motion see the plain page. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fx-host { position: relative; }
  /* the logo's light, following the pointer over a card */
  .fx-glow, .fx-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease-out; }
  .fx-glow { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--amber) 12%, transparent), transparent 62%); }
  /* the card's edge catches the light on the pointer's side */
  .fx-edge { padding: 1px;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--ember) 75%, transparent), transparent 70%);
    -webkit-mask: linear-gradient(var(--porcelain) 0 0) content-box, linear-gradient(var(--porcelain) 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(var(--porcelain) 0 0) content-box exclude, linear-gradient(var(--porcelain) 0 0); }
  .fx-host:hover > .fx-glow, .fx-host:hover > .fx-edge { opacity: 1; }
  /* a card leans towards the pointer, then settles */
  .fx-tilt { transform-style: preserve-3d; will-change: transform; }
  /* the hero's light drifts a little with the pointer */
  .light { transition: translate .9s cubic-bezier(.16, 1, .3, 1); }
}