/* Skylands Consultants — soft warm load & reveal animations */

:root {
  --sl-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sl-motion-duration: 0.85s;
  --sl-motion-distance: 20px;
  --sl-motion-warm: rgba(158, 125, 74, 0.07);
}

/* Gentle page fade-in with warm wash */
html.sl-motion-init body {
  opacity: 0;
}

html.sl-motion-ready body {
  opacity: 1;
  transition: opacity 0.65s var(--sl-motion-ease);
}

html.sl-motion-init::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    var(--sl-motion-warm) 0%,
    rgba(244, 247, 247, 0.35) 45%,
    transparent 70%
  );
  opacity: 1;
  transition: opacity 1.1s var(--sl-motion-ease);
}

html.sl-motion-ready::before {
  opacity: 0;
}

/* Reveal base */
.sl-reveal {
  opacity: 0;
  transform: translateY(var(--sl-motion-distance));
  will-change: opacity, transform;
}

.sl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--sl-motion-duration) var(--sl-motion-ease),
    transform var(--sl-motion-duration) var(--sl-motion-ease);
  transition-delay: var(--sl-motion-delay, 0ms);
}

/* Hero — slightly longer, softer entrance */
.sl-reveal-hero {
  --sl-motion-distance: 16px;
}

.sl-reveal-hero.is-visible {
  transition-duration: 0.95s;
}

.sl-reveal-hero.sp-hero-badge.is-visible,
.sl-reveal-hero.sl-about-badge.is-visible {
  box-shadow: 0 0 0 0 rgba(158, 125, 74, 0.2);
  animation: sl-warm-pulse 1.4s var(--sl-motion-ease) 0.2s both;
}

@keyframes sl-warm-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(158, 125, 74, 0.18);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(158, 125, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(158, 125, 74, 0);
  }
}

/* Cards lift gently on reveal */
.sl-reveal.sl-service-card.is-visible,
.sl-reveal.sp-card.is-visible,
.sl-reveal.sl-info-card.is-visible,
.sl-reveal.sl-team-card.is-visible,
.sl-reveal.sl-mv-card.is-visible {
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.35, 1);
}

/* Footer — subtle late fade */
.sl-reveal.sl-footer-brand.is-visible,
.sl-reveal.sl-footer-col.is-visible {
  --sl-motion-distance: 14px;
  transition-duration: 0.75s;
}

/* Reduced motion */
html.sl-motion-reduced body,
html.sl-motion-reduced .sl-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

html.sl-motion-reduced::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html.sl-motion-init body {
    opacity: 1;
  }

  html.sl-motion-init::before {
    display: none;
  }

  .sl-reveal {
    opacity: 1;
    transform: none;
  }
}