/* ============================================================
   Tchavana · UX STEP — profondità, scroll orizzontali, leggibilità
   Layer progressivo: senza JS tutto resta usabile; con
   prefers-reduced-motion ogni movimento si spegne.
   ============================================================ */

/* ------------------------------------------------------------
   1 · REVEAL con stagger (classi applicate da ux-step.js)
   ------------------------------------------------------------ */
.uxr {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 760ms cubic-bezier(.16, .84, .44, 1),
		transform 760ms cubic-bezier(.16, .84, .44, 1);
	transition-delay: var(--uxr-d, 0ms);
	will-change: opacity, transform;
}
.uxr-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   2 · TILT 3D (variabili settate dal JS, solo pointer fine)
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
	.ux-tilt-wrap { perspective: 900px; }
	.ux-tilt {
		transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
		transition: transform 180ms cubic-bezier(.2, .8, .4, 1), box-shadow 260ms ease;
		transform-style: preserve-3d;
	}
	.ux-tilt.is-tilting {
		transition: box-shadow 260ms ease; /* il transform segue il mouse senza lag */
		box-shadow: 0 24px 50px -24px rgba(44, 42, 36, .38);
	}
	/* l'immagine dentro "galleggia" un filo davanti */
	.ux-tilt.is-tilting .bottega-photo img,
	.ux-tilt.is-tilting .article-card__media img,
	.ux-tilt.is-tilting .tc-product-card__media img {
		transform: translateZ(18px) scale(1.03);
	}
	.ux-tilt .bottega-photo img,
	.ux-tilt .article-card__media img,
	.ux-tilt .tc-product-card__media img {
		transition: transform 300ms cubic-bezier(.2, .8, .4, 1);
	}
}

/* ------------------------------------------------------------
   3 · SHELF · scroll orizzontale a scatti su mobile
   (bottega + articoli: da pila verticale infinita a nastro)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
	body:not(.tc-ux-no-shelf) .bottega-grid,
	body:not(.tc-ux-no-shelf) .articles {
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 14px !important;
		padding: 4px 18px 18px !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* sfumatura ai bordi: suggerisce che continua */
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
		        mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
	}
	body:not(.tc-ux-no-shelf) .bottega-grid::-webkit-scrollbar,
	body:not(.tc-ux-no-shelf) .articles::-webkit-scrollbar { display: none; }

	body:not(.tc-ux-no-shelf) .bottega-grid > *,
	body:not(.tc-ux-no-shelf) .articles > * {
		flex: 0 0 min(76vw, 320px);
		scroll-snap-align: center;
		width: auto !important;
		max-width: none !important;
	}
}

/* hint "scorri" (inserito dal JS, sparisce al primo swipe) */
.ux-shelf-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: -6px 0 6px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mute, #6F6A57);
	opacity: .85;
	transition: opacity 400ms ease;
}
.ux-shelf-hint .ux-shelf-hint__arrow { animation: ux-nudge 1.6s ease-in-out infinite; }
.ux-shelf-hint.is-done { opacity: 0; }
@keyframes ux-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(6px); }
}
@media (min-width: 901px) { .ux-shelf-hint { display: none; } }

/* ------------------------------------------------------------
   4 · FILM STRIP · nastro fotografico full-bleed (sezione home)
   ------------------------------------------------------------ */
.tc-film {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	padding: 26px 0 30px;
	overflow: hidden;
}
.tc-film__lbl {
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mute, #6F6A57);
	text-align: center;
	margin: 0 0 16px;
}
.tc-film__track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding: 6px 24px 14px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}
.tc-film__track:active { cursor: grabbing; }
.tc-film__track::-webkit-scrollbar { display: none; }
.tc-film__item {
	flex: 0 0 auto;
	scroll-snap-align: center;
	border-radius: 12px;
	overflow: hidden;
	background: var(--cream, #FDFBF7);
	box-shadow: 0 8px 24px -14px rgba(44, 42, 36, .35);
}
/* ritmo visivo: altezze leggermente alternate, come provini */
.tc-film__item img {
	display: block;
	height: 220px;
	width: auto;
	max-width: 78vw;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}
.tc-film__item:nth-child(odd) img { height: 190px; margin-top: 15px; }
@media (max-width: 640px) {
	.tc-film__item img { height: 170px; }
	.tc-film__item:nth-child(odd) img { height: 148px; margin-top: 11px; }
}

/* ------------------------------------------------------------
   5 · HEADER · vetro al scroll (classe dal JS)
   ------------------------------------------------------------ */
.topbar.is-scrolled {
	background: rgba(253, 251, 247, .82);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	        backdrop-filter: saturate(160%) blur(10px);
	box-shadow: 0 6px 24px -16px rgba(44, 42, 36, .35);
	transition: background 240ms ease, box-shadow 240ms ease;
}

/* ------------------------------------------------------------
   6 · LEGGIBILITÀ · misura di riga e respiro
   ------------------------------------------------------------ */
.entry-content p,
.page-article__content p { max-width: 70ch; }
.entry-content p { line-height: 1.72; }
.apertura-card p,
.tc-sicuri__body p,
.tc-trovarci-block p { max-width: 62ch; }
/* anchor che non finiscono sotto l'header sticky */
:target { scroll-margin-top: 90px; }

/* ------------------------------------------------------------
   7 · SHOP CRO · trust strip, badge, visti di recente, toast
   ------------------------------------------------------------ */
.tc-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	align-items: center;
	margin: 2px 0 18px;
	padding: 11px 16px;
	background: #F4EFE3;
	border: 1px solid #E9E1CE;
	border-radius: 10px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink, #2C2A24);
}
@media (max-width: 640px) {
	.tc-trust-strip { gap: 6px 14px; font-size: 9.5px; padding: 9px 12px; }
}

/* badge scarsità (stock vero) e best seller */
.tc-badge--low  { background: #B9452B; color: #FDFBF7; }
.tc-badge--best { background: #B5A164; color: #2C2A24; }

/* Visti di recente */
.tc-recent { margin: 34px 0 6px; }
.tc-recent__title {
	font-family: Georgia, serif;
	font-weight: 400;
	font-size: 22px;
	margin: 0 0 14px;
	color: var(--ink, #2C2A24);
}
.tc-recent__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}
.tc-recent-card {
	display: block;
	background: var(--cream, #FDFBF7);
	border: 1px solid #E9E1CE;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: var(--ink, #2C2A24);
	transition: transform 180ms ease, box-shadow 220ms ease;
}
.tc-recent-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(44, 42, 36, .4); }
.tc-recent-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.tc-recent-card__name {
	display: block;
	padding: 9px 11px 2px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tc-recent-card__price { display: block; padding: 2px 11px 11px; font-size: 12px; color: var(--mute, #6F6A57); }

/* Toast "aggiunto al carrello" con CTA */
.tc-toast--atc { z-index: 99999; }
.tc-toast--atc a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

/* ------------------------------------------------------------
   8 · MOVIMENTO SPENTO se l'utente lo chiede
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.uxr { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ux-tilt { transform: none !important; }
	.ux-shelf-hint .ux-shelf-hint__arrow { animation: none; }
	html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   9 · HERO · entrata cinematica al load (CSS puro, niente flash)
   I "momenti scenografici" delle pagine chiave: home + caseificio + altri hero.
   animation-fill-mode:both = parte già nascosto al primo paint, nessun lampo.
   ------------------------------------------------------------ */
@keyframes ux-hero-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero .idx,
.hero .hero-word__line,
.hero .hero-specs,
.hero .hero-caption,
.tc-cas-hero__text > *,
.tc-agri-hero__img,
.tc-menu-hero__inner > *,
.tc-ctn-hero__title, .tc-ctn-hero__sub,
.tc-wishlist-hero__title, .tc-wishlist-hero__sub,
.blog-hero > * {
	animation: ux-hero-in 820ms cubic-bezier(.16, .84, .44, 1) both;
}
.hero .hero-word__line:nth-child(1) { animation-delay: 90ms; }
.hero .hero-word__line:nth-child(2) { animation-delay: 170ms; }
.hero .hero-word__line:nth-child(3) { animation-delay: 250ms; }
.hero .hero-specs   { animation-delay: 340ms; }
.hero .hero-caption { animation-delay: 460ms; }
.tc-cas-hero__text > *:nth-child(2) { animation-delay: 90ms; }
.tc-cas-hero__text > *:nth-child(3) { animation-delay: 170ms; }
.tc-cas-hero__text > *:nth-child(4) { animation-delay: 250ms; }
.tc-cas-hero__text > *:nth-child(5) { animation-delay: 330ms; }
.tc-agri-hero__img  { animation-delay: 240ms; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.hero .idx, .hero .hero-word__line, .hero .hero-specs, .hero .hero-caption,
	.tc-cas-hero__text > *, .tc-agri-hero__img, .tc-menu-hero__inner > *,
	.tc-ctn-hero__title, .tc-ctn-hero__sub, .tc-wishlist-hero__title,
	.tc-wishlist-hero__sub, .blog-hero > * { animation: none !important; }
}