/* ============================================================
   FABLE POLISH — Mathie Electrical
   A visual layer that sits on top of the existing design system.
   Loads last, adds no markup of its own, changes no content.

   Idea: the site behaves like a live circuit.
   Light follows the pointer across panels, and current
   arrives along the top edge when you hover.

   Everything is scoped under html.fable so it can be
   switched off by removing one class.
   ============================================================ */

html.fable{
  /* copper — second accent, kept for "current" only */
  --cu:#D9822B;
  --cu2:#f0a95a;
  /* two-stage elevation so panels read as physical, not flat */
  --lift-rest:0 1px 0 rgba(255,255,255,.05) inset,0 2px 8px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.28);
  --lift-hi:0 1px 0 rgba(255,255,255,.08) inset,0 4px 14px rgba(0,0,0,.4),0 30px 68px rgba(0,0,0,.5);
  --spring:cubic-bezier(.22,1.12,.36,1);
}

/* ---------- 1. Type ------------------------------------------------ */
/* Condensed uppercase sets tighter than the browser default wants. */
html.fable h1{line-height:.95}
html.fable h1,html.fable h2,html.fable h3,
html.fable .sttl,html.fable .cardttl,html.fable .hero-tagline{text-wrap:balance}
html.fable p,html.fable .lede,html.fable .ssub,
html.fable .hero-sub,html.fable .faq-a{text-wrap:pretty}
/* Stats stop jittering while they count up. */
html.fable .hst-n,html.fable .ctr-n,html.fable .wstat-n,
html.fable .pc-pr,html.fable .trust .t b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* Eyebrows sit optically flush when the tracking is hung off the end. */
html.fable .slbl,html.fable .eyebrow,html.fable .work-tag{margin-right:-.32em}

/* ---------- 2. Panels: material + elevation ------------------------ */
html.fable .svc-icon-card,
html.fable .pc,
html.fable .rv,
html.fable .work-card,
html.fable .wcard,
html.fable .grid .cell,
html.fable .steps .s,
html.fable .trust .t,
html.fable .review{
  position:relative;
  box-shadow:var(--lift-rest);
}
html.fable .svc-icon-card:hover,
html.fable .pc:hover,
html.fable .rv:hover,
html.fable .work-card:hover,
html.fable .wcard:hover,
html.fable .grid .cell:hover,
html.fable .steps .s:hover,
html.fable .trust .t:hover{
  box-shadow:var(--lift-hi);
}

/* ---------- 3. Signature: pointer light + current trace ------------ */
.fbl-glow{
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .5s cubic-bezier(.16,1,.3,1);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
             rgba(0,168,158,.20),rgba(0,168,158,.07) 42%,transparent 72%);
}
*:hover > .fbl-glow{opacity:1}

/* the current: arrives left to right along the top edge */
.fbl-glow::after{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cu) 16%,var(--teal2) 48%,var(--teal) 64%,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .75s cubic-bezier(.16,1,.3,1);
}
*:hover > .fbl-glow::after{transform:scaleX(1)}
.fbl-glow.fbl-notrace::after{display:none}

/* light sections need the opposite blend or the panel blows out */
html.fable .white-sec .fbl-glow{
  mix-blend-mode:multiply;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
             rgba(0,133,125,.14),rgba(0,133,125,.05) 42%,transparent 72%);
}
html.fable .white-sec .wcard,
html.fable .white-sec .pc{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 6px rgba(20,24,28,.06),0 14px 34px rgba(20,24,28,.09)}
html.fable .white-sec .wcard:hover,
html.fable .white-sec .pc:hover{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 12px rgba(20,24,28,.09),0 26px 56px rgba(20,24,28,.14)}

/* ---------- 4. Controls -------------------------------------------- */
html.fable .btn,html.fable .ncta,html.fable .call-btn{
  transition:transform .3s var(--spring),box-shadow .35s,border-color .25s,color .25s,background .3s;
  will-change:transform;
}
html.fable .btn:active,html.fable .ncta:active,html.fable .call-btn:active{
  transform:translateY(-1px) scale(.985);
  transition-duration:.09s;
}
/* keyboard users get the same affordance as the mouse */
html.fable a:focus-visible,
html.fable button:focus-visible,
html.fable input:focus-visible,
html.fable select:focus-visible,
html.fable textarea:focus-visible,
html.fable summary:focus-visible,
html.fable [tabindex]:focus-visible{
  outline:2px solid var(--teal2);
  outline-offset:3px;
  border-radius:5px;
}
/* form fields get a soft focus halo rather than a bare border swap */
html.fable input:focus,html.fable select:focus,html.fable textarea:focus{
  box-shadow:0 0 0 3px rgba(0,168,158,.16);
}

/* ---------- 5. Reveal, for the pages that don't already have it ---- */
html.fable.fbl-rev-on .fbl-rev{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
}
html.fable.fbl-rev-on .fbl-rev.in{opacity:1;transform:none}

/* ---------- 6. Reduced motion -------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .fbl-glow{transition:none;background:none}
  .fbl-glow::after{transition:none;transform:scaleX(1)}
  html.fable .btn,html.fable .ncta,html.fable .call-btn{will-change:auto}
  html.fable.fbl-rev-on .fbl-rev{opacity:1;transform:none;transition:none}
}

/* ---------- 7. Touch ------------------------------------------------ */
/* No pointer to track, so the glow just isn't worth its weight. */
@media(hover:none){
  .fbl-glow{display:none}
}