/**
 * ============================================================================
 * ⚡ K2 Effects Utilities
 * ----------------------------------------------------------------------------
 * Adds interactive motion, elevation, and lighting effects for UI components.
 * These utilities are purely decorative — they should not alter layout or
 * accessibility structure. Ideal for cards, buttons, tiles, icons, and banners.
 *
 * Core Principles:
 * - Keep transitions subtle and natural (≤ 0.3s)
 * - Avoid excessive transforms that cause layout reflow
 * - Always respect existing border-radius and overflow settings
 *
 * Contents:
 *  1️⃣ Hover Lift Utilities
 *  2️⃣ Sheen & Matte Surface Effects
 * ============================================================================
 */


/* ============================================================================
   🪶 1️⃣ Hover Lift Utilities
   ----------------------------------------------------------------------------
   Apply smooth elevation + brightness effect to create a tactile feel.
   Works well for buttons, cards, and small UI elements.
   ============================================================================
*/

/* Default hover lift (balanced for general use) */
.k2-hover-lift {
  transition:
    transform var(--k2-transition-default, 0.25s ease),
    box-shadow var(--k2-transition-default, 0.25s ease),
    filter var(--k2-transition-default, 0.25s ease);
}

.k2-hover-lift:hover,
.k2-hover-lift:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
  filter: brightness(1.03);
}

/* Subtle version – minimal movement & shadow (best for small buttons) */
.k2-hover-lift-sm {
  transition:
    transform var(--k2-transition-default, 0.25s ease),
    box-shadow var(--k2-transition-default, 0.25s ease);
}

.k2-hover-lift-sm:hover,
.k2-hover-lift-sm:focus-visible {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* Stronger version – more depth & brightness (ideal for cards, hero blocks) */
.k2-hover-lift-lg {
  transition:
    transform var(--k2-transition-smooth, 0.3s ease),
    box-shadow var(--k2-transition-smooth, 0.3s ease),
    filter var(--k2-transition-smooth, 0.3s ease);
}

.k2-hover-lift-lg:hover,
.k2-hover-lift-lg:focus-visible {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
  filter: brightness(1.05);
}


/* ============================================================================
   ✨ 2️⃣ Sheen & Matte Surface Effects
   ----------------------------------------------------------------------------
   Decorative overlays that simulate soft light (sheen) or low-reflection
   texture (matte). Can be applied to any element without breaking layout.
   ============================================================================
*/

/* ✨ Sheen – subtle light sweep for glossy finish */
.k2-sheen {
  position: relative;
  overflow: hidden;
}

.k2-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.05)
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.k2-sheen:hover::after {
  opacity: 0.9;
}

/* ✨ Sheen (Subtle) – lighter version for minimal polish */
.k2-sheen-subtle {
  position: relative;
  overflow: hidden;
}

.k2-sheen-subtle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.03)
  );
  pointer-events: none;
  z-index: 1;
}

/* 🌫️ Matte – low-reflection texture overlay for soft, flat surfaces */
.k2-matte {
  position: relative;
  overflow: hidden;
}

.k2-matte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(0, 0, 0, 0.05)
  );
  pointer-events: none;
  z-index: 1;
}