/* ==========================================================================
   KiaraHub — Futuristic Enhancement Layer
   Loaded after theme.css + module stylesheets. Every selector below is
   checked against real markup in the theme (no speculative/dead classes).
   Additive only — no rewritten theme rules, so it can be deleted with zero
   impact on layout.
   ========================================================================== */

:root {
	--kh-glow-strong: 0 0 0 1px rgba(124,92,255,0.22), 0 0 40px rgba(124,92,255,0.28), 0 20px 50px rgba(11,15,31,0.18);
	--kh-glow-cyan: 0 0 0 1px rgba(34,211,238,0.28), 0 0 32px rgba(34,211,238,0.30);
	--kh-glass-bg: rgba(255,255,255,0.66);
	--kh-glass-border: rgba(124,92,255,0.16);
}

/* ---------- Global atmosphere ---------- */
body {
	background-image:
		radial-gradient(900px 480px at 8% -6%, rgba(124,92,255,0.05), transparent 60%),
		radial-gradient(760px 420px at 96% 8%, rgba(34,211,238,0.045), transparent 60%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

html { scrollbar-width: thin; scrollbar-color: var(--kh-violet) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--kh-violet), var(--kh-cyan));
	border-radius: 999px; border: 2px solid var(--kh-bg, #F4F6FB);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--kh-pink), var(--kh-violet)); }

::selection { background: rgba(124,92,255,0.28); color: var(--kh-ink); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.carmp-btn:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--kh-cyan);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(34,211,238,0.18);
}

/* ---------- Header: glass + live gradient seam ---------- */
.kiara-header {
	background: var(--kh-glass-bg);
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	border-bottom-color: var(--kh-glass-border);
}
.kiara-header::after {
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--kh-violet), var(--kh-cyan), var(--kh-pink), transparent);
	background-size: 200% 100%;
	animation: kiara-seam-flow 6s linear infinite;
}
@keyframes kiara-seam-flow {
	0% { background-position: 0% 0; }
	100% { background-position: 200% 0; }
}
.kiara-nav-list a.current::after { box-shadow: 0 0 10px rgba(124,92,255,0.7); }

/* ---------- Buttons: shimmer + lift ---------- */
.carmp-btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.carmp-btn-primary::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.45) 40%, transparent 60%);
	transform: translateX(-120%);
	transition: transform .6s ease;
}
.carmp-btn-primary:hover::before { transform: translateX(120%); }
.carmp-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(255,79,163,0.42), 0 0 24px rgba(124,92,255,0.25);
}
.carmp-btn-outline:hover { box-shadow: var(--kh-glow-cyan); }

/* ---------- Cards: holographic border-on-hover ----------
   Verified real wrapper classes: .kiara-how-card, .carmp-car-card
   (used + new car listings), .kiara-brand-card, .kiara-path-card,
   .kiara-garage-card. */
.kiara-how-card, .carmp-car-card, .kiara-brand-card, .kiara-path-card, .kiara-garage-card {
	position: relative;
	transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.kiara-how-card::before, .carmp-car-card::before, .kiara-path-card::before {
	content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
	background: var(--kh-gradient-brand);
	opacity: 0; transition: opacity .3s ease;
}
.kiara-how-card:hover, .carmp-car-card:hover, .kiara-brand-card:hover,
.kiara-path-card:hover, .kiara-garage-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--kh-glow-strong);
}
.kiara-how-card:hover::before, .carmp-car-card:hover::before, .kiara-path-card:hover::before { opacity: 0.16; }

.kiara-live-dot {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: var(--kh-teal); box-shadow: 0 0 8px var(--kh-teal);
	animation: kiara-pulse 1.8s ease-in-out infinite;
}

.kiara-section-head h2 { position: relative; display: inline-block; padding-bottom: 10px; }
.kiara-section-head h2::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 3px;
	background: var(--kh-gradient-brand);
}

.kiara-ad-slot {
	background: var(--kh-glass-bg);
	border: 1px solid var(--kh-glass-border);
	border-radius: var(--kh-radius, 16px);
	backdrop-filter: blur(6px);
	box-shadow: var(--kh-shadow);
}

/* ---------- Reveal-on-scroll (paired with futuristic.js) ---------- */
[data-kh-reveal] {
	opacity: 0; transform: translateY(16px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
[data-kh-reveal].kh-in-view { opacity: 1; transform: translateY(0); }

/* ---------- Mouse-tracked glow (class + vars set by JS, desktop hover only) ---------- */
.kh-tilt-glow { position: relative; overflow: hidden; }
.kh-tilt-glow::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: inherit; inset: 0;
	background: radial-gradient(220px circle at var(--kh-mx, 50%) var(--kh-my, 50%), rgba(124,92,255,0.18), transparent 65%);
	opacity: 0; transition: opacity .25s ease;
}
.kh-tilt-glow:hover::after { opacity: 1; }
.kh-tilt-glow > * { position: relative; z-index: 1; }

/* ---------- Accessibility & performance: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.kiara-header::after { animation: none; }
	.carmp-btn-primary::before { transition: none; }
	[data-kh-reveal] { opacity: 1; transform: none; transition: none; }
	.kh-tilt-glow::after { display: none; }
}

/* ---------- Responsive: tablet & phone ----------
   Backdrop blur is expensive on low-power/mobile GPUs, so it's scaled
   down rather than removed. Hover-only effects are neutralized on touch
   devices via the (hover: none) query below. ---------- */
@media (max-width: 900px) {
	.kiara-ad-slot { backdrop-filter: blur(3px); }
	.kiara-header { backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
	.kiara-how-card:hover, .carmp-car-card:hover, .kiara-brand-card:hover,
	.kiara-path-card:hover, .kiara-garage-card:hover { transform: none; }
}

@media (hover: none) {
	.kh-tilt-glow::after { display: none; }
	.carmp-btn-primary::before { display: none; }
}

@media (max-width: 480px) {
	.kiara-header::after { height: 1.5px; }
	::-webkit-scrollbar { width: 6px; height: 6px; }
}