/* Animation */

@keyframes fade-in {
    0% {
		opacity:0;
	}
    100% {
		opacity:1;
	}
}


.order-in > * {
	transition: 1s;
}
.order-in-fast > * {
	transition: var(--transition);
}
:is(.order-in, .order-in-fast) > * {
	opacity:0;
}
:is(.order-in, .order-in-fast) > *.visible {
	opacity:1;
}

.slide-in {
	transition: var(--transition);
	opacity:0;
}
.slide-in.slide-left {
	translate: -40px;
}
.slide-in.slide-left.visible {
	translate: 0;
	opacity:1;
}
.slide-in.slide-right {
	translate: 40px;
}
.slide-in.slide-right.visible {
	translate: 0;
	opacity:1;
}
.slide-in.slide-up {
	transform: translateY(40px);
}
.slide-in.slide-up.visible {
	transform: translateY(0);
	opacity:1;
}
.slide-in.slide-down {
	transform: translateY(-40px);
}
.slide-in.slide-down.visible {
	transform: translateY(0);
	opacity:1;
}

.fade-in {
	opacity:0;
	transition: var(--transition);
}
.fade-in.visible {
	opacity:1;
}

.pop-in {
	opacity:0;
	transition: var(--transition);
}
.pop-in.visible {
	animation:pop-in 0.2s ease 0s forwards;
}

.wipe-in {
	transition: 1s;
	opacity:.3;
}
.wipe-in.visible {
	opacity:1;
}
.wipe-center {
	clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
}
.wipe-center.visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.wipe-top {
	clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0);
}
.wipe-top.visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}


/* Dialog */
main dialog {
	position:fixed;
	top:50%;
	left:50%;
	translate: -50% calc(-50% - 30px);
	border:none;
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	width:800px;
	max-width:calc(100vw - 20px);
    max-height:80dvh;
    overflow-y: auto;
	padding:var(--padding);
	z-index:10;
	zoom:1;
}


/* Parallax */
.parallax {
	position:absolute;
}


@keyframes pop-in {
    0% {
		scale: 0.6;
		opacity: 0;
    }
	20% {
		scale: 1;
		opacity: 1;
	}
	60% {
		scale: 1.3;
		opacity: 1;
	}
    100% {
		scale: 1;
        opacity: 1;
    }
}