/**
 * Animation System for Eryvium Theme
 * Reusable animations for element appearance
 */

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

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

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

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

/* Base animation class */
.animate {
	animation-fill-mode: both;
}

/* Fade In */
.animate-fade-in {
	animation: fadeIn var(--transition-slow) ease-out;
}

/* Fade In Up */
.animate-fade-in-up {
	animation: fadeInUp 0.8s ease-out;
}

/* Fade In Down */
.animate-fade-in-down {
	animation: fadeInDown 0.8s ease-out;
}

/* Fade In Left */
.animate-fade-in-left {
	animation: fadeInLeft 0.8s ease-out;
}

/* Fade In Right */
.animate-fade-in-right {
	animation: fadeInRight 0.8s ease-out;
}

/* Scale In */
.animate-scale-in {
	animation: scaleIn 0.6s ease-out;
}

/* Slide Up */
.animate-slide-up {
	animation: slideUp 0.8s ease-out;
}

/* ============================================
   DELAYED ANIMATIONS
   ============================================ */

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

.animate-delay-600 {
	animation-delay: 0.6s;
}

.animate-delay-700 {
	animation-delay: 0.7s;
}

.animate-delay-800 {
	animation-delay: 0.8s;
}

.animate-delay-1200 {
	animation-delay: 1.2s;
}

/* ============================================
   INITIAL STATE (for scroll animations)
   ============================================ */

.animate-on-scroll {
	opacity: 0;
}

.animate-on-scroll.fade-in-up {
	transform: translateY(30px);
}

.animate-on-scroll.fade-in-up.animated {
	animation: fadeInUp 0.8s ease-out forwards;
	opacity: 1;
}

.animate-on-scroll.fade-in-down {
	transform: translateY(-30px);
}

.animate-on-scroll.fade-in-down.animated {
	animation: fadeInDown 0.8s ease-out forwards;
	opacity: 1;
}

.animate-on-scroll.fade-in-left {
	transform: translateX(-30px);
}

.animate-on-scroll.fade-in-left.animated {
	animation: fadeInLeft 0.8s ease-out forwards;
	opacity: 1;
}

.animate-on-scroll.fade-in-right {
	transform: translateX(30px);
}

.animate-on-scroll.fade-in-right.animated {
	animation: fadeInRight 0.8s ease-out forwards;
	opacity: 1;
}

/* ============================================
   animate.css-style aliases (for project markup)
   Works with existing animate-on-scroll + .animated trigger
   ============================================ */

/* Base animate.css-style class (minimal compatibility) */
.animate__animated {
	animation-duration: 0.8s;
	animation-fill-mode: both;
}

/* Fade In Left (animate.css naming) */
.animate-on-scroll.animate__fadeInLeft {
	transform: translateX(-30px);
}

.animate-on-scroll.animate__fadeInLeft.animated {
	animation: fadeInLeft 0.8s ease-out forwards;
	opacity: 1;
}

/* Fade In Right (animate.css naming) */
.animate-on-scroll.animate__fadeInRight {
	transform: translateX(30px);
}

.animate-on-scroll.animate__fadeInRight.animated {
	animation: fadeInRight 0.8s ease-out forwards;
	opacity: 1;
}

.animate-on-scroll.scale-in {
	transform: scale(0.9);
}

.animate-on-scroll.scale-in.animated {
	animation: scaleIn 0.8s ease-out forwards;
	opacity: 1;
}

/* ============================================
   HEADER ANIMATION
   ============================================ */

.site-header {
	animation: fadeInDown 0.6s ease-out;
	animation-fill-mode: both;
}

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

.hero-section .glass-card {
	animation: slideUp 0.4s ease-out 0.1s;
	animation-fill-mode: both;
	opacity: 0;
	transform: translateY(100px);
}

.hero-section .glass-card-label {
	animation: fadeInDown 0.6s ease-out 0.5s;
	animation-fill-mode: both;
	opacity: 0;
}

.hero-section .glass-card-title {
	animation: fadeInUp 0.8s ease-out 0.7s;
	animation-fill-mode: both;
	opacity: 0;
}

.hero-section .glass-card-body {
	animation: fadeInUp 0.8s ease-out 0.9s;
	animation-fill-mode: both;
	opacity: 0;
}

.hero-section .glass-card-footer {
	animation: fadeInUp 0.8s ease-out 1.1s;
	animation-fill-mode: both;
	opacity: 0;
}

/* ============================================
   SECTION ANIMATIONS
   ============================================ */

/* Card animations */
.card {
	animation: fadeInUp 0.6s ease-out;
}

.card:nth-child(1) {
	animation-delay: 0.1s;
	animation-fill-mode: both;
}

.card:nth-child(2) {
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.card:nth-child(3) {
	animation-delay: 0.3s;
	animation-fill-mode: both;
}

.card:nth-child(4) {
	animation-delay: 0.4s;
	animation-fill-mode: both;
}

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

.btn {
	animation: scaleIn 0.4s ease-out;
}

.btn:hover {
	transform: translateY(-1px);
	transition: transform var(--transition-base);
}

/* ============================================
   RESPONSIVE ANIMATIONS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.animate,
	.animate-on-scroll,
	.hero-section .glass-card-label,
	.hero-section .glass-card-title,
	.hero-section .glass-card-body,
	.hero-section .glass-card-footer,
	.section-header,
	.card,
	.btn {
		animation: none !important;
		transition: none !important;
	}
	
	.animate-on-scroll {
		opacity: 1;
		transform: none;
	}
}