/* Magic Card / Tilt (MIT), native adaptation. Notices in registry-effects.js.
   Specific sources and adaptations: design/21st-components.md. */
.home-dock .category-card,
.product-card {
  --glass-x: -300px;
  --glass-y: -300px;
  --glass-rx: 0deg;
  --glass-ry: 0deg;
  position: relative;
  isolation: isolate;
  border-color: rgba(255, 255, 255, .94);
}
.home-dock .category-card::before,
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  /* Magic Card's cursor-local radial border, remapped to FLYVECTOR ice blue. */
  background: radial-gradient(260px circle at var(--glass-x) var(--glass-y),
    #ffffff 0%, #a8e1ff 33%, rgba(83, 168, 235, .6) 66%, rgba(255, 255, 255, .38) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.home-dock .category-card::after,
.product-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--glass-x) var(--glass-y),
    rgba(255,255,255,.38), rgba(255,255,255,.08) 42%, transparent 75%);
  opacity: 0;
  transition: opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) and (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  body .home-dock .category-card,
  body .product-card {
    transform: perspective(1000px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry));
    transition: transform .35s ease, box-shadow .3s ease, background .3s ease;
  }
  body .home-dock .category-card.registry-active,
  body .product-card.registry-active {
    transform: perspective(1000px) rotateX(var(--glass-rx)) rotateY(var(--glass-ry)) translateY(-2px);
    transition-duration: .16s, .3s, .3s;
  }
  .home-dock .category-card.registry-active::after,
  .product-card.registry-active::after { opacity: 1; }
}
@media (hover: none), (pointer: coarse), (max-width: 768px), (prefers-reduced-motion: reduce) {
  body .home-dock .category-card,
  body .home-dock .category-card:hover,
  body .product-card,
  body .product-card:hover { transform: none; }
  .home-dock .category-card::after,
  .product-card::after { display: none; }
  .home-dock .category-card::before,
  .product-card::before { background: linear-gradient(135deg, #fff, #bbd9ed 56%, #fff); }
  .home-dock .category-card:active,
  .product-card:focus-within { border-color: #86bde5; }
}

/* The same cursor-local border for account actions and contact surfaces. */
body[data-theme="graphite"] :is([data-glass-interactive],.btn,.contact-primary,.contact-partner-card){position:relative;isolation:isolate;--glass-x:-300px;--glass-y:-300px}
body[data-theme="graphite"] :is([data-glass-interactive],.btn,.contact-primary,.contact-partner-card)::after{content:"";display:block!important;position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;z-index:4;background:radial-gradient(240px circle at var(--glass-x) var(--glass-y),#effffb,#77edda 30%,#77edda20 70%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.4;transition:opacity .25s ease}
body[data-theme="graphite"] :is([data-glass-interactive],.btn,.contact-primary,.contact-partner-card).registry-active::after{opacity:1}
body[data-theme="graphite"] :is([data-glass-interactive],.btn):focus-visible::after{background:var(--accent);opacity:1}
@media(prefers-reduced-motion:reduce),(hover:none){body[data-theme="graphite"] :is([data-glass-interactive],.btn,.contact-primary,.contact-partner-card)::after{background:linear-gradient(135deg,#dfffff66,#77edda22);transition:none}}