/*
 * Workstrust approved FV motion.
 * Document Volume reproduces the exact minimal/heavy animation approved in
 * story-motion review v3 (SHA e99fc5650ede...).
 */

.wt2 .wt-hero-conversation {
	position: relative;
	aspect-ratio: 3 / 2;
	margin: 0;
	overflow: hidden;
	isolation: isolate;
	filter: drop-shadow(0 24px 46px rgba(23, 58, 82, .15));
}

.wt2 .wt-hero-conversation img,
.wt2 .wt-hero-conversation canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

.wt2 .wt-hero-conversation__original { z-index: 20; opacity: 1; }
.wt2 .wt-hero-conversation__motion { position: absolute; inset: 0; z-index: 10; opacity: 0; }
.wt2 .wt-hero-conversation.is-motion-ready .wt-hero-conversation__original { opacity: 0; }
.wt2 .wt-hero-conversation.is-motion-ready .wt-hero-conversation__motion { opacity: 1; }
.wt2 .wt-hero-conversation__source { display: none !important; }
.wt2 .wt-hero-conversation__part--woman-head { transform-origin: 45.8% 41%; }
.wt2 .wt-hero-conversation__part--man-head { transform-origin: 65.8% 40.5%; }
.wt2 .wt-hero-conversation__part--writing-forearm { transform-origin: 58.6% 50.8%; }
.wt2 .wt-hero-conversation.is-motion-ready .wt-hero-conversation__part--writing-forearm { animation: wtApprovedHeroWriting 4s ease-in-out infinite both; }
.wt2 .wt-hero-conversation.is-motion-ready .wt-hero-conversation__part--woman-head { animation: wtApprovedHeroWoman 4s ease-in-out infinite both; }
.wt2 .wt-hero-conversation.is-motion-ready .wt-hero-conversation__part--man-head { animation: wtApprovedHeroMan 4s ease-in-out infinite both; }

@keyframes wtApprovedHeroWriting {
	0%, 12%, 64%, 100% { transform: rotate(0); }
	24% { transform: rotate(-7deg); }
	34% { transform: rotate(6.5deg); }
	44% { transform: rotate(-6.5deg); }
	54% { transform: rotate(5.5deg); }
}

@keyframes wtApprovedHeroWoman {
	0%, 12%, 62%, 100% { transform: rotate(0); }
	22% { transform: rotate(-1.8deg); }
	32% { transform: rotate(1.2deg); }
	42% { transform: rotate(-1.5deg); }
	52% { transform: rotate(1deg); }
}

@keyframes wtApprovedHeroMan {
	0%, 18%, 68%, 100% { transform: rotate(0); }
	28% { transform: rotate(1.8deg); }
	38% { transform: rotate(-1.2deg); }
	48% { transform: rotate(1.5deg); }
	58% { transform: rotate(-1deg); }
}

.wt2 .wt-docs-approved-v3 {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	isolation: isolate;
}

.wt2 .docs__side .wt-docs-approved-v3__art {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	object-fit: contain;
}

.wt2 .wt-docs-approved-v3__fx {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
}

.wt2 .wt-docs-approved-v3__paper {
	background: #fffefa;
	box-shadow: 0 5px 12px rgba(6, 63, 113, .14);
	aspect-ratio: .72;
}

.wt2 .wt-docs-approved-v3__paper::before,
.wt2 .wt-docs-approved-v3__paper::after {
	content: "";
	position: absolute;
	left: 17%;
	right: 17%;
	height: 5%;
	border-radius: 2px;
	background: #9fc9dd;
}

.wt2 .wt-docs-approved-v3__paper::before { top: 27%; }
.wt2 .wt-docs-approved-v3__paper::after { top: 47%; }

.wt2 .wt-docs-approved-v3--minimal .wt-docs-approved-v3__paper {
	left: 42%;
	top: 33%;
	width: 10%;
	border: 2px solid #b8d5e4;
	border-radius: 3px;
	animation: fileCalm 7s cubic-bezier(.2, .8, .2, 1) infinite;
}

.wt2 .wt-docs-approved-v3__check {
	left: 75%;
	top: 59%;
	width: 3.5%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #ff775f;
	animation: confirmPop 7s ease-out infinite;
}

.wt2 .wt-docs-approved-v3__check::after {
	content: "";
	position: absolute;
	width: 45%;
	height: 23%;
	left: 24%;
	top: 28%;
	border-left: 3px solid #fff;
	border-bottom: 3px solid #fff;
	transform: rotate(-45deg);
}

@keyframes fileCalm {
	0%, 12% { opacity: 0; transform: translateY(-125%) rotate(-2deg); }
	19% { opacity: 1; }
	39%, 58% { opacity: 1; transform: translateY(35%) rotate(0); }
	64%, 100% { opacity: 0; transform: translateY(35%); }
}

@keyframes confirmPop {
	0%, 47% { opacity: 0; transform: scale(.2); }
	54% { opacity: 1; transform: scale(1.2); }
	61%, 76% { opacity: 1; transform: scale(1); }
	83%, 100% { opacity: 0; }
}

.wt2 .wt-docs-approved-v3--heavy .wt-docs-approved-v3__paper {
	top: -18%;
	width: 9%;
	border: 2px solid #b8d5e4;
	border-radius: 3px;
	animation: paperRain 6.6s cubic-bezier(.25, .55, .5, 1) infinite;
	animation-delay: var(--d);
}

.wt2 .wt-docs-approved-v3--heavy .wt-docs-approved-v3__paper--1 { left: 18%; --x: 120%; --r: 18deg; --d: 0s; }
.wt2 .wt-docs-approved-v3--heavy .wt-docs-approved-v3__paper--2 { left: 42%; --x: -35%; --r: -16deg; --d: .55s; }
.wt2 .wt-docs-approved-v3--heavy .wt-docs-approved-v3__paper--3 { left: 67%; --x: 70%; --r: 24deg; --d: 1.1s; }
.wt2 .wt-docs-approved-v3--heavy .wt-docs-approved-v3__paper--4 { left: 80%; --x: -55%; --r: -18deg; --d: 1.65s; }

@keyframes paperRain {
	0%, 9% { opacity: 0; transform: translate(0, -40%) rotate(0); }
	15% { opacity: 1; }
	52% { opacity: 1; transform: translate(var(--x), 610%) rotate(var(--r)); }
	58%, 100% { opacity: 0; transform: translate(var(--x), 610%) rotate(var(--r)); }
}

@media (prefers-reduced-motion: reduce) {
	.wt2 .wt-hero-conversation__original { opacity: 1 !important; }
	.wt2 .wt-hero-conversation__motion { display: none !important; }
	.wt2 .wt-docs-approved-v3__fx { display: none !important; }
}
