/* Typetura v4.1.3 */

@layer typetura {
	@property --property {
		syntax: "<integer>";
		initial-value: 1;
		inherits: false;
	}
	@property --container {
		syntax: "<length>";
		initial-value: 100vi;
		inherits: false;
	}
	@property --from {
		syntax: "<length>";
		initial-value: 0px;
		inherits: true;
	}
	@property --to {
		syntax: "<length>";
		initial-value: 0px;
		inherits: true;
	}

	* {
		/* Toggle Typetura styles with `--tt: var(--on)` */
		--tt: 0;
		--on: unset;

		/* Use cqi when avalible, if not use vi. */
		--container: var(--tt, 100cqi);

		animation-delay: var(--tt,calc(-1s * (var(--container) - var(--from)) / (var(--to) - var(--from))));
		animation-duration: var(--tt,calc(1s * var(--property)));
		animation-iteration-count: var(--tt,1);
		animation-fill-mode: var(--tt,both);
		animation-play-state: var(--tt,paused);
	}

	/* Fallback if a browser doesn’t support unit division */
	@supports not (width: calc(1% / 1px * 1px)) {
		* {
			--CONTAINER: calc(tan(atan2(var(--container,100vi),1px)));
			--FROM: calc(tan(atan2(var(--from,0rem),1px)));
			--TO: calc(tan(atan2(var(--to,60rem),1px)));
			animation-delay: var(--tt,calc(-1s * var(--property) * (var(--CONTAINER) - var(--FROM)) / (var(--TO) - var(--FROM))));
		}
	}
	
	/* Utility classes */
	.tt,
	.rtt,
	.typetura,
	html {
		--tt: var(--on);
	}
	:where(html) {
		--from: 0rem;
		--to: 60rem;	
	}
	:where(.rtt) {
		--container: 100vi;
	}
	:where(.cq) {
		container-type: inline-size;
	}
}