/* =========================================================================
   Kempro Paints - motion
   Everything here is grounded in how a coating system actually works:
   film thickness in microns, a coating front advancing over corroded steel,
   and a shade fan. Nothing decorative for its own sake.
   All of it honours prefers-reduced-motion.
   ====================================================================== */

/* ---------- 1. Hero: coat sweep reveal --------------------------------
   Applied to an ordinary Elementor Heading widget via the CSS class
   kp-heroline, so the text stays editable in the builder. A gold bar rolls
   across the line the way a roller lays down a coat, and the type lifts in
   behind it. */

.kp-heroline .elementor-widget-container {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.kp-heroline .elementor-heading-title {
	opacity: 0;
	transform: translateY(16px);
	animation: kp-lift .65s cubic-bezier(.22, .8, .3, 1) .30s forwards;
}

.kp-heroline .elementor-widget-container::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0, var(--kp-gold) 20%, var(--kp-gold) 80%, transparent 100%);
	transform: translateX(-102%);
	animation: kp-roll .9s cubic-bezier(.5, 0, .2, 1) forwards;
	pointer-events: none;
}

/* Supporting copy fades up behind the headline. */
.kp-fadein {
	opacity: 0;
	animation: kp-lift .6s ease forwards;
}

.kp-fadein--d1 { animation-delay: .55s; }
.kp-fadein--d2 { animation-delay: .70s; }
.kp-fadein--d3 { animation-delay: .85s; }


.kp-sweep {
	display: inline-block;
	position: relative;
	overflow: hidden;
}

.kp-sweep > span {
	display: inline-block;
	opacity: 0;
	transform: translateY(14px);
	animation: kp-lift .62s cubic-bezier(.22, .8, .3, 1) forwards;
}

.kp-sweep::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0, var(--kp-gold) 22%, var(--kp-gold) 78%, transparent 100%);
	transform: translateX(-102%);
	animation: kp-roll .85s cubic-bezier(.5, 0, .2, 1) forwards;
}

@keyframes kp-lift {
	to { opacity: 1; transform: translateY(0); }
}

@keyframes kp-roll {
	0%   { transform: translateX(-102%); }
	62%  { transform: translateX(0); }
	100% { transform: translateX(102%); }
}

.kp-sweep--l1 > span { animation-delay: .30s; }
.kp-sweep--l1::after { animation-delay: .00s; }
.kp-sweep--l2 > span { animation-delay: .46s; }
.kp-sweep--l2::after { animation-delay: .16s; }

/* ---------- 2. Signature: coating build-up in microns ----------------- */

.kp-dft {
	background: #fff;
	border: 1px solid var(--kp-line);
	border-top: 3px solid var(--kp-gold);
	padding: 30px 32px 26px;
}

.kp-dft__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--kp-line);
	padding-bottom: 16px;
	margin-bottom: 22px;
}

.kp-dft__title {
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--kp-gold-deep);
}

.kp-dft__total {
	font-family: "Oswald", sans-serif;
	font-size: 15px;
	letter-spacing: .05em;
	color: var(--kp-navy);
}

.kp-dft__total b {
	font-size: 26px;
	font-weight: 600;
}

.kp-layer {
	display: grid;
	grid-template-columns: 190px 1fr 78px;
	align-items: center;
	gap: 18px;
	padding: 9px 0;
}

.kp-layer__code {
	font-family: "Oswald", sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--kp-navy);
	line-height: 1.35;
}

.kp-layer__code small {
	display: block;
	font-family: "Barlow", sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #8A8A9C;
}

.kp-layer__track {
	height: 26px;
	background: var(--kp-wash);
	border: 1px solid var(--kp-line);
	position: relative;
	overflow: hidden;
}

.kp-layer__film {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	transition: width 1s cubic-bezier(.3, .8, .3, 1);
}

.kp-dft.is-on .kp-layer__film { width: var(--kp-w); }

.kp-layer--sub .kp-layer__film {
	background:
		repeating-linear-gradient(45deg, #9BA0AC 0 5px, #8A8F9C 5px 10px);
	transition-delay: .05s;
}

.kp-layer--primer .kp-layer__film {
	background: linear-gradient(90deg, #7C8494, #99A1B0);
	transition-delay: .35s;
}

.kp-layer--build .kp-layer__film {
	background: linear-gradient(90deg, var(--kp-navy-soft), #4A4494);
	transition-delay: .65s;
}

.kp-layer--finish .kp-layer__film {
	background: linear-gradient(90deg, var(--kp-gold-deep), var(--kp-gold));
	transition-delay: .95s;
}

.kp-layer__um {
	font-family: "Oswald", sans-serif;
	font-size: 15px;
	color: var(--kp-ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.kp-dft__foot {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--kp-line);
	font-size: 14.5px;
	color: #7A7A8C;
}

/* ---------- 3. Corrosion to protection -------------------------------- */

.kp-panel {
	position: relative;
	height: 300px;
	overflow: hidden;
	border: 1px solid var(--kp-line);
	background:
		radial-gradient(circle at 18% 30%, rgba(120, 52, 18, .55) 0 7%, transparent 8%),
		radial-gradient(circle at 62% 68%, rgba(146, 64, 22, .5) 0 9%, transparent 10%),
		radial-gradient(circle at 84% 22%, rgba(108, 46, 16, .5) 0 6%, transparent 7%),
		radial-gradient(circle at 38% 82%, rgba(133, 58, 20, .45) 0 5%, transparent 6%),
		repeating-linear-gradient(58deg, rgba(0, 0, 0, .07) 0 3px, transparent 3px 8px),
		linear-gradient(140deg, #A15A2A, #7E4520 55%, #96522A);
}

.kp-panel__coat {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	transition: width 1.5s cubic-bezier(.35, .7, .25, 1);
	background: linear-gradient(140deg, var(--kp-navy-deep), var(--kp-navy) 60%, var(--kp-navy-soft));
	border-right: 4px solid var(--kp-gold);
}

.kp-panel.is-on .kp-panel__coat { width: 100%; }

.kp-panel__tag {
	position: absolute;
	bottom: 18px;
	font-family: "Oswald", sans-serif;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 7px 14px;
	white-space: nowrap;
}

.kp-panel__tag--before {
	left: 18px;
	background: rgba(0, 0, 0, .42);
	color: #fff;
}

.kp-panel__tag--after {
	left: 18px;
	background: var(--kp-gold);
	color: var(--kp-navy-deep);
}

.kp-panel__gloss {
	position: absolute;
	inset: 0;
	background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .16) 46%, transparent 54%);
	transform: translateX(-60%);
	opacity: 0;
}

.kp-panel.is-on .kp-panel__gloss {
	animation: kp-gloss 1.6s ease-out 1.5s forwards;
}

@keyframes kp-gloss {
	0%   { transform: translateX(-60%); opacity: 0; }
	22%  { opacity: 1; }
	100% { transform: translateX(70%); opacity: 0; }
}

/* ---------- 4. Shade fan ---------------------------------------------- */

.kp-fan {
	position: relative;
	height: 230px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding-bottom: 12px;
}

.kp-fan__blade {
	position: absolute;
	bottom: 12px;
	width: 44px;
	height: 168px;
	border-radius: 3px 3px 0 0;
	transform-origin: 50% 100%;
	transform: rotate(0deg);
	transition: transform .8s cubic-bezier(.2, .9, .25, 1);
	box-shadow: 0 3px 10px rgba(26, 23, 69, .16);
}

.kp-fan.is-on .kp-fan__blade { transform: rotate(var(--kp-a)); }

.kp-fan__pin {
	position: absolute;
	bottom: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--kp-navy-deep);
	z-index: 5;
}

/* ---------- 5. Generic scroll reveal ---------------------------------- */

.kp-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .3, 1);
}

.kp-reveal.is-on {
	opacity: 1;
	transform: none;
}

.kp-reveal--d1 { transition-delay: .09s; }
.kp-reveal--d2 { transition-delay: .18s; }
.kp-reveal--d3 { transition-delay: .27s; }

/* Cards lift in on scroll without needing an extra class in Elementor */
.kp-card .elementor-icon-box-wrapper,
.kp-step .elementor-icon-box-wrapper {
	will-change: transform;
}

/* ---------- 6. Drying-time ticker on the CTA band --------------------- */

.kp-tick {
	font-variant-numeric: tabular-nums;
}

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

@media (max-width: 700px) {
	.kp-layer {
		grid-template-columns: 1fr 62px;
		gap: 8px 12px;
	}

	.kp-layer__track {
		grid-column: 1 / -1;
		order: 3;
	}

	.kp-panel { height: 230px; }
	.kp-dft { padding: 24px 20px 20px; }
	.kp-fan__blade { width: 34px; height: 132px; }
}

/* ---------- Motion off ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.kp-sweep::after,
	.kp-heroline .elementor-widget-container::after { display: none; }

	.kp-heroline .elementor-heading-title,
	.kp-fadein {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.kp-sweep > span {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.kp-layer__film,
	.kp-panel__coat,
	.kp-fan__blade,
	.kp-reveal {
		transition: none !important;
	}

	.kp-reveal {
		opacity: 1;
		transform: none;
	}

	.kp-panel__gloss { display: none; }
}

/* =========================================================================
   v2 motion - richer scroll reveals per category, counters, hovers
   ====================================================================== */

/* Directional reveals - add class + trigger with .is-on via observer */
.kp-r-up   { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1); }
.kp-r-left { opacity: 0; transform: translateX(-36px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1); }
.kp-r-right{ opacity: 0; transform: translateX(36px);  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1); }
.kp-r-zoom { opacity: 0; transform: scale(.94);        transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1); }
.kp-r-up.is-on, .kp-r-left.is-on, .kp-r-right.is-on, .kp-r-zoom.is-on { opacity: 1; transform: none; }

/* Stagger children of a container tagged kp-stagger */
.kp-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); }
.kp-stagger.is-on > * { opacity: 1; transform: none; }
.kp-stagger.is-on > *:nth-child(1){transition-delay:.00s}
.kp-stagger.is-on > *:nth-child(2){transition-delay:.07s}
.kp-stagger.is-on > *:nth-child(3){transition-delay:.14s}
.kp-stagger.is-on > *:nth-child(4){transition-delay:.21s}
.kp-stagger.is-on > *:nth-child(5){transition-delay:.28s}
.kp-stagger.is-on > *:nth-child(6){transition-delay:.35s}
.kp-stagger.is-on > *:nth-child(7){transition-delay:.42s}
.kp-stagger.is-on > *:nth-child(8){transition-delay:.49s}

/* Big number count-up (milestones) */
.kp-mile__num { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.kp-mile.is-on .kp-mile__num { opacity: 1; transform: none; }

/* Eyebrow gets a drawing underline */
.kp-eyebrow-line { position: relative; display: inline-block; padding-bottom: 8px; }
.kp-eyebrow-line::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
	background: var(--kp-gold); transition: width .6s ease .1s;
}
.kp-eyebrow-line.is-on::after { width: 42px; }

/* Card hover lift already exists; add an icon pop on the applications tiles */
@keyframes kp-pop { 0%{transform:scale(1)} 50%{transform:scale(1.14)} 100%{transform:scale(1)} }
.kp-app:hover .kp-app__ic { animation: kp-pop .4s ease; }

/* Section headings: a subtle rule that expands */
.kp-ruled { position: relative; }
.kp-ruled::before {
	content: ""; position: absolute; left: 0; top: -18px; height: 3px; width: 0;
	background: var(--kp-gold); transition: width .7s cubic-bezier(.22,.8,.3,1);
}
.kp-ruled.is-on::before { width: 54px; }

/* Parallax-lite drift on the hero banner (JS toggles --kp-py) */
.kp-herobg::before { transform: translateY(var(--kp-py, 0)); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	.kp-r-up,.kp-r-left,.kp-r-right,.kp-r-zoom,
	.kp-stagger > *,.kp-mile__num { opacity: 1 !important; transform: none !important; transition: none !important; }
	.kp-eyebrow-line::after { width: 42px; transition: none; }
	.kp-ruled::before { width: 54px; transition: none; }
	.kp-herobg::before { transform: none !important; }
}

/* =========================================================================
   v3 paint-oriented motion - applies site-wide, all pages
   Drips on dark bands, brush-swipe heading reveals, wet sheen on cards.
   ====================================================================== */

/* ---------- 1. Paint drips off dark section tops --------------------- */
/* Auto-applied to every navy band. Drips "grow" downward once on view. */

.kp-navy, .kp-herobg, .kp-pagehero {
	position: relative;
}

.kp-navy > .kp-drips,
.kp-herobg > .kp-drips,
.kp-pagehero > .kp-drips {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 40px;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.kp-drip {
	position: absolute;
	top: -40px;
	width: 6px;
	background: var(--kp-gold);
	border-radius: 0 0 6px 6px;
	opacity: .9;
	animation: kp-drip-fall 1.1s cubic-bezier(.5,.1,.4,1) forwards;
}

.kp-drip::after {
	content: "";
	position: absolute;
	bottom: -4px; left: 50%;
	width: 9px; height: 9px;
	background: var(--kp-gold);
	border-radius: 50%;
	transform: translateX(-50%);
}

@keyframes kp-drip-fall {
	from { transform: translateY(0); }
	to   { transform: translateY(var(--kp-dh, 40px)); }
}

/* ---------- 2. Brush-stroke reveal on headings ----------------------- */
/* Add class kp-brush to any heading. A gold stroke swipes across, then
   fades to reveal the text - like paint being brushed on. */

.kp-brush {
	position: relative;
	display: inline-block;
}

.kp-brush::after {
	content: "";
	position: absolute;
	inset: -4px -10px;
	background: var(--kp-gold);
	transform: scaleX(0);
	transform-origin: left center;
	z-index: 2;
	/* torn brush edge */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='40'%3E%3Cpath d='M0 6 Q8 2 16 5 T32 4 T48 6 T64 3 T80 5 T100 4 L100 36 Q92 39 84 35 T68 37 T52 34 T36 37 T20 35 T0 36 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='40'%3E%3Cpath d='M0 6 Q8 2 16 5 T32 4 T48 6 T64 3 T80 5 T100 4 L100 36 Q92 39 84 35 T68 37 T52 34 T36 37 T20 35 T0 36 Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.kp-brush.is-on::after {
	animation: kp-brush-swipe 1s cubic-bezier(.6,0,.2,1) forwards;
}

@keyframes kp-brush-swipe {
	0%   { transform: scaleX(0); transform-origin: left center; opacity: 1; }
	45%  { transform: scaleX(1); transform-origin: left center; opacity: 1; }
	55%  { transform: scaleX(1); transform-origin: right center; opacity: 1; }
	100% { transform: scaleX(0); transform-origin: right center; opacity: 0; }
}

/* ---------- 3. Wet-paint sheen sweep on cards (hover) ---------------- */

.kp-card .elementor-icon-box-wrapper,
.kp-card .elementor-image-box-wrapper,
.kp-app, .kp-client, .kp-post, .kp-spec, .kp-dft {
	position: relative;
	overflow: hidden;
}

.kp-card .elementor-icon-box-wrapper::before,
.kp-app::before, .kp-post::before {
	content: "";
	position: absolute;
	top: 0; left: -75%;
	width: 50%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(238,178,86,.16) 50%, transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	transition: none;
	z-index: 1;
}

.kp-card .elementor-icon-box-wrapper:hover::before,
.kp-app:hover::before, .kp-post:hover::before {
	animation: kp-sheen .7s ease;
}

@keyframes kp-sheen {
	from { left: -75%; }
	to   { left: 130%; }
}

/* ---------- 4. Roller trail down page-hero left edge ----------------- */
/* A thin gold "wet roller" line that draws down the inner-page banners. */

.kp-pagehero::before {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 4px; height: 0;
	background: var(--kp-gold);
	z-index: 2;
	animation: kp-roller 1.1s ease .2s forwards;
}

@keyframes kp-roller {
	to { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.kp-drip { animation: none; transform: translateY(var(--kp-dh,40px)); }
	.kp-brush::after { display: none; }
	.kp-card .elementor-icon-box-wrapper::before,
	.kp-app::before, .kp-post::before { display: none; }
	.kp-pagehero::before { height: 100%; animation: none; }
}