/**
 * NextSaaS Homepage Animation Styles
 * Complete CSS animations and transitions for Elementor homepage
 * Based on: https://next-sass-html.vercel.app/app-development.html
 * 
 * Usage: Include this CSS file in your Elementor theme
 * 
 * CSS Classes for Elementor (add via CSS Classes field):
 * - ns-animate-section: Animate entire section on scroll
 * - ns-animate-item: Individual element animation
 * - ns-fade-up: Fade in from bottom
 * - ns-fade-left: Fade in from right
 * - ns-fade-right: Fade in from left
 * - ns-scale-in: Scale up animation
 * - ns-stagger-container: Parent for staggered children
 * - ns-stagger-item: Child elements that stagger in
 * - ns-delay-1/2/3/4/5: Stagger delays
 * - ns-hero-float: Simple fade for hero images
 * - ns-logo-marquee: Auto-scrolling logo container
 * 
 * Data attributes (for advanced use):
 * - data-ns-animate: Scroll-triggered fade in
 * - data-ns-stagger-group / data-ns-stagger-item: Staggered animations
 * - data-magnetic: Magnetic button effect
 * - data-parallax: Parallax scroll effect
 * - data-text-reveal: Text reveal animation
 * - data-counter: Number counter animation
 */

/* ===========================================
   CSS VARIABLES / DESIGN TOKENS
   =========================================== */
:root {
  /* Colors */
  --ns-primary: #864FFE;
  --ns-primary-hover: #5a19be;
  --ns-secondary: #1A1A1C;
  --ns-accent: #FFFFFF;
  --ns-accent-60: rgba(255, 255, 255, 0.6);
  --ns-lime: #D4F57A;
  --ns-yellow: #F9EB57;
  --ns-cyan: #83E7EE;
  --ns-green: #C6F56F;
  --ns-background: #F9FAFB;
  --ns-background-dark: #0F0F10;
  --ns-stroke: #E5E7EB;
  --ns-stroke-dark: #27272A;
  
  /* Animation Durations */
  --ns-duration-fast: 0.2s;
  --ns-duration-normal: 0.3s;
  --ns-duration-slow: 0.5s;
  --ns-duration-slower: 0.8s;
  
  /* Easing Functions */
  --ns-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ns-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ns-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ns-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  
  /* Shadows */
  --ns-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ns-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --ns-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --ns-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  
  /* Blur Values */
  --ns-blur-sm: 4px;
  --ns-blur-md: 8px;
  --ns-blur-lg: 20px;
}

/* ===========================================
   BASE ANIMATION STATES
   =========================================== */

/* Initial hidden state for animated elements - DATA ATTRIBUTES */
[data-ns-animate],
[data-ns-stagger-item],
[data-ns-card] {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(20px);
  will-change: opacity, transform, filter;
}

/* Initial hidden state for animated elements - CSS CLASSES (Elementor) */
.ns-animate-section,
.ns-animate-item,
.ns-fade-up,
.ns-fade-left,
.ns-fade-right,
.ns-scale-in,
.ns-stagger-item {
  opacity: 0;
  will-change: opacity, transform, filter;
}

.ns-fade-up {
  transform: translateY(50px);
}

.ns-fade-left {
  transform: translateX(50px);
}

.ns-fade-right {
  transform: translateX(-50px);
}

.ns-scale-in {
  transform: scale(0.8);
}

/* Animated state (JS will add this class) - CSS FALLBACK */
.ns-animated {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
  filter: blur(0) !important;
  transition: opacity var(--ns-duration-slow) var(--ns-ease-out),
              transform var(--ns-duration-slow) var(--ns-ease-out),
              filter var(--ns-duration-slow) var(--ns-ease-out);
}

/* Animated state (JS will add this class) */
[data-ns-animate].ns-animated,
[data-ns-stagger-item].ns-animated,
[data-ns-card].ns-animated {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity var(--ns-duration-slow) var(--ns-ease-out),
              transform var(--ns-duration-slow) var(--ns-ease-out),
              filter var(--ns-duration-slow) var(--ns-ease-out);
}

/* Direction variants */
[data-direction="down"] {
  transform: translateY(-50px);
}

[data-direction="left"] {
  transform: translateX(50px);
}

[data-direction="right"] {
  transform: translateX(-50px);
}

[data-direction="scale"] {
  transform: scale(0.8);
}

/* ===========================================
   KEYFRAME ANIMATIONS
   =========================================== */

/* Fade In Up */
@keyframes nsFadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Fade In Down */
@keyframes nsFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
    filter: blur(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Fade In Left */
@keyframes nsFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
    filter: blur(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* Fade In Right */
@keyframes nsFadeInRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
    filter: blur(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* Scale In */
@keyframes nsScaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(20px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Slide In From Bottom */
@keyframes nsSlideInBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Float Animation */
@keyframes nsFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Pulse Animation */
@keyframes nsPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Pulse Glow */
@keyframes nsPulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(134, 79, 254, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(134, 79, 254, 0.6);
  }
}

/* Shimmer Effect */
@keyframes nsShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Rotate */
@keyframes nsRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Bounce */
@keyframes nsBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Marquee Scroll (Horizontal) */
@keyframes nsMarqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 16px));
  }
}

/* Marquee Scroll Reverse */
@keyframes nsMarqueeScrollReverse {
  0% {
    transform: translateX(calc(-50% - 16px));
  }
  100% {
    transform: translateX(0);
  }
}

/* Marquee Vertical (Top) */
@keyframes nsMarqueeTop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-50% - 16px));
  }
}

/* Marquee Vertical (Bottom) */
@keyframes nsMarqueeBottom {
  0% {
    transform: translateY(calc(-50% - 16px));
  }
  100% {
    transform: translateY(0);
  }
}

/* Gradient Text Animation */
@keyframes nsGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ===========================================
   HEADER ANIMATIONS
   =========================================== */

/* Header Base */
.header-one,
.header-two,
.header-three,
.header-four,
.header-five,
.header-six,
.ns-header-one,
.ns-header-two,
.ns-header-three,
.ns-header-four,
.ns-header-five,
.ns-header-six {
  transition: all 0.5s ease-in-out;
}

/* Header One Scroll State */
.header-one.scroll-header,
.ns-header-one.scroll-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ns-shadow-md);
}

.dark .header-one.scroll-header,
.dark .ns-header-one.scroll-header {
  background: rgba(15, 15, 16, 0.95);
}

/* Header Two Scroll State */
.header-two.header-two-scroll,
.ns-header-two.header-two-scroll {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ns-shadow-md);
}

/* Header Three Scroll State */
.header-three.header-three-scroll,
.ns-header-three.header-three-scroll {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ns-shadow-lg);
}

/* Header Four Scroll State */
.header-four.header-four-scroll,
.ns-header-four.header-four-scroll {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ns-shadow-md);
}

/* Header Five Scroll State */
.header-five.header-five-scroll,
.ns-header-five.header-five-scroll {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ns-shadow-sm);
}

/* Header Six Scroll State */
.header-six.header-six-scroll,
.ns-header-six.header-six-scroll {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ns-shadow-md);
}

/* ===========================================
   ACCORDION ANIMATIONS
   =========================================== */

.accordion-item,
.ns-accordion-item {
  transition: all var(--ns-duration-normal) var(--ns-ease-out);
}

.accordion-content,
.ns-accordion-content {
  overflow: hidden;
  transition: height var(--ns-duration-normal) var(--ns-ease-out),
              opacity var(--ns-duration-normal) var(--ns-ease-out);
}

.accordion-plus-icon span,
.ns-accordion-plus-icon span {
  transition: transform var(--ns-duration-normal) var(--ns-ease-out);
}

.accordion-plus-icon span[data-state="true"],
.ns-accordion-plus-icon span[data-state="true"] {
  transform: rotate(90deg);
}

.accordion-arrow svg,
.ns-accordion-arrow svg {
  transition: transform var(--ns-duration-normal) var(--ns-ease-out);
}

.accordion-arrow svg[data-state="true"],
.ns-accordion-arrow svg[data-state="true"] {
  transform: rotate(180deg);
}

.accordion-arrow[data-state="true"],
.ns-accordion-arrow[data-state="true"] {
  background-color: var(--ns-primary);
  color: white;
}

/* ===========================================
   SIDEBAR / MOBILE MENU ANIMATIONS
   =========================================== */

.sidebar,
.ns-sidebar {
  transform: translateX(-100%);
  transition: transform var(--ns-duration-normal) var(--ns-ease-out);
}

.sidebar.show-sidebar,
.ns-sidebar.show-sidebar {
  transform: translateX(0);
}

.sub-menu,
.ns-sub-menu {
  transition: all var(--ns-duration-fast) var(--ns-ease-out);
}

.sub-menu.active-menu,
.ns-sub-menu.active-menu {
  color: var(--ns-primary);
}

.sub-menu > *:nth-child(2),
.ns-sub-menu > *:nth-child(2) {
  transition: transform var(--ns-duration-fast) var(--ns-ease-out);
}

.sub-menu.active-menu > *:nth-child(2),
.ns-sub-menu.active-menu > *:nth-child(2) {
  transform: rotate(90deg);
}

/* ===========================================
   MODAL ANIMATIONS
   =========================================== */

.modal-overlay,
.ns-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ns-duration-normal) var(--ns-ease-out);
}

.modal-overlay.modal-open,
.ns-modal-overlay.modal-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay.modal-close,
.ns-modal-overlay.modal-close {
  opacity: 0;
  pointer-events: none;
}

.modal-content,
.ns-modal-content {
  transform: translateY(-50px);
  opacity: 0;
  transition: transform var(--ns-duration-normal) var(--ns-ease-out),
              opacity var(--ns-duration-normal) var(--ns-ease-out);
}

.modal-open .modal-content,
.modal-open .ns-modal-content,
.ns-modal-overlay.modal-open .modal-content,
.ns-modal-overlay.modal-open .ns-modal-content {
  transform: translateY(0);
  opacity: 1;
}

/* ===========================================
   MARQUEE / LOGO CAROUSEL ANIMATIONS
   =========================================== */

/* Logo Marquee Container */
.logos-marquee-container,
.ns-logos-marquee-left,
.ns-logos-marquee-right {
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Logo Track */
.ns-logo-track {
  display: flex;
  gap: 32px;
  animation: nsMarqueeScroll 40s linear infinite;
  will-change: transform;
}

.ns-logo-track-reverse {
  animation-name: nsMarqueeScrollReverse;
}

/* Pause on hover */
.logos-marquee-container:hover .ns-logo-track,
.ns-logos-marquee-left:hover .ns-logo-track,
.ns-logos-marquee-right:hover .ns-logo-track {
  animation-play-state: paused;
}

/* Smooth edges gradient mask */
.ns-marquee-smooth-edges {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

/* Card Marquee (slower, with hover pause) */
.cards-marquee-container .ns-logo-track,
.ns-cards-marquee-left .ns-logo-track,
.ns-cards-marquee-right .ns-logo-track {
  animation-duration: 140s;
}

/* Vertical Marquee */
.top-marquee-container,
.ns-marquee-top,
.bottom-marquee-container,
.ns-marquee-bottom {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ns-vertical-track {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ns-marquee-top .ns-vertical-track {
  animation: nsMarqueeTop 40s linear infinite;
}

.ns-marquee-bottom .ns-vertical-track {
  animation: nsMarqueeBottom 40s linear infinite;
}

/* ===========================================
   TAB ANIMATIONS
   =========================================== */

.tab-bar,
.ns-tab-bar {
  position: relative;
}

.tab-bar button,
.ns-tab-bar button {
  position: relative;
  z-index: 1;
  transition: color var(--ns-duration-normal) var(--ns-ease-out),
              background-color var(--ns-duration-normal) var(--ns-ease-out);
}

.active-tab-bar,
.ns-active-tab-bar {
  position: absolute;
  bottom: 0;
  left: var(--_left, 0);
  width: var(--_width, 0);
  height: 2px;
  background-color: var(--ns-primary);
  transition: left var(--ns-duration-normal) var(--ns-ease-out),
              width var(--ns-duration-normal) var(--ns-ease-out);
}

[data-tab-content],
[data-ns-tab-content] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--ns-duration-normal) var(--ns-ease-out),
              transform var(--ns-duration-normal) var(--ns-ease-out);
}

[data-tab-content].active,
[data-ns-tab-content].active,
[data-tab-content]:not(.hidden),
[data-ns-tab-content]:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   FILTER ANIMATIONS
   =========================================== */

[data-filter],
[data-ns-filter] {
  transition: all var(--ns-duration-normal) var(--ns-ease-out);
}

[data-filter].filter-active,
[data-ns-filter].filter-active,
[data-filter].active,
[data-ns-filter].active {
  background-color: var(--ns-primary);
  color: white;
}

[data-filter-item],
[data-ns-filter-item] {
  transition: opacity var(--ns-duration-normal) var(--ns-ease-out),
              transform var(--ns-duration-normal) var(--ns-ease-out),
              filter var(--ns-duration-normal) var(--ns-ease-out);
  will-change: opacity, transform, filter;
}

[data-filter-item][aria-hidden="true"],
[data-ns-filter-item][aria-hidden="true"] {
  opacity: 0;
  transform: scale(0.95);
  filter: blur(4px);
  pointer-events: none;
}

/* ===========================================
   SWIPER / SLIDER ANIMATIONS
   =========================================== */

/* Reviews Swiper */
.reviews-swiper .swiper-slide,
.ns-reviews-swiper .swiper-slide {
  transition: all 0.5s var(--ns-ease-out);
}

/* Single Card Reviews */
.single-card-reviews-swiper .swiper-slide,
.ns-single-card-reviews-swiper .swiper-slide {
  transition: all 0.8s var(--ns-ease-out);
  transform: scale(0.8);
  opacity: 0.3;
  filter: blur(3px);
}

.single-card-reviews-swiper .swiper-slide-active,
.ns-single-card-reviews-swiper .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

/* Reviews Fade In Swiper */
.reviews-fade-in-swiper .swiper-slide,
.ns-reviews-fade-in-swiper .swiper-slide {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out;
  opacity: 0;
  transform: scale(0.6);
  filter: blur(7px);
}

.reviews-fade-in-swiper .swiper-slide-active,
.ns-reviews-fade-in-swiper .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.reviews-fade-in-swiper .swiper-slide .review-text,
.reviews-fade-in-swiper .swiper-slide .review-name,
.reviews-fade-in-swiper .swiper-slide .review-title,
.reviews-fade-in-swiper .swiper-slide .avatar-ring,
.ns-reviews-fade-in-swiper .swiper-slide .review-text,
.ns-reviews-fade-in-swiper .swiper-slide .review-name,
.ns-reviews-fade-in-swiper .swiper-slide .review-title,
.ns-reviews-fade-in-swiper .swiper-slide .avatar-ring {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.reviews-fade-in-swiper .swiper-slide-active .review-text,
.reviews-fade-in-swiper .swiper-slide-active .review-name,
.reviews-fade-in-swiper .swiper-slide-active .review-title,
.reviews-fade-in-swiper .swiper-slide-active .avatar-ring,
.ns-reviews-fade-in-swiper .swiper-slide-active .review-text,
.ns-reviews-fade-in-swiper .swiper-slide-active .review-name,
.ns-reviews-fade-in-swiper .swiper-slide-active .review-title,
.ns-reviews-fade-in-swiper .swiper-slide-active .avatar-ring {
  opacity: 1;
  transform: translateY(0);
}

/* Social Proof Avatar */
.social-proof-avatar,
.ns-social-proof-avatar {
  transition: all var(--ns-duration-normal) var(--ns-ease-out);
  cursor: pointer;
  opacity: 0.5;
  transform: scale(0.9);
}

.social-proof-avatar:hover,
.ns-social-proof-avatar:hover {
  opacity: 0.8;
  transform: scale(0.95);
}

.social-proof-avatar.active,
.ns-social-proof-avatar.active {
  opacity: 1;
  transform: scale(1);
  border-color: var(--ns-primary);
}

/* ===========================================
   HERO ANIMATIONS
   =========================================== */

.hero-perspective,
.ns-hero-perspective {
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

[data-hero-line] {
  height: 0;
  transition: height 0.8s var(--ns-ease-out) 0.7s;
}

[data-hero-line].animated {
  height: 100%;
}

/* ===========================================
   DIVIDER ANIMATIONS
   =========================================== */

.divider,
.footer-divider,
.ns-divider {
  width: 0;
  transition: width 1s var(--ns-ease-out) 0.7s;
}

.divider.expanded,
.footer-divider.expanded,
.ns-divider.expanded {
  width: 100%;
}

/* ===========================================
   PROGRESS LINE ANIMATIONS
   =========================================== */

.progress-line,
.ns-progress-line {
  width: 0;
  transition: width 2s ease-in-out;
}

.progress-line.animated,
.ns-progress-line.animated {
  width: 100%;
}

/* ===========================================
   CARD HOVER EFFECTS
   =========================================== */

.ns-card,
[data-ns-card] {
  transition: all var(--ns-duration-normal) var(--ns-ease-out);
}

.ns-card:hover,
[data-ns-card]:hover {
  transform: translateY(-5px);
  box-shadow: var(--ns-shadow-lg);
}

/* Feature Cards with rotation */
.feature-card-1,
.ns-feature-card-1 {
  transition: transform 0.8s var(--ns-ease-out);
}

.feature-card-2,
.ns-feature-card-2 {
  transition: transform 0.8s var(--ns-ease-out);
}

.feature-card-3,
.ns-feature-card-3 {
  transition: transform 0.8s var(--ns-ease-out);
}

/* ===========================================
   BUTTON HOVER EFFECTS
   =========================================== */

.ns-btn,
[data-ns-btn] {
  position: relative;
  overflow: hidden;
  transition: all var(--ns-duration-normal) var(--ns-ease-out);
}

.ns-btn::before,
[data-ns-btn]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  transition: transform 0.6s var(--ns-ease-out);
}

.ns-btn:hover::before,
[data-ns-btn]:hover::before {
  transform: translateX(100%);
}

.ns-btn:hover,
[data-ns-btn]:hover {
  transform: translateY(-2px);
  box-shadow: var(--ns-shadow-md);
}

.ns-btn:active,
[data-ns-btn]:active {
  transform: translateY(0);
}

/* Primary Button */
.ns-btn-primary {
  background: var(--ns-primary);
  color: white;
}

.ns-btn-primary:hover {
  background: var(--ns-primary-hover);
}

/* ===========================================
   MAGNETIC BUTTON EFFECT
   =========================================== */

[data-magnetic],
[data-ns-magnetic] {
  transition: transform var(--ns-duration-normal) var(--ns-ease-out);
}

/* ===========================================
   TEXT REVEAL ANIMATIONS
   =========================================== */

[data-text-reveal] span,
[data-ns-text-reveal] span {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity var(--ns-duration-slow) var(--ns-ease-out),
              transform var(--ns-duration-slow) var(--ns-ease-out);
}

[data-text-reveal].ns-text-revealed span,
[data-ns-text-reveal].ns-text-revealed span {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   COUNTER ANIMATIONS
   =========================================== */

[data-counter],
[data-ns-counter] {
  font-variant-numeric: tabular-nums;
}

/* ===========================================
   SCROLL PROGRESS BAR
   =========================================== */

.ns-scroll-progress,
[data-scroll-progress] {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--ns-primary), var(--ns-lime));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ===========================================
   GRADIENT TEXT EFFECT
   =========================================== */

.ns-gradient-text {
  background: linear-gradient(
    135deg,
    var(--ns-primary) 0%,
    var(--ns-cyan) 50%,
    var(--ns-lime) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nsGradientShift 3s ease-in-out infinite;
}

/* ===========================================
   LOADING / SHIMMER EFFECTS
   =========================================== */

.ns-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: nsShimmer 1.5s infinite;
}

.ns-skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: nsShimmer 1.5s infinite;
  border-radius: 4px;
}

/* ===========================================
   FLOATING ANIMATIONS
   =========================================== */

.ns-float {
  animation: nsFloat 3s ease-in-out infinite;
}

.ns-float-delayed {
  animation: nsFloat 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

.ns-float-slow {
  animation: nsFloat 4s ease-in-out infinite;
}

/* ===========================================
   PULSE ANIMATIONS
   =========================================== */

.ns-pulse {
  animation: nsPulse 2s ease-in-out infinite;
}

.ns-pulse-glow {
  animation: nsPulseGlow 2s ease-in-out infinite;
}

/* ===========================================
   ROTATION ANIMATIONS
   =========================================== */

.ns-rotate {
  animation: nsRotate 10s linear infinite;
}

.ns-rotate-slow {
  animation: nsRotate 20s linear infinite;
}

.ns-rotate-reverse {
  animation: nsRotate 10s linear infinite reverse;
}

/* ===========================================
   BOUNCE ANIMATIONS
   =========================================== */

.ns-bounce {
  animation: nsBounce 2s ease-in-out infinite;
}

/* ===========================================
   UTILITY ANIMATION CLASSES
   =========================================== */

/* Animation delays */
.ns-delay-100 { animation-delay: 100ms; transition-delay: 100ms; }
.ns-delay-200 { animation-delay: 200ms; transition-delay: 200ms; }
.ns-delay-300 { animation-delay: 300ms; transition-delay: 300ms; }
.ns-delay-400 { animation-delay: 400ms; transition-delay: 400ms; }
.ns-delay-500 { animation-delay: 500ms; transition-delay: 500ms; }
.ns-delay-600 { animation-delay: 600ms; transition-delay: 600ms; }
.ns-delay-700 { animation-delay: 700ms; transition-delay: 700ms; }
.ns-delay-800 { animation-delay: 800ms; transition-delay: 800ms; }
.ns-delay-900 { animation-delay: 900ms; transition-delay: 900ms; }
.ns-delay-1000 { animation-delay: 1000ms; transition-delay: 1000ms; }

/* Animation durations */
.ns-duration-fast { animation-duration: 0.2s; transition-duration: 0.2s; }
.ns-duration-normal { animation-duration: 0.3s; transition-duration: 0.3s; }
.ns-duration-slow { animation-duration: 0.5s; transition-duration: 0.5s; }
.ns-duration-slower { animation-duration: 0.8s; transition-duration: 0.8s; }
.ns-duration-slowest { animation-duration: 1s; transition-duration: 1s; }

/* Animation fill modes */
.ns-fill-forwards { animation-fill-mode: forwards; }
.ns-fill-backwards { animation-fill-mode: backwards; }
.ns-fill-both { animation-fill-mode: both; }

/* Animation iteration */
.ns-infinite { animation-iteration-count: infinite; }
.ns-once { animation-iteration-count: 1; }

/* ===========================================
   REDUCED MOTION SUPPORT
   =========================================== */

@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;
  }

  [data-ns-animate],
  [data-ns-stagger-item],
  [data-ns-card] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .ns-float,
  .ns-float-delayed,
  .ns-float-slow,
  .ns-pulse,
  .ns-pulse-glow,
  .ns-rotate,
  .ns-rotate-slow,
  .ns-rotate-reverse,
  .ns-bounce {
    animation: none;
  }
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  [data-ns-animate],
  [data-ns-stagger-item],
  [data-ns-card] {
    transform: translateY(30px);
    filter: blur(10px);
  }

  .ns-logo-track {
    animation-duration: 50s;
  }

  /* Disable parallax on mobile */
  [data-parallax],
  [data-ns-parallax] {
    transform: none !important;
  }
}

/* ===========================================
   DARK MODE ADJUSTMENTS
   =========================================== */

.dark .header-one.scroll-header,
.dark .header-two.header-two-scroll,
.dark .header-three.header-three-scroll,
.dark .header-four.header-four-scroll,
.dark .header-five.header-five-scroll,
.dark .header-six.header-six-scroll,
.dark .ns-header-one.scroll-header,
.dark .ns-header-two.header-two-scroll,
.dark .ns-header-three.header-three-scroll,
.dark .ns-header-four.header-four-scroll,
.dark .ns-header-five.header-five-scroll,
.dark .ns-header-six.header-six-scroll {
  background: rgba(15, 15, 16, 0.95);
  border-color: var(--ns-stroke-dark);
}

.dark .ns-skeleton {
  background: linear-gradient(
    90deg,
    #2a2a2a 25%,
    #3a3a3a 50%,
    #2a2a2a 75%
  );
  background-size: 200% 100%;
}