/* =============================================================
   ANIMATIONS · reveal on scroll, parallax, stagger
   ============================================================= */

/* Base: elemento con data-reveal parte nascosto e traslato */
[data-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity 800ms cubic-bezier(.2, .7, .2, 1),
		transform 800ms cubic-bezier(.2, .7, .2, 1);
	will-change: opacity, transform;
}
[data-reveal="slide-up"]    { transform: translate3d(0, 28px, 0); }
[data-reveal="slide-down"]  { transform: translate3d(0, -28px, 0); }
[data-reveal="slide-left"]  { transform: translate3d(28px, 0, 0); }
[data-reveal="slide-right"] { transform: translate3d(-28px, 0, 0); }
[data-reveal="fade"]        { transform: none; }
[data-reveal="scale"]       { transform: scale(0.94); }

/* Revealed: torna al valore finale */
[data-reveal].is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* Quando reduce-motion è attivo, rendi tutto visibile senza animazione */
.no-anim [data-reveal],
.no-anim [data-parallax],
.no-anim .hero-word__line {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* Parallax: will-change per performance GPU */
[data-parallax] {
	will-change: transform;
	transition: none;
}

/* Header condensato su scroll */
.topbar {
	transition: padding 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease, background 260ms ease;
}
.topbar.is-scrolled {
	box-shadow: 0 1px 0 var(--line-soft), 0 8px 24px -12px rgba(44,42,36,0.08);
	background: color-mix(in oklch, var(--cream) 96%, transparent);
}
.topbar.is-scrolled .topbar-row {
	height: 56px;
}
.topbar.is-scrolled .topbar-logo__mark {
	height: 38px;
}

@media (max-width: 960px) {
	.topbar.is-scrolled .topbar-row { height: 52px; }
	.topbar.is-scrolled .topbar-logo__mark { height: 32px; }
}

/* Fine-tuning card hover: aggiunge una levitazione micro */
.bottega-card,
.article-card,
.stat-cell,
.post-card {
	transition:
		transform 380ms cubic-bezier(.2,.7,.2,1),
		box-shadow 380ms cubic-bezier(.2,.7,.2,1),
		background 280ms ease;
}

/* Hero photo img: scale base per il parallax */
.hero-photo img {
	transition: transform 80ms linear;
	will-change: transform;
}

/* Smooth marquee: pausa su hover viene gestita in JS */
.marquee-track {
	will-change: transform;
}

/* Scroll indicator (opzionale su hero) */
.scroll-indicator {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	animation: bob 2.4s ease-in-out infinite;
}
.scroll-indicator::after {
	content: '';
	width: 1px;
	height: 24px;
	background: var(--mute);
	animation: shrink 2.4s ease-in-out infinite;
}
@keyframes bob {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 6px); }
}
@keyframes shrink {
	0%, 100% { transform: scaleY(1); transform-origin: top; }
	50%      { transform: scaleY(0.3); transform-origin: bottom; }
}

/* Entry animations per pagina (page-in già in base) */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Fade-in soft delle immagini (blur + unblur) */
img[loading] {
	transition: filter 400ms ease, opacity 400ms ease;
}
img[loading="lazy"] {
	opacity: 0.9;
}
img[loading="lazy"].is-loaded {
	opacity: 1;
}

/* Stat cell numeri: effetto scorrimento morbido */
.stat-num {
	font-variant-numeric: tabular-nums;
}