/* W1 · FR.ED 3D-Hero – alle Overlays werden rein per CSS aus --hp (geglätteter Fortschritt) gesteuert. */
.suritec.suritec-hero {
	--hp: 0;
	--dx: 0;
	--dy: 0;
	--lx: 0;
	--ly: 0;
	background: var(--suritec-bg-hero);
}

/* Gemeinsam für W1/W2 */
.suritec-3d__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.suritec .suritec-3d__fallback {
	display: none;
	position: absolute;
	max-width: none;
	height: auto;
	pointer-events: none;
}

.suritec-is-fallback .suritec-3d__fallback {
	display: block;
}

.suritec-is-fallback .suritec-3d__canvas {
	visibility: hidden;
}

.suritec-3d__vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 80% at 50% 50%, rgba(11, 10, 9, 0) 55%, rgba(11, 10, 9, .7) 100%);
	pointer-events: none;
}

.suritec .suritec-hero__fallback {
	left: 50%;
	top: 46%;
	width: min(60vw, 560px);
	transform: translate(-50%, -50%) scale(calc(.8 + var(--hp) * .2));
	opacity: clamp(0, (var(--hp) - .1) * 4, 1);
}

/* Intro */
.suritec-hero__intro {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 0 24px;
	opacity: clamp(0, (.09 - var(--hp)) * 12, 1);
	transform: translateY(calc(var(--hp) * -800px * var(--suritec-m)));
	pointer-events: none;
}

.suritec-hero__intro-in {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: center;
}

.suritec .suritec-hero__eyebrow {
	letter-spacing: .28em;
}

.suritec-hero__quiet {
	font-size: clamp(34px, 5vw, 72px);
	line-height: 1;
	font-weight: 300;
	letter-spacing: -.035em;
	color: color-mix(in srgb, var(--suritec-text) 92%, transparent);
}

/* Story-Stufen */
.suritec-hero__s2,
.suritec-hero__s3 {
	position: absolute;
	left: var(--suritec-pad-x);
	bottom: 14vh;
	pointer-events: none;
}

.suritec-hero__s2 {
	width: min(460px, calc(100vw - 40px));
	opacity: min(clamp(0, (var(--hp) - .085) * 12, 1), clamp(0, (.262 - var(--hp)) * 12, 1));
	transform: translateY(calc((.174 - var(--hp)) * 400px * var(--suritec-m)));
}

.suritec-hero__s3 {
	width: min(480px, calc(100vw - 40px));
	opacity: min(clamp(0, (var(--hp) - .265) * 9, 1), clamp(0, (.425 - var(--hp)) * 9, 1));
	transform: translateY(calc((.345 - var(--hp)) * 600px * var(--suritec-m)));
}

.suritec-hero__stage {
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.02;
	font-weight: 600;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.suritec .suritec-hero__p {
	margin: 14px 0 0;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.5;
	color: var(--suritec-text-72);
	text-wrap: pretty;
}

.suritec .suritec-hero__eyebrow-sm {
	letter-spacing: .2em;
	margin-bottom: 12px;
}

/* Anker-Punkte (Position aus der 3D-Szene) */
.suritec-hero__anchor {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}

.suritec-hero__anchor span {
	position: absolute;
	left: 0;
	top: 0;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
}

.suritec-hero__anchor--d {
	transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px));
	opacity: min(clamp(0, (var(--hp) - .49) * 12, 1), clamp(0, (.605 - var(--hp)) * 12, 1));
}

.suritec-hero__anchor--d span {
	background: var(--suritec-text);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--suritec-text) 12%, transparent);
}

.suritec-hero__anchor--l {
	transform: translate(calc(var(--lx) * 1px), calc(var(--ly) * 1px));
	opacity: min(clamp(0, (var(--hp) - .645) * 11, 1), clamp(0, (.765 - var(--hp)) * 11, 1));
}

.suritec-hero__anchor--l span {
	background: var(--suritec-green);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--suritec-green) 16%, transparent);
}

/* Callouts */
.suritec-hero__callout {
	position: absolute;
	bottom: 12vh;
	padding: 18px 22px;
	border-radius: 18px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	pointer-events: none;
}

.suritec .suritec-hero__callout .suritec-eyebrow {
	margin-bottom: 6px;
}

.suritec-hero__callout--d {
	left: var(--suritec-pad-x);
	background: rgba(11, 10, 9, .72);
	opacity: min(clamp(0, (var(--hp) - .49) * 12, 1), clamp(0, (.605 - var(--hp)) * 12, 1));
	transform: translateY(calc((.548 - var(--hp)) * 500px * var(--suritec-m)));
}

.suritec-hero__callout--l {
	right: var(--suritec-pad-x);
	background: rgba(11, 10, 9, .78);
	opacity: min(clamp(0, (var(--hp) - .645) * 11, 1), clamp(0, (.765 - var(--hp)) * 11, 1));
	transform: translateY(calc((.705 - var(--hp)) * 500px * var(--suritec-m)));
}

.suritec .suritec-hero__callout--l .suritec-eyebrow {
	color: var(--suritec-green);
}

.suritec-hero__callout-t {
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: -.015em;
}

/* Claim */
.suritec-hero__claim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 11vh;
	text-align: center;
	padding: 0 24px;
	opacity: min(clamp(0, (var(--hp) - .735) * 10, 1), clamp(0, (.91 - var(--hp)) * 13, 1));
	transform: translateY(calc((.835 - var(--hp)) * 500px * var(--suritec-m)));
	pointer-events: none;
}

.suritec-hero__claim > div {
	font-size: clamp(34px, 5vw, 76px);
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: 1;
}

/* Abschluss mit H1 */
.suritec-hero__cta {
	position: absolute;
	left: var(--suritec-pad-x);
	top: 50%;
	width: calc(100vw - 40px);
	opacity: clamp(0, (var(--hp) - .895) * 10, 1);
	transform: translateY(calc(-50% + (1 - var(--hp)) * 800px * var(--suritec-m) + 22vh));
	pointer-events: none;
}

.suritec-hero.suritec-is-cta .suritec-hero__cta {
	pointer-events: auto;
}

@media (min-width: 960px) {
	.suritec-hero__cta {
		width: min(560px, 44vw);
		transform: translateY(calc(-50% + (1 - var(--hp)) * 800px * var(--suritec-m)));
	}
}

.suritec .suritec-hero__cta-eyebrow {
	margin-bottom: 22px;
}

.suritec .suritec-hero__h1 {
	margin: 0;
	font-family: var(--suritec-font-head);
	font-size: clamp(40px, 4.6vw, 88px);
	line-height: .95;
	font-weight: 600;
	letter-spacing: -.045em;
	text-wrap: balance;
	color: var(--suritec-text);
}

.suritec .suritec-hero__cta-text {
	margin: 24px 0 0;
	max-width: 460px;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.45;
	color: color-mix(in srgb, var(--suritec-text) 78%, transparent);
	text-wrap: pretty;
}

.suritec-hero__buttons {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Scroll-Hinweis */
.suritec-hero__hint {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-family: var(--suritec-font-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--suritec-text-55);
	opacity: clamp(0, 1 - var(--hp) * 30, 1);
	pointer-events: none;
}

.suritec-hero__hint-line {
	width: 1px;
	height: 36px;
	background: linear-gradient(color-mix(in srgb, var(--suritec-text) 70%, transparent), transparent);
}

/* Scroll-Fortschrittsbalken (ganze Seite) */
.suritec-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 60;
	background: var(--suritec-primary);
	transform-origin: 0 50%;
	transform: scaleX(var(--doc, 0));
	pointer-events: none;
}