/**
 * Marcus Bradford - Custom Animations
 *
 * @package MarcusBradford
 * @since 1.0.0
 */

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

/* Fade in from bottom */
@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Border spin for shiny CTA */
@keyframes border-spin {
	from {
		--gradient-angle: 0deg;
	}
	to {
		--gradient-angle: 360deg;
	}
}

/* Fallback for browsers that don't support @property */
@keyframes border-spin-fallback {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Parallax stars */
@keyframes anim-star {
	from {
		transform: translateY(0px);
	}
	to {
		transform: translateY(-2000px);
	}
}

/* Ping pulse */
@keyframes ping {
	75%, 100% {
		transform: scale(2);
		opacity: 0;
	}
}

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

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

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

/* Glow pulse */
@keyframes glow-pulse {
	0%, 100% {
		box-shadow: 0 0 20px rgba(233, 69, 96, 0.3);
	}
	50% {
		box-shadow: 0 0 40px rgba(233, 69, 96, 0.6);
	}
}

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

/* Fade up animation */
.animate-fade-up {
	animation: fade-in-up 0.8s ease-out forwards;
	opacity: 0;
}

/* Stagger delays */
.animate-delay-1 {
	animation-delay: 0.1s;
}

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

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

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

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

/* Ping animation */
.animate-ping {
	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Pulse animation */
.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

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

/* Glow animation */
.animate-glow {
	animation: glow-pulse 2s ease-in-out infinite;
}

/* ============================================
   STAR BACKGROUND ANIMATIONS
   ============================================ */

/* Stars layer 1 */
.bg-stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	background: transparent;
	animation: anim-star 50s linear infinite;
}

.bg-stars-1 {
	box-shadow:
		234px 124px #fff,
		654px 345px #fff,
		876px 12px #fff,
		1200px 800px #fff,
		400px 1500px #fff,
		1800px 200px #fff,
		500px 600px #fff,
		1500px 900px #fff,
		300px 400px #fff,
		900px 1200px #fff;
}

/* Stars layer 2 (larger, slower) */
.bg-stars-2 {
	width: 2px;
	height: 2px;
	animation-duration: 80s;
	box-shadow:
		123px 456px #fff,
		789px 234px #fff,
		456px 890px #fff,
		1100px 300px #fff,
		200px 1200px #fff,
		1500px 500px #fff,
		700px 1000px #fff,
		1300px 700px #fff,
		600px 200px #fff,
		1000px 1100px #fff;
}

/* Stars layer 3 (gold accent) */
.bg-stars-3 {
	width: 3px;
	height: 3px;
	animation-duration: 100s;
	animation-direction: reverse;
	box-shadow:
		350px 200px #F1C40F,
		800px 500px #F1C40F,
		1200px 300px #F1C40F,
		200px 800px #F1C40F,
		600px 1000px #F1C40F;
	opacity: 0.5;
}

/* ============================================
   HOVER TRANSITIONS
   ============================================ */

/* Smooth transitions for interactive elements */
a,
button,
.wp-block-button__link,
.wp-block-navigation-link__content {
	transition: all 150ms ease;
}

/* Card hover lift */
.card-hover-lift {
	transition: transform 300ms ease, box-shadow 300ms ease;
}

.card-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ============================================
   SCROLL REVEAL (via Intersection Observer)
   ============================================ */

/* Hidden state for scroll reveal */
.scroll-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Revealed state */
.scroll-reveal.revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered children */
.scroll-reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.scroll-reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.scroll-reveal-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.scroll-reveal-stagger > *:nth-child(6) { transition-delay: 0.5s; }

/* ============================================
   CSS CUSTOM PROPERTY FOR GRADIENT ANGLE
   ============================================ */

/* Modern browsers support @property for animated gradients */
@property --gradient-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

/* ============================================
   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;
	}

	.bg-stars,
	.bg-stars-1,
	.bg-stars-2,
	.bg-stars-3 {
		animation: none;
	}
}