/* =========================================================
   effects.css (utility-based, opt-in)
   Purpose:
   - Hover / focus / active behaviors
   - Add fx-* classes only where you want effects
   ========================================================= */

/* ---------- Buttons ---------- */
/* Lift + dim */
.kn-btn-pop {
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

.kn-btn-pop:hover {
    filter: brightness(0.80);
    transform: translateY(-3px);
}

.kn-btn-pop:active {
    filter: brightness(0.70);
    transform: translateY(0);
}

/* Dim only */
.kn-btn-dim {
    transition: filter .12s ease;
}

.kn-btn-dim:hover {
    filter: brightness(0.90);
}

.kn-btn-dim:active {
    filter: brightness(0.85);
}

/* ---------- Links ---------- */

.kn-ln-underline {
    transition: text-decoration-color .12s ease, filter .12s ease, box-shadow .15s ease;
}

.kn-ln-underline:hover {
    text-decoration: underline;
}

/* ---------- Cover cards (background-image hover) ---------- */

.kn-zoom {
    transition: transform .2s ease;
}

/* desktop hover */
@media (hover: hover) and (pointer: fine) {
    .kn-zoom:hover {
        transform: scale(1.07);
    }
}

/* mobile tap feedback */
.kn-zoom:active {
    transform: scale(1.05);
}