/*
Theme Name: KeynoteVision
Theme URI: https://keynotevision.com
Template: dvkv-vision
Author: MR-TBOT
Author URI: https://mr-tbot.com
Description: KeynoteVision skin — premium, dynamic and confident for keynotes, conventions, meetings and trade shows. Steel blue, sky and warm gold on deep slate; Clash Display over General Sans, with a connected-room network hero, a scrolling stage-floor grid and flowing gradient headlines.
Version: 2.0.0
License: Proprietary
Text Domain: keynotevision
*/

/* ---- Fonts (self-hosted, variable) ---- */
@font-face {
	font-family: "Clash Display";
	src: url("assets/fonts/clash-display-var.woff2") format("woff2-variations");
	font-weight: 200 700;
	font-display: swap;
}
@font-face {
	font-family: "General Sans";
	src: url("assets/fonts/general-sans-var.woff2") format("woff2-variations");
	font-weight: 200 700;
	font-display: swap;
}

/* ---- KeynoteVision tokens: premium, but alive ---- */
:root {
	--bg: #0b0f16;
	--bg-2: #121a26;
	--surface: rgba(90, 200, 250, 0.05);
	--surface-2: #17202e;
	--ink: #f3f6fb;
	--muted: #9aa8bd;
	--border: rgba(90, 200, 250, 0.18);

	--accent-1: #2d6cdf; /* steel blue */
	--accent-2: #5ac8fa; /* sky */
	--accent-3: #e8a33d; /* warm gold */
	--grad: linear-gradient(90deg, #2d6cdf, #5ac8fa 55%, #e8a33d);
	--btn-ink: #ffffff;

	--font-display: "Clash Display", "Segoe UI", system-ui, sans-serif;
	--font-body: "General Sans", system-ui, sans-serif;
	--display-weight: 600;
	--display-tracking: -0.02em;
	--display-transform: none;

	--radius: 14px;
	--radius-lg: 22px;

	--mesh-a: rgba(45, 108, 223, 0.42);
	--mesh-b: rgba(90, 200, 250, 0.24);
	--mesh-c: rgba(232, 163, 61, 0.20);
	--grain-opacity: 0.05;
	--glow: 0 14px 46px rgba(45, 108, 223, 0.32), 0 3px 20px rgba(90, 200, 250, 0.18);
	--speed: 1.15; /* confident, not sleepy */
}

/* Clash Display carries the headlines; slightly heavier at large sizes */
.hero-title { font-size: clamp(2.7rem, 8.8vw, 5.6rem); font-weight: 620; line-height: 1.02; }
.section-title, .page-title { font-weight: 600; }
.brand-name { font-weight: 640; letter-spacing: -0.01em; }
.hero-kicker { color: var(--accent-3); }

/* ---- Hero: flowing gradient headline + pulsing aura ---- */
.hero-title {
	position: relative;
	text-shadow: 0 0 42px rgba(90, 200, 250, 0.12);
}
.hero-title .accent {
	background: linear-gradient(100deg, #5ac8fa 0%, #e8a33d 35%, #cbe6ff 60%, #2d6cdf 85%, #5ac8fa 100%);
	background-size: 260% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: kv-flow calc(9s / var(--speed)) ease-in-out infinite;
}
@keyframes kv-flow {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* ---- Hero background: scrolling perspective "stage floor" + horizon glow ---- */
.hero-bg::after {
	content: "";
	position: absolute;
	left: -50%; right: -50%; bottom: -10%;
	height: 75%;
	background-image:
		linear-gradient(rgba(90, 200, 250, 0.10) 1.4px, transparent 1.4px),
		linear-gradient(90deg, rgba(90, 200, 250, 0.10) 1.4px, transparent 1.4px);
	background-size: 58px 58px;
	transform: perspective(420px) rotateX(64deg);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.5) 40%, transparent 78%);
	mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.5) 40%, transparent 78%);
	animation: kv-floor calc(7s / var(--speed)) linear infinite;
	opacity: 0.9;
}
@keyframes kv-floor {
	from { background-position: 0 0, 0 0; }
	to { background-position: 0 58px, 0 0; }
}
/* horizon glow line where the floor meets the dark */
.hero-bg::before {
	content: "";
	position: absolute;
	left: 10%; right: 10%; top: 46%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent-3), transparent);
	opacity: 0.5;
	filter: blur(0.5px);
	box-shadow: 0 0 26px 2px rgba(90, 200, 250, 0.4);
	animation: kv-horizon calc(6s / var(--speed)) ease-in-out infinite;
}
@keyframes kv-horizon {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 0.65; }
}

/* ---- Diagonal light-beam sweep across the hero ---- */
.hero::before {
	content: "";
	position: absolute;
	top: 0; left: -40%;
	width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(90, 200, 250, 0.09) 40%, rgba(232, 163, 61, 0.06) 55%, transparent);
	transform: skewX(-14deg);
	pointer-events: none;
	z-index: 0;
	animation: kv-beam calc(9s / var(--speed)) ease-in-out infinite;
}
@keyframes kv-beam {
	0% { left: -45%; opacity: 0; }
	18% { opacity: 1; }
	42% { left: 120%; opacity: 0; }
	100% { left: 120%; opacity: 0; }
}
.hero-inner { position: relative; z-index: 2; }

/* ---- Buttons: steel with a travelling sheen ---- */
.btn-primary {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #2d6cdf, #2458b8);
	box-shadow: 0 12px 34px rgba(45, 108, 223, 0.36);
}
.btn-primary::after {
	content: "";
	position: absolute;
	top: 0; left: -80%;
	width: 55%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
	transform: skewX(-18deg);
	animation: kv-sheen calc(5.5s / var(--speed)) ease-in-out infinite;
}
@keyframes kv-sheen {
	0% { left: -80%; }
	55%, 100% { left: 160%; }
}
.btn-primary:hover { box-shadow: 0 16px 48px rgba(45, 108, 223, 0.5), 0 4px 18px rgba(232, 163, 61, 0.25); }
.btn-ghost:hover { border-color: var(--accent-3); }

/* ---- Section titles: animated gradient underline that breathes ---- */
.section-title::after {
	background: linear-gradient(90deg, var(--accent-3), var(--accent-2), var(--accent-1));
	background-size: 200% 100%;
	height: 4px; width: 72px;
	animation: kv-flow calc(6s / var(--speed)) ease-in-out infinite;
}

/* ---- Kicker: confident tracking + soft glow ---- */
.hero-kicker { text-shadow: 0 0 20px rgba(232, 163, 61, 0.28); }

/* ---- Feature cards: gold sweep, lift, animated frame ---- */
.feature-card::before { background: linear-gradient(90deg, var(--accent-2), var(--accent-3)); }
.feature-card:nth-child(3n) .feature-icon .icon { color: var(--accent-3); }
.feature-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--accent-2) 60%, var(--border));
	box-shadow: 0 18px 44px rgba(45, 108, 223, 0.28), 0 0 0 1px rgba(90, 200, 250, 0.12);
}
.feature-icon .icon { transition: transform 0.3s ease; }
.feature-card:hover .feature-icon .icon { transform: scale(1.12) rotate(-3deg); }

/* ---- Use-case cards: gold accents, animated gradient ring on hover ---- */
.case-icon .icon { color: var(--accent-3); }
.case-card {
	position: relative;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease;
}
.case-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 22px 54px rgba(45, 108, 223, 0.3);
}
.case-num { color: color-mix(in srgb, var(--accent-2) 60%, transparent); opacity: 0.28; }

/* ---- Chips / pills ---- */
.case-tags li { color: var(--accent-2); }
.version-pill { color: var(--accent-2); }

/* ---- Reveal: keynote comes in with a touch more travel ---- */
.reveal { transform: translateY(30px); }

/* ---- Respect reduced motion for the new keynote animations ---- */
@media (prefers-reduced-motion: reduce) {
	.hero-title .accent,
	.hero-bg::after,
	.hero-bg::before,
	.hero::before,
	.btn-primary::after,
	.section-title::after {
		animation: none !important;
	}
	.hero-title .accent { background-position: 20% 50%; }
}