/**
 * Animations CSS
 *
 * Custom animations and transitions
 *
 * @package Blank_Canvas
 * @since 1.0.0
 */

/* ============================================
   Logo Loading Animation
   ============================================ */

@keyframes fadeInScale {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pulseGlow {
	0%, 100% {
		opacity: 1;
		filter: brightness(1);
	}
	50% {
		opacity: 0.8;
		filter: brightness(1.2);
	}
}

.logo-animate {
	animation: fadeInScale 2s ease-out, pulseGlow 2s ease-in-out infinite;
}

.site-title-loading {
	animation: fadeInScale 2s ease-out;
	letter-spacing: 0.1em;
}

/* ============================================
   Scroll Animations (Applied via JS)
   ============================================ */

.section-animate {
	opacity: 0;
	transform: translateY(50px);
}

.section-animate.animated {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1s ease, transform 1s ease;
}

/* Fade In */
.fade-in {
	opacity: 0;
	transition: opacity 0.8s ease;
}

.fade-in.visible {
	opacity: 1;
}

/* Fade In Up */
.fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Fade In Left */
.fade-in-left {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-left.visible {
	opacity: 1;
	transform: translateX(0);
}

/* Fade In Right */
.fade-in-right {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-right.visible {
	opacity: 1;
	transform: translateX(0);
}

/* Scale In */
.scale-in {
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.scale-in.visible {
	opacity: 1;
	transform: scale(1);
}

/* Stagger Animation Classes */
.stagger-item {
	opacity: 0;
	transform: translateY(20px);
}

/* ============================================
   Hover Animations
   ============================================ */

.hover-lift {
	transition: transform 0.3s ease;
}

.hover-lift:hover {
	transform: translateY(-5px);
}

.hover-scale {
	transition: transform 0.3s ease;
}

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

/* ============================================
   Page Transition
   ============================================ */

.page-transition {
	opacity: 0;
	animation: pageIn 0.5s ease forwards;
}

@keyframes pageIn {
	to {
		opacity: 1;
	}
}

/* ============================================
   Smooth Reveal on Load
   ============================================ */

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

.reveal-on-load {
	animation: revealContent 1s ease forwards;
}

/* ============================================
   Text Animations
   ============================================ */

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

.text-slide-in {
	opacity: 0;
	animation: slideInText 0.8s ease forwards;
}

/* ============================================
   Image Reveal Animation
   ============================================ */

.image-reveal {
	overflow: hidden;
	position: relative;
}

.image-reveal::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-black);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 1s ease;
}

.image-reveal.revealed::after {
	transform: scaleX(0);
	transform-origin: right;
}

/* ============================================
   Modal Animations
   ============================================ */

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

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

.service-modal.active {
	animation: modalFadeIn 0.3s ease;
}

.service-modal.active .modal-content {
	animation: modalSlideUp 0.4s ease;
}

/* ============================================
   Reduced Motion Preferences
   ============================================ */

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