/**
 * KUNAI Mouse Driver — Shine / Material Layer
 * Loads LAST. Static layered light only (no JS per-frame loop, matching Titan).
 * Philosophy: one overhead light source. Buttons are "destinations" → top-down
 * sheen. Tactile controls (toggles/sliders) and recessed slots (selects/inputs)
 * get NO sheen — their material is carried by the shadow grammar in kunai-ui.css.
 */

/* =============================================================================
   1. FILLED BUTTON SHEEN — top-down inner light, scaled by hierarchy
   (white → hot red-white → transparent at 85%)
   ============================================================================= */
.btn-primary::before,
.btn-connect::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: var(--z-local);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, calc(var(--btn-shine, 0) * 0.18)) 0%,
        rgba(255, 224, 226, calc(var(--btn-shine, 0) * 0.08)) 40%,
        transparent 85%);
}
/* the gateway button glows a touch stronger */
.btn-connect::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, calc(var(--btn-shine, 0) * 0.22)) 0%,
        rgba(255, 224, 226, calc(var(--btn-shine, 0) * 0.10)) 40%,
        transparent 85%);
}
.btn-connect.connected::before { background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 70%); }

/* =============================================================================
   2. DESTRUCTIVE — warm bloom rising from the bottom edge on hover
   ============================================================================= */
.btn-danger::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: var(--z-local);
    background: radial-gradient(ellipse 80% 80% at 50% 100%, rgba(var(--accent-rgb), 0) 0%, rgba(var(--accent-rgb), 0) 100%);
    transition: background var(--duration-base) ease;
}
.btn-danger:hover::before {
    background: radial-gradient(ellipse 80% 80% at 50% 100%, rgba(var(--accent-rgb), 0.10) 0%, transparent 70%);
}

/* =============================================================================
   3. HERO PEDESTAL — a quiet finish sheen across the platform top
   ============================================================================= */
.pedestal-top::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(120% 90% at 30% 8%, rgba(255, 255, 255, 0.07) 0%, transparent 46%),
        radial-gradient(140% 120% at 70% 100%, rgba(var(--accent-rgb), 0.10) 0%, transparent 50%);
    pointer-events: none;
}

/* =============================================================================
   4. MODE-ORBIT — faint top gloss on the active pill (steel, not crimson)
   ============================================================================= */
.active-tab-underline::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 38%, transparent 72%);
    opacity: 0.8;
    pointer-events: none;
}