/* ============================================================
   KAZA DIGITAL — ANIMATION SYSTEM  v1.0
   Linked from every page. No dependencies.
   ============================================================ */

/* ── Base icon transition ── */
svg.kz-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.3s ease;
  will-change: transform;
}

/* ──────────────────────────────────────────────
   1. SCROLL PROGRESS BAR
   ────────────────────────────────────────────── */
#kz-progress {
  position: fixed;
  top: 68px; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #00C46A, #00E87A, #4ade80, #00E87A, #00C46A);
  background-size: 300% auto;
  z-index: 99;
  pointer-events: none;
  animation: kz-bar-shimmer 4s linear infinite;
  transition: width 0.08s linear;
}

@keyframes kz-bar-shimmer {
  0%   { background-position: 300% center; }
  100% { background-position: -300% center; }
}

/* ──────────────────────────────────────────────
   2. ICON HOVER ANIMATIONS
   Only on devices with hover capability
   ────────────────────────────────────────────── */
@media (hover: hover) {

  /* Spin — process / system icons */
  :is(a, .pillar, [class*="card"], .feature-item, .why-card, .quick-link, li):hover .kz-icon-gear {
    transform: rotate(180deg);
  }
  :is(a, .pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-refresh {
    transform: rotate(-180deg);
  }
  :is(a, .pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-repeat {
    transform: rotate(180deg);
  }
  :is(a, .pillar, [class*="card"], .feature-item):hover .kz-icon-shuffle {
    transform: rotate(90deg) scale(1.1);
  }

  /* Float — aspiration / growth icons */
  :is(.pillar, [class*="card"], .feature-item, .why-card, .quick-link, a):hover .kz-icon-rocket {
    transform: translateY(-7px) rotate(-5deg);
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-seedling {
    transform: translateY(-5px) scale(1.1);
  }
  :is(.pillar, [class*="card"], .feature-item):hover .kz-icon-ghost {
    transform: translateY(-5px);
    opacity: 0.7;
  }

  /* Glow — energy / intelligence icons */
  :is(.pillar, [class*="card"], .feature-item, .why-card, .quick-link, a):hover .kz-icon-lightning {
    transform: scale(1.25);
    filter: drop-shadow(0 0 10px rgba(0, 232, 122, 0.95));
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-brain {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(0, 232, 122, 0.7));
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-lightbulb {
    transform: translateY(-4px);
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8));
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-chip {
    transform: scale(1.12);
    filter: drop-shadow(0 0 8px rgba(0, 232, 122, 0.7));
  }

  /* Scale — precision / success icons */
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-crosshair {
    transform: scale(1.2) rotate(45deg);
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-check-circle {
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px rgba(0, 232, 122, 0.7));
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-magnet {
    transform: rotate(-10deg) scale(1.1);
    filter: drop-shadow(0 0 6px rgba(0, 232, 122, 0.6));
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-star {
    transform: scale(1.3) rotate(15deg);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.9));
  }
  :is(.pillar, [class*="card"], .feature-item, a):hover .kz-icon-check {
    transform: scale(1.2);
    filter: drop-shadow(0 0 4px rgba(0, 232, 122, 0.6));
  }
  :is(.pillar, [class*="card"], .feature-item, a):hover .kz-icon-lock {
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(0, 232, 122, 0.5));
  }

  /* Trend — chart icons */
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-trending-up {
    transform: translateY(-5px);
    filter: drop-shadow(0 0 6px rgba(0, 232, 122, 0.6));
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-trending-down {
    transform: translateY(4px);
    filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.5));
  }

  /* Tilt — warning / danger icons */
  :is(.pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-alert-triangle {
    transform: rotate(-12deg) scale(1.15);
    filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.6));
  }
  :is(.pillar, [class*="card"], .feature-item):hover .kz-icon-dice {
    transform: rotate(45deg) scale(1.1);
  }
  :is(.pillar, [class*="card"], .feature-item):hover .kz-icon-barrier {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.4));
  }
  :is(.pillar, [class*="card"], .feature-item):hover .kz-icon-ban {
    transform: rotate(-10deg) scale(1.1);
    filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.5));
  }

  /* Communication icons */
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-handshake {
    transform: scale(1.1);
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-envelope,
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-inbox {
    transform: translateY(-4px) scale(1.05);
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-phone {
    transform: rotate(12deg) scale(1.1);
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-search {
    transform: scale(1.15);
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-dollar-sign,
  :is(.pillar, [class*="card"], .feature-item, .why-card, a):hover .kz-icon-dollar-circle {
    transform: translateY(-3px);
    filter: drop-shadow(0 0 5px rgba(0, 232, 122, 0.5));
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-scissors {
    transform: rotate(-15deg) scale(1.1);
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-hourglass {
    transform: rotate(180deg);
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-key {
    transform: rotate(-20deg) scale(1.1);
  }
  :is(.pillar, [class*="card"], .feature-item, .why-card):hover .kz-icon-wrench {
    transform: rotate(30deg);
  }
}

/* ──────────────────────────────────────────────
   3. BLOG THUMBNAIL — CONTINUOUS FLOAT
   Applied by JS after draw-on completes
   ────────────────────────────────────────────── */
.kz-thumb-float svg.kz-icon {
  animation: kz-float-icon 4s ease-in-out infinite;
}

/* Vary timing per category thumbnail for organic feel */
.post-thumb-gradient-cro .kz-thumb-float svg.kz-icon   { animation-delay: -1.3s; }
.post-thumb-gradient-web .kz-thumb-float svg.kz-icon   { animation-delay: -2.2s; }
.post-thumb-gradient-leads .kz-thumb-float svg.kz-icon { animation-delay: -0.8s; }
.post-thumb-gradient-strategy .kz-thumb-float svg.kz-icon { animation-delay: -3.1s; }

/* Special cases: icons that should spin instead of float */
.kz-thumb-float .kz-icon-gear {
  animation: kz-spin-slow 16s linear infinite !important;
}
.kz-thumb-float .kz-icon-refresh {
  animation: kz-spin-slow-rev 10s linear infinite !important;
}
.kz-thumb-float .kz-icon-repeat {
  animation: kz-spin-slow-rev 12s linear infinite !important;
}
.kz-thumb-float .kz-icon-hourglass {
  animation: kz-tip 5s ease-in-out infinite !important;
}
.kz-thumb-float .kz-icon-dice {
  animation: kz-tumble 6s ease-in-out infinite !important;
}

@keyframes kz-float-icon {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
@keyframes kz-spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes kz-spin-slow-rev {
  to { transform: rotate(-360deg); }
}
@keyframes kz-tip {
  0%, 45%, 100% { transform: rotate(0deg); }
  50%, 95%      { transform: rotate(180deg); }
}
@keyframes kz-tumble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  33%      { transform: rotate(45deg) scale(1.05); }
  66%      { transform: rotate(-15deg) scale(0.95); }
}

/* On card hover: pause float, scale + glow by category */
@media (hover: hover) {
  .post-card:hover .kz-thumb-float svg.kz-icon {
    animation-play-state: paused;
    transform: scale(1.18) !important;
  }
  .post-card:hover .post-thumb-gradient-seo svg.kz-icon {
    filter: drop-shadow(0 0 14px rgba(0, 232, 122, 0.7));
  }
  .post-card:hover .post-thumb-gradient-cro svg.kz-icon {
    filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.7));
  }
  .post-card:hover .post-thumb-gradient-web svg.kz-icon {
    filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.7));
  }
  .post-card:hover .post-thumb-gradient-leads svg.kz-icon {
    filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.7));
  }
  .post-card:hover .post-thumb-gradient-strategy svg.kz-icon {
    filter: drop-shadow(0 0 14px rgba(248, 113, 113, 0.7));
  }
}

/* ──────────────────────────────────────────────
   4. ICON POP-IN ENTRANCE (JS-triggered)
   ────────────────────────────────────────────── */
.kz-icon-pop {
  opacity: 0;
  transform: scale(0.3) rotate(-15deg);
  transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kz-icon-pop.kz-popped {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ──────────────────────────────────────────────
   5. ENHANCED CARD HOVER
   ────────────────────────────────────────────── */
.post-card {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease !important;
}
@media (hover: hover) {
  .post-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(0, 232, 122, 0.3) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 232, 122, 0.2) !important;
  }
  .post-card:hover .read-more {
    color: #00E87A;
    letter-spacing: 0.01em;
  }

  .pillar {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
  }
  .pillar:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 232, 122, 0.25) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 232, 122, 0.12);
  }

  .why-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
  }
  .why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 232, 122, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  .quick-link {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease,
                background 0.3s ease;
  }
  .quick-link:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 232, 122, 0.3) !important;
    background: rgba(0, 232, 122, 0.05) !important;
  }

  .testimonial {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease;
  }
  .testimonial:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 232, 122, 0.2) !important;
  }

  /* Read more arrow slides */
  .read-more {
    display: inline-block;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
  }
}

/* ──────────────────────────────────────────────
   6. BUTTON ENHANCEMENT
   ────────────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  pointer-events: none;
}
@media (hover: hover) {
  .btn-primary:hover::before { opacity: 1; }
}

/* ──────────────────────────────────────────────
   7. NAV LINK UNDERLINE
   ────────────────────────────────────────────── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: #00E87A;
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .nav-links a:hover::after { width: 100%; }
}

/* ──────────────────────────────────────────────
   8. STAGGERED GRID ENTRANCE (JS-triggered)
   Overrides inline styles set by JS
   ────────────────────────────────────────────── */
.kz-stagger-item {
  /* Initial state set inline by JS */
}

/* ──────────────────────────────────────────────
   9. BLOG POST THUMB DRAW-ON SETUP
   (JS dynamically sets stroke-dasharray/offset)
   ────────────────────────────────────────────── */
.post-thumb svg.kz-icon path,
.post-thumb svg.kz-icon polyline,
.post-thumb svg.kz-icon circle,
.post-thumb svg.kz-icon line,
.post-thumb svg.kz-icon polygon,
.post-thumb svg.kz-icon rect {
  /* JS will set stroke-dasharray and stroke-dashoffset */
}

/* ──────────────────────────────────────────────
   10. SECTION HEADER ACCENT LINE REVEAL
   ────────────────────────────────────────────── */
.kz-accent-line {
  display: block;
  width: 40px;
  height: 2px;
  background: #00E87A;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.fade-up.visible .kz-accent-line {
  transform: scaleX(1);
}

/* ──────────────────────────────────────────────
   11. COMPARISON TABLE CHECK/X STAGGER
   ────────────────────────────────────────────── */
.kz-table-row {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.kz-table-row.kz-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ──────────────────────────────────────────────
   12. HERO HEADLINE WORD REVEAL (JS-triggered)
   ────────────────────────────────────────────── */
.kz-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kz-word.kz-word-in {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────────────────────────────────────
   13. FEATURED POST THUMB GLOW
   ────────────────────────────────────────────── */
@media (hover: hover) {
  .featured-img {
    transition: filter 0.4s ease;
  }
  .featured-post:hover .featured-img {
    filter: brightness(1.05);
  }
}