/*
 * Carlo Parente — Landing animata
 * Tutto è sotto #cp-site: il tema intorno non viene toccato.
 */

@property --cp-bg { syntax: '<color>'; inherits: true; initial-value: #EFEBF7; }
@property --cp-fg { syntax: '<color>'; inherits: true; initial-value: #1C1433; }

/* Lenis (scorrimento morbido) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Pagina intera */
body.cpl-canvas { margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #EFEBF7; }

/* Il pulsante "torna su" del tema: la landing ha il suo nel footer */
body.cpl-canvas :is(#scroll-to-top, #ast-scroll-top, .generate-back-to-top, .ct-back-to-top) { display: none !important; }
body:has(#cp-site) :is(#scroll-to-top, #ast-scroll-top, .generate-back-to-top, .ct-back-to-top) { display: none !important; }

/* ------------------------------------------------------------------ */
/* Base e protezione dal tema                                          */
/* ------------------------------------------------------------------ */

#cp-site {
	--cp-u: max(16px, 1rem);
	--cp-ink: #1C1433;
	--cp-paper: #EFEBF7;
	--cp-lilac: #B8A6F4;
	--cp-violet: #6E5BD8;
	--cp-peach: #FF9B70;
	--cp-saffron: #F3B941;
	--cp-white: #FCFBFF;
	--cp-mute: #B7AECF;
	--cp-bg: #EFEBF7;
	--cp-fg: #1C1433;
	--cp-font: "Recursive", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cp-fv: "MONO" 0, "CASL" 0, "CRSV" 0.5;
	--cp-fv-display: "MONO" 0, "CASL" 0.85, "CRSV" 0.5;
	--cp-fv-hand: "MONO" 0, "CASL" 1, "CRSV" 1, "slnt" -12;
	--cp-fv-mono: "MONO" 1, "CASL" 0, "CRSV" 0;
	--cp-ease: cubic-bezier(.22, 1, .36, 1);
	--cp-ease-io: cubic-bezier(.76, 0, .24, 1);
	--cp-back: cubic-bezier(.34, 1.56, .64, 1);
	--cp-pad: clamp(20px, 5vw, 72px);
	--cp-top-h: 72px;
	--cp-fs-h1: clamp(calc(var(--cp-u) * 2.25), calc(var(--cp-u) * .5 + 7vw), calc(var(--cp-u) * 4.6));
	--cp-fs-h2: clamp(calc(var(--cp-u) * 2.2), calc(var(--cp-u) + 4vw), calc(var(--cp-u) * 4.8));
	--cp-fs-h3: clamp(calc(var(--cp-u) * 1.8), calc(var(--cp-u) + 2.6vw), calc(var(--cp-u) * 3.4));
	--cp-fs-contact: clamp(calc(var(--cp-u) * 2.6), calc(var(--cp-u) + 6vw), calc(var(--cp-u) * 7));
	--cp-fs-mail: clamp(calc(var(--cp-u) * 1.3), calc(var(--cp-u) * .6 + 3.6vw), calc(var(--cp-u) * 3.6));
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	background-color: var(--cp-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .08 0 0 0 0 .2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
	color: var(--cp-fg);
	font-family: var(--cp-font);
	font-size: calc(var(--cp-u) * 1.0625);
	font-weight: 420;
	font-style: normal;
	font-variation-settings: var(--cp-fv);
	line-height: 1.55;
	letter-spacing: 0;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	transition: --cp-bg .8s var(--cp-ease), --cp-fg .8s var(--cp-ease);
}

#cp-site,
#cp-site *,
#cp-site *::before,
#cp-site *::after { box-sizing: border-box; }

#cp-site :where(h1, h2, h3, p, ol, ul, li, figure, button) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-shadow: none;
	list-style: none;
}

#cp-site a { color: inherit; text-decoration: none; box-shadow: none; background-image: none; border: 0; }
#cp-site img { max-width: 100%; border: 0; box-shadow: none; }
#cp-site :focus-visible { outline: 3px solid var(--cp-fg); outline-offset: 3px; }
#cp-site [tabindex="-1"]:focus { outline: none; }

#cp-site.cp--canvas { min-height: 100vh; }
#cp-site.cp--embed {
	width: var(--cp-vw, 100vw);
	max-width: none;
	margin: 0 0 0 calc(50% - var(--cp-vw, 100vw) / 2);
}

#cp-site .cp-main { display: block; outline: none; }

#cp-site .cp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

#cp-site .cp-skip {
	position: fixed;
	left: 16px;
	top: -120px;
	z-index: 10000;
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--cp-ink);
	color: var(--cp-paper);
	font-weight: 650;
}
#cp-site .cp-skip:focus { top: 16px; }

/* Sezioni: senza JS ognuna ha il suo colore, con JS il colore lo dà la radice. */
#cp-site [data-cp-theme] { position: relative; }
#cp-site:not(.cp-js) [data-cp-theme] {
	background: var(--sbg);
	color: var(--sfg);
	--cp-bg: var(--sbg);
	--cp-fg: var(--sfg);
}

/* ------------------------------------------------------------------ */
/* Elementi comuni                                                     */
/* ------------------------------------------------------------------ */

#cp-site .cp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: calc(var(--cp-u) * .78);
	font-weight: 560;
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
}
#cp-site .cp-eyebrow::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dot, var(--cp-peach));
}

#cp-site .cp-section-title {
	margin-top: 18px;
	font-size: var(--cp-fs-h2);
	font-weight: 820;
	font-variation-settings: var(--cp-fv-display);
	line-height: 1.02;
	letter-spacing: -.025em;
	text-wrap: balance;
}

#cp-site .cp-link {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: .2em;
	transition: color .25s;
}
#cp-site .cp-link:hover { color: var(--cp-peach); }

#cp-site .cp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 52px;
	padding: 0 26px;
	border: 2px solid var(--cp-fg);
	border-radius: 999px;
	font-family: var(--cp-font);
	font-size: var(--cp-u);
	font-weight: 650;
	font-variation-settings: var(--cp-fv);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .4s var(--cp-ease), background-color .3s, border-color .3s, color .3s, box-shadow .4s var(--cp-ease);
}
#cp-site .cp-btn--solid { background: var(--cp-fg); color: var(--cp-bg); }
#cp-site .cp-btn--ghost { background: transparent; color: var(--cp-fg); }
#cp-site .cp-btn--sm { min-height: 40px; padding: 0 18px; font-size: calc(var(--cp-u) * .92); }
#cp-site .cp-btn:active { transform: translateY(1px) scale(.98); }

@media (hover: hover) {
	#cp-site .cp-btn--solid:hover {
		background: var(--cp-peach);
		border-color: var(--cp-peach);
		color: var(--cp-ink);
		transform: translateY(-3px);
		box-shadow: 0 10px 0 -4px var(--cp-fg);
	}
	#cp-site .cp-btn--ghost:hover { background: var(--cp-fg); color: var(--cp-bg); transform: translateY(-3px); }
}

/* ------------------------------------------------------------------ */
/* Sipario d'ingresso                                                  */
/* ------------------------------------------------------------------ */

#cp-site .cp-curtain { display: none; }
#cp-site.cp-intro .cp-curtain {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}
#cp-site .cp-curtain__trail,
#cp-site .cp-curtain__panel { position: absolute; inset: 0; }
#cp-site .cp-curtain__trail {
	background: var(--cp-peach);
	animation: cp-curtain-up .9s var(--cp-ease-io) .82s forwards;
}
#cp-site .cp-curtain__panel {
	display: grid;
	place-items: center;
	background: var(--cp-ink);
	color: var(--cp-paper);
	animation: cp-curtain-up .9s var(--cp-ease-io) .7s forwards;
}
#cp-site .cp-curtain__name {
	font-size: clamp(calc(var(--cp-u) * 2), 7vw, calc(var(--cp-u) * 5.5));
	font-weight: 850;
	font-variation-settings: var(--cp-fv-display);
	letter-spacing: -.03em;
	animation: cp-curtain-name 1.2s var(--cp-ease) both;
}

@keyframes cp-curtain-up { to { transform: translateY(-101%); } }
@keyframes cp-curtain-name {
	0% { opacity: 0; transform: translateY(40%); clip-path: inset(0 0 100% 0); }
	45% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
	100% { opacity: 1; transform: translateY(-30%); }
}

/* ------------------------------------------------------------------ */
/* Barra in alto                                                       */
/* ------------------------------------------------------------------ */

#cp-site .cp-topbar {
	position: relative;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--cp-top-h);
	margin-bottom: calc(var(--cp-top-h) * -1);
	padding: 0 var(--cp-pad);
	transition: transform .5s var(--cp-ease), background-color .4s, box-shadow .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s;
}
#cp-site.cp-js .cp-topbar { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); }
#cp-site .cp-topbar.is-scrolled {
	background-color: rgba(239, 235, 247, .8);
	background-color: color-mix(in srgb, var(--cp-bg) 72%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--cp-fg) 10%, transparent);
}
#cp-site .cp-topbar.is-hidden { transform: translateY(-110%); }

#cp-site .cp-brand {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-size: calc(var(--cp-u) * 1.12);
	font-weight: 780;
	font-variation-settings: var(--cp-fv-display);
	letter-spacing: -.01em;
	white-space: nowrap;
}
#cp-site .cp-brand__mark {
	display: block;
	flex: none;
	width: 1.4em;
	height: 1.4em;
	transition: transform .5s var(--cp-back);
}
#cp-site .cp-brand:hover .cp-brand__mark { transform: rotate(-8deg) scale(1.08); }

#cp-site .cp-topbar__nav ul { display: flex; gap: clamp(18px, 2.4vw, 34px); }
#cp-site .cp-topbar__nav a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-size: calc(var(--cp-u) * .95);
	font-weight: 520;
}
#cp-site .cp-topbar__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--cp-ease);
}
#cp-site .cp-topbar__nav a:hover::after,
#cp-site .cp-topbar__nav a.is-current::after { transform: scaleX(1); transform-origin: left; }

#cp-site .cp-topbar__end { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 14px); }

/* Selettore della lingua: la sigla apre l'elenco. */
#cp-site .cp-lang { position: relative; }
#cp-site .cp-lang__btn {
	display: block;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: none;
	font-size: calc(var(--cp-u) * .78);
	font-weight: 620;
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .08em;
	line-height: 40px;
	white-space: nowrap;
	list-style: none;
	cursor: pointer;
	transition: background-color .25s;
}
#cp-site .cp-lang__btn::-webkit-details-marker { display: none; }
#cp-site .cp-lang__btn::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 3px 7px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	vertical-align: middle;
	transform: rotate(45deg);
	transition: transform .3s var(--cp-ease);
}
#cp-site .cp-lang[open] > .cp-lang__btn { background: color-mix(in srgb, var(--cp-fg) 10%, transparent); }
#cp-site .cp-lang[open] > .cp-lang__btn::after { transform: translateY(3px) rotate(225deg); }

/* Senza script l'elenco si chiude toccando fuori: il resto della pagina fa da pulsante. */
#cp-site:not(.cp-js) .cp-lang[open] > .cp-lang__btn::before {
	content: "";
	position: fixed;
	inset: 0;
	cursor: default;
}

#cp-site .cp-lang__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 2;
	min-width: 168px;
	padding: 6px;
	border: 2px solid var(--cp-fg);
	border-radius: 16px;
	background: var(--cp-bg);
	color: var(--cp-fg);
	box-shadow: 0 28px 60px -28px rgb(0 0 0 / .6);
}
#cp-site .cp-lang[open] > .cp-lang__list { animation: cp-lang-in .28s var(--cp-ease) both; }
#cp-site .cp-lang__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: calc(var(--cp-u) * .95);
	font-weight: 520;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color .25s;
}
#cp-site .cp-lang__list a[aria-current] { font-weight: 700; }
#cp-site .cp-lang__list a[aria-current]::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cp-peach);
}
#cp-site .cp-lang__list a:focus-visible { outline-offset: -3px; }

@keyframes cp-lang-in { from { opacity: 0; transform: translateY(-6px); } }

@media (hover: hover) {
	#cp-site .cp-lang__btn:hover { background: color-mix(in srgb, var(--cp-fg) 10%, transparent); }
	#cp-site .cp-lang__list a:hover { background: color-mix(in srgb, var(--cp-fg) 8%, transparent); }
}

@media (max-width: 859px) {
	#cp-site .cp-topbar__nav { display: none; }
}

/* Sugli schermi stretti la barra si stringe; con il selettore, sotto i 360px del marchio resta solo il simbolo. */
@media (max-width: 389px) {
	#cp-site .cp-topbar { gap: 12px; }
}
@media (min-width: 360px) and (max-width: 389px) {
	#cp-site .cp-topbar:has(.cp-lang) .cp-brand { font-size: calc(var(--cp-u) * 1.02); }
	#cp-site .cp-topbar:has(.cp-lang) .cp-btn--sm { padding: 0 14px; }
}
@media (max-width: 359px) {
	#cp-site .cp-topbar:has(.cp-lang) .cp-brand__name {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	#cp-site .cp-topbar:has(.cp-lang) .cp-brand__mark { width: 2em; height: 2em; }
	#cp-site .cp-lang__list { right: auto; left: 0; }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

#cp-site .cp-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--cp-top-h) + 28px) var(--cp-pad) 88px;
}
#cp-site .cp-hero__text { position: relative; z-index: 2; }
#cp-site .cp-hero__title {
	margin-top: 22px;
	font-size: var(--cp-fs-h1);
	font-weight: 840;
	font-variation-settings: var(--cp-fv-display);
	line-height: .98;
	letter-spacing: -.035em;
}
#cp-site .cp-line {
	display: block;
	overflow: hidden;
	padding: 0 .08em .08em 0;
	margin-bottom: -.08em;
}
#cp-site .cp-line > span { display: block; }
#cp-site .cp-line:nth-child(3) > span {
	color: var(--cp-violet);
	font-variation-settings: var(--cp-fv-hand);
	letter-spacing: -.02em;
}
#cp-site .cp-hero__lead {
	max-width: 36ch;
	margin-top: 26px;
	font-size: calc(var(--cp-u) * 1.15);
	line-height: 1.5;
	opacity: .86;
}
#cp-site .cp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

#cp-site .cp-hero__art {
	position: relative;
	width: 100%;
	max-width: 460px;
	justify-self: center;
}
#cp-site .cp-hero__svg { display: block; width: 100%; height: auto; overflow: visible; }

#cp-site .cp-hero__scroll {
	position: absolute;
	left: var(--cp-pad);
	bottom: 28px;
	display: none;
	align-items: center;
	gap: 12px;
	font-size: calc(var(--cp-u) * .72);
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .7;
}
#cp-site .cp-hero__scroll i {
	position: relative;
	display: block;
	width: 2px;
	height: 38px;
	border-radius: 2px;
	overflow: hidden;
	background: color-mix(in srgb, currentColor 22%, transparent);
}
#cp-site .cp-hero__scroll i::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 12px;
	border-radius: 2px;
	background: currentColor;
	animation: cp-scroll-hint 1.8s var(--cp-ease-io) infinite;
}
@keyframes cp-scroll-hint {
	0% { transform: translateY(-14px); }
	100% { transform: translateY(40px); }
}

@media (min-width: 960px) {
	#cp-site .cp-hero {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: clamp(32px, 4vw, 72px);
	}
	#cp-site .cp-hero__title { font-size: clamp(calc(var(--cp-u) * 3.2), 5.4vw, calc(var(--cp-u) * 6.4)); }
	#cp-site .cp-hero__art { max-width: min(640px, calc(100svh - 190px)); }
	#cp-site .cp-hero__scroll { display: flex; }
}

/* Illustrazione del hero */
#cp-site .cp-t,
#cp-site .cp-tf { transform-box: fill-box; transform-origin: 50% 100%; }
#cp-site .cp-tf { transform-origin: 50% 50%; }
#cp-site .cp-curve-path {
	fill: none;
	stroke: var(--cp-ink);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
#cp-site .cp-hline { fill: none; stroke: var(--cp-violet); stroke-width: 2; stroke-dasharray: 6 6; }
#cp-site .cp-handle { fill: var(--cp-white); stroke: var(--cp-violet); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
#cp-site .cp-anchor { fill: var(--cp-white); stroke: var(--cp-ink); stroke-width: 3; transform-box: fill-box; transform-origin: center; }

/* Ingresso (solo con movimento) */
#cp-site.cp-js.cp-motion:not(.cp-loaded) .cp-line > span { transform: translateY(108%); }
#cp-site.cp-js.cp-motion:not(.cp-loaded) .cp-hero [data-cp-fade] { opacity: 0; transform: translateY(18px); }
#cp-site.cp-js.cp-motion:not(.cp-loaded) .cp-t { opacity: 0; transform: translateY(56px) scale(.9); }
#cp-site.cp-js.cp-motion:not(.cp-loaded) .cp-curve-path { stroke-dashoffset: 1; }
#cp-site.cp-js.cp-motion:not(.cp-loaded) .cp-hline { opacity: 0; }
#cp-site.cp-js.cp-motion:not(.cp-loaded) .cp-handle,
#cp-site.cp-js.cp-motion:not(.cp-loaded) .cp-anchor { transform: scale(0); }
#cp-site.cp-js.cp-motion:not(.cp-loaded) .cp-hero__scroll { opacity: 0; }

#cp-site.cp-js.cp-motion .cp-line > span { transition: transform 1.1s var(--cp-ease); }
#cp-site.cp-js.cp-motion .cp-line:nth-child(2) > span { transition-delay: .09s; }
#cp-site.cp-js.cp-motion .cp-line:nth-child(3) > span { transition-delay: .18s; }
#cp-site.cp-js.cp-motion .cp-hero [data-cp-fade] { transition: opacity .9s var(--cp-ease) .4s, transform .9s var(--cp-ease) .4s; }
#cp-site.cp-js.cp-motion .cp-hero .cp-eyebrow[data-cp-fade] { transition-delay: 0s; }
#cp-site.cp-js.cp-motion .cp-hero__actions[data-cp-fade] { transition-delay: .52s; }
#cp-site.cp-js.cp-motion .cp-t { transition: opacity .8s var(--cp-ease), transform 1.3s var(--cp-back); }
#cp-site.cp-js.cp-motion .cp-t--sun { transition-delay: .05s; }
#cp-site.cp-js.cp-motion .cp-t--code { transition-delay: .1s; }
#cp-site.cp-js.cp-motion .cp-t--fan { transition-delay: .15s; }
#cp-site.cp-js.cp-motion .cp-t--curve { transition-delay: .25s; }
#cp-site.cp-js.cp-motion .cp-t--pen { transition-delay: .35s; }
#cp-site.cp-js.cp-motion .cp-t--cursor { transition-delay: .5s; }
#cp-site.cp-js.cp-motion .cp-t--stars { transition-delay: .6s; }
#cp-site.cp-js.cp-motion .cp-curve-path { transition: stroke-dashoffset 1.8s var(--cp-ease) .45s; }
#cp-site.cp-js.cp-motion .cp-hline { transition: opacity .6s 1.2s; }
#cp-site.cp-js.cp-motion .cp-handle,
#cp-site.cp-js.cp-motion .cp-anchor { transition: transform .6s var(--cp-back) 1s; }
#cp-site.cp-js.cp-motion .cp-h2 { transition-delay: 1.1s; }
#cp-site.cp-js.cp-motion .cp-h3 { transition-delay: 1.2s; }
#cp-site.cp-js.cp-motion .cp-hero__scroll { transition: opacity .8s 1.4s; }

/* Movimento continuo */
#cp-site.cp-motion .cp-tf--slow { animation: cp-float 11s ease-in-out infinite; }
#cp-site.cp-motion .cp-tf--b { animation: cp-float-b 8s ease-in-out infinite; }
#cp-site.cp-motion .cp-tf--c { animation: cp-float 9s ease-in-out -2s infinite; }
#cp-site.cp-motion .cp-tf--d { animation: cp-pen 6s ease-in-out infinite; }
#cp-site.cp-motion .cp-tf--e { animation: cp-float-b 5.5s ease-in-out -1s infinite; }
#cp-site.cp-motion .cp-tf--f { animation: cp-float 12s ease-in-out -4s infinite; }
#cp-site.cp-motion .cp-tf--g { animation: cp-float-b 9.5s ease-in-out -3s infinite; }
#cp-site.cp-motion .cp-star { animation: cp-twinkle 3.4s ease-in-out infinite; }
#cp-site.cp-motion .cp-star:nth-of-type(2) { animation-delay: -1.1s; }
#cp-site.cp-motion .cp-star:nth-of-type(3) { animation-delay: -2.2s; }
#cp-site.cp-motion .cp-star:nth-of-type(4) { animation-delay: -.6s; }

@keyframes cp-float {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(0, -12px) rotate(1deg); }
}
@keyframes cp-float-b {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(6px, -9px) rotate(-1.6deg); }
}
@keyframes cp-pen {
	0%, 100% { transform: translate(0, 0) rotate(-3deg); }
	50% { transform: translate(-8px, -6px) rotate(4deg); }
}
@keyframes cp-twinkle {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

/* L'interruttore nella scheda del codice */
#cp-site .cp-sw-track { fill: #4A3D72; }
#cp-site .cp-sw-knob { transform-box: fill-box; transform-origin: center; }
#cp-site.cp-motion .cp-sw-track { animation: cp-sw-track 5s ease-in-out infinite; }
#cp-site.cp-motion .cp-sw-knob { animation: cp-sw-knob 5s var(--cp-back) infinite; }
@keyframes cp-sw-knob {
	0%, 30% { transform: none; }
	40%, 80% { transform: translateX(22px); }
	90%, 100% { transform: none; }
}
@keyframes cp-sw-track {
	0%, 30% { fill: #4A3D72; }
	40%, 80% { fill: #FF9B70; }
	90%, 100% { fill: #4A3D72; }
}

/* Uscita dal hero mentre si scorre */
#cp-site.cp-js.cp-motion .cp-hero__art { transform: translate3d(0, calc(var(--cp-hero-p, 0) * 10vh), 0) rotate(calc(var(--cp-hero-p, 0) * -4deg)); }
#cp-site.cp-js.cp-motion .cp-hero__text {
	transform: translate3d(0, calc(var(--cp-hero-p, 0) * -6vh), 0);
	opacity: calc(1 - var(--cp-hero-p, 0) * .75);
}

/* ------------------------------------------------------------------ */
/* Metodo: dalla bozza al sito online                                  */
/* ------------------------------------------------------------------ */

#cp-site .cp-process { padding: clamp(96px, 14vh, 160px) var(--cp-pad); }
#cp-site .cp-process__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 40px;
}
#cp-site .cp-steps { display: none; }
#cp-site .cp-process__stage { display: flex; flex-direction: column; gap: 40px; margin-top: 36px; }
#cp-site .cp-process__board { order: -1; width: 100%; max-width: 920px; margin: 0 auto; }
#cp-site .cp-process__copy {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 14px;
}
#cp-site .cp-step__num {
	font-size: calc(var(--cp-u) * .76);
	font-weight: 560;
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .07em;
	text-transform: uppercase;
	opacity: .72;
}
#cp-site .cp-step h3 {
	margin: 10px 0 12px;
	font-size: calc(var(--cp-u) * 1.5);
	font-weight: 800;
	font-variation-settings: var(--cp-fv-display);
	line-height: 1.05;
	letter-spacing: -.02em;
}
#cp-site .cp-step p:last-child { opacity: .86; }

/* Senza movimento: le fasi sono schede colorate */
#cp-site:not(.cp-motion) .cp-step,
#cp-site:not(.cp-js) .cp-step {
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--sfg) 14%, transparent);
	border-radius: 20px;
	background: var(--sbg);
	color: var(--sfg);
}

/* Con movimento: sezione fissata, le fasi cambiano scorrendo */
#cp-site.cp-js.cp-motion .cp-process { height: 560vh; padding: 0; }
#cp-site.cp-js.cp-motion .cp-process__pin {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 3vh, 32px);
	height: 100vh;
	height: 100svh;
	padding: calc(var(--cp-top-h) + 6px) var(--cp-pad) clamp(18px, 4vh, 44px);
	overflow: hidden;
}
#cp-site.cp-js.cp-motion .cp-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	flex: 1 1 360px;
	max-width: 620px;
}
#cp-site .cp-steps li { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#cp-site .cp-steps span {
	overflow: hidden;
	font-size: calc(var(--cp-u) * .68);
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .06em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: .5;
	transition: opacity .4s;
}
#cp-site .cp-steps li.is-active span { opacity: 1; }
#cp-site .cp-steps b {
	display: block;
	height: 3px;
	border-radius: 3px;
	overflow: hidden;
	background: color-mix(in srgb, currentColor 18%, transparent);
}
#cp-site .cp-steps i {
	display: block;
	height: 100%;
	background: currentColor;
	transform: scaleX(var(--f, 0));
	transform-origin: left;
}

#cp-site.cp-js.cp-motion .cp-process__stage {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	gap: clamp(16px, 3vh, 28px);
	margin-top: 0;
}
#cp-site.cp-js.cp-motion .cp-process__board {
	order: -1;
	max-width: none;
	height: 100%;
	min-height: 0;
	margin: 0;
}
#cp-site.cp-js.cp-motion .cp-process__copy { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
#cp-site.cp-js.cp-motion .cp-step {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .45s, transform .6s var(--cp-ease);
	pointer-events: none;
	user-select: none;
}
/* Le fasi non attive restano solo trasparenti: i lettori di schermo le leggono tutte */
#cp-site.cp-js.cp-motion .cp-step.is-active {
	opacity: 1;
	transform: none;
	transition: opacity .6s .12s, transform .8s var(--cp-ease) .12s;
	pointer-events: auto;
	user-select: auto;
}
#cp-site.cp-js.cp-motion .cp-step h3 { font-size: clamp(calc(var(--cp-u) * 1.6), calc(var(--cp-u) * .6 + 3.4vw), calc(var(--cp-u) * 2.4)); }
#cp-site.cp-js.cp-motion .cp-step p:last-child { max-width: 40ch; font-size: calc(var(--cp-u) * .98); }

@media (min-width: 960px) {
	#cp-site.cp-js.cp-motion .cp-process__stage {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: minmax(0, 1fr);
		gap: clamp(32px, 4vw, 72px);
	}
	#cp-site.cp-js.cp-motion .cp-process__board { order: 0; }
	#cp-site.cp-js.cp-motion .cp-step h3 { font-size: var(--cp-fs-h3); }
	#cp-site.cp-js.cp-motion .cp-step p:last-child { font-size: calc(var(--cp-u) * 1.1); }
}
@media (max-width: 519px) {
	#cp-site .cp-steps span { display: none; }
}

/* Tavola */
#cp-site .cp-artboard {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	color: var(--cp-fg);
}
#cp-site.cp-js.cp-motion .cp-artboard {
	height: 100%;
	transform: rotate(calc((1 - var(--cp-p, 0)) * -1.5deg)) scale(calc(.96 + var(--cp-p, 0) * .04));
	transform-origin: 50% 50%;
}
#cp-site .cp-artboard text { font-family: var(--cp-font); }

#cp-site .cp-ab-label {
	fill: currentColor;
	font-size: 15px;
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .04em;
	opacity: .65;
	transition: opacity .4s;
}
#cp-site .cp-ab-paper { fill: var(--cp-white); }
#cp-site .cp-ab-frame { fill: none; stroke: currentColor; stroke-opacity: .2; stroke-width: 1.5; }
#cp-site .cp-ab-bar { transition: transform .8s var(--cp-ease); }
#cp-site .cp-ab-url {
	fill: var(--cp-ink);
	font-size: 12px;
	font-variation-settings: var(--cp-fv-mono);
	opacity: .7;
}

#cp-site .cp-ab-grid { opacity: 0; transition: opacity .5s; }
#cp-site .cp-ab-grid rect {
	fill: var(--cp-peach);
	fill-opacity: .14;
	transform: scaleY(0);
	transform-box: fill-box;
	transform-origin: 50% 0;
	transition: transform .8s var(--cp-ease) calc(var(--i, 0) * 45ms);
}

#cp-site .cp-ab-clean { transition: opacity .6s; }
#cp-site .cp-shape {
	stroke: var(--cp-mute);
	stroke-width: 1.5;
	stroke-opacity: 0;
	transition: fill .8s var(--cp-ease), stroke-opacity .5s;
}
#cp-site .cp-ab-cta,
#cp-site .cp-ab-card { transform-box: fill-box; transform-origin: center; }

#cp-site .cp-ab-sketch { opacity: 0; transition: opacity .6s; }
#cp-site .cp-ab-sketch-lines path {
	fill: none;
	stroke: var(--cp-ink);
	stroke-opacity: .8;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1 1;
}
#cp-site .cp-ab-sk-note { transition: opacity .5s; }
#cp-site .cp-ab-sk-note text {
	fill: var(--cp-ink);
	font-size: 17px;
	font-weight: 520;
	font-variation-settings: var(--cp-fv-hand);
	opacity: .78;
}
#cp-site .cp-ab-sk-note path { fill: none; stroke: var(--cp-ink); stroke-opacity: .7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#cp-site .cp-ab-notes { opacity: 0; transition: opacity .5s; }
#cp-site .cp-ab-notes path { fill: none; stroke: var(--cp-violet); stroke-width: 1.5; }
#cp-site .cp-ab-notes rect { fill: var(--cp-violet); }
#cp-site .cp-ab-notes g text {
	fill: var(--cp-white);
	font-size: 10px;
	font-weight: 600;
	font-variation-settings: var(--cp-fv-mono);
	text-anchor: middle;
}
#cp-site .cp-ab-note-t {
	fill: var(--cp-violet);
	font-size: 12px;
	font-weight: 600;
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .04em;
}

/* Riquadri che spuntano attorno alla tavola */
#cp-site .cp-ab-swatches,
#cp-site .cp-ab-type,
#cp-site .cp-ab-panel,
#cp-site .cp-ab-online {
	opacity: 0;
	transform: translateY(14px) scale(.85);
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transition: opacity .45s var(--cp-ease), transform .7s var(--cp-back);
}
#cp-site .cp-ab-swatches circle {
	stroke: var(--cp-white);
	stroke-width: 3;
	transform: scale(0);
	transform-box: fill-box;
	transform-origin: center;
	transition: transform .5s var(--cp-back);
}
#cp-site .cp-ab-swatches circle:nth-child(2) { transition-delay: .06s; }
#cp-site .cp-ab-swatches circle:nth-child(3) { transition-delay: .12s; }
#cp-site .cp-ab-swatches circle:nth-child(4) { transition-delay: .18s; }
#cp-site .cp-ab-swatches circle:nth-child(5) { transition-delay: .24s; }
#cp-site .cp-ab-type-aa { fill: var(--cp-ink); font-size: 44px; font-weight: 850; font-variation-settings: var(--cp-fv-display); }
#cp-site .cp-ab-type-name { fill: var(--cp-ink); font-size: 13px; font-variation-settings: var(--cp-fv-mono); opacity: .7; }
#cp-site .cp-ab-panel-bg { fill: var(--cp-ink); stroke: var(--cp-lilac); stroke-opacity: .55; stroke-width: 1.5; }
#cp-site .cp-ab-panel-t {
	fill: var(--cp-lilac);
	font-size: 12px;
	font-weight: 600;
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .04em;
}
#cp-site .cp-ab-row-t { fill: var(--cp-paper); font-size: 14px; font-weight: 600; }
#cp-site .cp-ab-sw { fill: #4A3D72; transition: fill .35s calc(.6s + var(--k, 0) * .7s); }
#cp-site .cp-ab-knob {
	fill: var(--cp-white);
	transform-box: fill-box;
	transform-origin: center;
	transition: transform .45s var(--cp-back) calc(.6s + var(--k, 0) * .7s);
}
#cp-site .cp-ab-online rect { fill: var(--cp-white); }
#cp-site .cp-ab-online-dot { fill: var(--cp-saffron); transform-box: fill-box; transform-origin: center; }
#cp-site .cp-ab-online-t { fill: var(--cp-ink); font-size: 13px; font-weight: 650; }
#cp-site .cp-ab-cursor {
	opacity: 0;
	transform: translate(40px, 40px);
	transform-box: fill-box;
	transform-origin: 0 0;
}

/* Senza movimento la tavola mostra il sito finito */
#cp-site:not(.cp-motion) .cp-ab-online,
#cp-site:not(.cp-js) .cp-ab-online,
#cp-site:not(.cp-motion) .cp-ab-panel,
#cp-site:not(.cp-js) .cp-ab-panel { opacity: 1; transform: none; }
#cp-site:not(.cp-motion) .cp-ab-sw,
#cp-site:not(.cp-js) .cp-ab-sw { fill: var(--cp-peach); }
#cp-site:not(.cp-motion) .cp-ab-knob,
#cp-site:not(.cp-js) .cp-ab-knob { transform: translateX(22px); }

/* Fase 1 · bozza */
#cp-site.cp-js.cp-motion .cp-process:not(.cp-at-2) .cp-ab-clean { opacity: 0; }
#cp-site.cp-js.cp-motion .cp-process:not(.cp-at-3) .cp-shape { fill: #E4DFF0; stroke-opacity: 1; }
#cp-site.cp-js.cp-motion .cp-process .cp-ab-sketch { opacity: 1; }
#cp-site.cp-js.cp-motion .cp-ab-sk-note { opacity: 0; }
#cp-site.cp-js.cp-motion .cp-process.cp-sk-done .cp-ab-sk-note { opacity: 1; }
#cp-site.cp-js.cp-motion .cp-process:not(.cp-at-5) .cp-ab-bar { transform: translateY(-44px); }

/* Fase 2 · griglia */
#cp-site.cp-js.cp-motion .cp-process.cp-at-2 .cp-ab-sketch { opacity: .22; }
#cp-site.cp-js.cp-motion .cp-process.cp-at-2:not(.cp-at-3) .cp-ab-grid { opacity: 1; }
#cp-site.cp-js.cp-motion .cp-process.cp-at-2:not(.cp-at-3) .cp-ab-grid rect { transform: scaleY(1); }
#cp-site.cp-js.cp-motion .cp-process.cp-at-2:not(.cp-at-3) .cp-ab-notes { opacity: 1; }

/* Fase 3 · colore */
#cp-site.cp-js.cp-motion .cp-process.cp-at-3 .cp-ab-sketch { opacity: 0; }
#cp-site.cp-js.cp-motion .cp-process.cp-at-3:not(.cp-at-4) .cp-ab-swatches,
#cp-site.cp-js.cp-motion .cp-process.cp-at-3:not(.cp-at-4) .cp-ab-type { opacity: 1; transform: none; }
#cp-site.cp-js.cp-motion .cp-process.cp-at-3:not(.cp-at-4) .cp-ab-swatches circle { transform: none; }
#cp-site.cp-js.cp-motion .cp-process.cp-at-3:not(.cp-at-4) .cp-ab-type { transition-delay: .15s; }

/* Fase 4 · back-end: il cursore accende le funzioni nel pannello */
#cp-site.cp-js.cp-motion .cp-process.cp-at-4:not(.cp-at-5) .cp-ab-panel { opacity: 1; transform: none; }
#cp-site.cp-js.cp-motion .cp-process.cp-at-4:not(.cp-at-5) .cp-ab-sw { fill: var(--cp-peach); }
#cp-site.cp-js.cp-motion .cp-process.cp-at-4:not(.cp-at-5) .cp-ab-knob { transform: translateX(22px); }
#cp-site.cp-js.cp-motion .cp-process.cp-at-4:not(.cp-at-5) .cp-ab-cursor { animation: cp-ab-cursor 3s var(--cp-ease) both; }
#cp-site.cp-js.cp-motion .cp-process.cp-at-4:not(.cp-at-5) .cp-ab-card { animation: cp-ab-pop .8s var(--cp-ease) calc(.7s + var(--k, 0) * .7s) both; }

/* Fase 5 · online */
#cp-site.cp-js.cp-motion .cp-process.cp-at-5 .cp-ab-label { opacity: 0; }
#cp-site.cp-js.cp-motion .cp-process.cp-at-5 .cp-ab-online { opacity: 1; transform: none; transition-delay: .25s; }
#cp-site.cp-js.cp-motion .cp-process.cp-at-5 .cp-ab-online-dot { animation: cp-ab-pulse 1.6s ease-out infinite; }

/* Tre clic a .6s, 1.3s e 2s: gli stessi ritardi di interruttori e schede. */
@keyframes cp-ab-cursor {
	0% { opacity: 0; transform: translate(150px, 90px) scale(1); }
	8% { opacity: 1; }
	18% { transform: translate(0, 0) scale(1); }
	20% { transform: translate(0, 0) scale(.82); }
	23%, 30% { transform: translate(0, 0) scale(1); }
	41% { transform: translate(0, 28px) scale(1); }
	43% { transform: translate(0, 28px) scale(.82); }
	46%, 53% { transform: translate(0, 28px) scale(1); }
	64% { transform: translate(0, 56px) scale(1); }
	66% { transform: translate(0, 56px) scale(.82); }
	69%, 80% { transform: translate(0, 56px) scale(1); opacity: 1; }
	100% { transform: translate(90px, 70px) scale(1); opacity: 0; }
}
@keyframes cp-ab-pop {
	0%, 100% { transform: none; }
	35% { transform: translateY(-10px) scale(1.03); }
}
@keyframes cp-ab-pulse {
	0% { transform: scale(1); opacity: 1; }
	60% { transform: scale(1.7); opacity: .35; }
	100% { transform: scale(1); opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Lavori                                                              */
/* ------------------------------------------------------------------ */

#cp-site .cp-works {
	--cp-box-w: max(300px, min(52vw, calc((100svh - var(--cp-u) * 25) * 1.6), 780px));
	padding: clamp(96px, 14vh, 160px) 0;
}
#cp-site .cp-works__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 56px;
	padding: 0 var(--cp-pad);
}
#cp-site .cp-works__note { max-width: 40ch; opacity: .8; }
#cp-site .cp-works__track {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
	gap: 72px 48px;
	margin-top: clamp(48px, 7vh, 72px);
	padding: 0 var(--cp-pad);
}
#cp-site .cp-works__progress { display: none; }

#cp-site .cp-frame { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
#cp-site .cp-frame__box {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	border-radius: 22px;
	background: color-mix(in srgb, var(--cp-fg) 5%, transparent);
	color: inherit;
	transition: transform .6s var(--cp-ease), background-color .4s;
}
#cp-site .cp-frame__ants {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
#cp-site .cp-frame__ants rect {
	fill: none;
	stroke: currentColor;
	stroke-opacity: .5;
	stroke-width: 1.5;
	stroke-dasharray: 8 6;
	vector-effect: non-scaling-stroke;
}
#cp-site.cp-motion .cp-frame__ants rect { animation: cp-march 1s linear infinite; }
@keyframes cp-march { to { stroke-dashoffset: -14; } }

#cp-site .cp-frame__handles i {
	position: absolute;
	z-index: 2;
	width: 11px;
	height: 11px;
	border: 1.5px solid currentColor;
	border-radius: 2px;
	background: var(--cp-bg);
}
#cp-site .cp-frame__handles i:nth-child(1) { left: -5px; top: -5px; }
#cp-site .cp-frame__handles i:nth-child(2) { right: -5px; top: -5px; }
#cp-site .cp-frame__handles i:nth-child(3) { left: -5px; bottom: -5px; }
#cp-site .cp-frame__handles i:nth-child(4) { right: -5px; bottom: -5px; }

#cp-site .cp-frame__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 16px;
	font-size: calc(var(--cp-u) * .8);
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .03em;
	text-align: center;
	opacity: .78;
}
#cp-site .cp-frame__plus {
	position: relative;
	display: block;
	width: 46px;
	height: 46px;
	border: 1.5px dashed currentColor;
	border-radius: 50%;
	transition: transform .6s var(--cp-back);
}
#cp-site .cp-frame__plus::before,
#cp-site .cp-frame__plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 2px;
	margin: -1px 0 0 -8px;
	border-radius: 2px;
	background: currentColor;
}
#cp-site .cp-frame__plus::after { transform: rotate(90deg); }
#cp-site a.cp-frame__box { cursor: pointer; }

/* La finestra del browser con la schermata del sito */
#cp-site .cp-frame__win {
	position: absolute;
	inset: 12px;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	background: var(--cp-white);
	box-shadow: 0 28px 60px -28px rgb(0 0 0 / .6);
	overflow: hidden;
}
#cp-site .cp-frame__bar {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 12px;
	background: #E7E1F5;
}
#cp-site .cp-frame__bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cp-peach); }
#cp-site .cp-frame__bar i:nth-child(2) { background: var(--cp-saffron); }
#cp-site .cp-frame__bar i:nth-child(3) { background: var(--cp-lilac); }
#cp-site .cp-frame__bar b {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 38%;
	height: 12px;
	border-radius: 6px;
	background: var(--cp-white);
	transform: translateX(-50%);
}
#cp-site .cp-frame__screen { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#cp-site .cp-frame__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
	transition: object-position 1.4s var(--cp-ease-io);
}

/* La schermata scorre: il sito si sfoglia da solo quando il riquadro è al centro */
#cp-site.cp-motion .cp-frame.is-center .cp-frame__img,
#cp-site.cp-motion .cp-frame:focus-within .cp-frame__img {
	object-position: 50% 100%;
	transition: object-position 8s cubic-bezier(.45, 0, .55, 1) .5s;
}
@media (hover: hover) {
	#cp-site.cp-motion .cp-frame__box:hover .cp-frame__img {
		object-position: 50% 100%;
		transition: object-position 8s cubic-bezier(.45, 0, .55, 1) .5s;
	}
}

/* Lo smartphone appoggiato alla finestra */
#cp-site .cp-frame__phone {
	position: absolute;
	z-index: 3;
	right: -4%;
	bottom: -7%;
	width: 21%;
	aspect-ratio: 390 / 844;
	border: 4px solid #0B0815;
	border-radius: 14% / 6.5%;
	background: var(--cp-white);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--cp-fg) 30%, transparent), 0 26px 40px -18px rgb(0 0 0 / .65);
	overflow: hidden;
	transform: rotate(4deg);
	transition: transform .9s var(--cp-back);
}
#cp-site .cp-frame__phone img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}
#cp-site .cp-frame.is-center .cp-frame__phone { transform: rotate(-3deg) translateY(-6px); }

/* Scheda del progetto */
#cp-site .cp-frame__info { transition: opacity .6s var(--cp-ease); }
#cp-site .cp-frame__kind {
	margin-bottom: 10px;
	color: var(--cp-peach);
	font-size: calc(var(--cp-u) * .76);
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
}
#cp-site .cp-frame__title {
	font-size: clamp(calc(var(--cp-u) * 1.6), calc(var(--cp-u) * .8 + 1.6vw), calc(var(--cp-u) * 2.3));
	font-weight: 800;
	font-variation-settings: var(--cp-fv-display);
	line-height: 1.05;
	letter-spacing: -.02em;
	text-wrap: balance;
}
#cp-site .cp-frame__desc { max-width: 42ch; margin-top: 12px; opacity: .8; }
#cp-site .cp-frame__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
#cp-site .cp-frame__chips li {
	padding: 5px 12px;
	border: 1px solid color-mix(in srgb, var(--cp-fg) 28%, transparent);
	border-radius: 999px;
	font-size: calc(var(--cp-u) * .74);
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .03em;
	line-height: 1.4;
}
#cp-site .cp-frame__visit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-top: 24px;
	padding: 0 20px;
	border: 2px solid currentColor;
	border-radius: 999px;
	font-weight: 650;
	transition: background-color .3s, border-color .3s, color .3s;
}
#cp-site .cp-frame__arrow { display: inline-block; transition: transform .4s var(--cp-back); }
@media (hover: hover) {
	#cp-site .cp-frame__box--live:hover { transform: translateY(-6px); background: color-mix(in srgb, var(--cp-fg) 9%, transparent); }
	#cp-site .cp-frame__box:hover .cp-frame__plus { transform: rotate(90deg) scale(1.08); }
	#cp-site .cp-frame__box:hover .cp-frame__ants rect { stroke-opacity: .9; animation-duration: .45s; }
	#cp-site .cp-frame__visit:hover { border-color: var(--cp-peach); background: var(--cp-peach); color: var(--cp-ink); }
	#cp-site .cp-frame__visit:hover .cp-frame__arrow { transform: translate(3px, -3px); }
}

/* Schermi larghi con movimento: i progetti scorrono in orizzontale */
#cp-site .cp-works.is-pinned { padding: 0; }
#cp-site .cp-works.is-pinned .cp-works__pin {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(28px, 5vh, 56px);
	height: 100vh;
	height: 100svh;
	padding: calc(var(--cp-top-h) + 8px) 0 clamp(20px, 4vh, 40px);
	overflow: hidden;
}
#cp-site .cp-works.is-pinned .cp-section-title { font-size: clamp(calc(var(--cp-u) * 2.2), min(calc(var(--cp-u) + 2.8vw), 7vh), calc(var(--cp-u) * 4)); }
#cp-site .cp-works.is-pinned .cp-works__track {
	display: flex;
	align-items: center;
	gap: clamp(56px, 6vw, 112px);
	width: max-content;
	margin-top: 0;
	padding: 0 var(--cp-pad);
	will-change: transform;
}
#cp-site .cp-works.is-pinned .cp-frame {
	display: grid;
	flex: none;
	grid-template-columns: var(--cp-box-w) clamp(260px, 26vw, 360px);
	align-items: center;
	column-gap: clamp(48px, 4.4vw, 72px);
}
#cp-site .cp-works.is-pinned .cp-frame__info { opacity: .4; }
#cp-site .cp-works.is-pinned .cp-frame.is-center .cp-frame__info,
#cp-site .cp-works.is-pinned .cp-frame:focus-within .cp-frame__info { opacity: 1; }
#cp-site .cp-works.is-pinned .cp-works__progress {
	display: block;
	flex: none;
	height: 2px;
	margin: 0 var(--cp-pad);
	border-radius: 2px;
	background: color-mix(in srgb, currentColor 16%, transparent);
	overflow: hidden;
}
#cp-site .cp-works__progress i {
	display: block;
	height: 100%;
	background: var(--cp-peach);
	transform: scaleX(var(--cp-wp, 0));
	transform-origin: left;
}

/* ------------------------------------------------------------------ */
/* Servizi                                                             */
/* ------------------------------------------------------------------ */

#cp-site .cp-services { padding: clamp(110px, 16vh, 180px) var(--cp-pad); }
#cp-site .cp-svc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	margin-top: clamp(40px, 6vh, 64px);
}
#cp-site .cp-svc li {
	padding: 28px;
	border: 1px solid color-mix(in srgb, var(--cp-fg) 10%, transparent);
	border-radius: 22px;
	background: color-mix(in srgb, var(--cp-fg) 4%, transparent);
	transition: background-color .4s, border-color .4s, opacity .9s var(--cp-ease), transform .9s var(--cp-ease);
}
#cp-site .cp-svc__ico { display: block; width: 44px; height: 44px; overflow: visible; color: var(--cp-ink); }
#cp-site .cp-svc h3 {
	margin: 22px 0 10px;
	font-size: calc(var(--cp-u) * 1.35);
	font-weight: 760;
	font-variation-settings: var(--cp-fv-display);
	line-height: 1.15;
	letter-spacing: -.01em;
}
#cp-site .cp-svc p { font-size: calc(var(--cp-u) * .98); opacity: .8; }

@media (hover: hover) {
	#cp-site .cp-svc li:hover { background: color-mix(in srgb, var(--cp-fg) 7%, transparent); border-color: color-mix(in srgb, var(--cp-fg) 22%, transparent); }
	#cp-site .cp-svc li:hover .cp-svc__ico { animation: cp-wiggle .7s var(--cp-ease); }
}
@keyframes cp-wiggle {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-9deg) scale(1.08); }
	55% { transform: rotate(7deg) scale(1.08); }
	80% { transform: rotate(-3deg); }
}
@media (min-width: 640px) {
	#cp-site .cp-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	#cp-site .cp-svc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Contatti                                                            */
/* ------------------------------------------------------------------ */

#cp-site .cp-contact {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: 92vh;
	min-height: 92svh;
	padding: clamp(110px, 16vh, 180px) var(--cp-pad);
	overflow: hidden;
}
#cp-site .cp-contact__sun {
	position: absolute;
	z-index: -1;
	right: -8%;
	bottom: 0;
	width: min(92vw, 860px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--cp-saffron);
	transform: translateY(calc(52% + (1 - var(--cp-sun, 1)) * 45%));
}
#cp-site .cp-contact__sun::after {
	content: "";
	position: absolute;
	inset: -7%;
	border: 2px dashed color-mix(in srgb, var(--cp-ink) 28%, transparent);
	border-radius: 50%;
}
#cp-site.cp-motion .cp-contact__sun::after { animation: cp-spin 80s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }

#cp-site .cp-contact__inner { position: relative; max-width: 1180px; }
#cp-site .cp-contact__title {
	margin-top: 22px;
	font-size: var(--cp-fs-contact);
	font-weight: 850;
	font-variation-settings: var(--cp-fv-display);
	line-height: .98;
	letter-spacing: -.035em;
	text-wrap: balance;
}
#cp-site .cp-contact__mail {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin-top: clamp(28px, 5vh, 48px);
	padding-bottom: 14px;
	font-size: var(--cp-fs-mail);
	font-weight: 680;
	font-variation-settings: var(--cp-fv);
	line-height: 1.15;
	letter-spacing: -.015em;
	overflow-wrap: anywhere;
}
#cp-site .cp-contact__mail svg {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 14px;
	overflow: visible;
}
#cp-site .cp-contact__mail path {
	fill: none;
	stroke: var(--cp-ink);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	vector-effect: non-scaling-stroke;
}
#cp-site.cp-js.cp-motion .cp-contact__mail path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--cp-ease) .5s; }
#cp-site.cp-js.cp-motion .cp-contact__mail.is-in path { stroke-dashoffset: 0; }
@media (hover: hover) {
	#cp-site.cp-js.cp-motion .cp-contact__mail.is-in:hover path { animation: cp-redraw .9s var(--cp-ease); }
}
@keyframes cp-redraw {
	0% { stroke-dashoffset: 0; }
	45% { stroke-dashoffset: -1; }
	46% { stroke-dashoffset: 1; }
	100% { stroke-dashoffset: 0; }
}
#cp-site .cp-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
#cp-site .cp-btn.is-done { background: var(--cp-fg); color: var(--cp-bg); }
#cp-site .cp-contact__note { max-width: 46ch; margin-top: 26px; opacity: .82; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

#cp-site .cp-footer {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 32px;
	padding: 28px var(--cp-pad);
	background: var(--cp-ink);
	color: var(--cp-paper);
	font-size: calc(var(--cp-u) * .8);
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .02em;
}
#cp-site .cp-footer a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: transparent; transition: text-decoration-color .3s; }
#cp-site .cp-footer a:hover { text-decoration-color: currentColor; }
#cp-site .cp-footer :focus-visible { outline-color: var(--cp-paper); }

/* ------------------------------------------------------------------ */
/* Pagina 404                                                          */
/* ------------------------------------------------------------------ */

#cp-site.cp-e404 .cp-line:nth-child(2) > span {
	color: var(--cp-violet);
	font-variation-settings: var(--cp-fv-hand);
	letter-spacing: -.02em;
}

/* La finestra illustrata: un "404" con lo zero in modifica */
#cp-site .cp-e404__win { transform-box: fill-box; transform-origin: 50% 50%; }
#cp-site .cp-e404__url {
	fill: var(--cp-ink);
	font-size: 12px;
	font-variation-settings: var(--cp-fv-mono);
	opacity: .7;
}
#cp-site .cp-e404__wire rect { fill: var(--cp-ink); fill-opacity: .08; }
#cp-site .cp-e404__note text {
	fill: var(--cp-ink);
	font-size: 17px;
	font-weight: 520;
	font-variation-settings: var(--cp-fv-hand);
	opacity: .78;
}
#cp-site .cp-e404__note path { fill: none; stroke: var(--cp-ink); stroke-opacity: .7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#cp-site .cp-e404__sel { fill: none; stroke: var(--cp-violet); stroke-width: 1.5; stroke-dasharray: 8 6; }
#cp-site .cp-e404__grips rect { fill: var(--cp-white); stroke: var(--cp-violet); stroke-width: 1.5; }
#cp-site .cp-e404__digit {
	fill: var(--cp-ink);
	font-size: 200px;
	font-weight: 850;
	font-variation-settings: var(--cp-fv-display);
}
#cp-site .cp-e404__zero {
	fill: none;
	stroke: var(--cp-ink);
	stroke-width: 32;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
#cp-site .cp-e404__cursor,
#cp-site .cp-e404__cursor-f { transform-box: fill-box; transform-origin: 0 0; }

/* Senza script: l'ingresso è tutto in CSS */
@media (prefers-reduced-motion: no-preference) {
	#cp-site.cp-e404 .cp-line > span { animation: cp-e404-rise 1.1s var(--cp-ease) both; }
	#cp-site.cp-e404 .cp-line:nth-child(2) > span { animation-delay: .09s; }
	#cp-site .cp-e404__in { animation: cp-e404-in .9s var(--cp-ease) .4s both; }
	#cp-site .cp-eyebrow.cp-e404__in { animation-delay: 0s; }
	#cp-site .cp-hero__actions.cp-e404__in { animation-delay: .52s; }

	#cp-site.cp-e404 .cp-hero__art { animation: cp-e404-in 1.1s var(--cp-ease) .15s both; }
	#cp-site .cp-e404__win { animation: cp-float 11s ease-in-out 1.3s infinite; }
	#cp-site .cp-e404__sel { animation: cp-e404-fade .6s .8s both, cp-march 1s linear infinite; }
	#cp-site .cp-e404__grips { animation: cp-e404-fade .6s .9s both; }
	#cp-site .cp-e404__digit { animation: cp-e404-in .8s var(--cp-ease) .45s both; }
	#cp-site .cp-e404__digit--b { animation-delay: .6s; }
	#cp-site .cp-e404__zero { animation: cp-e404-draw 1.3s var(--cp-ease-io) .6s both; }
	#cp-site .cp-e404__hline { animation: cp-e404-fade .5s 1.7s both; }
	#cp-site.cp-e404 .cp-anchor { animation: cp-e404-pop .6s var(--cp-back) 1.5s both; }
	#cp-site.cp-e404 .cp-handle { animation: cp-e404-pop .6s var(--cp-back) 1.75s both; }
	#cp-site .cp-e404__cursor { animation: cp-e404-cursor .9s var(--cp-ease) 1.9s both; }
	#cp-site .cp-e404__cursor-f { animation: cp-float-b 5.5s ease-in-out 2.8s infinite; }
	#cp-site .cp-e404__note { animation: cp-e404-fade .7s 2.4s both; }
	#cp-site.cp-e404 .cp-star { animation: cp-twinkle 3.4s ease-in-out infinite; }
	#cp-site.cp-e404 .cp-star:nth-of-type(2) { animation-delay: -1.1s; }
	#cp-site.cp-e404 .cp-star:nth-of-type(3) { animation-delay: -2.2s; }
	#cp-site.cp-e404 .cp-star:nth-of-type(4) { animation-delay: -.6s; }
}
@keyframes cp-e404-rise { from { transform: translateY(108%); } }
@keyframes cp-e404-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes cp-e404-fade { from { opacity: 0; } }
@keyframes cp-e404-pop { from { transform: scale(0); } }
@keyframes cp-e404-draw { from { stroke-dashoffset: 1; } }
@keyframes cp-e404-cursor { from { opacity: 0; transform: translate(44px, 52px); } }

/* ------------------------------------------------------------------ */
/* Informativa privacy                                                 */
/* ------------------------------------------------------------------ */

/* Dentro il tema resta nella colonna del contenuto */
#cp-site.cp-privacy.cp--embed { width: auto; margin: 0; }
#cp-site.cp-privacy .cp-main { container: cp-privacy / inline-size; }

#cp-site .cp-privacy__doc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(32px, 4vw, 72px);
	padding: calc(var(--cp-top-h) + 56px) var(--cp-pad) 96px;
}
#cp-site.cp--embed .cp-privacy__doc { padding-top: 56px; }

#cp-site .cp-privacy__title {
	margin-top: 22px;
	font-size: var(--cp-fs-h2);
	font-weight: 840;
	font-variation-settings: var(--cp-fv-display);
	line-height: 1;
	letter-spacing: -.03em;
	text-wrap: balance;
}
#cp-site .cp-privacy__title span {
	color: var(--cp-violet);
	font-variation-settings: var(--cp-fv-hand);
	letter-spacing: -.02em;
}
#cp-site .cp-privacy__lead {
	max-width: 52ch;
	margin-top: 24px;
	font-size: calc(var(--cp-u) * 1.15);
	line-height: 1.5;
	opacity: .86;
}

/* In breve */
#cp-site .cp-privacy__brief {
	max-width: 64ch;
	margin-top: 44px;
	padding: 26px clamp(22px, 3vw, 34px) 28px;
	border-radius: 22px;
	background: var(--cp-lilac);
	color: var(--cp-ink);
}
#cp-site .cp-privacy__brief-title {
	font-size: calc(var(--cp-u) * .78);
	font-weight: 560;
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
}
#cp-site .cp-privacy__brief ul { display: grid; gap: 10px; margin-top: 16px; }
#cp-site .cp-privacy__brief li { position: relative; padding-left: 26px; }
#cp-site .cp-privacy__brief li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(.775em - 6px);
	width: 12px;
	height: 12px;
	border: 2px solid var(--cp-ink);
	border-radius: 50%;
	background: var(--cp-white);
}

/* Le voci */
#cp-site .cp-privacy__body { margin-top: 72px; border-top: 1.5px solid rgba(28, 20, 51, .16); }
#cp-site .cp-privacy__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px clamp(32px, 4vw, 72px);
	padding: 34px 0;
	border-bottom: 1.5px solid rgba(28, 20, 51, .16);
}
#cp-site .cp-privacy__row h2 {
	font-size: clamp(calc(var(--cp-u) * 1.4), calc(var(--cp-u) * .9 + 1vw), calc(var(--cp-u) * 1.9));
	font-weight: 780;
	font-variation-settings: var(--cp-fv-display);
	line-height: 1.12;
	letter-spacing: -.02em;
	text-wrap: balance;
}
#cp-site .cp-privacy__text { display: grid; gap: 14px; max-width: 64ch; }
#cp-site .cp-privacy__text code {
	padding: .08em .4em;
	border-radius: 6px;
	background: rgba(184, 166, 244, .45);
	font: inherit;
	font-size: .9em;
	font-variation-settings: var(--cp-fv-mono);
}
#cp-site .cp-privacy__date {
	margin-top: 32px;
	font-size: calc(var(--cp-u) * .78);
	font-variation-settings: var(--cp-fv-mono);
	letter-spacing: .04em;
	opacity: .7;
}

@container cp-privacy (min-width: 880px) {
	#cp-site .cp-privacy__doc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
	#cp-site .cp-privacy__head,
	#cp-site .cp-privacy__body { grid-column: 1 / -1; }
	#cp-site .cp-privacy__brief { grid-column: 2; }
	#cp-site .cp-privacy__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); padding: 44px 0; }
	#cp-site .cp-privacy__date { margin-left: auto; }
}

/* ------------------------------------------------------------------ */
/* Comparsa allo scorrimento                                           */
/* ------------------------------------------------------------------ */

#cp-site.cp-js.cp-motion [data-cp-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .9s var(--cp-ease) var(--cp-d, 0ms), transform 1s var(--cp-ease) var(--cp-d, 0ms);
}
#cp-site.cp-js.cp-motion .cp-svc li[data-cp-reveal] {
	transition: background-color .4s, border-color .4s, opacity .9s var(--cp-ease) var(--cp-d, 0ms), transform 1s var(--cp-ease) var(--cp-d, 0ms);
}
#cp-site.cp-js.cp-motion [data-cp-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* Meno movimento                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	#cp-site *,
	#cp-site *::before,
	#cp-site *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		transition-delay: 0s !important;
	}
}