@property --transition-delay {
	syntax: "<time>";
	inherits: false;
	initial-value: 0.5s;
}

@property --transition-delay-add {
	syntax: "<time>";
	inherits: false;
	initial-value: 0s;
}

@property --transition-delay-index {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

@property --transition-duration {
	syntax: "<time>";
	inherits: false;
	initial-value: 1s;
}

@property --transition-duration-short {
	syntax: "<time>";
	inherits: false;
	initial-value: 0.6s;
}

@property --transition-gradient-color {
	syntax: "<color>";
	inherits: false;
	initial-value: rgba(0, 0, 0, 1);
}


@property --transition-end-remove-transform {
	syntax: "<integer>";
	inherits: false;
	initial-value: -1;
}

:root
{
	--transition-fade: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
	--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
}

.transition-intro-fade
{
	opacity: 1;
	visibility: visible;
	transition: var(--transition-fade);
	--transition-end-remove-transform:1;

	@starting-style
	{
		opacity: 0;
		visibility: hidden;
	}
}

.transition-intro-fade-transform
{
	opacity: 1;
	visibility: visible;
	transform: scale3d(1,1,1) translate3d(0,0,0);
	transition: var(--transition-fade-tranform);
	--transition-end-remove-transform:1;
	
	@starting-style
	{
		opacity: 0;
		transform: translate3d(0, -100px, 0);
		visibility: hidden;
	}
}

.transition-end-remove-transform
{
	transform: initial !important;
	opacity: initial !important;
}

.site-global-frame-bg {
	opacity: 0;
	visibility: hidden;
	--transition-delay:0s;
	--transition-delay-add:0s;
	--transition-duration:0.85s;
	--transition-fade: opacity var(--transition-duration) var(--ease-out-circ) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
	transition: var(--transition-fade);

	&.show
	{
		opacity: 1;
		visibility: visible;
	}

	@starting-style
	{
		&.show {
			opacity: 0;
			visibility: hidden;
		}
	}
}

.site-global-frame
{
	transform: scale3d(0.8,0.8,0.8) translate3d(0,0,0);
	opacity: 0;
	visibility: hidden;
	--transition-delay:0s;
	--transition-delay-add:0s;
	--transition-duration:0.6s;
	--transition-duration-short:0.5s;
	--transition-fade: transform var(--transition-duration-short) var(--ease-out-back) calc(var(--transition-delay) + var(--transition-delay-add)),opacity var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
	transition: var(--transition-fade);

	&.show
	{
		transform: scale3d(1,1,1) translate3d(0,0,0);
		opacity: 1;
		visibility: visible;
	}

	@starting-style
	{
		&.show {
			transform: scale3d(0.3,0.3,.3) translate3d(0,0,0);

			opacity: 0;
			visibility: hidden;
		}
	}
}