/* ==========================================================================
   AJK Dream House Ltd. — Cursor-tracked gold light

   A pointer-following highlight: gold pools under the cursor and follows it
   across buttons, cards, FAQ rows and the CTA banner. site.js writes the
   cursor position into --mx / --my as percentages; everything else is CSS.

   Why `isolation: isolate` + `z-index: -1` rather than the usual approach of
   positioning every child: a plain absolutely-positioned ::after paints
   ABOVE in-flow content and would tint the text. Giving the host its own
   stacking context and the layer a negative index puts it above the host's
   own background but below its content — no child stacking changes at all,
   which matters because several of these cards already contain absolutely
   positioned children (.quote__mark, .svc__media) that would break if their
   position were overridden.

   Progressive enhancement: without JS, --mx/--my fall back to 50% 50% and
   the layer simply behaves as a centred hover wash. Nothing depends on the
   pointer actually being tracked.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE FALLOFF

   Softness here comes from the shape of the ramp, not from filter: blur().
   That is deliberate on both counts.

   Shape: a gradient with a handful of stops falls off linearly and then
   stops dead. The eye reads two artefacts from that — a ring wherever the
   slope changes abruptly, and a hard terminating edge — which is exactly
   the "circle drawn behind it" look. The stops below trace alpha = (1-s)²
   across eleven steps instead: the curve is continuous and, because its
   slope is also zero where it lands, there is no final edge to catch. It
   reads as genuinely diffuse light rather than a disc.

   Not blur: the gradient is re-resolved on every pointer move, so a
   filter: blur() over it would force a full re-rasterisation plus a blur
   pass every single frame, on layers as large as the CTA banner. It would
   also clip against the host's bounds and leave a dark rim on the cards
   that are not overflow:hidden. A correctly shaped ramp costs nothing and
   cannot clip.

   Per-host knobs — override these, never the gradient itself:
     --glow-rgb  light colour, space-separated channels
     --glow-a    peak alpha at the cursor
     --glow-r    radius of the pool
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  .assure,
  .quote,
  .nap__card,
  .contact__panel,
  .acc__item,
  .cta__banner,
  .svc-cat,
  .estimate__card,
  .project-next {
    position: relative;
    isolation: isolate;
  }

  .assure::after,
  .quote::after,
  .nap__card::after,
  .contact__panel::after,
  .acc__item::after,
  .cta__banner::after,
  .svc-cat::after,
  .estimate__card::after,
  .project-next::after,
  .btn::before,
  .svc .svc__wash {
    --glow-rgb: 230 195 100;
    --glow-a: 0.17;
    --glow-r: 420px;

    background: radial-gradient(
      circle var(--glow-r) at var(--mx, 50%) var(--my, 50%),
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 1))      0%,
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.81))  10%,
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.64))  20%,
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.49))  30%,
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.36))  40%,
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.25))  50%,
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.16))  60%,
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.09))  70%,
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.04))  80%,
      rgb(var(--glow-rgb) / calc(var(--glow-a) * 0.01))  90%,
      rgb(var(--glow-rgb) / 0)                          100%
    );
  }

  /* ---- The layer itself ------------------------------------------------- */
  .assure::after,
  .quote::after,
  .nap__card::after,
  .contact__panel::after,
  .acc__item::after,
  .cta__banner::after,
  .svc-cat::after,
  .estimate__card::after,
  .project-next::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 340ms var(--ease);
  }

  .assure:hover::after,
  .quote:hover::after,
  .nap__card:hover::after,
  .contact__panel:hover::after,
  .acc__item:hover::after,
  .cta__banner:hover::after,
  .svc-cat:hover::after,
  .estimate__card:hover::after,
  .project-next:hover::after {
    opacity: 1;
  }

  /* ---- Per-host sizing --------------------------------------------------- */
  /* Radius is set against the host's own footprint. Too large relative to
     the card and the pool covers it evenly, which reads as a flat tint and
     loses the sense that it is tracking anything. */
  .assure::after,
  .nap__card::after   { --glow-r: 340px; }

  .svc-cat::after,
  .estimate__card::after,
  .project-next::after { --glow-r: 380px; }

  .quote::after,
  .contact__panel::after { --glow-r: 460px; }

  .svc .svc__wash     { --glow-r: 520px; }

  .acc__item::after   { --glow-r: 380px; --glow-a: 0.13; }

  /* Large, already carrying two gold orbs, and on a lighter surface — it
     wants reach without weight. */
  .cta__banner::after { --glow-r: 760px; --glow-a: 0.10; }

  /* ---- Buttons ----------------------------------------------------------- */
  /* ::before, because ::after is already the primary button's sweep sheen.
     .btn is position:relative and overflow:hidden already, so the pool is
     clipped to the pill for free. */
  .btn { isolation: isolate; }

  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms var(--ease);
    /* On the gold fill a white hotspot reads as a specular highlight moving
       across metal. Kept tighter than the cards: a pill is ~60px tall, and a
       card-sized pool would light the whole thing at once. */
    --glow-rgb: 255 255 255;
    --glow-a: 0.26;
    --glow-r: 190px;
  }
  .btn:hover::before { opacity: 1; }

  /* White would just look grey on the dark buttons — those take gold. */
  .btn--ghost::before,
  .btn--gold-outline::before {
    --glow-rgb: 230 195 100;
    --glow-a: 0.30;
    --glow-r: 210px;
  }

  /* ---- Service-area + project tiles ------------------------------------ */
  /* Photo tiles deliberately excluded: they already carry a hover treatment
     (image scale, gold border, overlay shift) and a gold pool over
     photography reads as a colour cast rather than light. */
}

/* Reduced motion: no follow, no fade — the existing static hover states in
   components.css/pages.css still do all the work. */
@media (prefers-reduced-motion: reduce) {
  .assure::after,
  .quote::after,
  .nap__card::after,
  .contact__panel::after,
  .acc__item::after,
  .cta__banner::after,
  .svc-cat::after,
  .estimate__card::after,
  .project-next::after,
  .btn::before {
    display: none;
  }
}