/*
 * Service Landing — port of ServiceLanding.dc.html.
 *
 * 1. Helmet <style> (keyframes, verbatim).
 * 2. style-hover rules (the design runtime turned each into a class whose
 *    declarations all carry !important so they beat the inline style).
 * 3. Width-dependent template values. The original derived these from
 *    innerWidth in its logic class (narrow = innerWidth < 980,
 *    cols = innerWidth < 700 ? 1 : innerWidth < 1100 ? 2 : 3); the server
 *    render references them as var(--lp-…) so the very first paint is right at
 *    every width. Once mounted, the script applies the same values inline,
 *    exactly as the original re-render did.
 */

/* 1 — keyframes ----------------------------------------------------------- */
@keyframes lpIn { from { opacity: 0; transform: translateY(60px); filter: blur(12px) } to { opacity: 1; transform: none; filter: blur(0) } }
@keyframes lpMarq { to { transform: translateX(-50%) } }
@keyframes lpBeat { 0% { box-shadow: 0 0 0 0 rgba(193,237,0,.7) } 100% { box-shadow: 0 0 0 10px rgba(193,237,0,0) } }
@keyframes lpSpin { to { transform: rotate(360deg) } }
@keyframes lpPop { from { opacity: 0; scale: .85; translate: 0 12px } to { opacity: 1; scale: 1; translate: 0 0 } }
@keyframes lpFloat { 50% { translate: 0 -10px } }

/* 2 — hover states (style-hover) ----------------------------------------- */
.lp-hv-lime:hover { color: #c1ed00 !important; }
.lp-hv-ghost:hover { border-color: #edf0ea !important; background: rgba(255,255,255,.06) !important; }
.lp-hv-lift:hover { transform: translateY(-6px) !important; }
.lp-hv-blime:hover { border-color: #c1ed00 !important; }
.lp-hv-call:hover { border-color: #edf0ea !important; }
.lp-hv-img:hover { scale: 1.06 !important; filter: grayscale(0) brightness(.62) !important; }

/* <sc-if value="{{ hcDone }}"> — the inline display:flex must not defeat [hidden]. */
.lp-root [data-ref="hcDone"][hidden] { display: none !important; }

/* 3 — viewport-dependent values (state.narrow / state.cols) --------------- */
.lp-root {
	--lp-herocols: minmax(0,.92fr) minmax(0,1.08fr);
	--lp-vish: 620px;
	--lp-scrh: 380px;
	--lp-mh1: 32px;
	--lp-mimgh: 150px;
	--lp-chw: clamp(96px,20%,128px);
	--lp-skw: clamp(108px,22%,150px);
	--lp-hubs: 124px;
	--lp-hubh: 62px;
	--lp-chipw: clamp(140px,28%,178px);
	--lp-featcols: repeat(3,minmax(0,1fr));
	--lp-bigspan: 2;
	--lp-ctaspan: 1;
	--lp-pilltxt: flex;
}
.lp-root.lp-k-marketing, .lp-root.lp-k-support { --lp-vish: 580px; }

/* Support health-check chips: pos[i] = [left, right, top]. */
.lp-chip-0 { --lp-l: 14px; --lp-r: auto; --lp-t: 16%; }
.lp-chip-1 { --lp-l: auto; --lp-r: 14px; --lp-t: 24%; }
.lp-chip-2 { --lp-l: 14px; --lp-r: auto; --lp-t: 40%; }
.lp-chip-3 { --lp-l: auto; --lp-r: 14px; --lp-t: 48%; }
.lp-chip-4 { --lp-l: 14px; --lp-r: auto; --lp-t: 64%; }
.lp-chip-5 { --lp-l: auto; --lp-r: 14px; --lp-t: 70%; }

/* cols = 2 (innerWidth < 1100) */
@media (max-width: 1099.98px) {
	.lp-root { --lp-featcols: repeat(2,minmax(0,1fr)); --lp-bigspan: 2; --lp-ctaspan: 2; }
}
/* cols = 1 (innerWidth < 700) */
@media (max-width: 699.98px) {
	.lp-root { --lp-featcols: repeat(1,minmax(0,1fr)); --lp-bigspan: 1; --lp-ctaspan: 1; }
}
/* narrow (innerWidth < 980) */
@media (max-width: 979.98px) {
	.lp-root {
		--lp-herocols: minmax(0,1fr);
		--lp-vish: 520px;
		--lp-scrh: 300px;
		--lp-mh1: 24px;
		--lp-mimgh: 120px;
		--lp-chw: 92px;
		--lp-skw: 96px;
		--lp-hubs: 92px;
		--lp-hubh: 46px;
		--lp-chipw: 136px;
		--lp-pilltxt: none;
	}
	.lp-root.lp-k-marketing, .lp-root.lp-k-support { --lp-vish: 470px; }
	.lp-chip-0 { --lp-l: 12px; --lp-r: auto; --lp-t: 12%; }
	.lp-chip-1 { --lp-l: auto; --lp-r: 12px; --lp-t: 22%; }
	.lp-chip-2 { --lp-l: 12px; --lp-r: auto; --lp-t: 32%; }
	.lp-chip-3 { --lp-l: auto; --lp-r: 12px; --lp-t: 42%; }
	.lp-chip-4 { --lp-l: 12px; --lp-r: auto; --lp-t: 52%; }
	.lp-chip-5 { --lp-l: auto; --lp-r: 12px; --lp-t: 62%; }
}