/* assets/css/animations.css */
:root {
	--mz-motion-fast: 160ms;
	--mz-motion-base: 240ms;
	--mz-motion-slow: 420ms;
	--mz-motion-slower: 700ms;
	--mz-ease-standard: cubic-bezier(0.2, 0.72, 0.2, 1);
	--mz-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--mz-ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
	--mz-fade-distance: 18px;
	--mz-scale-subtle: 0.985;
	--mz-scale-card: 1.012;
}

html {
	scroll-behavior: smooth;
}

body.mz-reduce-motion *,
body.mz-reduce-motion *::before,
body.mz-reduce-motion *::after {
	animation: none !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

.mz-transition,
.mz-button,
.mz-card,
.mz-pill,
.mz-badge,
.mz-form-control,
.mz-nav-link,
.mz-panel,
.mz-surface {
	transition:
		background-color var(--mz-motion-base) var(--mz-ease-standard),
		border-color var(--mz-motion-base) var(--mz-ease-standard),
		color var(--mz-motion-fast) var(--mz-ease-standard),
		box-shadow var(--mz-motion-base) var(--mz-ease-soft),
		transform var(--mz-motion-base) var(--mz-ease-soft),
		opacity var(--mz-motion-fast) var(--mz-ease-standard);
}

.mz-hover-lift {
	will-change: transform, box-shadow;
	transition:
		transform var(--mz-motion-base) var(--mz-ease-soft),
		box-shadow var(--mz-motion-base) var(--mz-ease-soft);
}

.mz-hover-lift:hover,
.mz-hover-lift:focus-visible {
	transform: translateY(-3px);
}

.mz-hover-scale {
	will-change: transform;
	transition: transform var(--mz-motion-base) var(--mz-ease-soft);
}

.mz-hover-scale:hover,
.mz-hover-scale:focus-visible {
	transform: scale(var(--mz-scale-card));
}

.mz-fade-in {
	animation: mzFadeIn var(--mz-motion-slow) var(--mz-ease-soft) both;
}

.mz-fade-up {
	animation: mzFadeUp var(--mz-motion-slow) var(--mz-ease-soft) both;
}

.mz-fade-down {
	animation: mzFadeDown var(--mz-motion-slow) var(--mz-ease-soft) both;
}

.mz-fade-left {
	animation: mzFadeLeft var(--mz-motion-slow) var(--mz-ease-soft) both;
}

.mz-fade-right {
	animation: mzFadeRight var(--mz-motion-slow) var(--mz-ease-soft) both;
}

.mz-scale-in {
	animation: mzScaleIn var(--mz-motion-slow) var(--mz-ease-soft) both;
}

.mz-blur-in {
	animation: mzBlurIn var(--mz-motion-slower) var(--mz-ease-soft) both;
}

.mz-pop-in {
	animation: mzPopIn 560ms var(--mz-ease-emphasis) both;
}

.mz-float-soft {
	animation: mzFloatSoft 5.5s ease-in-out infinite;
}

.mz-float-gentle {
	animation: mzFloatGentle 7s ease-in-out infinite;
}

.mz-pulse-soft {
	animation: mzPulseSoft 2.8s ease-in-out infinite;
}

.mz-shimmer {
	position: relative;
	overflow: hidden;
}

.mz-shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-120%);
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.04) 35%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0.04) 65%,
		transparent 100%
	);
	animation: mzShimmer 2.6s linear infinite;
	pointer-events: none;
}

.mz-reveal {
	opacity: 0;
	transform: translateY(var(--mz-fade-distance));
	transition:
		opacity var(--mz-motion-slow) var(--mz-ease-soft),
		transform var(--mz-motion-slow) var(--mz-ease-soft);
}

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

.mz-reveal-left {
	opacity: 0;
	transform: translateX(calc(var(--mz-fade-distance) * -1));
	transition:
		opacity var(--mz-motion-slow) var(--mz-ease-soft),
		transform var(--mz-motion-slow) var(--mz-ease-soft);
}

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

.mz-reveal-right {
	opacity: 0;
	transform: translateX(var(--mz-fade-distance));
	transition:
		opacity var(--mz-motion-slow) var(--mz-ease-soft),
		transform var(--mz-motion-slow) var(--mz-ease-soft);
}

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

.mz-reveal-scale {
	opacity: 0;
	transform: scale(var(--mz-scale-subtle));
	transition:
		opacity var(--mz-motion-slow) var(--mz-ease-soft),
		transform var(--mz-motion-slow) var(--mz-ease-soft);
}

.mz-reveal-scale.is-visible {
	opacity: 1;
	transform: scale(1);
}

.mz-stagger > * {
	opacity: 0;
	transform: translateY(14px);
	animation: mzFadeUp var(--mz-motion-slow) var(--mz-ease-soft) forwards;
}

.mz-stagger > *:nth-child(1) {
	animation-delay: 40ms;
}

.mz-stagger > *:nth-child(2) {
	animation-delay: 90ms;
}

.mz-stagger > *:nth-child(3) {
	animation-delay: 140ms;
}

.mz-stagger > *:nth-child(4) {
	animation-delay: 190ms;
}

.mz-stagger > *:nth-child(5) {
	animation-delay: 240ms;
}

.mz-stagger > *:nth-child(6) {
	animation-delay: 290ms;
}

.mz-stagger > *:nth-child(n + 7) {
	animation-delay: 340ms;
}

.mz-loading-dots {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mz-loading-dots span {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.35;
	animation: mzDotPulse 1.2s ease-in-out infinite;
}

.mz-loading-dots span:nth-child(2) {
	animation-delay: 0.15s;
}

.mz-loading-dots span:nth-child(3) {
	animation-delay: 0.3s;
}

.mz-rotate-slow {
	animation: mzRotateSlow 14s linear infinite;
}

.mz-marquee-mask {
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.mz-marquee-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: mzMarquee 24s linear infinite;
}

.mz-marquee-track:hover {
	animation-play-state: paused;
}

@keyframes mzFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mzFadeUp {
	from {
		opacity: 0;
		transform: translateY(var(--mz-fade-distance));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mzFadeDown {
	from {
		opacity: 0;
		transform: translateY(calc(var(--mz-fade-distance) * -1));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mzFadeLeft {
	from {
		opacity: 0;
		transform: translateX(var(--mz-fade-distance));
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes mzFadeRight {
	from {
		opacity: 0;
		transform: translateX(calc(var(--mz-fade-distance) * -1));
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes mzScaleIn {
	from {
		opacity: 0;
		transform: scale(0.96);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mzBlurIn {
	from {
		opacity: 0;
		filter: blur(10px);
		transform: translateY(10px) scale(0.985);
	}

	to {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0) scale(1);
	}
}

@keyframes mzPopIn {
	0% {
		opacity: 0;
		transform: scale(0.92);
	}

	65% {
		opacity: 1;
		transform: scale(1.03);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mzFloatSoft {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes mzFloatGentle {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	25% {
		transform: translate3d(0, -5px, 0);
	}

	50% {
		transform: translate3d(0, -10px, 0);
	}

	75% {
		transform: translate3d(0, -4px, 0);
	}
}

@keyframes mzPulseSoft {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.02);
		opacity: 0.88;
	}
}

@keyframes mzShimmer {
	to {
		transform: translateX(120%);
	}
}

@keyframes mzDotPulse {
	0%,
	80%,
	100% {
		opacity: 0.3;
		transform: scale(0.9);
	}

	40% {
		opacity: 1;
		transform: scale(1.2);
	}
}

@keyframes mzRotateSlow {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes mzMarquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (hover: hover) and (pointer: fine) {
	.mz-card-hover:hover {
		transform: translateY(-4px);
		box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
	}

	.mz-link-shift {
		transition:
			color var(--mz-motion-fast) var(--mz-ease-standard),
			transform var(--mz-motion-base) var(--mz-ease-soft);
	}

	.mz-link-shift:hover {
		transform: translateX(3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}