/* QUATTRO - la hero "Rita": la schermata di Rita (rita.weevo.it) in apertura della home.
   La sfera la disegna rita.js su un canvas; lo sfondo di luce e' quello di Rita, solo CSS, chiuso
   dentro la sezione invece che su tutta la finestra. Tutto sta sotto .weevo-rita. */

.weevo-rita {
	--wr-fondo: #04252a;
	--wr-testo: #ecfafb;
	--wr-tenue: rgb(162 229 234 / 0.72);
	--wr-turchese: #14b2bb;
	--wr-turchese-chiaro: #66d2da;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100svh;
	background: var(--wr-fondo);
	color: var(--wr-testo);
	display: grid;
	align-items: center;
}

/* Lo sfondo di Rita: fasce di luce sfocate che scorrono piano, e un alone che cresce con la voce.
   --rita-x, --rita-y, --rita-voce le scrive la sfera sulla sezione. */
.weevo-rita .wr-sfondo {
	position: absolute;
	inset: -30%;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	transform: translate(calc(var(--rita-x, 0) * -70px), calc(var(--rita-y, 0) * -70px));
	transition: transform 0.3s ease-out;
	background: radial-gradient(calc(18% + var(--rita-voce, 0) * 10%) calc(14% + var(--rita-voce, 0) * 8%) at 50% 50%,
		rgb(40 215 200 / calc(0.12 + var(--rita-voce, 0) * 0.1)), transparent 75%);
}
.weevo-rita .wr-sfondo::before,
.weevo-rita .wr-sfondo::after {
	content: '';
	position: absolute;
	inset: 0;
	filter: blur(36px);
	opacity: calc(0.75 + var(--rita-voce, 0) * 0.12);
	will-change: transform;
}
.weevo-rita .wr-sfondo::before {
	background:
		linear-gradient(112deg, transparent 30%, rgb(40 215 200 / 0.32) 40%, rgb(130 245 170 / 0.12) 45%, transparent 52%),
		linear-gradient(100deg, transparent 58%, rgb(130 245 170 / 0.18) 63%, transparent 69%),
		radial-gradient(38% 30% at 28% 30%, rgb(130 245 170 / 0.18), transparent 70%);
	animation: wr-fascia 14s ease-in-out infinite alternate;
}
.weevo-rita .wr-sfondo::after {
	background:
		linear-gradient(68deg, transparent 48%, rgb(70 175 235 / 0.24) 56%, transparent 64%),
		linear-gradient(140deg, transparent 18%, rgb(165 140 245 / 0.14) 25%, transparent 32%),
		radial-gradient(34% 28% at 72% 72%, rgb(165 140 245 / 0.18), transparent 70%);
	animation: wr-fascia-2 19s ease-in-out -6s infinite alternate;
}
@keyframes wr-fascia {
	0% { transform: translate3d(-12%, -6%, 0) rotate(-8deg) scale(1); }
	50% { transform: translate3d(4%, 5%, 0) rotate(3deg) scale(1.12); }
	100% { transform: translate3d(12%, -2%, 0) rotate(9deg) scale(1.02); }
}
@keyframes wr-fascia-2 {
	0% { transform: translate3d(10%, 8%, 0) rotate(6deg) scale(1.1); }
	50% { transform: translate3d(-6%, -4%, 0) rotate(-5deg) scale(0.98); }
	100% { transform: translate3d(-12%, 6%, 0) rotate(-10deg) scale(1.08); }
}

/* Impaginazione: testi a sinistra e sfera a destra sul computer, uno sotto l'altro sul telefono. */
.weevo-rita .wr-dentro {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(110px, 14vh, 150px) max(20px, env(safe-area-inset-right, 0px)) clamp(80px, 10vh, 110px) max(20px, env(safe-area-inset-left, 0px));
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "testi palco" "comandi palco";
	gap: 20px clamp(24px, 5vw, 80px);
	align-items: center;
}
.weevo-rita .wr-testi { grid-area: testi; display: grid; gap: 18px; align-self: end; }
.weevo-rita .wr-palco { grid-area: palco; position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; }
.weevo-rita .wr-comandi { grid-area: comandi; display: grid; gap: 14px; align-self: start; justify-items: start; }

.weevo-rita .wr-etichetta {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wr-turchese-chiaro);
}
.weevo-rita .wr-titolo {
	margin: 0;
	font-size: clamp(2.8rem, 6.4vw, 5.6rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--wr-testo);
	text-wrap: balance;
}
.weevo-rita .wr-testo { margin: 0; max-width: 34ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--wr-tenue); }

.weevo-rita .wr-sfera { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; border-radius: 50%; }
.weevo-rita .wr-sfera:focus-visible { outline: 2px solid var(--wr-turchese-chiaro); outline-offset: 6px; }

.weevo-rita .wr-pulsanti { display: flex; flex-wrap: wrap; gap: 12px; }
.weevo-rita .wr-pulsanti button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.95em 1.5em;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.weevo-rita .wr-pulsanti svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.weevo-rita .wr-parla { background: var(--wr-turchese); color: #04282c; }
.weevo-rita .wr-parla:hover { transform: translateY(-2px); background: var(--wr-turchese-chiaro); }
.weevo-rita .wr-parla[aria-pressed="true"] { background: #ecfafb; }
.weevo-rita .wr-parla:disabled { opacity: 0.6; cursor: progress; transform: none; }
.weevo-rita .wr-chiudi { background: rgb(248 113 113 / 0.15); color: #fca5a5; }
.weevo-rita .wr-chiudi:hover { background: rgb(248 113 113 / 0.28); }
.weevo-rita .wr-pulsanti button:focus-visible { outline: 2px solid var(--wr-turchese-chiaro); outline-offset: 3px; }

.weevo-rita .wr-stato { margin: 0; min-height: 1.4em; font-size: 0.95rem; color: var(--wr-turchese-chiaro); }
.weevo-rita .wr-stato a { color: inherit; }
.weevo-rita .wr-sottotitolo { margin: 0; min-height: 0; max-width: 46ch; font-size: 1.05rem; line-height: 1.45; color: var(--wr-testo); }
.weevo-rita .wr-sottotitolo:empty { display: none; }
.weevo-rita .wr-sottotitolo b { color: var(--wr-turchese-chiaro); font-weight: 600; }
.weevo-rita .wr-nota { margin: 0; max-width: 52ch; font-size: 0.8rem; line-height: 1.5; color: rgb(162 229 234 / 0.55); }
.weevo-rita .wr-nota a { color: inherit; }

.weevo-rita .wr-scorri {
	position: absolute;
	left: 50%;
	bottom: max(18px, env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	margin: 0;
	display: grid;
	justify-items: center;
	gap: 8px;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(162 229 234 / 0.5);
}
.weevo-rita .wr-scorri span { width: 1px; height: 34px; background: linear-gradient(rgb(162 229 234 / 0), rgb(162 229 234 / 0.6)); animation: wr-scorri 2.2s ease-in-out infinite; }
@keyframes wr-scorri { 0%, 100% { transform: scaleY(0.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }

.weevo-rita [hidden] { display: none !important; }

/* In conversazione la sfera e' il centro: i testi si fanno da parte. */
.weevo-rita.in-linea .wr-testo { opacity: 0.45; }

@media (max-width: 900px) {
	.weevo-rita .wr-dentro {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "testi" "palco" "comandi";
		padding-top: 104px;
		padding-bottom: 90px;
		text-align: center;
	}
	.weevo-rita .wr-testi, .weevo-rita .wr-comandi { justify-items: center; }
	.weevo-rita .wr-testo, .weevo-rita .wr-sottotitolo, .weevo-rita .wr-nota { margin-inline: auto; }
	.weevo-rita .wr-palco { max-width: min(78vw, 380px); }
	.weevo-rita .wr-pulsanti { justify-content: center; }
	.weevo-rita .wr-scorri { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.weevo-rita .wr-sfondo::before,
	.weevo-rita .wr-sfondo::after,
	.weevo-rita .wr-scorri span { animation: none; }
	.weevo-rita .wr-pulsanti button { transition: none; }
}