/* ==========================================================================
   Nova Commerce — Motion Library
   Usage: add data-nc-animate="fade-up" (or any name below) to any element,
   plus optional data-nc-delay="200" (ms) and data-nc-duration="600" (ms).
   Works on any Elementor element too — just add the same data attributes
   via Elementor's "Custom Attributes" field (Advanced tab, Pro) or via the
   free "Attributes" widget/plugins. Everything is driven by IntersectionObserver
   in assets/js/animations.js — zero jQuery, zero external library.
   ========================================================================== */

[data-nc-animate] {
  opacity: 0;
  will-change: transform, opacity;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: var(--nc-anim-duration, 700ms);
  transition-delay: var(--nc-anim-delay, 0ms);
}

[data-nc-animate].nc-in-view { opacity: 1; transform: none !important; }

[data-nc-animate="fade-up"]    { transform: translateY(40px); }
[data-nc-animate="fade-down"]  { transform: translateY(-40px); }
[data-nc-animate="fade-left"]  { transform: translateX(40px); }
[data-nc-animate="fade-right"] { transform: translateX(-40px); }
[data-nc-animate="zoom-in"]    { transform: scale(0.9); }
[data-nc-animate="zoom-out"]   { transform: scale(1.08); }
[data-nc-animate="flip-up"]    { transform: perspective(800px) rotateX(24deg); transform-origin: bottom; }
[data-nc-animate="fade"]       { transform: none; }

/* Stagger helper: apply to a container, children get incremental delay */
.nc-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.nc-stagger.nc-in-view > * { opacity: 1; transform: none; }
.nc-stagger.nc-in-view > *:nth-child(1) { transition-delay: 0ms; }
.nc-stagger.nc-in-view > *:nth-child(2) { transition-delay: 90ms; }
.nc-stagger.nc-in-view > *:nth-child(3) { transition-delay: 180ms; }
.nc-stagger.nc-in-view > *:nth-child(4) { transition-delay: 270ms; }
.nc-stagger.nc-in-view > *:nth-child(5) { transition-delay: 360ms; }
.nc-stagger.nc-in-view > *:nth-child(6) { transition-delay: 450ms; }
.nc-stagger.nc-in-view > *:nth-child(7) { transition-delay: 540ms; }
.nc-stagger.nc-in-view > *:nth-child(8) { transition-delay: 630ms; }

/* Continuous / decorative motion (no scroll trigger needed) */
@keyframes nc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.nc-float { animation: nc-float 4.5s ease-in-out infinite; }

@keyframes nc-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.nc-pulse { animation: nc-pulse 2.4s ease-in-out infinite; }

@keyframes nc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.nc-marquee-track { display: flex; width: max-content; animation: nc-marquee 24s linear infinite; }

@keyframes nc-spin { to { transform: rotate(360deg); } }
.nc-spin-slow { animation: nc-spin 16s linear infinite; }

/* Page-load reveal (hero elements) */
@keyframes nc-reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nc-reveal-on-load { animation: nc-reveal-up 900ms cubic-bezier(0.22,1,0.36,1) both; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-nc-animate], .nc-stagger > *, .nc-float, .nc-pulse, .nc-marquee-track, .nc-spin-slow, .nc-reveal-on-load {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Elementor sticky/motion effects patch: ensure our IO-based reveals don't
   fight Elementor Pro's own scroll-motion-fx when both are used together */
.elementor-motion-effects-element [data-nc-animate] { transition-delay: 0ms !important; }