/* =========================================================================
   KeepSeal Neo — Base design system
   Bold Neo-Industrial language. RTL-first. Light default, dark via .ksn-dark.
   Tokens come from the inline ksn-tokens style (see class-ksn-assets.php).
   ========================================================================= */

/* ---------- Scope reset (only inside our widgets) ---------- */
.ksn-heading,
.ksn-section,
.ksn-card,
.ksn-btn,
.ksn-kicker,
[class^="ksn-"],
[class*=" ksn-"] {
	box-sizing: border-box;
	font-family: var(--ksn-font);
}

/* A scoping helper for any KSN block that opts into local theming. */
.ksn-light { color-scheme: light; }
.ksn-dark  { color-scheme: dark; }

/* =========================================================================
   Typography — bold display
   ========================================================================= */
.ksn-display {
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ksn-ink);
	margin: 0;
}

.ksn-heading {
	max-width: 760px;
}
.ksn-heading.is-center,
.ksn-heading[style*="center"] { margin-inline: auto; }

.ksn-heading__title {
	font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem);
	margin: 0;
}
.ksn-heading__hl {
	color: var(--ksn-heat);
	position: relative;
	white-space: nowrap;
}
/* Heat underline stroke under the highlighted word. */
.ksn-heading__hl::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0.06em;
	height: 0.18em;
	background: linear-gradient(90deg, rgba(var(--ksn-heat-rgb), .9), rgba(var(--ksn-heat-rgb), 0));
	border-radius: 2px;
	z-index: -1;
}

.ksn-heading__sub {
	margin: 0.9rem 0 0;
	font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.15rem);
	line-height: 2;
	color: var(--ksn-muted);
	max-width: 60ch;
}
.ksn-heading[style*="center"] .ksn-heading__sub { margin-inline: auto; }

/* =========================================================================
   Kicker (eyebrow) + induction-ring motif
   ========================================================================= */
.ksn-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--ksn-accent);
	text-transform: none;
	margin-bottom: 0.85rem;
}

/* Concentric induction rings — pure CSS, the brand's signature mark. */
.ksn-kicker__ring,
.ksn-ring {
	--ring: var(--ksn-accent);
	position: relative;
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: 50%;
	border: 2px solid rgba(var(--ksn-accent-rgb), .9);
}
.ksn-kicker__ring::before,
.ksn-ring::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	border: 2px solid rgba(var(--ksn-accent-rgb), .45);
}
.ksn-kicker__ring::after,
.ksn-ring::after {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--ksn-heat);
	box-shadow: 0 0 8px 1px rgba(var(--ksn-heat-rgb), .7);
}

/* Larger standalone ring motif with optional pulse. */
.ksn-ring--lg { width: 64px; height: 64px; border-width: 3px; }
.ksn-ring--pulse::after { animation: ksn-pulse 2.4s ease-in-out infinite; }

@keyframes ksn-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.25); opacity: .6; }
}

/* =========================================================================
   Signature: the diagonal "seal stamp" edge
   Apply .ksn-stamp to clip a bold diagonal bottom-edge.
   ========================================================================= */
.ksn-stamp {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ksn-slant)), calc(100% - var(--ksn-slant)) 100%, 0 100%);
}
/* Mirror for RTL-leaning sections. */
.ksn-stamp--start {
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ksn-slant) 100%, 0 calc(100% - var(--ksn-slant)));
}

/* Blueprint grid backdrop utility. */
.ksn-blueprint {
	background-image:
		linear-gradient(rgba(var(--ksn-primary-rgb), .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--ksn-primary-rgb), .06) 1px, transparent 1px);
	background-size: 28px 28px;
}

/* =========================================================================
   Buttons
   ========================================================================= */
.ksn-btn {
	--btn-bg: var(--ksn-primary);
	--btn-fg: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.85rem 1.6rem;
	font-family: var(--ksn-font);
	font-weight: 800;
	font-size: 0.98rem;
	line-height: 1;
	color: var(--btn-fg);
	background: var(--btn-bg);
	border: 2px solid transparent;
	border-radius: var(--ksn-radius);
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ksn-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(var(--ksn-primary-rgb), .6);
}
.ksn-btn:active { transform: translateY(0); }

.ksn-btn--heat {
	--btn-bg: var(--ksn-heat);
	color: #1a0c00;
}
.ksn-btn--heat:hover { box-shadow: 0 14px 34px -12px rgba(var(--ksn-heat-rgb), .75); }

.ksn-btn--accent { --btn-bg: var(--ksn-accent); }

.ksn-btn--outline {
	background: transparent;
	color: var(--ksn-ink);
	border-color: var(--ksn-line);
}
.ksn-btn--outline:hover {
	border-color: var(--ksn-primary);
	box-shadow: none;
}

.ksn-btn--ghost {
	background: transparent;
	color: var(--ksn-primary);
	padding-inline: 0.5rem;
}
.ksn-btn--ghost:hover { box-shadow: none; color: var(--ksn-accent); }

/* =========================================================================
   Card surface + chips/badges
   ========================================================================= */
.ksn-surface {
	background: var(--ksn-surface);
	border: 1px solid var(--ksn-line);
	border-radius: var(--ksn-radius);
	box-shadow: var(--ksn-shadow);
}

.ksn-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ksn-primary);
	background: rgba(var(--ksn-primary-rgb), .08);
	border-radius: 999px;
}
.ksn-chip--heat { color: var(--ksn-heat); background: rgba(var(--ksn-heat-rgb), .12); }
.ksn-chip--accent { color: var(--ksn-accent); background: rgba(var(--ksn-accent-rgb), .10); }

.ksn-badge {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 800;
	color: #fff;
	background: var(--ksn-accent);
	border-radius: 6px;
}

/* =========================================================================
   Reveal animations (driven by frontend.js IntersectionObserver)
   ========================================================================= */
[data-ksn-reveal] {
	opacity: 0;
	transition: opacity var(--ksn-speed, 600ms) ease,
				transform var(--ksn-speed, 600ms) cubic-bezier(.16, 1, .3, 1),
				filter var(--ksn-speed, 600ms) ease;
}
[data-ksn-reveal="fade-up"]    { transform: translateY(30px); }
[data-ksn-reveal="fade-down"]  { transform: translateY(-30px); }
[data-ksn-reveal="slide-right"]{ transform: translateX(40px); }
[data-ksn-reveal="slide-left"] { transform: translateX(-40px); }
[data-ksn-reveal="scale-in"]   { transform: scale(.92); }
[data-ksn-reveal="blur-in"]    { transform: scale(.98); filter: blur(10px); }
[data-ksn-reveal="fade-in"]    { transform: none; }

.ksn-revealed[data-ksn-reveal] {
	opacity: 1;
	transform: none;
}
/* only the blur-in variant needs its filter cleared; clearing it globally
   would wipe decorative filters (e.g. the stamp card's drop-shadow stroke). */
.ksn-revealed[data-ksn-reveal="blur-in"] { filter: none; }

@media (prefers-reduced-motion: reduce) {
	[data-ksn-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.ksn-ring--pulse::after { animation: none; }
}

/* =========================================================================
   RTL niceties
   ========================================================================= */
[dir="rtl"] .ksn-heading__hl::after {
	background: linear-gradient(270deg, rgba(var(--ksn-heat-rgb), .9), rgba(var(--ksn-heat-rgb), 0));
}