/* =====================================================================
   ECLIPSE BUTTONS (live since 2026-10-04: index.html)
   Naveen sent a React "EclipseButton" (motion/react + Tailwind) and asked
   for the landing's buttons to work like it. The site is plain HTML, so the
   effect is ported to vanilla JS + CSS in eclipse.js / this file:
     - magnetic pull: the button leans toward the cursor (spring, x0.15)
     - eclipse: an inverted-colour circle follows the cursor inside the
       button, growing from nothing on enter and shrinking on leave
     - a faint grain on the inverted layer, slight letter-spacing on hover,
       a small press on click
   Kept from the brand, not from the component: sentence case, weight 600,
   the page's own colours (each variant inverts into navy, blue or white).
   Only on a fine pointer with motion allowed; otherwise the buttons keep
   their usual hover. The script adds .ecl, so nothing here applies without it.
   ===================================================================== */

.btn.ecl{position:relative; isolation:isolate; overflow:hidden;
  transition:scale .25s cubic-bezier(.16,1,.3,1), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease)}
/* the magnetic pull replaces the old lift */
.btn.ecl:hover{transform:none}
.btn.ecl:active{scale:.96}
.btn.ecl:focus-visible{outline:2px solid var(--primary); outline-offset:3px}

/* the base layer keeps the button's resting look on hover; the circle does the change */
.btn-primary.ecl:hover{background:var(--primary)}
.btn-white.ecl:hover{background:var(--surface)}
.btn-on-dark.ecl:hover{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
header:not(.solid) .btn-line.ecl:hover{background:transparent}
header.solid .btn-line.ecl:hover{background:transparent; color:var(--text); border-color:currentColor}

.ecl-base, .ecl-label{display:inline-flex; align-items:center; justify-content:center; gap:9px; pointer-events:none;
  transition:letter-spacing .4s cubic-bezier(.16,1,.3,1), scale .4s cubic-bezier(.16,1,.3,1)}
.ecl-base{position:relative; z-index:1}
.btn.ecl.is-on .ecl-base, .btn.ecl.is-on .ecl-label{letter-spacing:.02em; scale:1.02}

/* the inverted layer: clipped to a circle that follows the cursor */
.ecl-over{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  border-radius:inherit; pointer-events:none; user-select:none; clip-path:circle(0px at 50% 50%);
  background:var(--ecl-bg); color:var(--ecl-fg)}
.ecl-noise{position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ecl-label{position:relative}

/* each variant inverts into a brand colour */
.btn-primary.ecl{--ecl-bg:#fff; --ecl-fg:var(--primary)}
.btn-white.ecl{--ecl-bg:var(--primary-dark); --ecl-fg:#fff}
.btn-on-dark.ecl{--ecl-bg:#fff; --ecl-fg:var(--primary-dark)}
header:not(.solid) .btn-line.ecl{--ecl-bg:#fff; --ecl-fg:var(--primary-dark)}
header.solid .btn-line.ecl{--ecl-bg:var(--primary-dark); --ecl-fg:#fff}