/* ClearGlass · advanced interaction layer — gives every button and link a
   modern, tactile, accessible feel. Collision-free by design: it only sets
   properties pages rarely define (transform/filter/box-shadow on hover,
   :focus-visible rings, animated underlines on unclassed links) and never
   touches ::before/::after on buttons (some pages already use those), so it
   layers on top of bespoke styles without breaking them.

   Palette ties to the homepage: blue #60a5fa → violet #a78bfa, indigo glow. */

/* ── smooth, hardware-friendly transitions on all controls ───────────────── */
:where(a, button, [role="button"], .btn, .cta, .button,
       input[type="submit"], input[type="button"], input[type="reset"], summary) {
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.16,1,.3,1),
              box-shadow .25s ease, filter .25s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ── universal accessible focus ring (keyboard) ──────────────────────────── */
:where(a, button, [role="button"], .btn, .cta, .button,
       input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent, #60a5fa) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(124,150,255,.28) !important;
  border-radius: inherit;
}

/* ── buttons: lift + aurora glow on hover, crisp press on active ─────────── */
@media (hover: hover) {
  button:hover, [role="button"]:hover, .btn:hover, .cta:hover, .button:hover,
  input[type="submit"]:hover, input[type="button"]:hover,
  a.btn:hover, a.cta:hover, a.button:hover {
    transform: translateY(-2px);
    filter: saturate(1.12) brightness(1.06);
    box-shadow: 0 8px 24px -8px rgba(96,165,250,.55),
                0 2px 8px -2px rgba(167,139,250,.45),
                0 0 0 1px rgba(124,150,255,.28),
                inset 0 1px 0 rgba(255,255,255,.10);
    will-change: transform;
  }
}
button:active, [role="button"]:active, .btn:active, .cta:active, .button:active,
input[type="submit"]:active, a.btn:active, a.cta:active, a.button:active {
  transform: translateY(0) scale(.972);
  filter: brightness(.97);
}
button:disabled, [role="button"][aria-disabled="true"], .btn:disabled,
.btn[disabled], input:disabled {
  transform: none !important; filter: none !important;
  box-shadow: none !important; cursor: not-allowed; opacity: .55;
}

/* ── plain content links: animated blue→violet underline that grows ──────── */
a:not([class]):not([href^="#cg"]) {
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--accent, #60a5fa), var(--accent-2, #a78bfa));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size .3s cubic-bezier(.16,1,.3,1), color .2s ease, text-shadow .2s ease;
}
@media (hover: hover) {
  a:not([class]):not([href^="#cg"]):hover {
    background-size: 100% 2px;
    color: var(--accent, #60a5fa);
    text-shadow: 0 0 14px rgba(96,165,250,.45);
  }
}
a:not([class]):focus-visible { background-size: 100% 2px; }

/* ── our own nav menu manages its own effects; keep this layer off it ────── */
#cg-nav a, #cg-nav button { box-shadow: none; }
#cg-nav a:hover, #cg-nav button:hover { transform: none; filter: none; box-shadow: none; }

/* ── click ripple (driven by ui.js) ──────────────────────────────────────── */
.cg-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: radial-gradient(circle, rgba(167,139,250,.45), rgba(96,165,250,.18) 60%, transparent 70%);
  animation: cg-ripple .62s cubic-bezier(.22,.61,.36,1) forwards;
  z-index: 0;
  mix-blend-mode: screen;
}
@keyframes cg-ripple {
  to { transform: scale(2.4); opacity: 0; }
}

/* ── pointer spotlight (driven by ui.js) — subtle ambient blue-violet glow ── */
#cg-spotlight {
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: none; opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(280px circle at var(--cg-x, -100px) var(--cg-y, -100px),
              rgba(124,150,255,.08), rgba(167,139,250,.04) 40%, transparent 62%);
}

/* ── magnetic-capable controls get a snappier transform curve ─────────────── */
.cg-magnetic { transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, filter .25s ease !important; }

/* ── respect reduced-motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :where(a, button, [role="button"], .btn, .cta, .button, input, summary) {
    transition: none !important;
  }
  button:hover, [role="button"]:hover, .btn:hover, .cta:hover, .button:hover,
  a.btn:hover, a.cta:hover, a.button:hover { transform: none !important; }
  .cg-ripple { display: none !important; }
  #cg-spotlight { display: none !important; }
}