/**
 * Tim Scott: animations.
 *
 * The @keyframes the old matched rules used, verbatim from dream.css, kept
 * in one place because two route sheets share them (the home and Meet Tim
 * timelines: routes/home.css, routes/meet-tim.css), plus the dialog
 * entrance that replaces Bootstrap's .modal.fade / .show transitions.
 * Everything stops for reduced motion.
 *
 * Used by:
 * - grow-fade           .timeline--wrapper .timeline__marker::after
 * - scale-fade          .timeline--wrapper .timeline__marker
 * - scale-fade-mobile   .timeline--wrapper .timeline--mobile .timeline__marker
 * - fade-grow           .timeline-nav > .nav-item.active::after (Meet Tim)
 * - fadeIn              .timeline__item.fadeIn (Meet Tim reveal)
 * - tsc-dialog-fade     dialog.modal and its ::backdrop (was .fade, 0.15s linear)
 * - tsc-dialog-drop     dialog.modal .modal-dialog (was translateY(-50px), 0.3s ease-out)
 *
 * @package TSC
 */

@keyframes grow-fade {
	0% {
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	10% {
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	30% {
		width: 150%;
		height: 150%;
		opacity: 0;
	}

	35% {
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	40% {
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	to {
		width: 100%;
		height: 100%;
		opacity: 1;
	}
}

@keyframes scale-fade-mobile {
	0% {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}

	10% {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}

	30% {
		opacity: 0;
		transform: translateY(-50%) scale(1.5);
	}

	35% {
		opacity: 0;
		transform: translateY(-50%) scale(1);
	}

	40% {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}

	to {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

@keyframes scale-fade {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	10% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	30% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1.5);
	}

	35% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}

	40% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes fade-grow {
	0% {
		width: 20px;
		height: 20px;
		opacity: 1;
	}

	10% {
		width: 20px;
		height: 20px;
		opacity: 1;
	}

	30% {
		width: 40px;
		height: 40px;
		opacity: 0;
	}

	35% {
		width: 20px;
		height: 20px;
		opacity: 0;
	}

	40% {
		width: 20px;
		height: 20px;
		opacity: 1;
	}

	to {
		width: 20px;
		height: 20px;
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		top: 70px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

/* ==========================================================================
   Dialogs
   ========================================================================== */

@keyframes tsc-dialog-fade {
	from {
		opacity: 0;
	}
}

@keyframes tsc-dialog-drop {
	from {
		transform: translateY(-50px);
	}
}

dialog.modal[open],
dialog.modal[open]::backdrop {
	animation: tsc-dialog-fade var(--tsc-duration-fade) linear;
}

dialog.modal[open] .modal-dialog {
	animation: tsc-dialog-drop var(--tsc-duration-modal) ease-out;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}