/*
 * Studio Arfia — mazzo.css · v0.103.0 · 04/11/2026
 * IL MAZZO DEI PASSI (site/mazzo.php): «Come funziona», «Cosa comprende», «Da dove si comincia». Rami, 04/11: «scelgo la 3,
 * applica ovunque ci sia questa sezione, e i mockup interni devono essere sempre belli». Titolo al centro, le carte che si
 * fermano una sull'altra, un mockup per carta su una luce colorata (cinque tinte, mai gialli), la CTA in fondo.
 * Qui la sezione, la carta, le luci e le primitive dei mockup; i mockup di ogni pagina in assets/css/mazzo/{pagina}.css.
 * Il movimento: assets/js/mazzo.js (senza script: carte in colonna, mockup accesi).
 */

/* ── La sezione ── */
.as-pp {
	--as-goccia: 0px;
	--as-goccia2: 0px;
	position: relative;
	overflow: clip;
	border-radius: 50% 50% 50% 50% / var(--as-goccia) var(--as-goccia) var(--as-goccia2) var(--as-goccia2);
}
.as-pp__palco { padding-block: var(--as-sect); }
.as-pp__titolo { max-width: 20ch; margin: 0 auto clamp(48px, 6vw, 104px); text-align: center; text-wrap: balance; }
.as-pp__titolo em { display: block; }
.as-pp__cta { position: relative; z-index: 2; display: flex; justify-content: center; margin: clamp(48px, 6vw, 96px) 0 0; }
.as-pp__nota { margin: var(--as-sp-6) 0 0; text-align: center; }
.as-pp p { text-wrap: pretty; }
.as-pp :is(b, small, em, i) { font-style: normal; }
.as-pp .as-pp-mazzo__nome { margin: 0; font-weight: 300; letter-spacing: -.025em; color: var(--as-ink); }


/* ══ 3 · IL MAZZO ══
   Ogni passo è una carta: a sinistra numero, titolo e riga; a destra un mockup vero e piccolo su una luce colorata (la
   ricetta del 02/11: vetri chiari, squircle, il contenuto del cliente). Le carte si fermano una sull'altra, 14px più in
   basso della precedente (sticky; con lo smoother le ferma lo script), la carta sotto arretra e si scurisce, e quando
   una carta arriva il suo mockup si accende. Da telefono: testo sopra, mockup sotto. */
.as-pp-mazzo { margin: 0; padding: 0; list-style: none; }
.as-pp-mazzo__card { position: sticky; top: calc(var(--as-header-h) + 28px + var(--i, 0) * 14px); visibility: hidden; }
.as-pp-mazzo__card > * { visibility: visible; }
.as-pp-mazzo__card + .as-pp-mazzo__card { margin-top: clamp(28px, 4vw, 56px); }
.as-pp-mazzo--pin .as-pp-mazzo__card { position: relative; top: auto; }
.as-pp-mazzo__carta { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); min-height: min(540px, 68vh); padding: clamp(20px, 2.4vw, 32px); overflow: hidden; border-radius: calc(28px * var(--as-brm)); background: #161616; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 -28px 56px -30px #000; }
@supports (corner-shape: squircle) { .as-pp-mazzo__carta, .as-pp-mazzo__scena, .as-pp-m__vetro, .as-pp-m__scuro { corner-shape: squircle; } }
.as-pp-mazzo__testo { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(4px, 1vw, 16px); }
.as-pp-mazzo__n { font-size: clamp(56px, 6vw, 88px); font-weight: 300; line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.as-pp-mazzo__nome { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; }
.as-pp-mazzo__riga { margin: 12px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.55; color: var(--as-muted); }
.as-pp-mazzo__buio { position: absolute; z-index: 4; inset: 0; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; }
.as-pp-mazzo__scena { position: relative; display: grid; place-items: center; min-height: 300px; padding: 6% 5%; overflow: hidden; border-radius: calc(20px * var(--as-brm)); container-type: inline-size; font-size: clamp(11px, 2.35cqw, 17px); color: #1C1C1E; font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; line-height: 1.35; -webkit-font-smoothing: antialiased; }
/* le luci: cinque tinte (pesca, rosa, cielo, lavanda, menta), mai gialli */
.as-pp-mazzo__scena.is-luce-0 { background: radial-gradient(60% 70% at 18% 20%, #FFC9AE 0%, transparent 70%), radial-gradient(55% 60% at 85% 30%, #FFB8CB 0%, transparent 70%), radial-gradient(70% 70% at 60% 100%, #CDBDFF 0%, transparent 72%), #F4ECEF; }
.as-pp-mazzo__scena.is-luce-1 { background: radial-gradient(60% 70% at 15% 85%, #A9D9FF 0%, transparent 70%), radial-gradient(55% 60% at 88% 18%, #CBBDFF 0%, transparent 70%), radial-gradient(60% 60% at 70% 95%, #B8F0D6 0%, transparent 72%), #EEF0F6; }
.as-pp-mazzo__scena.is-luce-2 { background: radial-gradient(60% 70% at 20% 15%, #B6F1D6 0%, transparent 70%), radial-gradient(55% 60% at 90% 70%, #A9D9FF 0%, transparent 70%), radial-gradient(50% 55% at 40% 100%, #FFCBB2 0%, transparent 72%), #EDF3F0; }
.as-pp-mazzo__scena.is-luce-3 { background: radial-gradient(60% 70% at 85% 15%, #CCBEFF 0%, transparent 70%), radial-gradient(55% 60% at 12% 80%, #FFBCD0 0%, transparent 70%), radial-gradient(50% 55% at 70% 100%, #ACDBFF 0%, transparent 72%), #F1EEF6; }
.as-pp-mazzo__scena.is-luce-4 { background: radial-gradient(60% 70% at 80% 85%, #FFC4B0 0%, transparent 70%), radial-gradient(55% 60% at 12% 18%, #B3EBD7 0%, transparent 70%), radial-gradient(50% 55% at 55% 0%, #C7C2FF 0%, transparent 72%), #F2F0EE; }
.as-pp-mazzo__card.is-senza-scena .as-pp-mazzo__carta { grid-template-columns: minmax(0, 1fr); min-height: 0; }
@media (max-width: 899px) {
	.as-pp-mazzo__card { top: calc(72px + var(--i, 0) * 12px); }
	.as-pp-mazzo__card + .as-pp-mazzo__card { margin-top: var(--as-sp-5); }
	.as-pp-mazzo__carta { grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 18px; min-height: 0; padding: 14px; border-radius: calc(22px * var(--as-brm)); } /* v0.115: carte alte uguali (mazzo.js), il mockup sempre in fondo */
	.as-pp-mazzo__testo { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 14px; padding: 6px 6px 0; }
	.as-pp-mazzo__n { flex: none; font-size: 34px; -webkit-text-stroke-width: .8px; }
	.as-pp-mazzo__nome { font-size: 22px; line-height: 1.2; }
	.as-pp-mazzo__riga { margin-top: 6px; font-size: 15px; line-height: 1.5; }
	.as-pp-mazzo__scena { min-height: 0; height: 272px; padding: 18px 14px; border-radius: calc(16px * var(--as-brm)); }
}


/* ── Le primitive dei mockup, per tutte le pagine (in em della scena: la scena scala col suo contenitore) ── */
.as-pp-m { position: relative; width: 100%; }
.as-pp-m p { margin: 0; }
.as-pp-m__vetro { border-radius: calc(1.15em * var(--as-brm)); background: rgba(255, 255, 255, .66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 1.4em 3em -1.6em rgba(40, 24, 60, .35); }
.as-pp-m__lista-h { margin-bottom: .55em !important; font-size: .74em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(28, 28, 30, .55); }
/* l'entrata comune: i vetri salgono quando la carta arriva (.is-viva, mazzo.js); ogni pagina aggiunge la sua vita */
.as-pp-mazzo--viva .as-pp-m__vetro, .as-pp-mazzo--viva .as-pp-m__scuro, .as-pp-mazzo--viva .as-pp-m__foglio { transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) :is(.as-pp-m__vetro, .as-pp-m__scuro) { opacity: 0; transform: translate3d(0, 1.6em, 0) scale(.96); }
.as-pp-mazzo--viva .as-pp-mazzo__card:not(.is-viva) .as-pp-m__foglio { opacity: 0; transform: translate3d(0, 2em, 0) rotate(3deg); }