/*
 * ON Lettera: la carta scontornata con dentro il testo, lo scudo nell'intestazione, la firma a
 * pennarello e il timbro posato sulla firma.
 * Prototipo: sito.css 352-361, scene.css 155-158 e 603-607. Mobile first.
 *
 * La carta (0,7265:1) dà la forma minima del foglio: se il testo è più lungo (telefono) il
 * foglio si allunga e la carta lo segue (object-fit: fill), come nel prototipo.
 */

.on-lettera {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: 11% 11% 12% 11.5%;
	aspect-ratio: .7265;
	color: var(--on-ink);
	filter: drop-shadow(0 30px 30px color-mix(in srgb, var(--on-shade) 28%, transparent));
	transform: rotate(-.6deg);
}

/* Senza carta: un foglio bianco */
.on-lettera.is-senza-carta {
	background: var(--on-white);
}

.on-lettera .on-lettera__carta {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: fill;
}

.on-lettera .on-lettera__timbro {
	position: absolute;
	right: 4%;
	bottom: 3%;
	z-index: 3;
	width: 30%;
	max-width: none;
	height: auto;
	opacity: .85;
	transform: rotate(-12deg);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.on-lettera .on-lettera__testo {
	position: relative;
	z-index: 1;
	font-family: var(--on-font-text);
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: var(--on-lh-prose);
}

.on-lettera .on-lettera__corpo > * {
	margin: 0;
}

.on-lettera .on-lettera__corpo > * + * {
	margin-top: 1.1em;
}

.on-lettera .on-lettera__intest {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0 0 28px;
	color: var(--on-ink-2);
	font-family: var(--on-font-cond);
	font-size: 13px;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.on-lettera .on-lettera__scudo {
	flex: none;
	width: 40px;
	height: auto;
}

.on-lettera .on-lettera__firmata {
	margin: 28px 0 0;
}

.on-lettera .on-lettera__firma {
	position: relative;
	z-index: 4;
	display: inline-block;
	color: var(--on-marker-blue);
	font-family: var(--on-font-marker);
	font-size: clamp(22px, 2vw, 30px);
	line-height: 1.2;
	transform: rotate(-2deg);
}

.on-lettera .on-lettera__ruolo {
	display: block;
	margin-top: 6px;
	color: var(--on-ink-2);
	font-family: var(--on-font-cond);
	font-size: 13px;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
}

@media (min-width: 901px) {
	.on-lettera .on-lettera__timbro {
		right: 9%;
		bottom: 7%;
		width: 27%;
	}
}

/*
 * Movimento (solo con html.on-motion e dopo che il JS si è armato): il timbro è nascosto
 * finché non cala. Senza JS, con il movimento ridotto o nell'editor è già posato.
 */
.on-motion .on-lettera.is-armato:not(.is-entrato) .on-lettera__timbro {
	opacity: 0;
}