/* ═══════════════════════════════════════════════════════════
   Hero Flusso — cipria × verde sivit
   Full redesign — overrides hub-hero-redesign in main.css
   ═══════════════════════════════════════════════════════════ */

/* ── Token palette ── */
.hub-hero-redesign {
	--verde:        #00929c;
	--verde-light:  #00c4d2;
	--verde-deep:   #005860;
	--cipria:       #d9a88c;
	--cipria-light: #f4e3d8;
	--cipria-deep:  #b87558;
	--hero-ink:     #f9f6f1;
	--hero-muted:   rgba(249, 246, 241, 0.60);

	display: flex;
	flex-direction: column;

	/* Resin surface — pure dark base; image and verde glow do the work */
	background:
		/* Left text-area: darken so copy reads on any image */
		linear-gradient(92deg,
			rgba(0, 3, 5, 0.76) 0%,
			rgba(0, 3, 5, 0.44) 36%,
			rgba(0, 3, 5, 0.07) 60%,
			transparent 78%),
		/* Verde: directional upward glow from bottom — resin floor lit from below */
		radial-gradient(ellipse 130% 34% at 50% 110%,
			rgba(0, 195, 210, 0.34) 0%,
			rgba(0, 148, 158, 0.16) 44%,
			transparent 68%),
		/* Base */
		#010c0f;
}

/* ── Background image — let the industrial space show, just properly darkened ── */
.hub-hero-redesign .hub-bg {
	opacity: 0.82;
	object-position: 52% 38%;
	filter: saturate(0.62) contrast(1.02) brightness(0.72);
	transform: scale(1.04);
}

/* ── Canvas — nascosto: crea artefatti visivi ── */
.hub-resin-canvas {
	opacity: 0;
	pointer-events: none;
}

/* ── Animated orb lights ── */
.hero-orbs {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.hero-orb {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
}

.hero-orb-verde {
	width: 90vw;
	height: 60vw;
	max-width: 1200px;
	max-height: 800px;
	bottom: -30%;
	left: -20%;
	background: radial-gradient(circle,
		rgba(0, 200, 215, 0.38) 0%,
		rgba(0, 160, 172, 0.14) 44%,
		transparent 68%);
	filter: blur(110px);
	animation: orb-verde 32s ease-in-out infinite alternate;
}

/* Cipria orb hidden — handled by background gradient to avoid blob artifact */
.hero-orb-cipria {
	opacity: 0;
}

@keyframes orb-verde {
	from { transform: translate(0, 0) scale(1);        }
	to   { transform: translate(12px, -10px) scale(1.04); }
}

/* ── Main overlay (vignette) ── */
.hub-hero-redesign::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg,
			rgba(4, 9, 11, 0.46)  0%,
			rgba(4, 9, 11, 0)    16%,
			rgba(4, 9, 11, 0)    54%,
			rgba(4, 9, 11, 0.42) 100%),
		linear-gradient(108deg,
			rgba(4, 9, 11, 0.36)  0%,
			transparent          46%,
			rgba(24, 14, 8, 0.12) 100%);
	pointer-events: none;
}

/* Remove old ::after */
.hub-hero-redesign::after {
	display: none;
}

/* Canvas permanently hidden — creates wave artifact in screen blend mode */

/* ── Topbar ── */
.hub-hero-redesign .hub-topbar {
	justify-content: center;
	height: 70px;
	background: rgba(3, 9, 11, 0.76);
	border-bottom: none;
	backdrop-filter: blur(24px);
	box-shadow: none;
}

.hub-hero-redesign .hub-topbar::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		rgba(0, 175, 187, 0.46) 28%,
		rgba(217, 168, 140, 0.46) 72%,
		transparent);
}

.hub-hero-redesign .hub-topbar.is-scrolled {
	height: 62px;
	background: rgba(3, 9, 11, 0.94);
}

/* ── Hero inner grid ── */
.hub-hero-redesign .hub-hero-inner {
	position: relative;
	z-index: 10;
	flex: 1;
	display: grid;
	grid-template-columns: 1fr minmax(440px, 0.78fr);
	align-items: center;
	gap: clamp(40px, 5.5vw, 100px);
	width: min(100% - 64px, 1480px);
	margin: 0 auto;
	padding: 108px 0 72px;
	min-height: 0; /* override old min-height:100vh */
}

/* ── Eyebrow line ── */
.hero-eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 14px;
	margin-bottom: 26px;
	color: rgba(249, 246, 241, 0.48);
	font-size: 0.66rem;
	font-weight: 840;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hero-eyebrow-line {
	display: block;
	width: 36px;
	height: 1px;
	background: linear-gradient(90deg, var(--verde-light), var(--cipria));
	flex: 0 0 auto;
}

.hero-eyebrow-dot {
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--cipria);
	flex: 0 0 auto;
	opacity: 0.68;
}

/* ── Display headline ── */
.hero-display {
	margin: 0;
	font-size: clamp(62px, 8.6vw, 148px);
	line-height: 0.88;
	font-weight: 780;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.hd-line   { display: block; }
.hd-white  { color: var(--hero-ink); }

.hd-gradient {
	position: relative;
	background: linear-gradient(96deg, #008c96 0%, #00c4d2 42%, #008c96 100%);
	background-size: 180% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: surfaces-gradient-flow 7.2s ease-in-out infinite;
	will-change: background-position, filter;
}

.hd-gradient::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(96deg, #daa88c 0%, #f4e3d8 44%, #daa88c 100%);
	background-size: 180% 100%;
	background-position: 100% 50%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	opacity: 0;
	animation: surfaces-cipria-flow 7.2s ease-in-out infinite;
	pointer-events: none;
	will-change: opacity, background-position;
}

@keyframes surfaces-gradient-flow {
	0% {
		background-position: 0% 50%;
		filter: saturate(1.16) brightness(1.04);
	}
	50% {
		background-position: 100% 50%;
		filter: saturate(1.30) brightness(1.08);
	}
	100% {
		background-position: 0% 50%;
		filter: saturate(1.16) brightness(1.04);
	}
}

@keyframes surfaces-cipria-flow {
	0%, 100% {
		opacity: 0;
		background-position: 100% 50%;
	}
	38%, 62% {
		opacity: 0.96;
		background-position: 0% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-gradient,
	.hd-gradient::after {
		animation: none;
		background-position: 50% 50%;
	}
}

/* ── Subtitle ── */
.hero-sub {
	max-width: 540px;
	margin: 28px 0 0;
	color: var(--hero-muted);
	font-size: 1.04rem;
	line-height: 1.74;
}

/* ── CTA buttons ── */
.hub-hero-redesign .hub-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

.hub-hero-redesign .hub-cta-industrial {
	background: var(--verde);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 16px 48px rgba(0, 146, 156, 0.38);
}

.hub-hero-redesign .hub-cta-industrial:hover,
.hub-hero-redesign .hub-cta-industrial:focus-visible {
	background: var(--verde-light);
	box-shadow: 0 22px 60px rgba(0, 196, 210, 0.48);
	transform: translateY(-2px);
}

.hub-hero-redesign .hub-cta-design {
	background: #daa88c;
	color: #2c1608;
	border-color: rgba(193, 134, 115, 0.34);
	box-shadow: 0 16px 48px rgba(218, 168, 140, 0.30);
}

.hub-hero-redesign .hub-cta-design:hover,
.hub-hero-redesign .hub-cta-design:focus-visible {
	background: #c18673;
	color: #fff;
	box-shadow: 0 22px 60px rgba(193, 134, 115, 0.42);
	transform: translateY(-2px);
}

/* ── World stack — card impilate e ruotate ── */
.hub-hero-redesign .hub-world-stack {
	position: relative;
	display: block;
	min-height: 580px;
	isolation: isolate;
	perspective: 1200px;
}

/* ── World cards — absolute stacked design ── */
.hub-hero-redesign .hub-world-card {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 36px 90px rgba(0, 0, 0, 0.40);
	transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}

.hub-hero-redesign .hub-world-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	transition: transform 480ms var(--ease), opacity 300ms var(--ease);
}

.hub-hero-redesign .hub-world-card:hover::before,
.hub-hero-redesign .hub-world-card:focus-visible::before {
	transform: scale(1.07);
}

/* ── Reset old hub-world-card strong/em rules that bleed into new structure ── */
.hub-hero-redesign .hub-world-card strong {
	max-width: none;
	margin: 0;
	font-size: clamp(16px, 1.8vw, 23px);
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: 0;
	text-wrap: balance;
}

.hub-hero-redesign .hub-world-card em {
	width: auto;
	margin-top: 16px;
	font-size: 0.66rem;
}

/* ── hwc elements (new card inner structure) ── */
.hwc-num {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	color: currentColor;
	font-size: 0.70rem;
	font-weight: 860;
	letter-spacing: 0.18em;
	opacity: 0.38;
}

.hwc-body {
	position: relative;
	z-index: 2;
	padding: 28px;
	display: flex;
	flex-direction: column;
}

.hwc-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 0.70rem;
	font-weight: 860;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.76;
}

.hwc-label .icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.hwc-logo-label {
	width: fit-content;
	min-height: 0;
	margin-bottom: 16px;
	opacity: 0.88;
}

.hwc-logo {
	display: block;
	width: auto;
	height: auto;
	object-fit: contain;
}

.hwc-logo-industrial {
	max-width: 116px;
}

.hwc-logo-design {
	max-width: 154px;
}

.hwc-title {
	display: block;
	font-size: clamp(17px, 1.9vw, 25px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: 0;
	text-wrap: balance;
}

.hwc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

.hwc-tags i {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
	border: 1px solid currentColor;
	font-size: 0.58rem;
	font-style: normal;
	font-weight: 860;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.58;
}

.hwc-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 0.68rem;
	font-style: normal;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hwc-cta .icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

/* ── Industrial card — ruotata a sinistra, in primo piano ── */
.hub-hero-redesign .hub-world-card-industrial {
	top: 46px;
	left: 0;
	z-index: 2;
	width: min(57%, 480px);
	min-height: 400px;
	border-color: rgba(0, 175, 187, 0.30);
	background: linear-gradient(148deg, rgba(0, 56, 62, 0.96) 0%, rgba(2, 14, 16, 0.94) 100%);
	transform: rotate(-2.5deg) translateZ(0);
}

.hub-hero-redesign .hub-world-card-industrial::before {
	background-image: url("/wp-content/uploads/2026/06/realizzazioni-mecca.2e16d0ba.fill-1800x1012.format-webp_GFLbHxM.webp");
	opacity: 0.92;
}

.hub-hero-redesign .hub-world-card-industrial::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg,
			rgba(0, 22, 26, 0.04) 0%,
			rgba(0, 22, 26, 0.08) 38%,
			rgba(0, 16, 20, 0.72) 72%,
			rgba(0, 12, 16, 0.96) 100%),
		linear-gradient(148deg, rgba(0, 175, 187, 0.14) 0%, transparent 50%);
}

.hub-hero-redesign .hub-world-card-industrial:hover,
.hub-hero-redesign .hub-world-card-industrial:focus-visible {
	transform: rotate(-1deg) translateY(-10px);
	border-color: rgba(0, 196, 210, 0.54);
	box-shadow:
		0 54px 120px rgba(0, 0, 0, 0.54),
		0 0 0 1px rgba(0, 175, 187, 0.24);
}

.hub-hero-redesign .hub-world-card-industrial .hwc-cta {
	color: var(--verde-light);
}

/* ── Design card — ruotata a destra, sopra l'industrial ── */
.hub-hero-redesign .hub-world-card-design {
	right: 0;
	bottom: 16px;
	z-index: 3;
	width: min(63%, 530px);
	min-height: 400px;
	color: #28140a;
	border-color: rgba(217, 168, 140, 0.42);
	background: #ede0d2;
	transform: rotate(2.5deg) translateZ(0);
}

.hub-hero-redesign .hub-world-card-design::before {
	background-image: url("/wp-content/uploads/2026/06/sivit.design-55.2e16d0ba.fill-1800x1012.format-webp.webp");
	opacity: 0.90;
	mix-blend-mode: normal;
}

.hub-hero-redesign .hub-world-card-design::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg,
			rgba(244, 227, 215, 0.04) 0%,
			rgba(244, 227, 215, 0.08) 38%,
			rgba(240, 220, 200, 0.82) 72%,
			rgba(236, 215, 195, 0.97) 100%),
		linear-gradient(148deg, rgba(217, 168, 140, 0.18) 0%, transparent 54%);
}

.hub-hero-redesign .hub-world-card-design:hover,
.hub-hero-redesign .hub-world-card-design:focus-visible {
	transform: rotate(1deg) translateY(-10px);
	border-color: rgba(217, 168, 140, 0.64);
	box-shadow:
		0 54px 120px rgba(0, 0, 0, 0.38),
		0 0 0 1px rgba(217, 168, 140, 0.28);
}

.hub-hero-redesign .hub-world-card-design .hwc-tags i {
	opacity: 0.52;
}

.hub-hero-redesign .hub-world-card-design .hwc-cta {
	color: var(--cipria-deep);
}

/* ══════════════════════
   Responsive
   ══════════════════════ */
@media (max-width: 1180px) {
	.hub-hero-redesign .hub-hero-inner {
		grid-template-columns: 1fr;
		gap: 48px;
		width: min(100% - 48px, 900px);
		padding: 108px 0 64px;
	}

	.hero-display {
		font-size: clamp(54px, 9vw, 110px);
	}

	.hub-hero-redesign .hub-world-stack {
		height: clamp(380px, 44vh, 500px);
	}
}

@media (max-width: 760px) {
	.hub-hero-redesign .hub-topbar {
		height: 62px;
		padding: 0 20px;
	}

	.hub-hero-redesign .hub-hero-inner {
		width: min(100% - 32px, 600px);
		padding: 94px 0 44px;
		gap: 36px;
	}

	.hero-display {
		font-size: clamp(44px, 12vw, 72px);
		line-height: 0.92;
	}

	.hero-eyebrow {
		font-size: clamp(0.47rem, 1.85vw, 0.58rem);
		gap: 8px;
		flex-wrap: nowrap;
		letter-spacing: 0.10em;
		overflow: hidden;
		white-space: nowrap;
	}

	.hero-eyebrow-line {
		width: 28px;
	}

	.hero-sub {
		font-size: 0.96rem;
	}

	.hub-hero-redesign .hub-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.hub-hero-redesign .hub-actions .btn-primary,
	.hub-hero-redesign .hub-actions .btn-light {
		width: 100%;
		justify-content: space-between;
	}

	.hub-hero-redesign .hub-world-stack {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		height: auto;
		min-height: 0;
		perspective: none;
	}

	.hub-hero-redesign .hub-world-card,
	.hub-hero-redesign .hub-world-card-industrial,
	.hub-hero-redesign .hub-world-card-design {
		position: relative;
		inset: auto;
		width: 100%;
		height: 360px;
		min-height: 360px;
		transform: none;
	}

	.hub-hero-redesign .hub-world-card .hwc-body {
		padding: 24px;
	}

	.hub-hero-redesign .hub-world-card strong {
		font-size: clamp(18px, 5vw, 22px);
	}

	.hub-hero-redesign .hub-world-card em {
		margin-top: 12px;
	}

	.hub-hero-redesign .hub-world-card-design .hwc-logo-design {
		max-width: 138px;
	}

	.hub-hero-redesign .hub-world-card-industrial:hover,
	.hub-hero-redesign .hub-world-card-industrial:focus-visible,
	.hub-hero-redesign .hub-world-card-design:hover,
	.hub-hero-redesign .hub-world-card-design:focus-visible {
		transform: translateY(-6px);
	}
}

@media (max-width: 420px) {
	.hero-eyebrow {
		font-size: 0.47rem;
		gap: 7px;
		letter-spacing: 0.075em;
	}

	.hero-eyebrow-line {
		width: 22px;
	}

	.hub-hero-redesign .hub-world-card-design .hwc-body {
		padding-bottom: 26px;
	}

	.hub-hero-redesign .hub-world-card-design .hwc-logo-design {
		max-width: 128px;
	}
}

/* Keep the fixed homepage menu above embedded video layers. */
.hub-topbar {
	z-index: 100000 !important;
	transform: translateZ(0);
	isolation: isolate;
}

.hub-topbar-redesign {
	justify-content: center;
	height: 70px;
	background: rgba(3, 9, 11, 0.76);
	border-bottom: none;
	backdrop-filter: blur(24px);
	box-shadow: none;
}

.hub-topbar-redesign::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 175, 187, 0.46) 28%, rgba(217, 168, 140, 0.46) 72%, transparent);
}

.hub-topbar-redesign.is-scrolled {
	height: 62px;
	background: rgba(3, 9, 11, 0.94);
}

.hub-hero-redesign .hub-actions .btn-light.hub-cta-design,
.hub-hero-redesign .hub-actions a.hub-cta-design {
	background: #daa88c !important;
	background-color: #daa88c !important;
	background-image: none !important;
	border-color: rgba(193, 134, 115, 0.46) !important;
	color: #2c1608 !important;
	box-shadow: 0 18px 48px rgba(218, 168, 140, 0.32) !important;
}

.hub-hero-redesign .hub-actions .btn-light.hub-cta-design:hover,
.hub-hero-redesign .hub-actions .btn-light.hub-cta-design:focus-visible,
.hub-hero-redesign .hub-actions a.hub-cta-design:hover,
.hub-hero-redesign .hub-actions a.hub-cta-design:focus-visible {
	background: #c18673 !important;
	background-color: #c18673 !important;
	color: #fff !important;
	box-shadow: 0 22px 60px rgba(193, 134, 115, 0.42) !important;
}

.hub-topbar-redesign .hub-logo img {
	width: 104px;
}

.hub-expression,
.expression-video,
.expression-video-frame {
	position: relative;
	z-index: 0;
}

.expression-video-frame iframe {
	z-index: 0;
}