/*
 * animations.css
 * Motion system for calm, tactile interactions.
 * Transform + opacity only.
 */

:root {
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-soft: cubic-bezier(0.2, 0, 0.2, 1);

	--duration-fast: 120ms;
	--duration-medium: 240ms;
	--duration-slow: 420ms;
}

/* Card flip */
.card-flip {
	position: relative;
	width: 100%;
	min-height: 20rem;
	perspective: 1000px;
}

.card-flip-inner {
	position: relative;
	width: 100%;
	min-height: inherit;
	will-change: transform;
	transform-style: preserve-3d;
	transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-slow) var(--ease-standard);
}

.card-flip.is-flipped .card-flip-inner {
	transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.card-flip-front {
	transform: rotateY(0deg);
}

.card-flip-back {
	transform: rotateY(180deg);
}

/* Micro-interactions */
.hover-lift {
    will-change: transform;
	transition: transform var(--duration-fast) var(--ease-soft), opacity var(--duration-fast) var(--ease-soft);
}

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

.press-down {
    will-change: transform;
	transition: transform var(--duration-fast) var(--ease-soft), opacity var(--duration-fast) var(--ease-soft);
}

.press-down:active,
.press-down.is-pressed {
	transform: translateY(1px);
}

/* Fade + slide transitions */
.fade-in {
	animation: fadeInSlide var(--duration-medium) var(--ease-soft) both;
}

.fade-out {
	animation: fadeOutSlide var(--duration-medium) var(--ease-soft) both;
}

@keyframes fadeInSlide {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

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

@keyframes fadeOutSlide {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* Study mode transitions */
.study-enter {
	animation: studyEnter var(--duration-medium) var(--ease-standard) both;
}

.study-header,
.study-controls {
	animation: fadeInSlide var(--duration-medium) var(--ease-soft) both;
}

.study-exit {
	animation: studyExit var(--duration-medium) var(--ease-soft) both;
}

.modal {
	animation: modalIn 250ms var(--ease-standard) both;
}

.toast {
	animation: toastIn 300ms var(--ease-soft) both;
}

.entry-animate .deck-list {
	animation: fadeSlideIn var(--duration-medium) var(--ease-soft) both;
}

.entry-animate .view-body .card {
	animation: cardItemIn var(--duration-medium) var(--ease-soft) both;
}

.app-sidebar,
.sidebar-backdrop {
	transition:
		transform var(--duration-medium) var(--ease-soft),
		opacity var(--duration-medium) var(--ease-soft),
		visibility var(--duration-medium) var(--ease-soft);
}

:root.is-theme-transitioning #app,
:root.is-theme-transitioning #app * {
	transition-property: background-color, color, border-color, box-shadow, fill, stroke;
	transition-duration: 220ms;
	transition-timing-function: var(--ease-soft);
}

@keyframes modalIn {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}

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

@keyframes toastIn {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

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

@keyframes cardItemIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

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

@keyframes fadeSlideIn {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}

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

@keyframes studyEnter {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

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

@keyframes studyExit {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.card-flip-inner,
	.hover-lift,
	.press-down,
	.app-sidebar,
	.sidebar-backdrop,
	.theme-toggle-icon,
	.theme-toggle-icon-stack,
	:root.is-theme-transitioning #app,
	:root.is-theme-transitioning #app * {
		transition-duration: 1ms !important;
	}

	.card-flip.is-flipped .card-flip-inner,
	.hover-lift:hover,
	.hover-lift:focus-visible,
	.press-down:active,
	.press-down.is-pressed {
		transform: none !important;
	}

	.card-flip-front,
	.card-flip-back {
		transition: opacity 1ms linear !important;
	}

	.card-flip .card-flip-front {
		opacity: 1;
	}

	.card-flip .card-flip-back {
		opacity: 0;
	}

	.card-flip.is-flipped .card-flip-front {
		opacity: 0;
	}

	.card-flip.is-flipped .card-flip-back {
		opacity: 1;
	}

	.fade-in,
	.fade-out,
	.study-enter,
	.study-exit,
	.modal,
	.toast {
		animation-duration: 1ms !important;
	}

	@keyframes fadeInSlide {
		from {
			opacity: 0;
			transform: none;
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes fadeOutSlide {
		from {
			opacity: 1;
			transform: none;
		}

		to {
			opacity: 0;
			transform: none;
		}
	}

	@keyframes studyEnter {
		from {
			opacity: 0;
			transform: none;
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes studyExit {
		from {
			opacity: 1;
			transform: none;
		}

		to {
			opacity: 0;
			transform: none;
		}
	}
}