/*
	Theme Name: Hello Elementor Child
	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 3.4.7
	Stable tag: 3.4.7
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/
/*
  ============================================================
  KOVA TEAM — Animations & Microinteractions ONLY
  No colors. No backgrounds. No fonts. No sizing.
  Pure motion — safe to drop on any element in Elementor
  without overriding your existing visual styles.
  ============================================================
 
 
/* ── Shared easing ──────────────────────────────────────── */
:root {
  --k-dur:      300ms;
  --k-dur-lg:   600ms;
  --k-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --k-ease-out: cubic-bezier(0, 0, 0.2, 1);
}
 
 
/* ═══════════════════════════════════════════════════════════
   1. BTN-PRIMARY
   Micro: lift + shadow grow on hover, arrow nudges right
   ═══════════════════════════════════════════════════════════ */
.btn-primary {
  transition:
    box-shadow  var(--k-dur) var(--k-ease),
    transform   var(--k-dur) var(--k-ease),
    opacity     var(--k-dur) var(--k-ease);
}
.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.btn-primary:active {
  transform:  translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.btn-primary svg,
.btn-primary .lucide {
  transition: transform var(--k-dur) var(--k-ease);
}
.btn-primary:hover svg,
.btn-primary:hover .lucide {
  transform: translateX(3px);
}
 
 
/* ═══════════════════════════════════════════════════════════
   2. BTN-SECONDARY
   Micro: lift on hover, icon nudges opposite direction
   ═══════════════════════════════════════════════════════════ */
.btn-secondary {
  transition:
    background-color  var(--k-dur) var(--k-ease),
    border-color      var(--k-dur) var(--k-ease),
    transform         var(--k-dur) var(--k-ease);
}
.btn-secondary:hover {
  transform: translateY(-2px);
}
.btn-secondary:active {
  transform: translateY(0);
}
.btn-secondary svg,
.btn-secondary .lucide {
  transition: transform var(--k-dur) var(--k-ease);
}
.btn-secondary:hover svg,
.btn-secondary:hover .lucide {
  transform: translateX(-2px);
}
 
 
/* ═══════════════════════════════════════════════════════════
   3. CARD-HOVER
   Micro: lift + shadow grow, border softens in,
          heading inside shifts color on parent hover
   ═══════════════════════════════════════════════════════════ */
.card-hover {
  transition:
    box-shadow    var(--k-dur) var(--k-ease),
    border-color  var(--k-dur) var(--k-ease),
    transform     var(--k-dur) var(--k-ease);
}
.card-hover:hover {
  transform:  translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10),
              0 8px  16px rgba(0, 0, 0, 0.06);
}
.card-hover h2,
.card-hover h3,
.card-hover .card-title {
  transition: color var(--k-dur) var(--k-ease);
}
.card-hover .card-icon {
  transition: background-color var(--k-dur) var(--k-ease);
}
 
 
/* ═══════════════════════════════════════════════════════════
   4. ICON-SHIFT
   Micro: icon translates diagonally (ArrowUpRight pattern),
          color transitions on hover
   ═══════════════════════════════════════════════════════════ */
.icon-shift {
  transition: color var(--k-dur) var(--k-ease);
}
.icon-shift svg,
.icon-shift .lucide,
.icon-shift i {
  transition:
    transform var(--k-dur) var(--k-ease),
    color     var(--k-dur) var(--k-ease);
}
.icon-shift:hover svg,
.icon-shift:hover .lucide,
.icon-shift:hover i,
.card-hover:hover .icon-shift svg,
.card-hover:hover .icon-shift .lucide {
  transform: translate(4px, -4px);
}
 
 
/* ═══════════════════════════════════════════════════════════
   5. FADE-UP
   Scroll-triggered entrance. Element starts invisible
   and 32px below, animates in when it enters the viewport.
   JS adds .is-visible (see script block below).
   ═══════════════════════════════════════════════════════════ */
.fade-up {
  opacity:    0;
  transform:  translateY(32px);
  transition:
    opacity   0.65s var(--k-ease-out),
    transform 0.65s var(--k-ease-out);
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity:   1;
  transform: translateY(0);
}
 
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}
 
 
/* ═══════════════════════════════════════════════════════════
   6. STAGGER
   Apply to a container. Children cascade in with
   80ms delay increments when parent enters viewport.
   JS adds .is-visible to the container.
   ═══════════════════════════════════════════════════════════ */
.stagger > * {
  opacity:    0;
  transform:  translateY(24px);
  transition:
    opacity   0.55s var(--k-ease-out),
    transform 0.55s var(--k-ease-out);
  will-change: opacity, transform;
}
 
.stagger.is-visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0ms;   }
.stagger.is-visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 80ms;  }
.stagger.is-visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.stagger.is-visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.stagger.is-visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.stagger.is-visible > *:nth-child(7)  { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
.stagger.is-visible > *:nth-child(8)  { opacity: 1; transform: translateY(0); transition-delay: 560ms; }
 
@media (prefers-reduced-motion: reduce) {
  .stagger > *,
  .stagger.is-visible > * {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}
 
 
/* ═══════════════════════════════════════════════════════════
   7. HEADER-SCROLL
   Micro: transitions background, blur, and border
          as JS adds/removes .is-scrolled on scroll.
          Apply header-nav-link to nav links and
          header-logo to your logo for color transitions.
   ═══════════════════════════════════════════════════════════ */
.header-scroll {
  transition:
    background-color  var(--k-dur) var(--k-ease),
    backdrop-filter   var(--k-dur) var(--k-ease),
    border-color      var(--k-dur) var(--k-ease),
    box-shadow        var(--k-dur) var(--k-ease);
}
.header-scroll .header-nav-link {
  transition: color var(--k-dur) var(--k-ease);
}
.header-scroll .header-logo {
  transition: color var(--k-dur) var(--k-ease);
}
 
@media (prefers-reduced-motion: reduce) {
  .header-scroll,
  .header-scroll .header-nav-link,
  .header-scroll .header-logo {
    transition: none;
  }
}
 
 
/* ═══════════════════════════════════════════════════════════
   8. LINK-HOVER
   Micro: color shift + icon nudges diagonally on hover
   ═══════════════════════════════════════════════════════════ */
.link-hover {
  transition: color var(--k-dur) var(--k-ease);
}
.link-hover svg,
.link-hover .lucide {
  transition:
    transform var(--k-dur) var(--k-ease),
    color     var(--k-dur) var(--k-ease);
  flex-shrink: 0;
}
.link-hover:hover svg,
.link-hover:hover .lucide {
  transform: translate(3px, -3px);
}

 
 
/* ═══════════════════════════════════════════════════════════
   BONUS: PROCESS-ROW
   Micro: heading color shifts on row hover
   ═══════════════════════════════════════════════════════════ */
.process-row {
  transition: background-color var(--k-dur) var(--k-ease);
}
.process-row h3,
.process-row .process-title {
  transition: color var(--k-dur) var(--k-ease);
}
 
 
/* ═══════════════════════════════════════════════════════════
   BONUS: PULSE-DOT
   Micro: repeating breathe animation (hero status indicator)
   ═══════════════════════════════════════════════════════════ */
.pulse-dot {
  animation: kova-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes kova-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}
 
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65, 105, 212, 0.35);
}

.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65, 105, 212, 0.25);
}

/*

/* ═══════════════════════════════════════════════════════════
   SPLIT-COLORED HEADINGS FOR H1's
   ═══════════════════════════════════════════════════════════ */

.heading-accent {
  color: #155DFC !important;
  display: block;
}