/* ===============================
   NexTA - Global Animations
   Smooth, no flicker scroll reveal
   Titles always visible, cards animate
=============================== */

/* ✅ Disable native smooth scroll → Lenis handles it */
html {
  scroll-behavior: auto !important;
}

/* -------------------------------
   Generic Reveal (applies to sections, cards, etc.)
--------------------------------*/
.will-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: none; /* prevent half-baked transitions before reveal */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: 
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------
   Service Cards
--------------------------------*/
.service-card {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.service-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: 
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Premium stagger timing (100ms gap) */
.service-card:nth-child(1).is-visible { transition-delay: 0ms; }
.service-card:nth-child(2).is-visible { transition-delay: 100ms; }
.service-card:nth-child(3).is-visible { transition-delay: 200ms; }
.service-card:nth-child(4).is-visible { transition-delay: 300ms; }
.service-card:nth-child(5).is-visible { transition-delay: 400ms; }
.service-card:nth-child(6).is-visible { transition-delay: 500ms; }

/* -------------------------------
   Section Titles (always visible)
--------------------------------*/
.section-title,
.nx-about-title {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

/* -------------------------------
   Optional Utilities
--------------------------------*/
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.spin-in {
  opacity: 0;
  transform: scale(0.92) rotate(-2deg);
  will-change: opacity, transform;
}
.spin-in.visible {
  opacity: 1;
  transform: scale(1) rotate(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}