/**
 * ============================================================================
 * ADV GROUP - ADVANCED ANIMATIONS
 * File: css/modules/animations.css
 * ============================================================================
 *
 * Animation utilities for GenerateBlocks Pro elements.
 * Uses Intersection Observer API for scroll-triggered animations.
 * Respects prefers-reduced-motion for accessibility.
 *
 * @package ADV
 * @version 1.2.0
 * @since   2.1.0
 * @author  ADV Group
 * @see     js/animations.js for JavaScript observer implementation
 */

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

/**
 * Elements with animation start invisible
 * JavaScript adds .is-visible when element enters viewport
 */
.has-animation {
	transition:
		opacity 0.6s ease-out,
		transform 0.6s ease-out;
	opacity: 0;
}

/**
 * Visible state - applied by Intersection Observer
 */
.has-animation.is-visible {
	transform: none;
	opacity: 1;
}

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

/**
 * Simple fade in
 */
.animate-fade-in {
	opacity: 0;
}

.animate-fade-in.is-visible {
	animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/**
 * Fade in with scale
 */
.animate-fade-scale {
	transform: scale(0.95);
	opacity: 0;
}

.animate-fade-scale.is-visible {
	animation: fadeScale 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeScale {
	from {
		transform: scale(0.95);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

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

/**
 * Slide up
 */
.animate-slide-up {
	transform: translateY(30px);
	opacity: 0;
}

.animate-slide-up.is-visible {
	animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUp {
	from {
		transform: translateY(30px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/**
 * Slide down
 */
.animate-slide-down {
	transform: translateY(-30px);
	opacity: 0;
}

.animate-slide-down.is-visible {
	animation: slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideDown {
	from {
		transform: translateY(-30px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/**
 * Slide left (from right)
 */
.animate-slide-left {
	transform: translateX(30px);
	opacity: 0;
}

.animate-slide-left.is-visible {
	animation: slideLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideLeft {
	from {
		transform: translateX(30px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/**
 * Slide right (from left)
 */
.animate-slide-right {
	transform: translateX(-30px);
	opacity: 0;
}

.animate-slide-right.is-visible {
	animation: slideRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideRight {
	from {
		transform: translateX(-30px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* ==========================================================================
   DATA-ANIMATE ATTRIBUTE SYSTEM (GenerateBlocks Pro Pattern)
   ========================================================================== */

/**
 * Alternative trigger system using data-animate attribute
 * Works with htmlAttributes in GenerateBlocks JSON
 *
 * Usage: data-animate="fade-up" data-animate-delay="200" data-animate-duration="800"
 */
[data-animate] {
	opacity: 0;
	transition-property: opacity, transform, filter;
	transition-duration: 0.6s;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate].animate-in {
	opacity: 1;
}

/* Fade Up */
[data-animate='fade-up'] {
	transform: translateY(30px);
}

[data-animate='fade-up'].animate-in {
	transform: translateY(0);
}

/* Fade Down */
[data-animate='fade-down'] {
	transform: translateY(-30px);
}

[data-animate='fade-down'].animate-in {
	transform: translateY(0);
}

/* Scale */
[data-animate='scale'] {
	transform: scale(0.9);
}

[data-animate='scale'].animate-in {
	transform: scale(1);
}

/* Slide Left (from right) */
[data-animate='slide-left'] {
	transform: translateX(40px);
}

[data-animate='slide-left'].animate-in {
	transform: translateX(0);
}

/* Slide Right (from left) */
[data-animate='slide-right'] {
	transform: translateX(-40px);
}

[data-animate='slide-right'].animate-in {
	transform: translateX(0);
}

/* Blur Fade */
[data-animate='blur-fade'] {
	filter: blur(10px);
}

[data-animate='blur-fade'].animate-in {
	filter: blur(0);
}

/* Rotate */
[data-animate='rotate'] {
	transform: rotate(-5deg) scale(0.95);
}

[data-animate='rotate'].animate-in {
	transform: rotate(0) scale(1);
}

/* Flip */
[data-animate='flip'] {
	transform: perspective(1000px) rotateY(-90deg);
}

[data-animate='flip'].animate-in {
	transform: perspective(1000px) rotateY(0);
}

/**
 * Stagger group for data-animate children
 */
[data-animate-stagger] > [data-animate]:nth-child(1) {
	transition-delay: 0ms;
}

[data-animate-stagger] > [data-animate]:nth-child(2) {
	transition-delay: 100ms;
}

[data-animate-stagger] > [data-animate]:nth-child(3) {
	transition-delay: 200ms;
}

[data-animate-stagger] > [data-animate]:nth-child(4) {
	transition-delay: 300ms;
}

[data-animate-stagger] > [data-animate]:nth-child(5) {
	transition-delay: 400ms;
}

[data-animate-stagger] > [data-animate]:nth-child(6) {
	transition-delay: 500ms;
}

/* ==========================================================================
   ZOOM ANIMATIONS
   ========================================================================== */

/**
 * Zoom in
 */
.animate-zoom-in {
	transform: scale(0.8);
	opacity: 0;
}

.animate-zoom-in.is-visible {
	animation: zoomIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes zoomIn {
	from {
		transform: scale(0.8);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/**
 * Zoom out (start larger)
 */
.animate-zoom-out {
	transform: scale(1.1);
	opacity: 0;
}

.animate-zoom-out.is-visible {
	animation: zoomOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes zoomOut {
	from {
		transform: scale(1.1);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* ==========================================================================
   ANIMATION TIMING MODIFIERS
   ========================================================================== */

/**
 * Duration modifiers
 */
.animate-duration-fast {
	--animation-duration: 0.3s;
}

.animate-duration-normal {
	--animation-duration: 0.6s;
}

.animate-duration-slow {
	--animation-duration: 1s;
}

.animate-duration-slower {
	--animation-duration: 1.5s;
}

/**
 * Delay modifiers (stagger children)
 */
.animate-delay-100 {
	animation-delay: 0.1s;
}

.animate-delay-200 {
	animation-delay: 0.2s;
}

.animate-delay-300 {
	animation-delay: 0.3s;
}

.animate-delay-400 {
	animation-delay: 0.4s;
}

.animate-delay-500 {
	animation-delay: 0.5s;
}

/**
 * Stagger children utility
 * Apply to parent, children get incremental delays
 */
.animate-stagger > :nth-child(1) {
	animation-delay: 0s;
}

.animate-stagger > :nth-child(2) {
	animation-delay: 0.1s;
}

.animate-stagger > :nth-child(3) {
	animation-delay: 0.2s;
}

.animate-stagger > :nth-child(4) {
	animation-delay: 0.3s;
}

.animate-stagger > :nth-child(5) {
	animation-delay: 0.4s;
}

.animate-stagger > :nth-child(6) {
	animation-delay: 0.5s;
}

/* ==========================================================================
   EASING MODIFIERS
   ========================================================================== */

.animate-ease-linear {
	animation-timing-function: linear;
}

.animate-ease-in {
	animation-timing-function: ease-in;
}

.animate-ease-out {
	animation-timing-function: ease-out;
}

.animate-ease-in-out {
	animation-timing-function: ease-in-out;
}

.animate-ease-bounce {
	animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================================================
   HOVER ANIMATIONS
   ========================================================================== */

/**
 * Lift on hover (cards, buttons)
 */
.animate-hover-lift {
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.animate-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px -5px rgb(0, 0, 0, 0.1);
}

/**
 * Scale on hover
 */
.animate-hover-scale {
	transition: transform 0.3s ease;
}

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

/**
 * Glow on hover
 */
.animate-hover-glow {
	transition: box-shadow 0.3s ease;
}

.animate-hover-glow:hover {
	box-shadow: 0 0 20px var(--color-primary-light, rgb(59, 130, 246, 0.5));
}

/* ==========================================================================
   CONTINUOUS ANIMATIONS
   ========================================================================== */

/**
 * Pulse animation (attention grabber)
 */
.animate-pulse {
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
	}
}

/**
 * Bounce animation
 */
.animate-bounce {
	animation: bounce 1s ease infinite;
}

@keyframes bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

/**
 * Spin animation (loaders)
 */
.animate-spin {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

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

/**
 * Respect user preferences for reduced motion
 * Disable all animations and transitions
 */
@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;
	}

	.has-animation {
		transform: none;
		opacity: 1;
	}

	[class*='animate-'] {
		transform: none;
		opacity: 1;
		animation: none !important;
	}

	/* Data-animate system reduced motion */
	[data-animate] {
		transform: none !important;
		transition: none !important;
		opacity: 1 !important;
		filter: none !important;
	}

	/* Parallax reduced motion */
	[data-parallax] {
		transform: none !important;
		will-change: auto;
	}
}

/* ==========================================================================
   PARALLAX EFFECTS
   ========================================================================== */

/**
 * Parallax container
 * Requires JS handler for scroll-based transforms
 */
[data-parallax] {
	transition: transform 0.1s linear;
	will-change: transform;
}

/**
 * Parallax speed modifiers (CSS-only for simple cases)
 * For complex parallax, use JS with data-parallax="0.5"
 */
.parallax-slow {
	transform: translateZ(-1px) scale(2);
}

.parallax-medium {
	transform: translateZ(-0.5px) scale(1.5);
}

.parallax-fast {
	transform: translateZ(0) scale(1);
}

/* ==========================================================================
   LOADING SKELETON ANIMATION
   ========================================================================== */

/**
 * Skeleton loading shimmer effect
 */
.skeleton {
	background: linear-gradient(
		90deg,
		var(--color-skeleton-base, #e2e8f0) 25%,
		var(--color-skeleton-shine, #f1f5f9) 50%,
		var(--color-skeleton-base, #e2e8f0) 75%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

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

	100% {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   DARK THEME ADJUSTMENTS
   ========================================================================== */

[data-theme='dark'] .skeleton {
	--color-skeleton-base: #334155;
	--color-skeleton-shine: #475569;
}

[data-theme='dark'] .animate-hover-glow:hover {
	box-shadow: 0 0 20px var(--color-primary-dark, rgb(96, 165, 250, 0.4));
}

/* ==========================================================================
   SVG DIAMOND ANIMATION
   ========================================================================== */

/**
 * Diamond animation container
 * For use with img/diamond-animation.svg
 *
 * Usage in GenerateBlocks:
 * Add class .diamond-animation-container to container element
 */
.diamond-animation-container {
	position: relative;
	width: 100%;
	max-width: 543px;
	height: auto;
	margin: 0 auto;
}

/**
 * Diamond animation SVG
 * Responsive sizing and positioning
 */
.diamond-animation {
	width: 100%;
	height: auto;
	display: block;
}

/**
 * Diamond animation as background decoration
 * Position absolute for use as overlay
 */
.diamond-animation--absolute {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 543px;
	height: auto;
	pointer-events: none;
	z-index: 0;
}

/**
 * Diamond animation sizes
 */
.diamond-animation--small {
	max-width: 300px;
}

.diamond-animation--medium {
	max-width: 450px;
}

.diamond-animation--large {
	max-width: 600px;
}

/**
 * Diamond animation opacity variants
 */
.diamond-animation--subtle {
	opacity: 0.3;
}

.diamond-animation--medium-opacity {
	opacity: 0.6;
}

/**
 * Reduced motion support for diamond animation
 * Disables all SVG animations when user prefers reduced motion
 */
@media (prefers-reduced-motion: reduce) {
	.diamond-animation {
		animation: none !important;
	}

	.diamond-animation * {
		animation: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   LOGO ANIMATION
   ========================================================================== */

/**
 * Logo animation container
 * For use with img/logo-animation.svg
 *
 * Usage in GenerateBlocks:
 * Add class .logo-animation-container to container element
 */
.logo-animation-container {
	position: relative;
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
}

/**
 * Logo animation SVG
 * Responsive sizing and positioning
 */
.logo-animation {
	width: 100%;
	height: auto;
	display: block;
}

/**
 * Logo animation as background decoration
 * Position absolute for use as overlay
 */
.logo-animation--absolute {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 400px;
	height: auto;
	pointer-events: none;
	z-index: 0;
}

/**
 * Logo animation sizes
 */
.logo-animation--small {
	max-width: 200px;
}

.logo-animation--medium {
	max-width: 300px;
}

.logo-animation--large {
	max-width: 500px;
}

/**
 * Logo animation opacity variants
 */
.logo-animation--subtle {
	opacity: 0.8;
}

.logo-animation--medium-opacity {
	opacity: 0.9;
}

/**
 * Reduced motion support for logo animation
 * Disables all SVG animations when user prefers reduced motion
 */
@media (prefers-reduced-motion: reduce) {
	.logo-animation {
		animation: none !important;
	}

	.logo-animation * {
		animation: none !important;
		transform: none !important;
		filter: none !important;
	}
}