/* Tchavana · motion layer (elegante e sobrio) */

html { scroll-behavior: smooth; }

/* Reveal raffinato */
.tc-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms cubic-bezier(.16,.84,.44,1), transform 700ms cubic-bezier(.16,.84,.44,1);
	will-change: opacity, transform;
}
.tc-reveal--in { opacity: 1; transform: none; }

/* Tilt card prodotto */
.tc-tilt {
	transition: transform 220ms cubic-bezier(.16,.84,.44,1), box-shadow 220ms ease;
	transform-style: preserve-3d;
}
.tc-tilt:hover { box-shadow: 0 18px 44px -22px rgba(44,42,36,.45); }

/* Bottoni magnetici — transizione morbida al ritorno */
[data-magnetic], .btn, .tc-hrc-btn { transition: transform 260ms cubic-bezier(.16,.84,.44,1), background 200ms, color 200ms, border-color 200ms; }

/* Parallax: evita scatti */
[data-parallax], .hero__media img, .hero img { backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.tc-reveal { opacity: 1; transform: none; transition: none; }
	[data-parallax], .hero__media img, .hero img { transform: none !important; }
}

/* ============================================================
   Sezione orizzontale "Il viaggio del latte"
   Default = stack verticale (mobile/no-JS); .tc-viaggio--active = pinned orizz.
   ============================================================ */
.tc-viaggio { position: relative; background: var(--paper-2); }
.tc-viaggio__intro { max-width: var(--maxw, 1200px); margin: 0 auto; padding: 84px 24px 22px; }
.tc-viaggio__track { display: flex; flex-direction: column; gap: 16px; padding: 0 24px 64px; }
.tc-viaggio__panel { position: relative; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; padding: 38px 34px; }
.tc-viaggio__num { font-family: Georgia, serif; font-size: clamp(56px, 9vw, 120px); line-height: .9; color: rgba(107,138,110,.16); margin-right: 24px; flex: 0 0 auto; }
.tc-viaggio__k { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--salvia-ink, #5E7960); margin: 0 0 8px; }
.tc-viaggio__t { font-family: Georgia, serif; font-weight: 400; font-size: clamp(28px, 3vw, 44px); margin: 0 0 10px; color: var(--ink, #2f3a2f); }
.tc-viaggio__d { font-size: 15px; line-height: 1.6; color: var(--ink-2, #5b574e); max-width: 46ch; }
.tc-viaggio__cta { display: inline-block; margin-top: 16px; color: var(--salviaD, #6B8A6E); text-decoration: none; font-weight: 600; }
.tc-viaggio__progress { display: none; }

.tc-viaggio--active { height: 360vh; }
.tc-viaggio--active .tc-viaggio__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.tc-viaggio--active .tc-viaggio__track { flex-direction: row; gap: 28px; height: auto; padding: 0 0 0 max(24px, calc((100vw - 1100px) / 2)); will-change: transform; }
.tc-viaggio--active .tc-viaggio__panel { flex: 0 0 64vw; max-width: 760px; min-height: 56vh; }
.tc-viaggio--active .tc-viaggio__progress { display: block; position: absolute; left: 24px; right: 24px; bottom: 32px; height: 2px; background: rgba(47,58,47,.12); }
.tc-viaggio--active .tc-viaggio__progress span { display: block; height: 100%; width: 0; background: var(--salviaD, #6B8A6E); transition: width .1s linear; }

/* ============================================================
   Timeline "Stratigrafia" · stessa meccanica orizzontale pinnata.
   Default = stack verticale; .tc-strata-h--active = scorre di lato, poi
   la pagina riprende verticale alla fine delle tappe.
   ============================================================ */
.tc-strata-h { position: relative; background: var(--cream-2, #f6efe0); }
.tc-strata-h__intro { max-width: var(--maxw, 1200px); margin: 0 auto; padding: 84px 24px 22px; }
.tc-strata-h__intro .lbl { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--salvia-ink, #5E7960); margin: 0 0 12px; }
.tc-strata-h__intro h2 { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: clamp(30px, 5vw, 64px); line-height: 1.04; margin: 0; color: var(--ink, #2C2A24); }
.tc-strata-h__intro h2 em { font-style: italic; color: var(--salviaD, #6B8A6E); }
.tc-strata-h__meta { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute, #6F6A57); margin: 14px 0 0; }
.tc-strata-h__swipe { display: none; }
.tc-strata-h__track { display: flex; flex-direction: column; gap: 14px; padding: 0 24px 64px; }
.tc-strata-h__card { position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; padding: 32px 30px; }
.tc-strata-h__strato { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute, #8A8471); }
.tc-strata-h__year { display: block; font-family: var(--serif, Georgia, serif); font-size: clamp(40px, 7vw, 84px); line-height: .92; color: var(--salviaD, #6B8A6E); margin: 6px 0 14px; }
.tc-strata-h__event { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: clamp(20px, 2.4vw, 30px); margin: 0 0 10px; color: var(--ink, #2C2A24); }
.tc-strata-h__desc { font-size: 15px; line-height: 1.6; color: var(--ink-2, #5b574e); max-width: 46ch; }
.tc-strata-h__progress { display: none; }

.tc-strata-h--active { height: var(--tc-strata-scroll, 420vh); }
.tc-strata-h--active .tc-strata-h__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.tc-strata-h--active .tc-strata-h__track { flex-direction: row; gap: 28px; height: auto; padding: 0 0 0 max(24px, calc((100vw - 1100px) / 2)); will-change: transform; align-items: stretch; }
.tc-strata-h--active .tc-strata-h__card { flex: 0 0 clamp(320px, 38vw, 460px); display: flex; flex-direction: column; justify-content: center; min-height: 52vh; }
.tc-strata-h--active .tc-strata-h__card::before { content: ""; position: absolute; top: 50%; left: -28px; width: 28px; height: 2px; background: var(--sabbia, #c4b98e); }
.tc-strata-h--active .tc-strata-h__card:first-child::before { display: none; }
.tc-strata-h--active .tc-strata-h__swipe { display: inline; }
.tc-strata-h--active .tc-strata-h__progress { display: block; position: absolute; left: 24px; right: 24px; bottom: 32px; height: 2px; background: rgba(47,58,47,.12); }
.tc-strata-h--active .tc-strata-h__progress span { display: block; height: 100%; width: 0; background: var(--salviaD, #6B8A6E); transition: width .1s linear; }

@media (prefers-reduced-motion: reduce) {
	.tc-strata-h--active { height: auto; }
	.tc-strata-h--active .tc-strata-h__sticky { position: static; height: auto; overflow: visible; display: block; }
	.tc-strata-h--active .tc-strata-h__track { flex-direction: column; transform: none !important; }
	.tc-strata-h--active .tc-strata-h__card { min-height: 0; }
}