/**
 * Hayder Voice — Keyframes & @starting-style
 */

@layer components {

	/* ============================================================
	 * KEYFRAMES
	 * ============================================================ */

	@keyframes fade-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	@keyframes fade-up {
		from { opacity: 0; transform: translateY(24px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	@keyframes fade-down {
		from { opacity: 0; transform: translateY(-16px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	@keyframes slide-in-left {
		from { opacity: 0; transform: translateX(-32px); }
		to   { opacity: 1; transform: translateX(0); }
	}

	@keyframes slide-in-right {
		from { opacity: 0; transform: translateX(32px); }
		to   { opacity: 1; transform: translateX(0); }
	}

	@keyframes scale-in {
		from { opacity: 0; transform: scale(0.92); }
		to   { opacity: 1; transform: scale(1); }
	}

	@keyframes clip-reveal {
		from { clip-path: inset(0 100% 0 0); }
		to   { clip-path: inset(0 0% 0 0); }
	}

	@keyframes marquee-ltr {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}

	@keyframes marquee-rtl {
		from { transform: translateX(-50%); }
		to   { transform: translateX(0); }
	}

	@keyframes pulse-line {
		0%, 100% { transform: scaleX(0.3); opacity: 0.2; }
		50%       { transform: scaleX(1);   opacity: 0.8; }
	}

	@keyframes loader-progress {
		0%   { transform: scaleX(0); }
		60%  { transform: scaleX(0.8); }
		100% { transform: scaleX(1); }
	}

	@keyframes spin {
		from { transform: rotate(0deg); }
		to   { transform: rotate(360deg); }
	}

	@keyframes heartbeat {
		0%, 100% { transform: scale(1); }
		14%      { transform: scale(1.15); }
		28%      { transform: scale(1); }
		42%      { transform: scale(1.15); }
		70%      { transform: scale(1); }
	}

	@keyframes reading-progress-fill {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}

	@keyframes grain-shift {
		0%, 100% { transform: translate(0, 0); }
		10%  { transform: translate(-2%, -3%); }
		20%  { transform: translate(3%, 1%); }
		30%  { transform: translate(-1%, 4%); }
		40%  { transform: translate(4%, -2%); }
		50%  { transform: translate(-3%, 2%); }
		60%  { transform: translate(2%, -4%); }
		70%  { transform: translate(-4%, 1%); }
		80%  { transform: translate(1%, 3%); }
		90%  { transform: translate(-2%, -1%); }
	}

	@keyframes text-reveal {
		from {
			opacity: 0;
			transform: translateY(100%);
			clip-path: inset(0 0 100% 0);
		}
		to {
			opacity: 1;
			transform: translateY(0);
			clip-path: inset(0 0 0% 0);
		}
	}

	@keyframes border-glow {
		0%, 100% { border-color: var(--c-amber-border); }
		50%      { border-color: var(--c-amber); }
	}

	/* ============================================================
	 * @starting-style — Dialog & Dropdown entrance
	 * ============================================================ */

	/* Dialog entrance */
	dialog {
		transition:
			opacity var(--duration-base) var(--ease-out-expo),
			transform var(--duration-slow) var(--ease-spring),
			overlay var(--duration-base) allow-discrete,
			display  var(--duration-base) allow-discrete;
	}

	dialog[open] {
		opacity: 1;
		transform: none;
	}

	@starting-style {
		dialog[open] {
			opacity: 0;
			transform: translateY(-16px) scale(0.98);
		}
	}

	dialog:not([open]) {
		opacity: 0;
		transform: translateY(-8px);
	}

	/* Dropdown entrance */
	.dropdown-panel {
		transition:
			opacity var(--duration-fast) var(--ease-out-expo),
			transform var(--duration-base) var(--ease-spring),
			display var(--duration-fast) allow-discrete;
	}

	@starting-style {
		.nav-item--has-dropdown:hover .dropdown-panel,
		.nav-item--has-dropdown:focus-within .dropdown-panel {
			opacity: 0;
			transform: translateY(-8px) scale(0.97);
		}
	}

	/* Mobile menu entrance */
	.mobile-menu {
		transition:
			opacity var(--duration-base) var(--ease-smooth),
			transform var(--duration-slow) var(--ease-spring);
	}

} /* @layer components */