/**
 * NVB Animation Library
 * Premium animations for sections and elements
 * Version: 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties for Animation Control
   ========================================================================== */
:root {
	/* Animation Timing */
	--nvb-anim-duration-fast: .3s;
	--nvb-anim-duration: .6s;
	--nvb-anim-duration-slow: .9s;
	--nvb-anim-duration-slower: 1.2s;
	/* Animation Easing */
	--nvb-ease-out: cubic-bezier(.25, .46, .45, .94);
	--nvb-ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
	--nvb-ease-smooth: cubic-bezier(.4, 0, .2, 1);
	--nvb-ease-spring: cubic-bezier(.175, .885, .32, 1.275);
	/* Animation Delays for Stagger */
	--nvb-stagger-1: 0s;
	--nvb-stagger-2: .1s;
	--nvb-stagger-3: .2s;
	--nvb-stagger-4: .3s;
	--nvb-stagger-5: .4s;
	--nvb-stagger-6: .5s;
}

/* ==========================================================================
   Base Animation States (Hidden until triggered)
   ========================================================================== */

/* Elements waiting to animate */
[data-nvb-animate] {
	opacity: 0;
	will-change: transform, opacity;
}

/* Animated state */
[data-nvb-animate].nvb-animated {
	opacity: 1;
}

/* Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	[data-nvb-animate] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   FADE ANIMATIONS
   ========================================================================== */

/* Fade In */
[data-nvb-animate="fade-in"] {
	opacity: 0;
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-smooth);
}

[data-nvb-animate="fade-in"].nvb-animated {
	opacity: 1;
}

/* Fade Up */
[data-nvb-animate="fade-up"] {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="fade-up"].nvb-animated {
	opacity: 1;
	transform: translateY(0);
}

/* Fade Up Small (subtle) */
[data-nvb-animate="fade-up-sm"] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--nvb-anim-duration-fast) var(--nvb-ease-out), transform var(--nvb-anim-duration-fast) var(--nvb-ease-out);
}

[data-nvb-animate="fade-up-sm"].nvb-animated {
	opacity: 1;
	transform: translateY(0);
}

/* Fade Down */
[data-nvb-animate="fade-down"] {
	opacity: 0;
	transform: translateY(-40px);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="fade-down"].nvb-animated {
	opacity: 1;
	transform: translateY(0);
}

/* Fade Left */
[data-nvb-animate="fade-left"] {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="fade-left"].nvb-animated {
	opacity: 1;
	transform: translateX(0);
}

/* Fade Right */
[data-nvb-animate="fade-right"] {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="fade-right"].nvb-animated {
	opacity: 1;
	transform: translateX(0);
}

/* ==========================================================================
   SCALE ANIMATIONS
   ========================================================================== */

/* Scale Up */
[data-nvb-animate="scale-up"] {
	opacity: 0;
	transform: scale(.9);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out-back);
}

[data-nvb-animate="scale-up"].nvb-animated {
	opacity: 1;
	transform: scale(1);
}

/* Scale In (from smaller) */
[data-nvb-animate="scale-in"] {
	opacity: 0;
	transform: scale(.5);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-spring);
}

[data-nvb-animate="scale-in"].nvb-animated {
	opacity: 1;
	transform: scale(1);
}

/* Zoom In */
[data-nvb-animate="zoom-in"] {
	opacity: 0;
	transform: scale(1.1);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="zoom-in"].nvb-animated {
	opacity: 1;
	transform: scale(1);
}

/* ==========================================================================
   SLIDE ANIMATIONS
   ========================================================================== */

/* Slide Up */
[data-nvb-animate="slide-up"] {
	opacity: 0;
	transform: translateY(100%);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="slide-up"].nvb-animated {
	opacity: 1;
	transform: translateY(0);
}

/* Slide In Left */
[data-nvb-animate="slide-left"] {
	opacity: 0;
	transform: translateX(100px);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="slide-left"].nvb-animated {
	opacity: 1;
	transform: translateX(0);
}

/* Slide In Right */
[data-nvb-animate="slide-right"] {
	opacity: 0;
	transform: translateX(-100px);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="slide-right"].nvb-animated {
	opacity: 1;
	transform: translateX(0);
}

/* ==========================================================================
   SPECIAL ANIMATIONS
   ========================================================================== */

/* Blur In */
[data-nvb-animate="blur-in"] {
	opacity: 0;
	filter: blur(10px);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), filter var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="blur-in"].nvb-animated {
	opacity: 1;
	filter: blur(0);
}

/* Flip Up */
[data-nvb-animate="flip-up"] {
	opacity: 0;
	transform: perspective(1000px) rotateX(-15deg) translateY(30px);
	transition: opacity var(--nvb-anim-duration) var(--nvb-ease-out), transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

[data-nvb-animate="flip-up"].nvb-animated {
	opacity: 1;
	transform: perspective(1000px) rotateX(0) translateY(0);
}

/* Pop */
[data-nvb-animate="pop"] {
	opacity: 0;
	transform: scale(.8);
	transition: opacity var(--nvb-anim-duration-fast) var(--nvb-ease-out), transform var(--nvb-anim-duration-fast) var(--nvb-ease-out-back);
}

[data-nvb-animate="pop"].nvb-animated {
	opacity: 1;
	transform: scale(1);
}

/* ==========================================================================
   STAGGER DELAY CLASSES
   ========================================================================== */
[data-nvb-delay="1"] {
	transition-delay: var(--nvb-stagger-1) !important;
}

[data-nvb-delay="2"] {
	transition-delay: var(--nvb-stagger-2) !important;
}

[data-nvb-delay="3"] {
	transition-delay: var(--nvb-stagger-3) !important;
}

[data-nvb-delay="4"] {
	transition-delay: var(--nvb-stagger-4) !important;
}

[data-nvb-delay="5"] {
	transition-delay: var(--nvb-stagger-5) !important;
}

[data-nvb-delay="6"] {
	transition-delay: var(--nvb-stagger-6) !important;
}

/* Custom delay support */
[data-nvb-delay="100"] {
	transition-delay: .1s !important;
}

[data-nvb-delay="200"] {
	transition-delay: .2s !important;
}

[data-nvb-delay="300"] {
	transition-delay: .3s !important;
}

[data-nvb-delay="400"] {
	transition-delay: .4s !important;
}

[data-nvb-delay="500"] {
	transition-delay: .5s !important;
}

[data-nvb-delay="600"] {
	transition-delay: .6s !important;
}

[data-nvb-delay="700"] {
	transition-delay: .7s !important;
}

[data-nvb-delay="800"] {
	transition-delay: .8s !important;
}

/* ==========================================================================
   HOVER ANIMATIONS (Always Active)
   ========================================================================== */

/* Card Lift */
.nvb-hover-lift {
	transition: transform var(--nvb-anim-duration-fast) var(--nvb-ease-out), box-shadow var(--nvb-anim-duration-fast) var(--nvb-ease-out);
}

.nvb-hover-lift:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

/* Card Lift Subtle */
.nvb-hover-lift-sm {
	transition: transform var(--nvb-anim-duration-fast) var(--nvb-ease-out), box-shadow var(--nvb-anim-duration-fast) var(--nvb-ease-out);
}

.nvb-hover-lift-sm:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
}

/* Scale on Hover */
.nvb-hover-scale {
	transition: transform var(--nvb-anim-duration-fast) var(--nvb-ease-out);
}

.nvb-hover-scale:hover {
	transform: scale(1.05);
}

/* Glow on Hover */
.nvb-hover-glow {
	transition: box-shadow var(--nvb-anim-duration-fast) var(--nvb-ease-out);
}

.nvb-hover-glow:hover {
	box-shadow: 0 0 30px rgba(var(--nvb-primary-rgb, 99, 102, 241), .4);
}

/* Shine Effect */
.nvb-hover-shine {
	position: relative;
	overflow: hidden;
}

.nvb-hover-shine::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
	transition: left .5s ease;
}

.nvb-hover-shine:hover::before {
	left: 100%;
}

/* ==========================================================================
   BUTTON ANIMATIONS
   ========================================================================== */

/* Button Pulse */
.nvb-btn-pulse {
	position: relative;
	overflow: visible;
}

.nvb-btn-pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	opacity: 0;
	z-index: -1;
	animation: nvb-pulse 2s ease-out infinite;
}

@keyframes nvb-pulse {
	0% {
		transform: scale(1);
		opacity: .5;
	}
	
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

/* Button Arrow Slide */
.nvb-btn-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.nvb-btn-arrow svg, .nvb-btn-arrow i {
	transition: transform var(--nvb-anim-duration-fast) var(--nvb-ease-out);
}

.nvb-btn-arrow:hover svg, .nvb-btn-arrow:hover i {
	transform: translateX(4px);
}

/* ==========================================================================
   IMAGE ANIMATIONS
   ========================================================================== */

/* Image Zoom on Hover */
.nvb-img-zoom {
	overflow: hidden;
}

.nvb-img-zoom img {
	transition: transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

.nvb-img-zoom:hover img {
	transform: scale(1.1);
}

/* Image Reveal */
.nvb-img-reveal {
	position: relative;
	overflow: hidden;
}

.nvb-img-reveal::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--nvb-primary, #6366f1);
	transform: scaleX(1);
	transform-origin: right;
	transition: transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

.nvb-img-reveal.nvb-animated::after {
	transform: scaleX(0);
}

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

/* Text Reveal Line by Line */
.nvb-text-reveal {
	overflow: hidden;
}

.nvb-text-reveal > * {
	transform: translateY(100%);
	transition: transform var(--nvb-anim-duration) var(--nvb-ease-out);
}

.nvb-text-reveal.nvb-animated > * {
	transform: translateY(0);
}

/* Gradient Text Shimmer */
.nvb-text-shimmer {
	background: linear-gradient(90deg, var(--nvb-primary, #6366f1) 0%, var(--nvb-accent, #ec4899) 50%, var(--nvb-primary, #6366f1) 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: nvb-shimmer 3s linear infinite;
}

@keyframes nvb-shimmer {
	0% {
		background-position: 0% center;
	}
	
	100% {
		background-position: 200% center;
	}
}

/* ==========================================================================
   ICON ANIMATIONS
   ========================================================================== */

/* Icon Bounce */
.nvb-icon-bounce {
	transition: transform var(--nvb-anim-duration-fast) var(--nvb-ease-out-back);
}

.nvb-icon-bounce:hover {
	transform: scale(1.2);
}

/* Icon Spin on Hover */
.nvb-icon-spin:hover {
	animation: nvb-spin .5s ease-out;
}

@keyframes nvb-spin {
	from {
		transform: rotate(0deg);
	}
	
	to {
		transform: rotate(360deg);
	}
}

/* Icon Float */
.nvb-icon-float {
	animation: nvb-float 3s ease-in-out infinite;
}

@keyframes nvb-float {
	0%, 100% {
		transform: translateY(0);
	}
	
	50% {
		transform: translateY(-10px);
	}
}

/* ==========================================================================
   SECTION-SPECIFIC ANIMATIONS
   ========================================================================== */

/* Hero Section - Staggered Content */
.nvb-section-hero [data-nvb-animate] {
	--nvb-anim-duration: .8s;
}

/* Features Grid - Staggered Cards */
.nvb-section-features .nvb-feature-card:nth-child(1) {
	transition-delay: 0s;
}

.nvb-section-features .nvb-feature-card:nth-child(2) {
	transition-delay: .1s;
}

.nvb-section-features .nvb-feature-card:nth-child(3) {
	transition-delay: .2s;
}

.nvb-section-features .nvb-feature-card:nth-child(4) {
	transition-delay: .3s;
}

.nvb-section-features .nvb-feature-card:nth-child(5) {
	transition-delay: .4s;
}

.nvb-section-features .nvb-feature-card:nth-child(6) {
	transition-delay: .5s;
}

/* Testimonial - Quote Animation */
.nvb-section-testimonial blockquote, .nvb-section-testimonial .nvb-quote {
	position: relative;
}

.nvb-section-testimonial blockquote::before, .nvb-section-testimonial .nvb-quote::before {
	content: "\"";
	position: absolute;
	top: -20px;
	left: -10px;
	font-size: 80px;
	line-height: 1;
	opacity: .1;
	font-family: Georgia, serif;
}

/* Pricing Cards - Highlight Animation */
.nvb-pricing-card.nvb-featured {
	transform: scale(1.05);
	z-index: 1;
}

.nvb-pricing-card {
	transition: transform var(--nvb-anim-duration-fast) var(--nvb-ease-out), box-shadow var(--nvb-anim-duration-fast) var(--nvb-ease-out);
}

.nvb-pricing-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 25px 50px rgba(0, 0, 0, .15);
}

/* ==========================================================================
   LOADING STATES
   ========================================================================== */

/* Skeleton Loading */
.nvb-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: nvb-skeleton 1.5s ease-in-out infinite;
}

@keyframes nvb-skeleton {
	0% {
		background-position: 200% 0;
	}
	
	100% {
		background-position: -200% 0;
	}
}

/* Spinner */
.nvb-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(var(--nvb-primary-rgb, 99, 102, 241), .2);
	border-top-color: var(--nvb-primary, #6366f1);
	border-radius: 50%;
	animation: nvb-spin .8s linear infinite;
}

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

/* Duration Modifiers */
.nvb-anim-fast {
	--nvb-anim-duration: .3s !important;
}

.nvb-anim-slow {
	--nvb-anim-duration: .9s !important;
}

.nvb-anim-slower {
	--nvb-anim-duration: 1.2s !important;
}

/* Animation Play State */
.nvb-anim-paused {
	animation-play-state: paused !important;
}

.nvb-anim-running {
	animation-play-state: running !important;
}

/* Disable animation for specific elements */
.nvb-no-anim {
	animation: none !important;
	transition: none !important;
	opacity: 1 !important;
	transform: none !important;
}