/* ==========================================================================
   TerPack — sezioni Home (hero, numeri, showreel, prodotti)
   Struttura e movimenti ricalcati su palladiogroup.com, con identità TerPack.
   ========================================================================== */

.tp-row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 23px var(--tp-gutter);
	font-size: 14px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
	color: #fff;
}
.tp-row--dark { color: var(--tp-teal-dark); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Wrapper Elementor attorno agli shortcode: niente padding e niente overflow che rompa sticky/pin */
.elementor .tp-fullbleed { padding: 0 !important; display: block !important; width: 100%; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.tp-intro {
	position: relative; isolation: isolate;
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: flex-end;
	overflow: hidden;
	background: var(--tp-bg);
	color: #fff;
}
.tp-intro__stage { position: absolute; inset: 0; z-index: 0; }
.tp-intro__item {
	position: absolute; left: var(--x); top: var(--y);
	width: var(--w); height: auto; max-width: none;
	translate: -50% -50%; rotate: var(--r);
	filter: drop-shadow(1.2vw 2vw 1.6vw rgba(19, 50, 45, 0.26));
	will-change: transform;
	user-select: none;
}
.tp-intro__fade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(243, 244, 241, 0) 0%,
		rgba(243, 244, 241, 0) 36%,
		rgba(110, 178, 166, 0.45) 56%,
		rgba(47, 146, 131, 0.86) 74%,
		#1E6359 88%,
		var(--tp-teal-dark) 100%);
	pointer-events: none;
}
.tp-intro__content { position: relative; z-index: 2; padding: 0 var(--tp-gutter) clamp(28px, 4.4vh, 86px); }
.tp-intro__claim-row { display: flex; align-items: center; gap: clamp(20px, 3.2vw, 70px); overflow: hidden; }
.tp-site .tp-intro__claim {
	margin: 0; overflow: hidden;
	color: #fff !important;
	font-size: clamp(40px, 5.55vw, 150px) !important; font-weight: 500 !important;
	line-height: 1.1 !important; letter-spacing: -0.012em !important;
	text-transform: uppercase; white-space: nowrap;
}
.tp-intro__phrase { display: inline-block; will-change: transform; }
.tp-intro__arrow { flex: 0 0 auto; display: inline-flex; color: #fff; }
.tp-intro__arrow-svg { width: clamp(36px, 4.6vw, 116px); height: auto; stroke-width: 2.4; }

.tp-intro__bar { position: relative; z-index: 2; padding: 0 var(--tp-gutter); }
.tp-intro__bar-inner {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
	padding: 23px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.85);
	font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
}
.tp-intro__pair { display: flex; align-items: center; gap: 20px; }
.tp-intro__line { display: block; width: 40px; height: 1px; background: #fff; }
.tp-site .tp-intro__hint { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.tp-intro__hint-svg { width: 9px; height: 9px; stroke-width: 9; }
.tp-intro__index { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; gap: clamp(16px, 2vw, 40px); }
.tp-site .tp-intro__index a { display: inline-flex; color: #fff; text-decoration: none; }
.tp-intro__index .value { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s var(--tp-ease), margin .5s var(--tp-ease); }
.tp-intro__index a:hover .value { max-width: 12em; margin-left: .45em; }
.tp-intro__index .num { display: inline-block; }

@media (max-width: 767px) {
	.tp-site .tp-intro__claim { white-space: normal; font-size: 12.5vw !important; line-height: 1.02 !important; }
	.tp-intro__arrow { display: none; }
	.tp-intro__bar-inner { grid-template-columns: 1fr; justify-items: center; padding: 26px 0 40px; }
	.tp-intro__hint, .tp-intro__index { display: none !important; }
	.tp-intro__item { --w-m: calc(var(--w) * 1.9); width: var(--w-m); }
}

/* --------------------------------------------------------------------------
   NUMERI [01] — scorrimento orizzontale
   -------------------------------------------------------------------------- */
.tp-data {
	position: relative; overflow: hidden;
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: space-between;
	color: #fff;
	background:
		radial-gradient(60% 70% at 58% 46%, #0E3732 0%, rgba(14, 55, 50, 0) 70%),
		radial-gradient(80% 90% at 20% 10%, #2F9283 0%, rgba(47, 146, 131, 0) 60%),
		linear-gradient(160deg, #3A9A8A 0%, #1E6359 45%, #134A43 70%, #2A7F72 100%);
}
.tp-data__head { display: flex; flex-direction: column; gap: clamp(24px, 2.4vw, 48px); padding: 32px 0 clamp(40px, 4vw, 70px); }
.tp-data__head .tp-row { padding-top: 23px; padding-bottom: 0; }
.tp-data__grid {
	display: grid; grid-template-columns: 2fr 1fr; gap: clamp(40px, 3.75vw, 75px);
	padding: 0 var(--tp-gutter);
}
.tp-site .tp-data__title {
	margin: 0; padding-right: clamp(0px, 11vw, 220px); color: #fff !important;
	font-size: clamp(32px, 3.9vw, 100px) !important; font-weight: 300 !important;
	line-height: 1.2 !important; letter-spacing: -0.01em !important;
}
.tp-data__aside { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: clamp(28px, 2.4vw, 48px); }
.tp-data__aside p { margin: 0; color: rgba(255, 255, 255, 0.92); font-size: clamp(16px, 0.5vw + 12px, 20px); line-height: 1.5; font-weight: 400; }
.tp-data__aside p:empty { display: none; }

.tp-data__rail { border-top: 1px solid rgba(255, 255, 255, 0.85); }
.tp-data__track { display: flex; width: max-content; will-change: transform; }
.tp-data__card {
	flex: 0 0 auto; width: 41.5vw; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center; gap: clamp(24px, 2.5vw, 50px);
	padding: clamp(18px, 2.4vh, 25px) clamp(16px, 4vw, 80px);
	border-right: 1px solid rgba(255, 255, 255, 0.85);
	min-height: clamp(160px, 28vh, 300px);
}
.tp-data__icon { flex: 0 0 auto; width: clamp(80px, 9.6vw, 194px); color: #fff; }
.tp-icon { width: 100%; height: auto; display: block; }
.tp-data__value {
	margin: 0; display: flex; align-items: flex-end; gap: 12px;
	font-size: clamp(36px, 4.4vw, 112px); font-weight: 300; line-height: 1;
}
.tp-data__label { margin: 8px 0 0; font-size: clamp(16px, 1.1vw, 22px); font-weight: 400; }

@media (max-width: 997px) {
	.tp-data__grid { grid-template-columns: 1fr; }
	.tp-site .tp-data__title { padding-right: 0; }
	.tp-data__rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.tp-data__rail::-webkit-scrollbar { display: none; }
	.tp-data__card { width: 82vw; scroll-snap-align: start; justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   SHOWREEL [02]
   -------------------------------------------------------------------------- */
.tp-showreel { position: relative; background: var(--tp-bg); color: var(--tp-teal-dark); }
.tp-showreel__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.tp-showreel__before {
	position: absolute; z-index: 2; top: 14vh; left: var(--tp-gutter); right: var(--tp-gutter);
	display: flex; align-items: center; gap: 25px;
	font-size: clamp(36px, 5.2vw, 132px); font-weight: 300; letter-spacing: -0.02em; line-height: 1;
}
.tp-showreel__before i, .tp-showreel__word i { flex: 1 1 auto; height: 1px; background: var(--tp-teal); display: block; }
.tp-showreel__media {
	position: absolute; z-index: 1; left: 50%; top: 35vh;
	width: 30%; height: 28vh; translate: -50% 0;
	overflow: hidden; background: var(--tp-teal-dark);
}
.tp-showreel__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-showreel__after {
	position: absolute; z-index: 2; bottom: 13vh; left: 30%; right: var(--tp-gutter);
	display: flex; justify-content: flex-end; gap: 25px;
}
.tp-showreel__word { flex: 1 1 0; display: flex; align-items: center; gap: 18px; min-width: 0; }
.tp-showreel__word b { font-weight: 500; font-size: clamp(18px, 1.9vw, 44px); white-space: nowrap; }

@media (max-width: 767px) {
	.tp-showreel__pin { height: auto; padding: 24px var(--tp-gutter) 64px; display: flex; flex-direction: column; gap: 28px; }
	.tp-showreel__before, .tp-showreel__media, .tp-showreel__after { position: static; translate: none; }
	.tp-showreel__media { width: 100%; height: 56vw; }
	.tp-showreel__after { flex-direction: column; align-items: flex-start; }
	.tp-showreel__word i { flex: 0 0 32px; }
}

/* --------------------------------------------------------------------------
   PRODOTTI [03]
   -------------------------------------------------------------------------- */
.tp-products { position: relative; background: #fff; color: var(--tp-teal-dark); }
.tp-products__intro {
	min-height: 100vh; min-height: 100svh; box-sizing: border-box;
	display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
	padding: 32px 0 55px;
}
.tp-products__intro .tp-row { padding-top: 23px; }
.tp-site .tp-products__title {
	margin: 0; padding: clamp(0px, 2.5vw, 50px) var(--tp-gutter) 0;
	color: var(--tp-teal-dark) !important;
	font-size: clamp(36px, 4.6vw, 112px) !important; font-weight: 300 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important;
}
.tp-products__text { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 calc(var(--tp-gutter) * 2) clamp(40px, 5.5vw, 110px); }
.tp-products__text p { grid-column: 3; margin: 0; padding-left: clamp(0px, 4.5vw, 90px); font-size: clamp(16px, 0.5vw + 12px, 20px); line-height: 1.5; font-weight: 400; }
.tp-products__text p:empty { display: none; }
.tp-products__mobile { display: none; }

.tp-products__stage {
	position: relative; min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
	gap: clamp(50px, 5.5vw, 110px);
	padding-bottom: clamp(50px, 9vw, 178px);
	overflow-x: clip;
}
.tp-products__sticky {
	position: sticky; top: 0; z-index: 3;
	height: 100vh; height: 100svh;
	pointer-events: none;
}
.tp-products__content { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }
.tp-products__objects {
	position: absolute; left: 50%; top: 46%;
	width: min(46vw, 900px); aspect-ratio: 4 / 3;
	translate: -50% -50%;
}
.tp-products__float { position: absolute; inset: 0; animation: tp-float 7s ease-in-out infinite; }
@keyframes tp-float {
	0%, 100% { transform: translateY(-1.2%) rotate(-1.6deg); }
	50% { transform: translateY(1.6%) rotate(1.8deg); }
}
.tp-products__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
	opacity: 0; transform: scale(0.86) rotate(-6deg) translateY(4%);
	transition: opacity .45s ease, transform .9s var(--tp-ease);
	filter: drop-shadow(0 3vw 2.4vw rgba(19, 50, 45, 0.24));
}
.tp-products__img.is-active { opacity: 1; transform: none; }

.tp-products__head { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(25px, 2.4vw, 48px); width: 100%; }
.tp-site .tp-products__big {
	margin: 0; text-align: center; white-space: nowrap;
	font-size: min(10vw, 260px) !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important;
	text-transform: uppercase;
	background: linear-gradient(90deg, #3A9A8A 0%, var(--tp-teal) 30%, var(--tp-teal-dark) 50%, var(--tp-teal) 70%, #3A9A8A 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent !important; -webkit-text-fill-color: transparent;
}
.tp-products__cta { align-self: flex-start; margin-left: 11vw; position: relative; z-index: 4; }

.tp-products__groups { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; }
.tp-products__group {
	display: flex; justify-content: center; padding: 0 var(--tp-gutter);
	border-top: 1px solid #D5E3E0; overflow: hidden;
}
.tp-products__group:last-child { border-bottom: 1px solid #D5E3E0; }
.tp-site .tp-products__link {
	display: flex; align-items: center; justify-content: center;
	padding: clamp(14px, 1.33vw, 27px) clamp(24px, 3.2vw, 64px);
	border-right: 1px solid #D5E3E0;
	text-decoration: none;
}
.tp-products__link:last-child { border-right: 0; }
.tp-products__name {
	font-size: clamp(32px, 4.4vw, 110px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em;
	color: #D5E3E0; transition: color .25s ease-in-out;
	white-space: nowrap;
}
.tp-products__link:hover .tp-products__name,
.tp-products__link:focus-visible .tp-products__name,
.tp-products__link.is-active .tp-products__name { color: var(--tp-teal); }

@media (max-width: 997px) {
	.tp-products__stage, .tp-products__sticky { display: none; }
	.tp-products__content { margin-top: 0; }
	.tp-products__intro { min-height: 0; }
	.tp-products__text { grid-template-columns: 1fr; padding: 24px var(--tp-gutter) 0; }
	.tp-products__text p { grid-column: 1; padding-left: 0; }
	.tp-products__mobile { display: flex; flex-direction: column; gap: 12px; padding: 30px var(--tp-gutter) 0; }
	.tp-products__mobile-title { margin: 0 0 18px; font-size: 35px; font-weight: 500; text-transform: uppercase; }
	.tp-site .tp-products__mobile a:not(.tp-pill) { font-size: 30px; font-weight: 500; color: var(--tp-teal-dark); text-decoration: none; }
	.tp-products__mobile .tp-pill { align-self: flex-start; margin-top: 30px; }
}

/* Pill chiara su sfondo scuro */
.tp-site a.tp-pill--light { color: #fff; border-color: #fff; }
.tp-site a.tp-pill--light:hover { background: #fff; color: var(--tp-teal-dark); border-color: #fff; }

/* Header sopra la hero: trasparente in cima */
.home .tp-header:not(.is-scrolled) { background: transparent; }

@media (prefers-reduced-motion: reduce) {
	.tp-products__float { animation: none; }
}
