/**
 * Polish layer - premium visual refinements.
 *
 * Loaded site-wide after components.css. Everything here is additive and
 * decorative: layered background washes, ghost plate motifs, glassy sticky
 * header, richer hover states, and scroll-reveal transitions (applied by
 * main.js, gated on IntersectionObserver + prefers-reduced-motion, and
 * invisible-safe when JavaScript is unavailable).
 */

/* ══ Global refinements ════════════════════════════════════════ */
::selection {
	background: var(--npm-yellow);
	color: var(--npm-navy);
}

:focus-visible {
	outline: 3px solid var(--npm-yellow);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Prices and stats read cleaner with lining, equal-width digits. */
.npm-style-card__price,
.npm-price-strip__value,
.npm-duel__price,
.npm-review-stats__value,
.npm-table td.num {
	font-variant-numeric: lining-nums tabular-nums;
}

/* ══ Glassy sticky header ══════════════════════════════════════ */
.site-header.is-stuck {
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}

@supports not (backdrop-filter: blur(1px)) {
	.site-header.is-stuck {
		background: var(--npm-white);
	}
}

/* ══ Hero washes & ghost plate motif ═══════════════════════════ */
.hero,
.npm-lhero {
	position: relative;
	overflow: hidden;
}

.hero > .container,
.npm-lhero > .container {
	position: relative;
	z-index: 1;
}

/* Oversized, faded plate outlines drifting off the edge - the brand
 * motif as texture. Two rectangles from one element via box-shadow. */
.hero::after,
.npm-lhero--navy::after,
.npm-lhero--carbon::after {
	content: "";
	position: absolute;
	top: 14%;
	right: -140px;
	width: 560px;
	height: 138px;
	border: 3px solid rgba(255, 255, 255, 0.055);
	border-radius: 20px;
	transform: rotate(-9deg);
	box-shadow: -220px 150px 0 -14px rgba(255, 255, 255, 0.035);
	pointer-events: none;
}

/* Yellow heros get the same motif in soft navy, plus a light sheen. */
.npm-lhero:not(.npm-lhero--navy):not(.npm-lhero--carbon)::after {
	content: "";
	position: absolute;
	top: 10%;
	right: -140px;
	width: 560px;
	height: 138px;
	border: 3px solid rgba(27, 42, 74, 0.07);
	border-radius: 20px;
	transform: rotate(-9deg);
	box-shadow: -240px 160px 0 -14px rgba(27, 42, 74, 0.045);
	pointer-events: none;
}

.npm-lhero:not(.npm-lhero--navy):not(.npm-lhero--carbon)::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 90% at 18% 0%, rgba(255, 255, 255, 0.35) 0%, transparent 55%);
	pointer-events: none;
}

/* ══ Section washes ════════════════════════════════════════════ */
/* Alt sections: faint dot grid + top vignette, colour untouched. */
.section--alt {
	background-image:
		radial-gradient(80% 220px at 50% 0%, rgba(255, 255, 255, 0.75) 0%, transparent 70%),
		radial-gradient(rgba(27, 42, 74, 0.05) 1px, transparent 1.5px);
	background-size: 100% 100%, 22px 22px;
}

/* Navy sections: warm corner glows. */
.section--navy {
	position: relative;
	overflow: hidden;
}

.section--navy::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(45% 70% at 100% 0%, rgba(255, 200, 0, 0.10) 0%, transparent 60%),
		radial-gradient(40% 60% at 0% 100%, rgba(255, 200, 0, 0.05) 0%, transparent 55%);
	pointer-events: none;
}

.section--navy > .container {
	position: relative;
	z-index: 1;
}

/* CTA band: glow + ghost plate edge. */
.cta-band {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 120% at 85% 0%, rgba(255, 200, 0, 0.14) 0%, transparent 55%),
		linear-gradient(150deg, var(--npm-navy) 0%, var(--npm-navy-deep) 100%);
}

.cta-band::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -46px;
	width: 300px;
	height: 84px;
	border: 3px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	transform: rotate(-9deg);
	pointer-events: none;
}

.cta-band > * {
	position: relative;
	z-index: 1;
}

/* ══ Card lift & hover polish ══════════════════════════════════ */
.feature,
.step,
.npm-style-card,
.npm-hub-card,
.npm-review-card,
.npm-usecase,
.npm-duel__card,
.npm-zig,
.npm-review-stats__item {
	transition:
		transform var(--npm-slow) var(--npm-ease),
		box-shadow var(--npm-slow) var(--npm-ease),
		border-color var(--npm-fast) var(--npm-ease);
	will-change: transform;
}

.feature:hover,
.step:hover,
.npm-review-card:hover,
.npm-usecase:hover,
.npm-review-stats__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--npm-shadow);
}

/* Interactive cards get a stronger lift and a navy edge. */
.npm-style-card:hover,
.npm-hub-card:hover,
.npm-duel__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--npm-shadow-lg);
	border-color: var(--npm-navy);
}

/* Style-card imagery: slow zoom on hover inside its cropped frame. */
.npm-style-card__img {
	overflow: hidden;
}

.npm-style-card__img img {
	transition: transform 0.6s var(--npm-ease);
}

.npm-style-card:hover .npm-style-card__img img {
	transform: scale(1.05);
}

.npm-zig__media--photo img {
	transition: transform 0.6s var(--npm-ease);
}

.npm-zig:hover .npm-zig__media--photo img {
	transform: scale(1.04);
}

/* ══ Buttons: depth without noise ══════════════════════════════ */
.btn--primary {
	background-image: linear-gradient(180deg, #ffd23f 0%, var(--npm-yellow) 55%, #f3be00 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		0 2px 6px rgba(27, 42, 74, 0.18);
}

.btn--primary:hover {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		0 6px 16px rgba(27, 42, 74, 0.24);
	transform: translateY(-1px);
}

.btn--navy {
	background-image: linear-gradient(180deg, #24365c 0%, var(--npm-navy) 60%);
	box-shadow: 0 2px 6px rgba(27, 42, 74, 0.28);
}

.btn--navy:hover {
	box-shadow: 0 6px 16px rgba(27, 42, 74, 0.35);
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
	transition-duration: 0.06s;
}

/* ══ Scroll reveal (classes applied by main.js) ════════════════ */
@media (prefers-reduced-motion: no-preference) {
	.npm-reveal {
		opacity: 0;
		transform: translateY(14px);
		transition:
			opacity 0.55s var(--npm-ease),
			transform 0.55s var(--npm-ease);
	}

	.npm-reveal.is-inview {
		opacity: 1;
		transform: none;
	}
}

/* Reduced motion: no lifts, no zooms, no reveals. */
@media (prefers-reduced-motion: reduce) {
	.feature,
	.step,
	.npm-style-card,
	.npm-hub-card,
	.npm-review-card,
	.npm-usecase,
	.npm-duel__card,
	.npm-zig,
	.npm-review-stats__item,
	.npm-style-card__img img,
	.npm-zig__media--photo img,
	.btn--primary,
	.btn--navy {
		transition: none;
	}

	.feature:hover,
	.step:hover,
	.npm-style-card:hover,
	.npm-hub-card:hover,
	.npm-review-card:hover,
	.npm-usecase:hover,
	.npm-duel__card:hover,
	.npm-review-stats__item:hover,
	.btn--primary:hover,
	.btn--navy:hover {
		transform: none;
	}

	.npm-style-card:hover .npm-style-card__img img,
	.npm-zig:hover .npm-zig__media--photo img {
		transform: none;
	}
}

/* Ghost motifs can crowd small screens - fade them out. */
@media (max-width: 720px) {
	.hero::after,
	.npm-lhero::after,
	.npm-lhero--navy::after,
	.npm-lhero--carbon::after,
	.cta-band::after {
		display: none;
	}
}