/* ==========================================================================
   Motion System - Premium Animations, Keyframes, Reveals, Stagger, Micro-Interactions
   ========================================================================== */

/* Keyframes */
@keyframes naFadeInUp   { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes naFadeInLeft { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes naFadeInRight{ from { opacity: 0; transform: translate3d(24px, 0, 0); }  to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes naZoomIn     { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes naSlideDown  { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes naBounceIn   { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 75% { transform: scale(0.96); } 100% { transform: scale(1); } }
@keyframes naShake      { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }

@keyframes naRipple     { from { transform: scale(0); opacity: 0.5; } to { transform: scale(2.6); opacity: 0; } }
@keyframes naPulseRing  { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.6); } 70%,100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }
@keyframes naGlowPulse  { 0%,100% { box-shadow: 0 0 0 0 rgba(255,210,63,0.5); } 50% { box-shadow: 0 0 0 14px rgba(255,210,63,0); } }
@keyframes naFloat      { 0%,100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes naSpin       { to { transform: rotate(360deg); } }
@keyframes naMarqueeLeft  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes naMarqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes naBlink      { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Ambient Floating Background Orbs */
@keyframes naFloatOrb1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(30px, -25px, 0) scale(1.08); }
}
@keyframes naFloatOrb2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-25px, 30px, 0) scale(0.94); }
}

/* Light reflection / Sheen wave */
@keyframes naSheen {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

/* Pulsing Status Dot */
@keyframes naPulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

/* Toast Notifications */
@keyframes naToastSlideIn {
  from { opacity: 0; transform: translate3d(100%, 0, 0) scale(0.95); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes naToastSlideOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(100%, 0, 0); }
}

/* Filter Card Pop In */
@keyframes naFilterIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Reveal System (Scoped to html.js so non-JS environments remain visible) */
html.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
  animation-duration: 650ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}

html.js [data-reveal="up"].is-visible    { animation-name: naFadeInUp; }
html.js [data-reveal="left"].is-visible  { animation-name: naFadeInLeft; }
html.js [data-reveal="right"].is-visible { animation-name: naFadeInRight; }
html.js [data-reveal="zoom"].is-visible  { animation-name: naZoomIn; }

/* Explicit Stagger Delays */
[data-reveal-delay="50"]  { animation-delay: 50ms; }
[data-reveal-delay="100"] { animation-delay: 100ms; }
[data-reveal-delay="150"] { animation-delay: 150ms; }
[data-reveal-delay="200"] { animation-delay: 200ms; }
[data-reveal-delay="250"] { animation-delay: 250ms; }
[data-reveal-delay="300"] { animation-delay: 300ms; }
[data-reveal-delay="400"] { animation-delay: 400ms; }
[data-reveal-delay="500"] { animation-delay: 500ms; }

/* Grid Automatic Child Staggers */
.na-card-grid > *:nth-child(1) { animation-delay: 40ms; }
.na-card-grid > *:nth-child(2) { animation-delay: 90ms; }
.na-card-grid > *:nth-child(3) { animation-delay: 140ms; }
.na-card-grid > *:nth-child(4) { animation-delay: 190ms; }
.na-card-grid > *:nth-child(5) { animation-delay: 240ms; }
.na-card-grid > *:nth-child(6) { animation-delay: 290ms; }
.na-card-grid > *:nth-child(7) { animation-delay: 340ms; }
.na-card-grid > *:nth-child(8) { animation-delay: 390ms; }
.na-card-grid > *:nth-child(9) { animation-delay: 440ms; }

/* Category Tiles Child Staggers */
.na-category-grid > *:nth-child(1) { animation-delay: 50ms; }
.na-category-grid > *:nth-child(2) { animation-delay: 120ms; }
.na-category-grid > *:nth-child(3) { animation-delay: 190ms; }
.na-category-grid > *:nth-child(4) { animation-delay: 260ms; }

/* Feature Row Child Staggers */
.na-feature-row > *:nth-child(1) { animation-delay: 60ms; }
.na-feature-row > *:nth-child(2) { animation-delay: 140ms; }
.na-feature-row > *:nth-child(3) { animation-delay: 220ms; }

/* Card Filter Transitions */
.na-card-filtered-out {
  display: none !important;
}

.na-card-filtered-in {
  animation: naFilterIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Ambient Background Orbs */
.na-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(55px);
  z-index: 0;
  opacity: 0.65;
}

.na-hero-orb-1 {
  width: 420px;
  height: 420px;
  top: -80px;
  right: -60px;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.28) 0%, rgba(255, 210, 63, 0) 70%);
  animation: naFloatOrb1 12s ease-in-out infinite;
}

.na-hero-orb-2 {
  width: 500px;
  height: 500px;
  bottom: -100px;
  left: -80px;
  background: radial-gradient(circle, rgba(59, 47, 128, 0.16) 0%, rgba(59, 47, 128, 0) 70%);
  animation: naFloatOrb2 16s ease-in-out infinite;
}

/* Button Sheen Effect on Hover */
.na-btn-primary::after,
.na-btn-sun::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
}

.na-btn-primary:hover::after,
.na-btn-sun:hover::after {
  animation: naSheen 1.2s ease-in-out;
}

/* Background Slow Float for Decorative SVGs */
@keyframes naFloatSlow {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(12px, -18px, 0) rotate(4deg); }
  100% { transform: translate3d(-10px, 14px, 0) rotate(-3deg); }
}

@keyframes naFloatReverse {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-14px, 16px, 0) rotate(-4deg); }
  100% { transform: translate3d(10px, -12px, 0) rotate(3deg); }
}

/* Interactive Card Spotlight Effect */
.na-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--na-dur-base) var(--na-ease-out), box-shadow var(--na-dur-base) var(--na-ease-out), border-color var(--na-dur-base) var(--na-ease-out);
}

.na-card::after {
  content: '';
  position: absolute;
  top: var(--spotlight-y, -150px);
  left: var(--spotlight-x, -150px);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(59, 47, 128, 0.08), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
  z-index: 1;
}

.na-card:hover::after {
  opacity: 1;
}

/* Interactive Tab Ripple and Smooth Hover */
.na-tab-pill {
  position: relative;
  overflow: hidden;
  transition: all var(--na-dur-micro) var(--na-ease-out);
}

.na-tab-pill:hover:not(.is-active) {
  transform: translateY(-2px);
  box-shadow: var(--na-shadow-xs);
}

.na-tab-pill.is-active {
  box-shadow: 0 4px 14px rgba(59, 47, 128, 0.25);
}

/* Interactive Category Tile Tilt & Glow */
.na-category-tile {
  transition: transform var(--na-dur-base) var(--na-ease-out), box-shadow var(--na-dur-base) var(--na-ease-out);
}

.na-category-tile:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 32px rgba(31, 42, 107, 0.18);
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .na-marquee-track {
    animation: none !important;
  }
  .na-float-whatsapp {
    animation: none !important;
  }
  .na-hero-orb {
    display: none !important;
  }
}