/* ── Hero: tactical lock-on / briefing deploy ── */

.kkk-hero__logo-wrap {
	--kkk-lock-size: 1.15rem;
	--kkk-lock-thick: 2px;
}

.kkk-hero__reticle {
	position: absolute;
	inset: -6%;
	pointer-events: none;
	z-index: 2;
}

.kkk-hero__corner {
	position: absolute;
	width: var(--kkk-lock-size);
	height: var(--kkk-lock-size);
	opacity: 0;
	border-color: var(--kkk-accent-strong);
	border-style: solid;
	border-width: 0;
}

.kkk-hero__corner--tl {
	top: 0;
	left: 0;
	border-top-width: var(--kkk-lock-thick);
	border-left-width: var(--kkk-lock-thick);
}

.kkk-hero__corner--tr {
	top: 0;
	right: 0;
	border-top-width: var(--kkk-lock-thick);
	border-right-width: var(--kkk-lock-thick);
}

.kkk-hero__corner--bl {
	bottom: 0;
	left: 0;
	border-bottom-width: var(--kkk-lock-thick);
	border-left-width: var(--kkk-lock-thick);
}

.kkk-hero__corner--br {
	bottom: 0;
	right: 0;
	border-bottom-width: var(--kkk-lock-thick);
	border-right-width: var(--kkk-lock-thick);
}

.kkk-hero__scan {
	position: absolute;
	left: 4%;
	right: 4%;
	top: 0;
	height: 2px;
	opacity: 0;
	background: linear-gradient(
		90deg,
		transparent,
		var(--kkk-accent-strong) 18%,
		#d6efb0 50%,
		var(--kkk-accent-strong) 82%,
		transparent
	);
	box-shadow: 0 0 12px rgba(143, 184, 90, 0.55);
	transform: translateY(0);
}

.kkk-hero__logo-wrap:not(.is-ready) .kkk-hero__logo {
	opacity: 0;
}

.kkk-hero__corrupt {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	overflow: hidden;
}

.kkk-hero__corrupt::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	background:
		repeating-linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.18) 0 1px,
			transparent 1px 3px
		);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

.kkk-hero__tear {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: var(--kkk-logo-filter);
	opacity: 0;
}

/* Timing: Ecken → Logo (~fast fertig) → Scan/Corrupt → Ecken raus */
.kkk-hero__logo-wrap.is-ready .kkk-hero__corner--tl {
	animation:
		kkk-corner-in 0.55s cubic-bezier(0.2, 0.85, 0.2, 1) 0.05s both,
		kkk-corner-out-tl 0.85s ease 2.55s forwards;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__corner--tr {
	animation:
		kkk-corner-in 0.55s cubic-bezier(0.2, 0.85, 0.2, 1) 0.18s both,
		kkk-corner-out-tr 0.85s ease 2.65s forwards;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__corner--br {
	animation:
		kkk-corner-in 0.55s cubic-bezier(0.2, 0.85, 0.2, 1) 0.31s both,
		kkk-corner-out-br 0.85s ease 2.75s forwards;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__corner--bl {
	animation:
		kkk-corner-in 0.55s cubic-bezier(0.2, 0.85, 0.2, 1) 0.44s both,
		kkk-corner-out-bl 0.85s ease 2.85s forwards;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__logo {
	animation:
		kkk-logo-lockon 0.85s cubic-bezier(0.22, 0.7, 0.2, 1) 0.65s both,
		kkk-logo-signal 1.4s linear 1.05s both;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__scan {
	animation: kkk-scan-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1.05s both;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__corrupt {
	animation: kkk-corrupt-on 1.4s linear 1.05s both;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__corrupt::after {
	animation: kkk-corrupt-noise 1.4s steps(4, end) 1.05s both;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__tear--1 {
	animation: kkk-tear-1 1.4s linear 1.05s both;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__tear--2 {
	animation: kkk-tear-2 1.4s linear 1.05s both;
}

.kkk-hero__logo-wrap.is-ready .kkk-hero__tear--3 {
	animation: kkk-tear-3 1.4s linear 1.05s both;
}

.kkk-hero__brand {
	opacity: 0;
	transform: translateY(18px);
}

.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand {
	animation: kkk-briefing-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) 2.5s both;
}

.kkk-hero__brand .kkk-eyebrow,
.kkk-hero__brand .kkk-hero__title,
.kkk-hero__brand .kkk-hero__tagline,
.kkk-hero__brand .kkk-hero__lead,
.kkk-hero__brand .kkk-hero__cta {
	opacity: 0;
	transform: translateY(10px);
}

.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-eyebrow {
	animation: kkk-stagger-in 0.6s ease 2.55s both;
}

.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-hero__title {
	animation: kkk-stagger-in 0.65s ease 2.7s both;
}

.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-hero__tagline {
	animation: kkk-stagger-in 0.65s ease 2.85s both;
}

.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-hero__lead {
	animation: kkk-stagger-in 0.7s ease 3.0s both;
}

.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-hero__cta {
	animation: kkk-stagger-in 0.7s ease 3.15s both;
}

/* Scroll presence */
.kkk-hero__bg {
	will-change: transform;
	transform-origin: center top;
}

.kkk-hero__logo-wrap,
.kkk-hero__brand {
	will-change: transform, opacity;
}

.kkk-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kkk-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

.kkk-nav__link {
	position: relative;
}

.kkk-nav__link::after {
	content: "";
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 0.2rem;
	height: 2px;
	background: var(--kkk-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}

.kkk-nav__link:hover::after,
.kkk-nav__item.is-active > .kkk-nav__link::after {
	transform: scaleX(1);
}

@media (max-width: 1180px) {
	.kkk-nav__link::after {
		display: none;
	}
}

@keyframes kkk-corner-in {
	0% {
		opacity: 0;
		transform: scale(1.65);
	}
	100% {
		opacity: 0.9;
		transform: scale(1);
	}
}

@keyframes kkk-corner-out-tl {
	0% {
		opacity: 0.9;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-14px, -14px) scale(0.9);
	}
}

@keyframes kkk-corner-out-tr {
	0% {
		opacity: 0.9;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(14px, -14px) scale(0.9);
	}
}

@keyframes kkk-corner-out-br {
	0% {
		opacity: 0.9;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(14px, 14px) scale(0.9);
	}
}

@keyframes kkk-corner-out-bl {
	0% {
		opacity: 0.9;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-14px, 14px) scale(0.9);
	}
}

@keyframes kkk-scan-sweep {
	0% {
		opacity: 0;
		top: 0;
	}
	10% {
		opacity: 1;
	}
	85% {
		opacity: 0.75;
	}
	100% {
		opacity: 0;
		top: calc(100% - 2px);
	}
}

@keyframes kkk-logo-lockon {
	0% {
		opacity: 0;
		filter: var(--kkk-logo-filter) brightness(0.55) contrast(1.15) blur(2px);
		transform: scale(0.94);
	}
	100% {
		opacity: 1;
		filter: var(--kkk-logo-filter) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
		transform: scale(1);
	}
}

/* Basis-Bild während Scan: Aussetzer, Weichzeichnung, Kanalversatz */
@keyframes kkk-logo-signal {
	0%,
	100% {
		opacity: 1;
		filter: var(--kkk-logo-filter) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
		transform: none;
	}
	12% {
		opacity: 0.55;
		filter: var(--kkk-logo-filter) blur(2.5px) contrast(1.55) brightness(1.25);
	}
	18% {
		opacity: 1;
		filter:
			var(--kkk-logo-filter)
			blur(0.4px)
			contrast(1.3)
			drop-shadow(6px 0 rgba(90, 220, 140, 0.55))
			drop-shadow(-6px 0 rgba(220, 50, 40, 0.45));
	}
	34% {
		opacity: 0.35;
		filter: var(--kkk-logo-filter) blur(4px) contrast(0.65) brightness(1.4);
	}
	40% {
		opacity: 0.95;
		filter: var(--kkk-logo-filter) blur(1.2px) contrast(1.45) saturate(0.4);
	}
	58% {
		opacity: 0.5;
		filter:
			var(--kkk-logo-filter)
			blur(3px)
			contrast(1.7)
			drop-shadow(-8px 0 rgba(90, 220, 140, 0.5))
			drop-shadow(8px 0 rgba(220, 50, 40, 0.4));
	}
	72% {
		opacity: 0.85;
		filter: var(--kkk-logo-filter) blur(1.8px) contrast(1.2) brightness(0.85);
	}
	88% {
		opacity: 1;
		filter: var(--kkk-logo-filter) blur(0.6px) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
	}
}

@keyframes kkk-corrupt-on {
	0%,
	100% {
		opacity: 0;
	}
	6%,
	92% {
		opacity: 1;
	}
}

@keyframes kkk-corrupt-noise {
	0%,
	100% {
		opacity: 0;
		transform: translateY(0);
	}
	10%,
	40%,
	70% {
		opacity: 0.55;
		transform: translateY(-2%);
	}
	25%,
	55%,
	85% {
		opacity: 0.3;
		transform: translateY(3%);
	}
}

/* Horizontale Bildstreifen: versetzt = „Datenverlust“ */
@keyframes kkk-tear-1 {
	0%,
	100% {
		opacity: 0;
		transform: translate(0, 0);
		clip-path: inset(8% 0 72% 0);
	}
	8% {
		opacity: 0.95;
		transform: translate(-18px, 0);
		clip-path: inset(8% 0 72% 0);
	}
	22% {
		opacity: 1;
		transform: translate(22px, 0);
		clip-path: inset(14% 0 64% 0);
	}
	38% {
		opacity: 0.7;
		transform: translate(-28px, 0);
		clip-path: inset(6% 0 78% 0);
	}
	55% {
		opacity: 1;
		transform: translate(14px, 0);
		clip-path: inset(18% 0 58% 0);
	}
	78% {
		opacity: 0.85;
		transform: translate(-10px, 0);
		clip-path: inset(10% 0 70% 0);
	}
	92% {
		opacity: 0;
		transform: translate(0, 0);
	}
}

@keyframes kkk-tear-2 {
	0%,
	100% {
		opacity: 0;
		transform: translate(0, 0);
		clip-path: inset(36% 0 38% 0);
	}
	12% {
		opacity: 1;
		transform: translate(24px, 0);
		clip-path: inset(36% 0 38% 0);
	}
	28% {
		opacity: 0.6;
		transform: translate(-32px, 0);
		clip-path: inset(42% 0 30% 0);
	}
	44% {
		opacity: 1;
		transform: translate(16px, 0);
		clip-path: inset(32% 0 44% 0);
	}
	60% {
		opacity: 0.75;
		transform: translate(-20px, 0);
		clip-path: inset(48% 0 26% 0);
	}
	76% {
		opacity: 1;
		transform: translate(28px, 0);
		clip-path: inset(38% 0 36% 0);
	}
	92% {
		opacity: 0;
		transform: translate(0, 0);
	}
}

@keyframes kkk-tear-3 {
	0%,
	100% {
		opacity: 0;
		transform: translate(0, 0);
		clip-path: inset(68% 0 6% 0);
	}
	10% {
		opacity: 0.9;
		transform: translate(-20px, 0);
		clip-path: inset(68% 0 6% 0);
	}
	26% {
		opacity: 1;
		transform: translate(30px, 0);
		clip-path: inset(62% 0 12% 0);
	}
	48% {
		opacity: 0.55;
		transform: translate(-14px, 0);
		clip-path: inset(74% 0 4% 0);
	}
	64% {
		opacity: 1;
		transform: translate(18px, 0);
		clip-path: inset(66% 0 10% 0);
	}
	82% {
		opacity: 0.8;
		transform: translate(-26px, 0);
		clip-path: inset(70% 0 8% 0);
	}
	92% {
		opacity: 0;
		transform: translate(0, 0);
	}
}

@keyframes kkk-briefing-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes kkk-stagger-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kkk-hero__logo-wrap:not(.is-ready) .kkk-hero__logo,
	.kkk-hero__logo-wrap.is-ready .kkk-hero__logo,
	.kkk-hero__logo-wrap.is-ready .kkk-hero__corner,
	.kkk-hero__logo-wrap.is-ready .kkk-hero__scan,
	.kkk-hero__logo-wrap.is-ready .kkk-hero__corrupt,
	.kkk-hero__logo-wrap.is-ready .kkk-hero__corrupt::after,
	.kkk-hero__logo-wrap.is-ready .kkk-hero__tear,
	.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand,
	.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-eyebrow,
	.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-hero__title,
	.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-hero__tagline,
	.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-hero__lead,
	.kkk-hero__logo-wrap.is-ready ~ .kkk-hero__brand .kkk-hero__cta {
		animation: none;
		opacity: 1;
		transform: none;
		clip-path: none;
		filter: var(--kkk-logo-filter) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
	}

	.kkk-hero__corner {
		opacity: 0;
	}

	.kkk-hero__scan,
	.kkk-hero__corrupt {
		display: none;
	}

	.kkk-hero__weather,
	.kkk-title-weather {
		display: none;
	}

	.kkk-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.kkk-hero__bg,
	.kkk-hero__logo-wrap,
	.kkk-hero__brand {
		will-change: auto;
	}

	.kkk-nav__link::after {
		transition: none;
	}
}