/**
 * Hero component ([b3d_hero], WPBakery "Bio3Dtech Hero").
 * Video background, gradient headline, CTAs, floating image with cards.
 */

.b3d-hero {
	--b3d-hero-header: 90px;           /* The7 transparent header height */
	--mx: 0;                           /* pointer offset, set by hero.js (-1..1) */
	--my: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(640px, 100svh, 900px);
	padding: calc(var(--b3d-hero-header) + 24px) 0 84px;
	overflow: hidden;
	isolation: isolate;
	background: #0b1a26;
	color: #fff;
}

.b3d-hero,
.b3d-hero *,
.b3d-hero *::before,
.b3d-hero *::after {
	box-sizing: border-box;
}

/* ---------- Background ---------- */

.b3d-hero__media,
.b3d-hero__poster,
.b3d-hero__video,
.b3d-hero__overlay {
	position: absolute;
	inset: 0;
}

.b3d-hero__media {
	z-index: -1;
}

.b3d-hero__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.b3d-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s var(--b3d-ease);
}

.b3d-hero__video.is-playing {
	opacity: 1;
}

/* Readability on the left, soft vignette, fade into the page at the bottom */
.b3d-hero__overlay {
	background:
		linear-gradient(90deg, rgba(7, 18, 28, .88) 0%, rgba(7, 18, 28, .62) 42%, rgba(7, 18, 28, .18) 100%),
		radial-gradient(120% 90% at 75% 40%, rgba(16, 222, 236, .10) 0%, rgba(16, 222, 236, 0) 60%),
		linear-gradient(180deg, rgba(7, 18, 28, .35) 0%, rgba(7, 18, 28, 0) 25%, rgba(7, 18, 28, 0) 75%, rgba(7, 18, 28, .55) 100%);
}

/* ---------- Layout ---------- */

.b3d-hero__inner {
	width: 100%;
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: 40px;
}

/* ---------- Content ---------- */

.b3d-hero__content > * {
	animation: b3dHeroIn .9s var(--b3d-ease-out) both;
}

.b3d-hero__content > :nth-child(1) { animation-delay: .15s; }
.b3d-hero__content > :nth-child(2) { animation-delay: .28s; }
.b3d-hero__content > :nth-child(3) { animation-delay: .42s; }
.b3d-hero__content > :nth-child(4) { animation-delay: .56s; }
.b3d-hero__content > :nth-child(5) { animation-delay: .7s; }

@keyframes b3dHeroIn {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

.b3d-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 8px 16px 8px 12px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, .88);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.b3d-hero__dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--b3d-cyan);
}

.b3d-hero__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--b3d-cyan);
	animation: b3dPulse 2s var(--b3d-ease-out) infinite;
}

@keyframes b3dPulse {
	from { transform: scale(1); opacity: .8; }
	to { transform: scale(3.2); opacity: 0; }
}

.b3d-hero .b3d-hero__title {
	margin: 0 0 24px;
	color: #fff;
	font-size: clamp(42px, 4.6vw, 72px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.b3d-hero__accent {
	display: inline-block;
	background: linear-gradient(90deg, var(--b3d-cyan) 0%, #8ff4fa 35%, var(--b3d-pink) 70%, var(--b3d-cyan) 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: b3dShine 8s linear infinite;
}

@keyframes b3dShine {
	to { background-position: 250% 0; }
}

.b3d-hero__lead {
	max-width: 560px;
	margin: 0 0 32px;
	color: rgba(255, 255, 255, .78);
	font-size: clamp(17px, 1.35vw, 19px);
	line-height: 1.7;
}

.b3d-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 30px;
}

.b3d-hero__features {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.b3d-hero__features li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	color: rgba(255, 255, 255, .82);
	font-size: 15px;
}

.b3d-hero__features svg {
	width: 20px;
	height: 20px;
	padding: 2px;
	border-radius: 50%;
	background: rgba(16, 222, 236, .18);
	color: var(--b3d-cyan);
}

/* ---------- Visual (dog) ---------- */

.b3d-hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / .82;
	transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0);
	transition: transform .6s var(--b3d-ease-out);
	animation: b3dHeroVisualIn 1.2s var(--b3d-ease-out) .35s both;
}

/* Uses translate/scale so the pointer parallax (transform) keeps working */
@keyframes b3dHeroVisualIn {
	from { opacity: 0; translate: 40px 20px; scale: .94; }
	to { opacity: 1; translate: 0 0; scale: 1; }
}

.b3d-hero__image {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 620px;
	height: auto;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
	animation: b3dFloat 6s ease-in-out infinite alternate;
}

@keyframes b3dFloat {
	from { transform: translateY(0); }
	to { transform: translateY(-14px); }
}

/* Glow behind the image */
.b3d-hero__glow {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 52%;
	width: 78%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(16, 222, 236, .38) 0%, rgba(16, 222, 236, .12) 40%, rgba(16, 222, 236, 0) 70%);
	transform: translate(-50%, -50%);
	filter: blur(10px);
}

/* Rotating gradient ring */
.b3d-hero__ring {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: 74%;
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: conic-gradient(from 0deg, rgba(16, 222, 236, 0) 0deg, rgba(16, 222, 236, .9) 90deg, rgba(244, 91, 226, .8) 180deg, rgba(244, 91, 226, 0) 270deg, rgba(16, 222, 236, 0) 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
	opacity: .7;
	animation: b3dSpin 14s linear infinite;
}

@keyframes b3dSpin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Floating glass cards */
.b3d-hero__card {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 12px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 16px;
	background: rgba(12, 30, 44, .55);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px), 0);
	transition: transform .6s var(--b3d-ease-out);
}

/* Icon: the logo "b" in white on the exact logo colour (see b3d_hero_mark_icon()) */
.b3d-hero__card-ico {
	display: flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--b3d-logo-cyan);
	color: #fff;
}

.b3d-hero__card-ico .b3d-hero__mark {
	width: auto;
	height: 26px;
	overflow: visible;
}

.b3d-hero__mark path {
	fill: currentColor;
	transition: opacity var(--b3d-dur) var(--b3d-ease), transform var(--b3d-dur) var(--b3d-ease);
}

.b3d-hero__mark .is-ghost {
	opacity: .3;
}

/* on hover the faint half joins in: the full "b" */
.b3d-hero__card:hover .b3d-hero__mark .is-ghost {
	opacity: 1;
}

/* Sits above the dog's head, clear of the face and ears */
.b3d-hero__card--1 {
	left: -6%;
	top: -10%;
	animation: b3dCardIn .9s var(--b3d-ease-out) 1s both, b3dBob 5s ease-in-out 2s infinite alternate;
}

.b3d-hero__card--2 {
	right: 0;
	bottom: 14%;
	animation: b3dCardIn .9s var(--b3d-ease-out) 1.2s both, b3dBob 5.5s ease-in-out 2.4s infinite alternate-reverse;
}

.b3d-hero__card--2 .b3d-hero__card-ico {
	background: var(--b3d-pink);
}

@keyframes b3dCardIn {
	from { opacity: 0; translate: 0 16px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes b3dBob {
	from { translate: 0 0; }
	to { translate: 0 -10px; }
}

/* ---------- Scroll indicator ---------- */

.b3d-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	padding: 6px;
	opacity: .75;
	transition: opacity var(--b3d-dur);
	animation: b3dHeroIn .9s var(--b3d-ease-out) 1.4s both;
}

.b3d-hero__scroll:hover {
	opacity: 1;
}

.b3d-hero__mouse {
	display: block;
	width: 24px;
	height: 38px;
	border: 2px solid rgba(255, 255, 255, .8);
	border-radius: 14px;
}

.b3d-hero__mouse span {
	display: block;
	width: 4px;
	height: 8px;
	margin: 7px auto 0;
	border-radius: 2px;
	background: #fff;
	animation: b3dWheel 1.8s var(--b3d-ease) infinite;
}

@keyframes b3dWheel {
	0% { opacity: 0; transform: translateY(-4px); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(10px); }
}

/* ---------- Compact variant for inner pages (size="page") ---------- */

.b3d-hero--page {
	min-height: clamp(520px, 72svh, 720px);
	padding-bottom: 64px;
}

.b3d-hero--page .b3d-hero__title {
	font-size: clamp(38px, 4.2vw, 64px);
}

.b3d-hero--page .b3d-hero__visual {
	aspect-ratio: 1 / .8;
}

.b3d-hero--page .b3d-hero__image {
	max-width: 520px;
	max-height: 440px;
	object-fit: contain;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
	.b3d-hero {
		--b3d-hero-header: 70px;
		min-height: 0;
		padding-bottom: 70px;
	}

	.b3d-hero__inner {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 0 24px;
	}

	.b3d-hero__overlay {
		background:
			linear-gradient(180deg, rgba(7, 18, 28, .78) 0%, rgba(7, 18, 28, .6) 55%, rgba(7, 18, 28, .82) 100%);
	}

	/* Top margin leaves room for card 1 between the feature list and the dog's head */
	.b3d-hero__visual {
		max-width: 520px;
		width: 100%;
		margin: 84px auto 0;
		transform: none;
	}

	.b3d-hero__card { font-size: 13px; }
	.b3d-hero__card--1 { left: 0; top: -14%; }
	.b3d-hero__card--2 { right: 0; bottom: 6%; }
	.b3d-hero__scroll { display: none; }
}

@media (max-width: 575px) {
	.b3d-hero__eyebrow {
		font-size: 11px;
		letter-spacing: .1em;
	}

	.b3d-hero__actions .b3d-btn {
		flex: 1 1 100%;
	}

	.b3d-hero__features {
		flex-direction: column;
		gap: 10px;
	}

	.b3d-hero__card {
		padding: 8px 12px 8px 8px;
		font-size: 12px;
	}

	.b3d-hero__card-ico {
		width: 30px;
		height: 30px;
		border-radius: 9px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.b3d-hero *,
	.b3d-hero *::before,
	.b3d-hero *::after {
		animation: none !important;
		transition: none !important;
	}

	.b3d-hero__visual,
	.b3d-hero__card {
		transform: none;
	}

	.b3d-hero__video {
		opacity: 1;
	}
}

/* Compact hero: keep the first floating card clear of the site header */
.b3d-hero--page .b3d-hero__card--1 {
	top: 4%;
}

/* Card 1 at the top right: for images whose top-left is busy (e.g. a dog's head).
 * Hero Extra class "b3d-hero--card1-right". */
.b3d-hero--card1-right .b3d-hero__card--1 {
	left: auto;
	right: -4%;
	top: 0;
}

.b3d-hero--card1-right .b3d-hero__card--2 {
	right: -4%;
	bottom: -4%;
}

/* Card 2 at the bottom left: when the highlight sits at the bottom right.
 * Hero Extra class "b3d-hero--card2-left" (combine with --card1-right). */
.b3d-hero--card2-left .b3d-hero__card--2 {
	right: auto;
	left: -4%;
	bottom: -4%;
}