/**
 * Delight Animations CSS
 *
 * Keyframe animations for question transitions, feedback overlays,
 * checkmarks, thumbs-up, text-pop, star-burst, confetti, sparkles,
 * ripple effects, calculating spinner, result reveals with staggered
 * sections, and milestone celebrations.
 *
 * @package GFDelight
 * @since   1.0.0
 */

/* ── Question Entrance/Exit ──────────────────────────────── */
@keyframes gfd-slide-in {
	from {
		opacity: 0;
		transform: translateX(60px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

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

.gfd-question-enter {
	animation: gfd-slide-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.gfd-question-exit {
	animation: gfd-slide-out 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

/* ── Feedback Pop ────────────────────────────────────────── */
@keyframes gfd-feedback-pop {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

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

.gfd-feedback-enter {
	animation: gfd-feedback-pop 0.4s ease forwards;
}

.gfd-feedback-exit {
	animation: gfd-feedback-fade 0.3s ease forwards;
}

/* ── Checkmark SVG ───────────────────────────────────────── */
@keyframes gfd-checkmark-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes gfd-checkmark-circle-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.gfd-checkmark-svg .gfd-checkmark-circle {
	stroke-dasharray: 140;
	stroke-dashoffset: 140;
	animation: gfd-checkmark-circle-draw 0.4s ease forwards;
}

.gfd-checkmark-svg .gfd-checkmark-path {
	stroke-dasharray: 50;
	stroke-dashoffset: 50;
	animation: gfd-checkmark-draw 0.4s ease 0.2s forwards;
}

/* ── Thumbs Up Animation ─────────────────────────────────── */
@keyframes gfd-thumbs-up {
	0% {
		opacity: 0;
		transform: scale(0) rotate(-30deg);
	}
	60% {
		opacity: 1;
		transform: scale(1.3) rotate(5deg);
	}
	80% {
		transform: scale(0.95) rotate(-2deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.gfd-thumbs-up {
	font-size: 3rem;
	animation: gfd-thumbs-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Text Pop Animation (checkmark emoji) ────────────────── */
@keyframes gfd-text-pop {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.gfd-text-pop {
	font-size: 3rem;
	animation: gfd-text-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Star Burst Animation ────────────────────────────────── */
@keyframes gfd-star-burst {
	0% {
		opacity: 0;
		transform: scale(0) rotate(-45deg);
	}
	50% {
		opacity: 1;
		transform: scale(1.4) rotate(10deg);
	}
	75% {
		transform: scale(0.9) rotate(-5deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.gfd-star-burst {
	font-size: 3rem;
	animation: gfd-star-burst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Celebrate Icon ──────────────────────────────────────── */
@keyframes gfd-celebrate {
	0% {
		opacity: 0;
		transform: scale(0) rotate(-20deg);
	}
	40% {
		opacity: 1;
		transform: scale(1.5) rotate(5deg);
	}
	60% {
		transform: scale(0.85) rotate(-3deg);
	}
	80% {
		transform: scale(1.1) rotate(2deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.gfd-celebrate-icon {
	font-size: 3.5rem;
	animation: gfd-celebrate 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── CSS Confetti (enhanced with drift) ──────────────────── */
@keyframes gfd-confetti-fall {
	0% {
		transform: translateY(-10px) translateX(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(100vh) translateX(var(--gfd-drift, 0px)) rotate(720deg);
		opacity: 0;
	}
}

.gfd-confetti-piece {
	position: fixed;
	width: 10px;
	height: 10px;
	top: -10px;
	animation: gfd-confetti-fall 2.5s ease-in forwards;
	will-change: transform, opacity;
}

/* ── Sparkle ─────────────────────────────────────────────── */
@keyframes gfd-sparkle {
	0%,
	100% {
		opacity: 0;
		transform: scale(0) rotate(0deg);
	}
	50% {
		opacity: 1;
		transform: scale(1) rotate(180deg);
	}
}

.gfd-sparkle {
	position: absolute;
	width: 20px;
	height: 20px;
	background: radial-gradient(circle, #FFD700 0%, transparent 70%);
	border-radius: 50%;
	animation: gfd-sparkle 0.8s ease forwards;
	pointer-events: none;
	will-change: transform, opacity;
}

/* ── Choice Button Ripple Effect ─────────────────────────── */
@keyframes gfd-ripple-expand {
	from {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0.6;
	}
	to {
		transform: translate(-50%, -50%) scale(4);
		opacity: 0;
	}
}

.gfd-choice {
	position: relative;
	overflow: hidden;
}

.gfd-ripple {
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(108, 99, 255, 0.3);
	animation: gfd-ripple-expand 0.6s ease-out forwards;
	pointer-events: none;
}

/* ── Choice Button Selection Bounce ──────────────────────── */
@keyframes gfd-choice-bounce {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.04);
	}
	70% {
		transform: scale(0.98);
	}
	100% {
		transform: scale(1.02);
	}
}

.gfd-choice.gfd-selected {
	animation: gfd-choice-bounce 0.35s ease forwards;
}

/* ── Choice Hover Micro-interaction ──────────────────────── */
.gfd-choice .gfd-choice-letter {
	transition: transform 0.2s ease, background 0.3s ease;
}

.gfd-choice:hover .gfd-choice-letter {
	transform: scale(1.1);
}

/* ── Calculating Spinner ─────────────────────────────────── */
@keyframes gfd-spin {
	to {
		transform: rotate(360deg);
	}
}

.gfd-calculating-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}

.gfd-spinner-ring {
	width: 60px;
	height: 60px;
	border: 4px solid rgba(255, 255, 255, 0.1);
	border-top-color: var(--gfd-primary, #6C63FF);
	border-radius: 50%;
	animation: gfd-spin 1s linear infinite;
}

/* ── Calculating Progress Bar ────────────────────────────── */
.gfd-calculating-bar {
	width: 200px;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	margin: 20px auto 0;
	overflow: hidden;
}

.gfd-calculating-bar-fill {
	height: 100%;
	width: 0;
	background: var(--gfd-primary, #6C63FF);
	border-radius: 2px;
	transition: width 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Calculating Animated Dots ───────────────────────────── */
@keyframes gfd-dot-bounce {
	0%, 80%, 100% {
		opacity: 0.3;
	}
	40% {
		opacity: 1;
	}
}

.gfd-dots span {
	animation: gfd-dot-bounce 1.4s ease-in-out infinite;
}

.gfd-dots span:nth-child(1) {
	animation-delay: 0s;
}

.gfd-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

.gfd-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

/* ── Calculating Pulse ───────────────────────────────────── */
@keyframes gfd-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.03);
		opacity: 1;
	}
}

.gfd-calculating {
	animation: gfd-pulse 1.5s ease infinite;
}

/* ── Result Reveal ───────────────────────────────────────── */
@keyframes gfd-result-reveal {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(40px);
	}
	60% {
		opacity: 1;
		transform: scale(1.03) translateY(-5px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.gfd-result-enter {
	animation: gfd-result-reveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Result Card Staggered Section Reveal ────────────────── */
@keyframes gfd-section-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.gfd-result-enter .gfd-result-greeting {
	opacity: 0;
	animation: gfd-section-fade-up 0.4s ease 0.2s forwards;
}

.gfd-result-enter .gfd-result-emoji {
	opacity: 0;
	animation: gfd-section-fade-up 0.4s ease 0.35s forwards;
}

.gfd-result-enter .gfd-result-title {
	opacity: 0;
	animation: gfd-section-fade-up 0.4s ease 0.5s forwards;
}

.gfd-result-enter .gfd-result-description {
	opacity: 0;
	animation: gfd-section-fade-up 0.4s ease 0.65s forwards;
}

.gfd-result-enter .gfd-result-communication {
	opacity: 0;
	animation: gfd-section-fade-up 0.4s ease 0.8s forwards;
}

.gfd-result-enter .gfd-result-strengths {
	opacity: 0;
	animation: gfd-section-fade-up 0.4s ease 0.95s forwards;
}

.gfd-result-enter .gfd-result-tips {
	opacity: 0;
	animation: gfd-section-fade-up 0.4s ease 1.1s forwards;
}

.gfd-result-enter .gfd-share-section {
	opacity: 0;
	animation: gfd-section-fade-up 0.4s ease 1.25s forwards;
}

/* ── Milestone Celebration ───────────────────────────────── */
@keyframes gfd-milestone-burst {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.2);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

.gfd-milestone-badge {
	animation: gfd-milestone-burst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Focus Visible (keyboard users) ──────────────────────── */
.gfd-choice:focus-visible {
	outline: 3px solid var(--gfd-primary, #6C63FF);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(108, 99, 255, 0.2);
}

/* ── Prefers Reduced Motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.gfd-question-enter,
	.gfd-question-exit,
	.gfd-feedback-enter,
	.gfd-feedback-exit,
	.gfd-checkmark-svg .gfd-checkmark-path,
	.gfd-checkmark-svg .gfd-checkmark-circle,
	.gfd-thumbs-up,
	.gfd-text-pop,
	.gfd-star-burst,
	.gfd-celebrate-icon,
	.gfd-confetti-piece,
	.gfd-sparkle,
	.gfd-ripple,
	.gfd-calculating,
	.gfd-spinner-ring,
	.gfd-dots span,
	.gfd-result-enter,
	.gfd-result-enter .gfd-result-greeting,
	.gfd-result-enter .gfd-result-emoji,
	.gfd-result-enter .gfd-result-title,
	.gfd-result-enter .gfd-result-description,
	.gfd-result-enter .gfd-result-communication,
	.gfd-result-enter .gfd-result-strengths,
	.gfd-result-enter .gfd-result-tips,
	.gfd-result-enter .gfd-share-section,
	.gfd-milestone-badge,
	.gfd-choice.gfd-selected {
		animation: none !important;
	}

	.gfd-question-enter,
	.gfd-feedback-enter,
	.gfd-result-enter,
	.gfd-result-enter .gfd-result-greeting,
	.gfd-result-enter .gfd-result-emoji,
	.gfd-result-enter .gfd-result-title,
	.gfd-result-enter .gfd-result-description,
	.gfd-result-enter .gfd-result-communication,
	.gfd-result-enter .gfd-result-strengths,
	.gfd-result-enter .gfd-result-tips,
	.gfd-result-enter .gfd-share-section,
	.gfd-milestone-badge {
		opacity: 1;
		transform: none;
	}

	.gfd-fullscreen-overlay {
		transition: none;
	}

	.gfd-progress-bar,
	.gfd-calculating-bar-fill {
		transition: none;
	}

	.gfd-choice {
		transition: none;
	}

	.gfd-choice .gfd-choice-letter {
		transition: none;
	}
}