/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

/* Base animation states - elements start hidden */
[data-animate] {
  opacity: 0;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-property: opacity, transform, filter;
  will-change: opacity, transform;
}

[data-animate="fade-up"] {
  transform: translateY(50px);
  transition-duration: 0.8s;
}

[data-animate="fade-down"] {
  transform: translateY(-40px);
  transition-duration: 0.8s;
}

[data-animate="fade-left"] {
  transform: translateX(-60px);
  transition-duration: 0.85s;
}

[data-animate="fade-right"] {
  transform: translateX(60px);
  transition-duration: 0.85s;
}

[data-animate="fade-in"] {
  transition-duration: 0.9s;
}

[data-animate="scale-up"] {
  transform: scale(0.88);
  transition-duration: 0.9s;
}

[data-animate="zoom-in"] {
  transform: scale(0.75);
  filter: blur(4px);
  transition-duration: 1s;
}

[data-animate="slide-up-soft"] {
  transform: translateY(30px);
  transition-duration: 0.7s;
}

/* Animated (visible) state */
[data-animate].animated {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  filter: none;
}

/* Stagger delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="700"] { transition-delay: 0.7s; }

/* ============================================
   HERO ANIMATIONS (CSS-only, on page load)
   ============================================ */

.hero-sub-cta {
  animation: heroFadeDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.2s;
}

.hero-content h1 {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.4s;
}

.hero-content .subtitle {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.6s;
}

.hero-cta-btn {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.8s;
}

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

@keyframes heroFadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   STAT COUNTER ANIMATION
   ============================================ */

.section-stats {
  overflow: hidden;
}

.section-stats .col-4 h3 {
  display: inline-block;
}

/* ============================================
   PROCESS ITEM HOVER LIFT
   ============================================ */

.process-item {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  padding: 20px;
  border-radius: 4px;
}

.process-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.process-item .step-number {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

.process-item:hover .step-number {
  transform: scale(1.18) rotate(-8deg);
  background-color: #1a1a1a;
}

/* ============================================
   GALLERY ITEM SHIMMER ON HOVER
   ============================================ */

.gallery-item {
  position: relative;
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(140, 199, 58, 0.0) 0%, rgba(140, 199, 58, 0.15) 50%, rgba(140, 199, 58, 0.0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.gallery-item:hover::after {
  opacity: 1;
}

/* ============================================
   TESTIMONIAL CARD HOVER
   ============================================ */

.testimonial-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* ============================================
   SPLIT GRID IMAGE PARALLAX PREP
   ============================================ */

.split-grid-row .img-col {
  overflow: hidden;
}

.split-grid-row .img-col img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-grid-row:hover .img-col img {
  transform: scale(1.03);
}

/* ============================================
   ASSESSMENT LIST ITEM ANIMATION
   ============================================ */

.assessment-list li {
  transition: padding-left 0.3s ease, color 0.3s ease;
  cursor: default;
}

.assessment-list li:hover {
  padding-left: 10px;
  color: #8cc73a;
}

/* ============================================
   BUTTON PULSE EFFECT
   ============================================ */

.btn-green,
.hero-cta-btn,
.quote-btn {
  position: relative;
  overflow: hidden;
}

.btn-green::before,
.hero-cta-btn::before,
.quote-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-green:hover::before,
.hero-cta-btn:hover::before,
.quote-btn:hover::before {
  transform: translateX(200%) skewX(-15deg);
}

/* ============================================
   ABOUT SECTION - SIGNATURE REVEAL
   ============================================ */

.signature-box img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.3s;
}

.signature-box.animated img {
  clip-path: inset(0 0% 0 0);
}

/* ============================================
   SECTION STRIPE LOGO ANIMATION
   ============================================ */

.list-logos li {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.list-logos li:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* ============================================
   HEADER SCROLL EFFECT
   ============================================ */

.site-header {
  transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
  position: fixed;
  background-color: rgba(26, 26, 26, 0.97);
  padding: 0.6rem 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================
   STAT NUMBERS COUNT-UP HIGHLIGHT
   ============================================ */

.section-stats .col-4 h3 {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s ease;
}

.section-stats .col-4[data-animate].animated h3 {
  animation: statPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: inherit;
}

@keyframes statPop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   REDUCE MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  .hero-sub-cta,
  .hero-content h1,
  .hero-content .subtitle,
  .hero-cta-btn {
    animation: none;
    opacity: 1;
  }

  .site-header {
    transition: none;
  }
}