/* ============================================================
   SITE-WIDE SCROLL & INTERACTION ANIMATIONS
   (Excludes hero section)
   ============================================================ */

/* ---- Accessibility: respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .testimonial-changed,
  .faq-arrow,
  .hiw-card,
  .pricing-card,
  .contact-card {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
    transition-delay:    0ms    !important;
  }
}

/* ============================================================
   SCROLL REVEAL — Base hidden state
   (JS adds [data-animate] attribute, CSS hides the element)
   ============================================================ */

[data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 1s;
  will-change: opacity, transform;
}

/* ---- Animation types ---- */
[data-animate="fade-up"]    { transform: translateY(36px); }
[data-animate="fade-left"]  { transform: translateX(-44px); }
[data-animate="fade-right"] { transform: translateX(44px); }
[data-animate="fade-in"]    { /* opacity only */ }
[data-animate="scale-in"]   {
  transform: scale(0.90);
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.34, 1.20, 0.64, 1); /* subtle spring */
}

/* ---- Visible state (added by IntersectionObserver) ---- */
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Stagger delays ---- */
[data-delay="0"]   { transition-delay: 0.00s; }
[data-delay="80"]  { transition-delay: 0.08s; }
[data-delay="120"] { transition-delay: 0.12s; }
[data-delay="160"] { transition-delay: 0.16s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="240"] { transition-delay: 0.24s; }
[data-delay="280"] { transition-delay: 0.28s; }
[data-delay="320"] { transition-delay: 0.32s; }
[data-delay="360"] { transition-delay: 0.36s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="480"] { transition-delay: 0.48s; }

/* ============================================================
   NAVIGATION — drop shadow on scroll
   ============================================================ */

.main-header {
  transition: box-shadow 0.35s ease, background-color 0.35s ease !important;
}

.main-header.nav-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.09) !important;
}

/* ============================================================
   BUTTON SHIMMER on hover
   (Light sweep across solid-colour buttons)
   ============================================================ */

.btn-solid,
.hiw-btn,
.faq-btn-cta,
.sbtns .btn[style*="background-color: #081F3D"],
.beforeContact-btn {
  position: relative;
  overflow: hidden;
}

.btn-solid::after,
.hiw-btn::after,
.faq-btn-cta::after,
.sbtns .btn[style*="background-color: #081F3D"]::after,
.beforeContact-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.btn-solid:hover::after,
.hiw-btn:hover::after,
.faq-btn-cta:hover::after,
.sbtns .btn[style*="background-color: #081F3D"]:hover::after,
.beforeContact-btn:hover::after {
  left: 155%;
}

/* ============================================================
   HOW-IT-WORKS CARDS — lift on hover
   ============================================================ */

.hiw-card {
  transition:
    background   0.35s ease,
    color        0.35s ease,
    transform    0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow   0.35s ease !important;
}

/* Lift effect — !important overrides [data-animate].is-visible { transform:none } */
.hiw-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 22px 44px rgba(8, 31, 61, 0.17) !important;
}

/* ============================================================
   PRICING CARDS — smooth transition (already has scale in PHP CSS,
   just ensure duration is consistent)
   ============================================================ */

.pricing-card {
  transition:
    background-color 0.35s ease,
    color            0.35s ease,
    transform        0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow       0.35s ease,
    border-color     0.35s ease !important;
}

/* Hover transform — inline style comes later in cascade so it already wins,
   but this ensures correct specificity when data-animate is present */
.pricing-card:hover {
  transform: scale(1.08) !important;
}

@media (max-width: 991px) {
  .pricing-card:hover {
    transform: none !important;
  }
}

/* ============================================================
   TESTIMONIAL — fade when text changes
   ============================================================ */

#testimonialText,
#testimonialName,
#testimonialRole {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.testimonial-changed {
  animation: testimFade 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes testimFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ============================================================
   FAQ ITEMS — hover row highlight
   ============================================================ */

.faq-item {
  border-radius: 8px;
  padding: 0 10px;
  margin: 0 -10px;
  transition: background-color 0.22s ease;
}

.faq-item:hover {
  background-color: rgba(22, 41, 86, 0.04);
}

/* ============================================================
   HCS CHECKLIST — stagger slide-in
   (JS adds .checklist-visible when list enters viewport)
   ============================================================ */

.js-animations .hcs .list-unstyled li {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hcs .list-unstyled.checklist-visible li:nth-child(1) {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0.00s;
}

.hcs .list-unstyled.checklist-visible li:nth-child(2) {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0.13s;
}

.hcs .list-unstyled.checklist-visible li:nth-child(3) {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0.26s;
}

/* ============================================================
   STATS SECTION — icon pulse on row hover
   ============================================================ */

.stats-section .si {
  transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stats-section .col-12:hover .si {
  transform: scale(1.14);
}

/* ============================================================
   CONTACT CARDS — lift on hover
   ============================================================ */

.contact-card {
  transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.30s ease;
  border-radius: 12px;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}

/* ============================================================
   FOOTER LINKS — subtle slide on hover
   ============================================================ */

footer.footer-main .footer-links a {
  transition: color 0.22s ease, padding-left 0.22s ease !important;
  display: inline-block;
}

footer.footer-main .footer-links a:hover {
  padding-left: 5px !important;
  opacity: 0.85;
}

/* ============================================================
   NEWA SECTION — subtle card scale on hover
   ============================================================ */

#carouselTrack .custom-slide > div {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease;
}

#carouselTrack .custom-slide > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

/* ============================================================
   BEFORE-FOOTER / CTA BANNER
   ============================================================ */

section.beforeFooter-sec .sec-hd h4 {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ============================================================
   SMOOTH SECTION DIVIDER LINES
   (Animated underline on section eyebrow labels)
   ============================================================ */

.pricing-eyebrow,
.hiw-subtitle,
.faq-section .faqh,
.hcs .section-sub,
.sti-section .col-lg-6 > p:first-child {
  position: relative;
  display: inline-block;
}