/* Sottosopra Fest — Podium Soft (servito da public/, non processato da webpack) */
@font-face {
	font-family: 'Podium Soft';
	src: url('/fonts/podium-soft/PODIUMSoft-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Podium Soft';
	src: url('/fonts/podium-soft/PODIUMSoft-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Podium Soft';
	src: url('/fonts/podium-soft/PODIUMSoft-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Podium Soft';
	src: url('/fonts/podium-soft/PODIUMSoft-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
.ssf-display {
	font-family: 'Podium Soft', Impact, 'Arial Black', sans-serif;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-weight: 900;
}

/* ===== Card collezionabili: finiture foil/holo (B/N premium) ===== */
@keyframes ssf-shine {
	0% { background-position: -150% 0; }
	100% { background-position: 250% 0; }
}
/* sweep argento diagonale (Rara/Leggendaria) */
.ssf-foil {
	background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.45) 55%, transparent 75%);
	background-size: 250% 100%;
	mix-blend-mode: overlay;
	animation: ssf-shine 5.5s ease-in-out infinite;
}
/* holografico (Leggendaria): spettro tenue su sfondo B/N, reagisce alla posizione */
.ssf-holo {
	background: conic-gradient(from 120deg at 50% 50%, rgba(255, 0, 204, 0.22), rgba(0, 255, 224, 0.22), rgba(255, 225, 0, 0.22), rgba(0, 255, 123, 0.22), rgba(120, 80, 255, 0.22), rgba(255, 0, 204, 0.22));
	background-size: 200% 200%;
	mix-blend-mode: color-dodge;
}
/* testo metallico (nameplate) */
.ssf-foil-text {
	background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 42%, #ffffff 52%, #9a9a9a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ===== Wizard: entrata step + card che fluttua ===== */
@keyframes ssf-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
.ssf-in { animation: ssf-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ssf-in-1 { animation-delay: 0.06s; }
.ssf-in-2 { animation-delay: 0.12s; }
.ssf-in-3 { animation-delay: 0.18s; }
.ssf-in-4 { animation-delay: 0.24s; }

@keyframes ssf-float {
	0%, 100% { transform: translateY(0) rotate(-0.6deg); }
	50%      { transform: translateY(-6px) rotate(0.6deg); }
}
.ssf-float { animation: ssf-float 6s ease-in-out infinite; }

/* nome che compare sulla card (nameplate) */
@keyframes ssf-name-in {
	from { opacity: 0; transform: translateY(6px); letter-spacing: 0.1em; }
	to   { opacity: 1; transform: none; letter-spacing: -0.01em; }
}
.ssf-name-in { animation: ssf-name-in 0.35s ease-out both; }

@media (prefers-reduced-motion: reduce) {
	.ssf-in, .ssf-float, .ssf-name-in, .ssf-foil { animation: none; }
	.ssf-in { opacity: 1; transform: none; }
}