/**
 * ============================================================================
 * 🌈 K2 Background Gradient Utility Classes
 * ----------------------------------------------------------------------------
 * Provides easy-to-use CSS classes for background gradients.
 * All classes leverage the K2 gradient token variables to ensure consistency.
 *
 * Naming Convention:
 *   .k2-bg-gradient-[type]-[direction]
 *     [type]      → accent | light | dark
 *     [direction] → linear | linear-diagonal | linear-to-bottom | radial
 *
 * Examples:
 *   - .k2-bg-gradient-accent-linear       → Bright/Accent, horizontal linear
 *   - .k2-bg-gradient-light-radial        → Soft Light Surface, radial
 *   - .k2-bg-gradient-dark-linear-diagonal → Soft Dark Surface, diagonal
 *
 * Usage Guidance:
 * ----------------------------------------------------------------------------
 * 1️⃣ Soft Light → use for large light-themed sections
 * 2️⃣ Soft Dark → use for large dark-themed sections
 * 3️⃣ Bright / Accent → small elements, CTA buttons, badges, headings
 * 4️⃣ Developers can override direction if needed but **must use these variables** for colors
 * ============================================================================
 */

/* ------------------------------
   Bright / Accent Gradients (4-color)
------------------------------ */
.k2-bg-gradient-accent-linear {
  background-image: var(--k2-gradient-accent-linear) !important;
  /*background-repeat1: no-repeat;
  background-clip1: padding-box;
  transition1: background-position var(--k2-transition-default);*/
}
.k2-bg-gradient-accent-linear-diagonal {
  background-image: var(--k2-gradient-accent-linear-diagonal);
}
.k2-bg-gradient-accent-linear-to-bottom {
  background-image: var(--k2-gradient-accent-linear-to-bottom);
}
.k2-bg-gradient-accent-radial {
  background-image: var(--k2-gradient-accent-radial);
}

.k2-btn.k2-on-dark.k2-bg-gradient-accent-linear-diagonal:hover{
  background: var(--k2-color-primary) !important;
  color: var(--k2-color-on-primary) !important;
}

/* ------------------------------
   Soft Light Gradients (2-color)
------------------------------ */
.k2-bg-gradient-light-linear {
  background: var(--k2-gradient-light-linear) !important;
}
.k2-bg-gradient-light-linear-diagonal {
  background: var(--k2-gradient-light-linear-diagonal) !important;
}
.k2-bg-gradient-light-linear-to-bottom {
  background: var(--k2-gradient-light-linear-to-bottom) !important;
}
.k2-bg-gradient-light-radial {
  background: var(--k2-gradient-light-radial) !important;
}

/* ------------------------------
   Soft Muted Gradients (2-color)
------------------------------ */
.k2-bg-gradient-muted-linear {
  background: var(--k2-gradient-muted-linear) !important;
}
.k2-bg-gradient-muted-linear-diagonal {
  background: var(--k2-gradient-muted-linear-diagonal) !important;
}
.k2-bg-gradient-muted-linear-to-bottom {
  background: var(--k2-gradient-muted-linear-to-bottom) !important;
}
.k2-bg-gradient-muted-radial {
  background: var(--k2-gradient-muted-radial) !important;
}

/* ------------------------------
   Soft Dark Gradients (2-color)
------------------------------ */
.k2-bg-gradient-dark-linear {
  background: var(--k2-gradient-dark-linear) !important;
}
.k2-bg-gradient-dark-linear-diagonal {
  background: var(--k2-gradient-dark-linear-diagonal) !important;
}
.k2-bg-gradient-dark-linear-to-bottom {
  background: var(--k2-gradient-dark-linear-to-bottom) !important;
}
.k2-bg-gradient-dark-radial {
  background: var(--k2-gradient-dark-radial) !important;
}

/* TEMP*/
.k2-gradient-soft-linear {
  background: var(--k2-gradient-soft-linear) !important;
}

/**
 * ============================================================================
 * 🌈 K2 Text Gradient Utility Classes (Optimized)
 * ----------------------------------------------------------------------------
 * Enables gradient-filled text using predefined K2 gradient tokens.
 * Now uses a shared base class `.k2-text-gradient` for cleaner and lighter CSS.
 * 
 * Core Principle:
 * - `.k2-text-gradient` provides background-clip + transparency behavior.
 * - Specific gradient variants only define the background gradient itself.
 *
 * Naming Convention:
 *   .k2-text-gradient-[type]-[direction]
 *     [type]      → accent | light | dark
 *     [direction] → linear | linear-diagonal | linear-to-bottom | radial
 *
 * Example Combinations:
 *   <h1 class="k2-text-gradient k2-text-gradient-accent-linear">
 *     Vibrant Title
 *   </h1>
 *   <span class="k2-text-gradient k2-text-gradient-light-radial">
 *     Highlighted Label
 *   </span>
 *
 * Usage Guidance:
 * ----------------------------------------------------------------------------
 * 1️⃣ Always include `.k2-text-gradient` as the base class.
 * 2️⃣ Append the gradient variant (e.g. `-accent-linear`) for the desired effect.
 * 3️⃣ Works best on bold or large text (headings, hero titles, buttons).
 * 4️⃣ Apply `display: inline-block;` if gradient clipping doesn’t apply inline.
 * 5️⃣ Use:
 *      - Accent → Bright, vibrant CTAs or headings.
 *      - Light  → For dark backgrounds.
 *      - Dark   → For light backgrounds.
 * ============================================================================
 */

/* ------------------------------
   🔹 Base Gradient Text Behavior
------------------------------ */
.k2-text-gradient {
  -webkit-background-clip: text!important;  /* Chrome, Safari */
  -webkit-text-fill-color: transparent!important;  /* Chrome, Safari */
  background-clip: text!important;  /* fallback */
  color: transparent!important;  /* fallback */
  display: inline-block!important; /* ensures text clipping works reliably */

  /* Fix for iOS Safari dark mode render bug */
  @supports (-webkit-touch-callout: none) {
    -webkit-text-stroke: 0 transparent;
  }
}

    
/* ------------------------------
   🌈 Bright / Accent Gradients (4-color)
------------------------------ */
.k2-text-gradient--accent-linear           { background: var(--k2-gradient-accent-linear); }
.k2-text-gradient--accent-linear-diagonal  { background: var(--k2-gradient-accent-linear-diagonal); }
.k2-text-gradient--accent-linear-to-bottom { background: var(--k2-gradient-accent-linear-to-bottom); }
.k2-text-gradient--accent-radial           { background: var(--k2-gradient-accent-radial); }

/* ------------------------------
   ☀️ Soft Light Gradients (2-color)
------------------------------ */
.k2-text-gradient--light-linear           { background: var(--k2-gradient-light-linear); }
.k2-text-gradient--light-linear-diagonal  { background: var(--k2-gradient-light-linear-diagonal); }
.k2-text-gradient--light-linear-to-bottom { background: var(--k2-gradient-light-linear-to-bottom); }
.k2-text-gradient--light-radial           { background: var(--k2-gradient-light-radial); }

/* ------------------------------
   🌑 Soft Dark Gradients (2-color)
------------------------------ */
.k2-text-gradient--dark-linear           { background: var(--k2-gradient-dark-linear); }
.k2-text-gradient--dark-linear-diagonal  { background: var(--k2-gradient-dark-linear-diagonal); }
.k2-text-gradient--dark-linear-to-bottom { background: var(--k2-gradient-dark-linear-to-bottom); }
.k2-text-gradient--dark-radial           { background: var(--k2-gradient-dark-radial); }





/* ============================================================================
   🌈 K2 Gradient Motion Utilities
   ----------------------------------------------------------------------------
   Adds subtle or dynamic movement to any gradient-based utility.
   Works for both text and background gradients.
   Usage Examples:
     <h2 class="k2-text-gradient k2-text-gradient-accent-linear k2-animate-gradient"></h2>
     <div class="k2-bg-gradient-dark-linear k2-animate-gradient-slow"></div>
   ============================================================================
*/

/* Base motion effect */
.k2-animate-gradient {
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: k2-gradient-fly 6s ease infinite !important;
}

/* Variants by speed */
.k2-animate-gradient-slow {
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: k2-gradient-fly 12s ease infinite;
}

.k2-animate-gradient-fast {
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: k2-gradient-fly 3s ease infinite;
}

/* Optional direction variants */
.k2-animate-gradient-x {
  background-size: 300% 300%;
  background-position: 0% 50%;  
  animation: k2-gradient-fly-x 6s ease infinite;
}

.k2-animate-gradient-y {
  background-size: 300% 300%;
  background-position: 0% 50%;  
  animation: k2-gradient-fly-y 6s ease infinite;
}

.k2-animate-gradient-diagonal {
  background-size: 300% 300%;
  background-position: 0% 50%;  
  animation: k2-gradient-fly-diagonal 8s ease infinite;
}

/* ------------------------------
   🔁 Keyframes
------------------------------ */
@keyframes k2-gradient-fly {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes k2-gradient-fly-x {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

@keyframes k2-gradient-fly-y {
  0%   { background-position: 50% 0%; }
  50%  { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}

@keyframes k2-gradient-fly-diagonal {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}