/* Independent Canvas 2D / CSS treatment inspired by React Bits' restrained particle
   and local spotlight interactions. Structural rules are shared by both themes. */
:root {
  --particle-rgb: 86, 211, 195;
  --effect-fill: rgba(80, 211, 196, .16);
  --effect-edge: rgba(110, 238, 220, .8);
  --effect-shadow: rgba(32, 184, 170, .13);
}
:root[data-theme=light] {
  --particle-rgb: 15, 129, 118;
  --effect-fill: rgba(32, 184, 170, .13);
  --effect-edge: rgba(8, 120, 109, .65);
  --effect-shadow: rgba(27, 116, 107, .1);
}

#particles {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .85;
}

:is(.product-link, .picker-trigger) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --light-x: 50%;
  --light-y: 50%;
  transition: background .18s ease, border-color .18s ease,
    box-shadow .22s ease, transform .18s ease;
}
:is(.product-link, .picker-trigger) > * {
  position: relative;
  z-index: 1;
}
:is(.product-link, .picker-trigger)::before,
:is(.product-link, .picker-trigger)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
}
:is(.product-link, .picker-trigger)::before {
  z-index: 0;
  background: radial-gradient(110px circle at var(--light-x) var(--light-y), var(--effect-fill), transparent 75%);
}
:is(.product-link, .picker-trigger)::after {
  z-index: 2;
  padding: 1px;
  background: radial-gradient(90px circle at var(--light-x) var(--light-y), var(--effect-edge), transparent 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
:is(.product-link, .picker-trigger):focus-visible::before,
:is(.product-link, .picker-trigger):focus-visible::after,
.picker-trigger[aria-expanded=true]::before,
.picker-trigger[aria-expanded=true]::after {
  opacity: 1;
}
:is(.product-link, .picker-trigger):focus-visible::before,
:is(.product-link, .picker-trigger):focus-visible::after {
  background-position: center;
  --light-x: 50%;
  --light-y: 50%;
}
.picker-trigger[aria-expanded=true] {
  box-shadow: 0 3px 18px var(--effect-shadow);
}

@media (hover: hover) and (pointer: fine) {
  :is(.product-link, .picker-trigger):hover::before,
  :is(.product-link, .picker-trigger):hover::after {
    opacity: 1;
  }
  :is(.product-link, .picker-trigger):hover {
    box-shadow: 0 5px 22px var(--effect-shadow);
  }
  .product-link:hover svg {
    transform: translateX(4px);
  }
}
:is(.product-link, .picker-trigger):active {
  box-shadow: 0 1px 8px var(--effect-shadow);
}
:is(.product-link, .picker-trigger):is(:disabled, [aria-disabled=true])::before,
:is(.product-link, .picker-trigger):is(:disabled, [aria-disabled=true])::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(.product-link, .picker-trigger)::before,
  :is(.product-link, .picker-trigger)::after {
    --light-x: 50%;
    --light-y: 50%;
    transition: none;
  }
  .product-link:is(:hover, :active),
  .product-link:hover svg,
  .picker-trigger:active {
    transform: none;
  }
}