/* ---------------------------------------------------------------------------
   Pointer glow
   ---------------------------------------------------------------------------
   A soft disc that follows the cursor. It is decoration, so it never takes a
   pointer event, never enters the accessibility tree, and never exists at all
   on a device without a fine pointer: the element is created by JavaScript, not
   by the markup, so a phone ships no node and no listener.

   The softness is made of gradient stops rather than filter: blur(). A blurred
   element is re-rasterised on every frame it moves, and on weak hardware that
   is what drops the frame rate. Four stops cost nothing to move.
   --------------------------------------------------------------------------- */

.lux-pointer-glow {
  position: fixed;
  top: 0;
  left: 0;
  /* Above the page content, which lives between 0 and 5, and below every piece
     of chrome: the course enroll bar at 40, the breadcrumb switch at 25, the
     social rail and mobile action bar at 980, the sticky header at 1000, the
     modal at 1200 and core's navigation overlay at 100000. The theme has no
     z-index scale in theme.json to name this with, so the number is written
     here with the range it has to stay inside. */
  z-index: 15;
  width: 420px;
  height: 420px;
  /* Centred on the cursor, so the transform can carry the raw pointer
     coordinates without arithmetic on every frame. */
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent) 38%,
    color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent) 62%,
    transparent 85%
  );
  opacity: 0;
  /* The site's own surface is the dark navy, and `screen` is already how this
     theme lights a dark panel: the slider, the mega menu, the services CTA and
     the contact channels all use it on a decorative pseudo element. `multiply`
     is the exception here, not the default, because on the navy it would turn
     the disc black and erase it. */
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
  transition: opacity 400ms ease;
}

/* Held off until the pointer has actually moved, so the disc never appears
   parked in the middle of the page on a load nobody touched. */
.lux-pointer-glow.is-visible {
  opacity: 0.25;
}

/* Light ground: the disc goes away. Blue over white dirties the panel whichever
   way it is blended, `screen` washing it out and `multiply` leaving a muddy
   cast over the text, so the effect is kept to the dark surfaces it was drawn
   for. The script sets this class by measuring the painted colour under the
   cursor rather than by matching a class name, because this theme paints a
   section as a flat colour, a gradient, a photograph or nothing at all.

   Three classes, so it outranks .is-visible above whatever order they end up
   in. The fade is the same transition, so the disc leaves and returns at the
   section edge instead of blinking. */
.lux-pointer-glow.is-visible.is-on-light {
  opacity: 0;
}

/* Belt and braces. The script already refuses to build the element under this
   setting, so this only matters if the preference is switched on mid-session. */
@media (prefers-reduced-motion: reduce) {
  .lux-pointer-glow {
    display: none;
  }
}

/* The element is only ever created for a fine pointer, but a stylesheet is
   cheaper to reason about when it says so too. */
@media not all and (hover: hover) and (pointer: fine) {
  .lux-pointer-glow {
    display: none;
  }
}