/* ================================================
   LUKIZA — Site-wide animation enhancements
   ================================================ */


/* ── 1. Scroll progress bar ─────────────────────── */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--theme-color);
  z-index: 999999;
  transition: width 0.08s linear;
  border-radius: 0 2px 2px 0;
}


/* ── 2. Card hover lift ─────────────────────────── */

.service-block-one .inner-box,
.service-block-two .inner-box,
.cause-block-one .inner-box,
.news-block-one .inner-box,
.feature-block-one .inner-box,
.chooseus-block-one .inner-box,
.faq-block-one .inner-box {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.service-block-one .inner-box:hover,
.service-block-two .inner-box:hover,
.cause-block-one .inner-box:hover,
.news-block-one .inner-box:hover,
.feature-block-one .inner-box:hover,
.chooseus-block-one .inner-box:hover,
.faq-block-one .inner-box:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.10) !important;
}


/* ── 3. Gallery image transition fix ────────────── */

.gallery-block-one .inner-box {
  overflow: hidden;
}

.gallery-block-one .inner-box .image-box img {
  transition: transform 0.55s ease !important;
}

.gallery-block-one .inner-box:hover .image-box img {
  transform: scale3d(1.07, 1.07, 1) !important;
}

.gallery-block-one .inner-box .content-box .view-btn a {
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}


/* ── 4. Funfact block hover ─────────────────────── */

.funfact-block-one .inner-box {
  transition: transform 0.35s ease !important;
}

.funfact-block-one .inner-box:hover {
  transform: translateY(-6px) scale(1.03) !important;
}




/* ── 6. Nav link animated underline ─────────────── */

.main-menu .navigation > li > a {
  position: relative;
}

.main-menu .navigation > li > a::after {
  content: '';
  position: absolute;
  bottom: 16px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--theme-color);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.main-menu .navigation > li > a:hover::after,
.main-menu .navigation > li.current > a::after {
  width: 100%;
}


/* ── 7. Button click ripple ─────────────────────── */

.theme-btn {
  overflow: hidden;
  position: relative;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: scale(0);
  animation: ripple-expand 0.65s linear;
  pointer-events: none;
}

@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


/* ── 8. Social icon bounce on hover ─────────────── */

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0);    }
  35%       { transform: translateY(-7px); }
  65%       { transform: translateY(-3px); }
}

.social-links li a:hover span,
.social-links li a:hover i {
  display: inline-block;
  animation: icon-bounce 0.4s ease forwards;
}


/* ── 9. Footer link hover ───────────────────────── */

.footer-widget .links-widget ul li a,
.footer-widget a {
  transition: color 0.3s ease, padding-left 0.3s ease !important;
}

.footer-widget .links-widget ul li a:hover {
  padding-left: 5px;
}


/* ── 10. Team image shimmer on hover ────────────── */

.team-block-one .inner-box .image-box {
  position: relative;
  overflow: hidden;
}

.team-block-one .inner-box .image-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 2;
  transition: none;
}

.team-block-one .inner-box:hover .image-box::after {
  transition: transform 0.55s ease;
  transform: translateX(100%);
}


/* ── 11. Clients logo hover ─────────────────────── */

.clients-logo {
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

.clients-logo:hover {
  transform: scale(1.08) !important;
  filter: brightness(1.1);
}


/* ── 12. Float for hero decorative shapes ───────── */

@keyframes float-shape {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-12px); }
}

.banner-style-four .slide-item .content-box .shape {
  animation: float-shape 4.5s ease-in-out infinite;
}


/* ── 13. Typed text cursor blink ────────────────── */

.typed-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: currentColor;
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.8s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}


/* ── 14. Page-title bg parallax container ────────── */

.page-title {
  overflow: hidden;
}

.page-title .bg-layer {
  will-change: transform;
}


/* ── 15. Smooth image scale on about section ─────── */

.about-section .image-column figure img {
  transition: transform 0.6s ease !important;
}

.about-section .image-column figure:hover img {
  transform: scale(1.04) !important;
}