/**
 * Animations CSS
 *
 * All keyframe animations for the Stellar theme.
 * Includes star twinkle, floating elements, scroll reveals,
 * shooting stars, button pulses, and counter animations.
 *
 * @package Stellar
 * @since   1.0.0
 */

/* ============================================================
   STAR TWINKLE
   ============================================================ */

@keyframes twinkle {
	0%, 100% { opacity: 1; transform: scale(1); }
	25%       { opacity: 0.4; transform: scale(0.8); }
	50%       { opacity: 0.9; transform: scale(1.1); }
	75%       { opacity: 0.3; transform: scale(0.9); }
}

@keyframes twinkle-slow {
	0%, 100% { opacity: 0.8; }
	50%       { opacity: 0.2; }
}

/* ============================================================
   FLOATING / DRIFT
   ============================================================ */

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

@keyframes float-gentle {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	33%       { transform: translateY(-8px) rotate(1deg); }
	66%       { transform: translateY(-4px) rotate(-1deg); }
}

@keyframes drift {
	0%   { transform: translateX(0); }
	100% { transform: translateX(100vw); }
}

/* ============================================================
   SHOOTING STARS
   ============================================================ */

@keyframes shooting-star {
	0%   { transform: translateX(0) translateY(0) rotate(-45deg); opacity: 1; width: 0; }
	70%  { opacity: 1; }
	100% { transform: translateX(300px) translateY(300px) rotate(-45deg); opacity: 0; width: 200px; }
}

/* ============================================================
   SCROLL REVEAL (applied via JS adding class)
   ============================================================ */

.stellar-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.stellar-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.stellar-reveal-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.stellar-reveal-left.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.stellar-reveal-right {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.stellar-reveal-right.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Stagger delays for card groups */
.stellar-reveal-delay-1 { transition-delay: 0.1s; }
.stellar-reveal-delay-2 { transition-delay: 0.2s; }
.stellar-reveal-delay-3 { transition-delay: 0.3s; }
.stellar-reveal-delay-4 { transition-delay: 0.4s; }
.stellar-reveal-delay-5 { transition-delay: 0.5s; }

/* ============================================================
   PULSE ANIMATIONS
   ============================================================ */

@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 0 15px rgba(240, 194, 127, 0.4),
		            0 0 40px rgba(240, 194, 127, 0.1);
	}
	50% {
		box-shadow: 0 0 30px rgba(240, 194, 127, 0.7),
		            0 0 80px rgba(240, 194, 127, 0.3);
	}
}

@keyframes pulse-aurora {
	0%, 100% { box-shadow: 0 0 10px rgba(100, 255, 218, 0.3); }
	50%       { box-shadow: 0 0 25px rgba(100, 255, 218, 0.6), 0 0 50px rgba(100, 255, 218, 0.2); }
}

@keyframes pulse-scale {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.05); }
}

.pulse-glow   { animation: pulse-glow   3s ease-in-out infinite; }
.pulse-aurora { animation: pulse-aurora 3s ease-in-out infinite; }
.pulse-scale  { animation: pulse-scale  4s ease-in-out infinite; }

/* ============================================================
   GOLD BORDER ANIMATION (featured package)
   ============================================================ */

@keyframes gold-border-pulse {
	0%, 100% {
		box-shadow: 0 0 0 2px rgba(240, 194, 127, 0.6),
		            0 0 20px rgba(240, 194, 127, 0.2),
		            inset 0 0 0 1px rgba(240, 194, 127, 0.3);
	}
	50% {
		box-shadow: 0 0 0 3px rgba(240, 194, 127, 1),
		            0 0 40px rgba(240, 194, 127, 0.4),
		            inset 0 0 0 1px rgba(240, 194, 127, 0.5);
	}
}

/* ============================================================
   SPARKLE BADGE
   ============================================================ */

@keyframes sparkle {
	0%, 100% { transform: scale(1) rotate(0deg); }
	25%       { transform: scale(1.1) rotate(5deg); }
	75%       { transform: scale(0.95) rotate(-5deg); }
}

/* ============================================================
   SCROLL INDICATOR BOUNCE
   ============================================================ */

@keyframes bounce-down {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50%       { transform: translateY(10px); opacity: 0.5; }
}

.scroll-indicator-arrow {
	animation: bounce-down 1.8s ease-in-out infinite;
}

/* ============================================================
   COUNTER COUNT-UP (class applied by JS)
   ============================================================ */

@keyframes counter-appear {
	from { opacity: 0; transform: scale(0.8); }
	to   { opacity: 1; transform: scale(1); }
}

.counter-animate {
	animation: counter-appear 0.5s ease forwards;
}

/* ============================================================
   STAR BURST (form success)
   ============================================================ */

@keyframes star-burst {
	0%   { transform: scale(0) rotate(0deg);   opacity: 0; }
	50%  { transform: scale(1.3) rotate(180deg); opacity: 1; }
	100% { transform: scale(1) rotate(360deg);  opacity: 1; }
}

.star-burst {
	display: inline-block;
	animation: star-burst 0.8s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards;
}

/* ============================================================
   FADE IN / OUT
   ============================================================ */

@keyframes fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

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

@keyframes fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* ============================================================
   SLIDE TRANSITIONS (multi-step form)
   ============================================================ */

@keyframes slide-in-right {
	from { transform: translateX(60px); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slide-in-left {
	from { transform: translateX(-60px); opacity: 0; }
	to   { transform: translateX(0);     opacity: 1; }
}

@keyframes slide-out-left {
	from { transform: translateX(0);    opacity: 1; }
	to   { transform: translateX(-60px); opacity: 0; }
}

@keyframes slide-out-right {
	from { transform: translateX(0);   opacity: 1; }
	to   { transform: translateX(60px); opacity: 0; }
}

.form-step-entering-right  { animation: slide-in-right  0.4s ease forwards; }
.form-step-entering-left   { animation: slide-in-left   0.4s ease forwards; }
.form-step-leaving-left    { animation: slide-out-left  0.3s ease forwards; }
.form-step-leaving-right   { animation: slide-out-right 0.3s ease forwards; }

/* ============================================================
   CONSTELLATION LINE DRAW
   ============================================================ */

@keyframes draw-line {
	from { stroke-dashoffset: 200; }
	to   { stroke-dashoffset: 0; }
}

/* ============================================================
   LOADING SPINNER
   ============================================================ */

@keyframes spin {
	to { transform: rotate(360deg); }
}

.stellar-spinner {
	width: 24px;
	height: 24px;
	border: 2px solid rgba(240, 194, 127, 0.3);
	border-top-color: var(--color-supernova);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	display: inline-block;
}

/* ============================================================
   MOBILE MENU OPEN/CLOSE
   ============================================================ */

@keyframes menu-overlay-in {
	from { opacity: 0; transform: translateY(-20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes menu-overlay-out {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-20px); }
}