/* =====================================================================
   Shuvino 3D layer — ADDITIVE depth & tilt. Purely visual, guarded by
   prefers-reduced-motion + hover capability. Does NOT touch .sh-card
   (already tilted by the FX layer) or change any layout / interaction.
   ===================================================================== */

/* Elements the JS tilts (dashboard KPI cards + anything opt-in) */
.sh-kpi, [data-tilt3d] { transform-style: preserve-3d; will-change: transform; }
.sh-kpi { transition: transform .35s var(--sh-ease, cubic-bezier(.22,1,.36,1)), box-shadow .35s ease; }
.sh-kpi.is-tilt3d { box-shadow: var(--sh-shadow-lg, 0 18px 48px rgba(18,59,147,.16)); }

/* Soft moving highlight for a tilted surface */
.sh-tilt3d__glow {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s ease; z-index: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .38), transparent 60%);
}
.sh-kpi.is-tilt3d .sh-tilt3d__glow { opacity: 1; }
/* keep KPI content above the glow */
.sh-kpi > *:not(.sh-tilt3d__glow) { position: relative; z-index: 1; }

/* CSS-only 3D depth lift (no JS) for category tiles + the ID card */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .sh-cat, .sh-idcard {
        transition: transform .4s var(--sh-ease, cubic-bezier(.22,1,.36,1)), box-shadow .4s ease;
    }
    .sh-cat:hover {
        transform: perspective(700px) rotateX(5deg) translateY(-6px) scale(1.02);
        box-shadow: var(--sh-shadow-lg, 0 18px 48px rgba(18,59,147,.16));
    }
    .sh-idcard:hover {
        transform: perspective(900px) rotateX(2deg) translateY(-3px);
        box-shadow: var(--sh-shadow, 0 8px 24px rgba(18,59,147,.12));
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-kpi, .sh-cat, .sh-idcard { transition: none !important; transform: none !important; }
}