/* 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; }

/* ── SMB Cyber Trust Kit: surgical enhancement layer ───────────────────────
   Page-scoped with :has(#kit-fallback), so no other ClearGlass page changes.
   The legacy local .bar is hidden because the global ClearGlass navigation
   already provides the site header. Nothing is deleted from the document. */
body:has(#kit-fallback) > header.bar {
  display: none !important;
}

body:has(#kit-fallback) {
  --smb-neon-cyan: rgba(56, 189, 248, .78);
  --smb-neon-violet: rgba(167, 139, 250, .72);
  --smb-neon-pink: rgba(244, 114, 182, .52);
}

body:has(#kit-fallback) .hero {
  position: relative;
  isolation: isolate;
}

body:has(#kit-fallback) .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2% 8% 8%;
  pointer-events: none;
  border-radius: 48px;
  background:
    radial-gradient(circle at 24% 22%, rgba(56,189,248,.22), transparent 34%),
    radial-gradient(circle at 76% 28%, rgba(167,139,250,.22), transparent 36%),
    radial-gradient(circle at 50% 78%, rgba(244,114,182,.12), transparent 42%);
  filter: blur(28px);
  animation: smb-neon-breathe 7s ease-in-out infinite alternate;
}

body:has(#kit-fallback) .hero .eyebrow {
  box-shadow:
    0 0 0 1px rgba(56,189,248,.12),
    0 0 20px rgba(56,189,248,.28),
    0 0 42px rgba(167,139,250,.16),
    inset 0 0 18px rgba(255,255,255,.16);
}

body:has(#kit-fallback) .hero h1 .g {
  filter: drop-shadow(0 0 10px rgba(56,189,248,.32))
          drop-shadow(0 0 22px rgba(167,139,250,.22));
}

body:has(#kit-fallback) :is(.card, .dcard, .console, .closer) {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 16px 46px rgba(15,23,42,.10),
    0 0 0 1px rgba(255,255,255,.48),
    0 0 28px rgba(56,189,248,.10),
    0 0 48px rgba(167,139,250,.07);
}

body:has(#kit-fallback) :is(.card, .dcard, .console, .closer)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(125deg,
    rgba(56,189,248,.72),
    rgba(255,255,255,.20) 24%,
    rgba(167,139,250,.70) 52%,
    rgba(244,114,182,.42) 74%,
    rgba(52,211,153,.50));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .5;
}

@media (hover: hover) {
  body:has(#kit-fallback) :is(.card, .dcard, .console, .closer):hover {
    box-shadow:
      0 20px 58px rgba(15,23,42,.14),
      0 0 0 1px rgba(255,255,255,.62),
      0 0 34px rgba(56,189,248,.22),
      0 0 64px rgba(167,139,250,.16);
  }
}

body:has(#kit-fallback) .btn.primary,
body:has(#kit-fallback) .cinput button,
body:has(#kit-fallback) .console .av {
  box-shadow:
    0 0 18px rgba(56,189,248,.38),
    0 0 34px rgba(167,139,250,.26),
    0 12px 32px -12px rgba(96,165,250,.68);
}

body:has(#kit-fallback) .cell.sel {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.92),
    0 0 18px currentColor,
    0 0 34px rgba(167,139,250,.30);
}

body:has(#kit-fallback) .clive i,
body:has(#kit-fallback) .eyebrow .dot {
  animation: smb-status-pulse 2.1s ease-in-out infinite;
}

@keyframes smb-neon-breathe {
  from { opacity: .72; transform: scale(.985); }
  to   { opacity: 1; transform: scale(1.025); }
}

@keyframes smb-status-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px currentColor; }
  50% { transform: scale(1.18); box-shadow: 0 0 18px currentColor, 0 0 30px rgba(56,189,248,.35); }
}

/* ── 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; }
  body:has(#kit-fallback) .hero::before,
  body:has(#kit-fallback) .clive i,
  body:has(#kit-fallback) .eyebrow .dot { animation: none !important; }
}