/* Run the scroll indicator animation only when visible/active */
.scroll-indicator.active::before {
  animation-play-state: running;
}
/* Base animation styles (on-scroll only) */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Hover effects */
.service-card, .btn {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.btn:hover {
  transform: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Text animation */
.text-gradient {
  background: linear-gradient(135deg, #E87A4D 0%, #005055 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Pulse animation for CTA */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 2s infinite;
  display: inline-block;
}

/* Loading animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Smooth page transitions */
html {
  scroll-behavior: smooth;
}

/* Removed page-load animation to avoid blocking initial render */

/* Scroll indicator */
.scroll-indicator {
  position: fixed;
  top: 500px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid #E87A4D;
  border-radius: 15px;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
}

.scroll-indicator:hover {
  opacity: 1;
}

.scroll-indicator::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #E87A4D;
  border-radius: 50%;
  animation: scrollIndicator 2s infinite;
  animation-play-state: paused; /* paused by default to avoid running on load */
}

@keyframes scrollIndicator {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0; }
}