/* Piccole animazioni al tocco, in tutto il sito (motion.js). Leggere e in stile Sartys. */
.sa-onda-host { position: relative; }
.sa-onda-clip { overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.sa-onda {
	position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
	background: radial-gradient(circle, rgba(238, 181, 62, .38) 0%, rgba(238, 181, 62, .16) 40%, rgba(238, 181, 62, 0) 70%);
	transform: scale(0); animation: saOnda .62s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes saOnda { to { transform: scale(1); opacity: 0; } }

/* la scelta: un piccolo pop */
.sa-pop { animation: saPop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes saPop { 0% { transform: scale(1); } 35% { transform: scale(.95); } 100% { transform: scale(1); } }

/* il prezzo cambia: scatto e un lampo dorato */
.sa-scatto { display: inline-block; animation: saScatto .55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes saScatto { 0% { transform: translateY(0); } 30% { transform: translateY(-4px) scale(1.06); color: #C8912A; } 100% { transform: none; } }

/* il carrello saltella */
.sa-salta { animation: saSalta .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes saSalta { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(.92) rotate(4deg); } 100% { transform: none; } }

/* bottoni: pressione morbida e un riflesso che passa (solo dove c'e' il mouse) */
.sa-btn, #next-step-btn, #btn-add-to-cart, #btn-checkout { transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s, background-color .25s, color .25s; }
.sa-btn:active, #next-step-btn:active, #btn-add-to-cart:active, #btn-checkout:active { transform: scale(.97); }
@media (hover: hover) {
	.sa-btn--gold, #btn-checkout { background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%); background-size: 250% 100%; background-position: 130% 0; background-repeat: no-repeat; }
	.sa-btn--gold:hover, #btn-checkout:hover { animation: saRiflesso .9s ease; }
}
@keyframes saRiflesso { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* schede selezionabili: un filo di sollevamento al passaggio */
@media (hover: hover) {
	.model-card, .fabric-card, .color-card, .personalize-option__card { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
	.model-card:hover, .fabric-card:hover, .personalize-option__card:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
	.sa-onda, .sa-pop, .sa-scatto, .sa-salta { animation: none !important; }
}