/* ========================================
   ANIMATIONS - Hitycraft
======================================== */

/* ----- FLOAT (classic) ----- */
.animation-float {
	animation: float 3s ease-in-out infinite;
}

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

/* ----- FADE IN ----- */
.animation-fade-in {
	animation: fadeIn 0.8s ease-out both;
}

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

/* ----- SLIDE UP ----- */
.animation-slide-up {
	animation: slideUp 0.7s ease-out both;
}

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

/* ----- SLIDE DOWN ----- */
.animation-slide-down {
	animation: slideDown 0.7s ease-out both;
}

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

/* ----- SCALE IN (smooth zoom) ----- */
.animation-scale-in {
	animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

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

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

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

/* ----- GLOW ----- */
.animation-glow {
	animation: glow 2.5s ease-in-out infinite;
}

@keyframes glow {
	0%, 100% {
		filter: drop-shadow(0 0 4px rgba(0, 255, 100, 0.4));
	}
	50% {
		filter: drop-shadow(0 0 18px rgba(0, 255, 100, 0.8));
	}
}

/* ----- BOUNCE ----- */
.animation-bounce {
	animation: bounce 1.2s ease infinite;
}

@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	40%      { transform: translateY(-18px); }
	60%      { transform: translateY(-8px); }
}

/* ----- SHAKE (smooth shake) ----- */
.animation-shake {
	animation: shake 0.5s ease-in-out;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-6px); }
	40%      { transform: translateX(6px); }
	60%      { transform: translateX(-4px); }
	80%      { transform: translateX(4px); }
}

/* ----- ROTATE IN ----- */
.animation-rotate-in {
	animation: rotateIn 0.7s ease-out both;
}

@keyframes rotateIn {
	from {
		opacity: 0;
		transform: rotate(-15deg) scale(0.8);
	}
	to {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
}

/* ----- GRADIENT SHIFT (animated background) ----- */
.animation-gradient {
	background-size: 200% 200%;
	animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ========================================
   DELAYS (To create a sequence)
======================================== */
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.30s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.60s; }
.delay-5 { animation-delay: 0.75s; }

/* ========================================
   HOVER EFFECTS
======================================== */
.hover-lift {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.hover-grow {
	transition: transform 0.25s ease;
}

.hover-grow:hover {
	transform: scale(1.06);
}

.hover-glow {
	transition: filter 0.3s ease;
}

.hover-glow:hover {
	filter: drop-shadow(0 0 12px rgba(0, 255, 100, 0.7));
}