/*
  Chrome Shine Button  (.csb)
  ─────────────────────────────────────────────────
  Reusable button effect — proximity-based border shine that
  follows the cursor around the full rounded border (not edge-by-edge).

  Two variants:
    .csb           — primary: glass-filled panel background + neon-blue accent
    .csb.csb-ghost — ghost: fully transparent, subtle purple accent

  Both get a radial border glow that tracks the mouse via
  --csb-x / --csb-y custom properties (set by JS).

  Requires:
    - script.js CSB tracking block

  Usage:
    <a class="btn csb" href="#">Get Started</a>
    <a class="btn csb csb-ghost" href="#">Learn More</a>

  Works on any element — buttons, links, divs.
  Inherits border-radius from the element.
*/

/* ══════════════════════════════════════════════
   Base — shared by both variants
   ══════════════════════════════════════════════ */
.csb {
  --csb-x: -9999px;
  --csb-y: -9999px;

  position: relative;
  overflow: visible;
  isolation: isolate;
  transition: color 0.6s ease,
              border-color 0.6s ease,
              box-shadow 0.8s ease,
              background 0.6s ease,
              transform 0.2s ease;
}

/* ── Radial border shine — follows cursor ── */
.csb::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: radial-gradient(
    circle 100px at var(--csb-x) var(--csb-y),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.55) 30%,
    rgba(0,0,0,0.2) 55%,
    rgba(0,0,0,0.04) 78%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 100px at var(--csb-x) var(--csb-y),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.55) 30%,
    rgba(0,0,0,0.2) 55%,
    rgba(0,0,0,0.04) 78%,
    transparent 100%
  );
}


/* ══════════════════════════════════════════════
   Primary  (.csb)  — glass panel + neon blue
   ══════════════════════════════════════════════ */
.csb:not(.csb-ghost) {
  /* Flat dark glass — slightly transparent, physical */
  background: rgba(12, 14, 22, 0.7);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);

  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.2);
  transition: color 0.6s ease,
              border-color 0.6s ease,
              box-shadow 0.8s ease,
              transform 0.2s ease;
}

.csb:not(.csb-ghost):hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.12),
    0 0 30px rgba(255, 255, 255, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.csb:not(.csb-ghost):active {
  transform: translateY(0);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.3);
}


/* ══════════════════════════════════════════════
   Ghost  (.csb.csb-ghost)  — transparent + purple
   ══════════════════════════════════════════════ */
.csb.csb-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.csb.csb-ghost:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  transform: translateY(-1px);
}

.csb.csb-ghost:active {
  transform: translateY(0);
  box-shadow: none;
}


/* ══════════════════════════════════════════════
   Highlight  (.csb.csb-highlight)  — inverted primary
   Default: bright bg, dark text/border
   Hover: flips to dark glass with glowing border + text
   ══════════════════════════════════════════════ */
.csb.csb-highlight {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15),
    0 6px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition: color 0.6s ease,
              background 0.6s ease,
              border-color 0.6s ease,
              box-shadow 0.8s ease,
              transform 0.2s ease,
              -webkit-backdrop-filter 0.6s ease,
              backdrop-filter 0.6s ease;
}

.csb.csb-highlight:hover {
  background: rgba(12, 14, 22, 0.7);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.15),
    0 0 35px rgba(255, 255, 255, 0.07),
    0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.csb.csb-highlight:active {
  transform: translateY(0);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.3);
}


/* ══════════════════════════════════════════════
   Fallback
   ══════════════════════════════════════════════ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .csb:not(.csb-ghost) {
    background: rgba(12, 14, 22, 0.92);
  }
}