/*
 * AkquiseRadar – Radar Pro landing layout
 * Keyframes, interactive states and responsive overrides for the
 * self-contained full-page template (markup uses inline styles).
 */

html { scroll-behavior: smooth; }

body.tpl-daylight {
	margin: 0;
	background: #0a1119;
}

body.tpl-daylight * { box-sizing: border-box; }
body.tpl-daylight ::selection { background: #ee6c4d; color: #fff; }

/* ---------- Keyframes ---------- */
@keyframes lr-floatA { 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(-26px,28px,0) scale(1.06);} }
@keyframes lr-floatB { 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(30px,-22px,0) scale(1.08);} }
@keyframes lr-bobA   { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
@keyframes lr-bobB   { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(10px);} }
@keyframes lr-pulse  { 0%{ box-shadow:0 0 0 0 rgba(238,108,77,.55);} 70%{ box-shadow:0 0 0 12px rgba(238,108,77,0);} 100%{ box-shadow:0 0 0 0 rgba(238,108,77,0);} }
@keyframes lr-sheen  { 0%,100%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} }
@keyframes lr-marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@keyframes lr-scrolldot { 0%{ transform: translateY(0); opacity:0;} 30%{ opacity:1;} 80%{ transform: translateY(18px); opacity:0;} 100%{ opacity:0;} }

/* ---------- Interactive states (replace DC style-hover/style-focus) ---------- */
.lr-navlink:hover { color: #fff !important; background: rgba(152,193,217,.1) !important; }
.lr-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(238,108,77,.5) !important; }
.lr-btn-ghost:hover { background: rgba(152,193,217,.08) !important; border-color: rgba(152,193,217,.5) !important; }
.lr-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(238,108,77,.5) !important; }
.lr-input:focus { border-color: #98c1d9 !important; }

/* Workflow step descriptions – scroll-driven orange highlight reveal */
.lr-wf-desc {
	position: relative;
	margin: 0;
	max-width: 42ch;
	font-size: 1.15rem;
	line-height: 1.6;
	--wf-fill: 0;
}
.lr-wf-desc__back {
	color: rgba(234, 240, 247, .68);
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.lr-wf-desc__front-wrap {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	overflow: hidden;
	clip-path: inset(0 calc((1 - var(--wf-fill)) * 100%) 0 0);
	pointer-events: none;
}
.lr-wf-desc__front {
	display: inline;
	color: #fff;
	background: #ee6c4d;
	padding: 0.1em 0.32em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Trust marquee – logo placeholders (grayscale → color on hover) */
.lr-trust-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	/* Spacing as margin (not flex gap) so the two duplicated sets are exactly
	   equal width and translateX(-50%) loops perfectly seamless. */
	margin-right: 60px;
}
/* Pause the marquee on hover / focus within. */
.lr-trust-marquee:hover [data-marquee],
.lr-trust-marquee:focus-within [data-marquee] {
	/* !important needed because the animation is set via inline style,
	   which otherwise wins over this rule. */
	animation-play-state: paused !important;
}
.lr-trust-logo img {
	height: 50px;
	width: auto;
	display: block;
	transform-origin: center;
	filter: grayscale(1) brightness(1.6) opacity(.5);
	transition: filter .35s ease, transform .35s ease;
}
.lr-trust-logo:hover img,
.lr-trust-logo:focus-visible img {
	filter: grayscale(0) brightness(1) opacity(1);
	transform: scale(1.05);
}

/* Footer legal links */
.lr-footer-link { transition: color .2s ease; }
.lr-footer-link:hover,
.lr-footer-link:focus-visible { color: #98c1d9 !important; }

/* Exploded plugin diagram – hover / click interaction */
.lr-exp-list li { transition: opacity .3s ease, transform .3s ease; transform-origin: left center; }
.lr-exp-list.is-hovering li:not(.is-hover) { opacity: .3 !important; }
.lr-exp-list.is-expanded li:not(.is-active) { opacity: .4 !important; transform: scale(.84); }
.lr-exp-list.is-expanded li:not(.is-active) .lr-exp-sub { opacity: .5; }

.lr-exp-hint {
	display: block;
	margin-top: 2px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: .76rem;
	font-weight: 600;
	color: #ee6c4d;
	opacity: 0;
	transition: opacity .25s ease;
}
/* Hint only as a quiet affordance before any interaction. */
.lr-exp-list:not(.is-hovering):not(.is-expanded) li .lr-exp-hint { opacity: .65; }

.lr-exp-detail {
	display: block;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .45s ease, opacity .3s ease;
}
/* Detail reveals on hover AND on click (active). */
.lr-exp-list li.is-hover .lr-exp-detail,
.lr-exp-list li.is-active .lr-exp-detail { max-height: 240px; opacity: 1; }

/* Kanban drag affordances */
.lr-kanban [data-kanban-card]:active { cursor: grabbing; }
.lr-kanban [data-kanban-col].is-drop { border-color: #98c1d9 !important; background: rgba(152,193,217,.06) !important; }

/* Drag-Hinweis nur am Desktop – Touch (Mobil/Tablet) unterstützt kein zuverlässiges Ziehen. */
@media (max-width: 960px) {
	.lr-kanban-tip { display: none !important; }
	.lr-kanban { grid-template-columns: 1fr !important; }
	.lr-kanban [data-kanban-card] { cursor: default !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.lr-hero-grid { grid-template-columns: 1fr !important; }
	.lr-exp-sticky { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
	.lr-stat-grid { grid-template-columns: 1fr !important; }
	.lr-form-row { grid-template-columns: 1fr !important; }
	.lr-scrollcue { display: none !important; }

	/* Workflow: drop the horizontal pin, stack the four steps vertically. */
	.lr-hpin { height: auto !important; }
	.lr-hsticky { position: static !important; height: auto !important; display: block !important; padding: 5rem 0 2rem !important; }
	.lr-wf-title { position: static !important; padding: 0 clamp(20px,5vw,56px) 1.5rem !important; }
	.lr-htrack { flex-direction: column !important; height: auto !important; transform: none !important; }
	.lr-wf-card { flex: 0 0 auto !important; width: 100% !important; height: auto !important; padding: 2rem clamp(20px,5vw,56px) !important; }
	.lr-wf-stack { display: none !important; }
	/* No scroll animation on mobile – highlight the real text directly so the
	   orange fill always wraps exactly with the copy. The clip/overlay clone
	   carries extra padding and can wrap differently at narrow widths, which
	   left some words only partially highlighted. */
	.lr-wf-desc__front-wrap { display: none !important; }
	.lr-wf-desc__back {
		color: #fff !important;
		background: #ee6c4d !important;
		padding: 0.1em 0.32em !important;
	}

	/* Exploded plugin diagram: flatten the 3D stack into a simple column. */
	.lr-exp-pin { height: auto !important; }
	.lr-exp-sticky { position: static !important; height: auto !important; padding: 4rem clamp(20px,5vw,56px) !important; }
	.lr-exp-stage { height: auto !important; perspective: none !important; min-height: 0 !important; }
	.lr-exp-stage > div { position: static !important; transform: none !important; }
	.lr-exp-layer { position: relative !important; top: auto !important; left: auto !important; margin: 0 auto 16px !important; transform: none !important; width: 100% !important; max-width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
	body.tpl-daylight * { animation: none !important; }
	.lr-wf-desc { --wf-fill: 1; }
}