/* IQAI micro-intelligence field.
   A quiet computational lattice that becomes legible around pointer attention. */

.iq-reactive-field{
  --iq-pointer-x:50%;
  --iq-pointer-y:50%;
  position:relative;
  isolation:isolate;
}

.iq-reactive-field::before{
  content:"";
  position:absolute;
  inset:-10px -34px -16px;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(17,17,17,.58) .75px, transparent .95px);
  background-size:10px 10px;
  opacity:0;
  -webkit-mask-image:
    radial-gradient(circle 210px at var(--iq-pointer-x) var(--iq-pointer-y),
      #000 0%,
      rgba(0,0,0,.92) 38%,
      rgba(0,0,0,.38) 68%,
      transparent 100%);
  mask-image:
    radial-gradient(circle 150px at var(--iq-pointer-x) var(--iq-pointer-y),
      #000 0%,
      rgba(0,0,0,.92) 38%,
      rgba(0,0,0,.38) 68%,
      transparent 100%);
  transition:opacity 120ms ease;
}

.iq-reactive-field.iq-pointer-active::before{
  opacity:.86;
}

.iq-reactive-field::after{
  content:"";
  position:absolute;
  inset:0 -34px -22px;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 72%,
      rgba(255,255,255,.88) 92%,
      #fff 100%);
}

.iq-reactive-field > :not(.iq-reactive-canvas){
  position:relative;
  z-index:2;
}

.iq-reactive-canvas{
  position:absolute;
  inset:-10px -34px -18px;
  width:calc(100% + 68px);
  height:calc(100% + 28px);
  z-index:0;
  pointer-events:none;
  display:block;
  opacity:1;
}

@media(max-width:1050px){
  .iq-reactive-field::before,
  .iq-reactive-field::after,
  .iq-reactive-canvas{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .iq-reactive-field::before{display:none!important}
  .iq-reactive-canvas{display:none!important}
}