/* =========================================================================
   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; }
}