/* ============================================================
   Aurora A-Z landing page - effect classes for the Zion Builder
   version of the page. Sits on top of karo-testmode-zion.css:
   that file owns the dark section shell (kt2-dark / kt2-bg-* /
   kt2-cards / kt2-check / kt2-faq / kt2-btn / kt2-reveal) and the
   JS interactivity gate, this file adds only the Aurora-specific
   pieces. All classes are kaz- prefixed and inert unless used, so
   loading site-wide is safe.
   ============================================================ */

:root {
	--kaz-green: #7ed957;
	--kaz-green-dim: rgba(126, 217, 87, 0.35);
}

/* In-page anchor targets clear the fixed Kallyas header. */
.kaz-anchor { scroll-margin-top: 110px; }

/* ---------- hero ---------- */
.kaz-hero-sec {
	position: relative;
	overflow: hidden;
	background: #060b22 !important;
	padding-top: 150px !important;
	padding-bottom: 110px !important;
}
.kaz-hero-sec::before {
	content: "";
	position: absolute;
	left: -2%; right: -2%; top: -2%; bottom: 0;
	z-index: 1;
	background: url(../images/aurora-az/coverflow.jpg) center center / cover no-repeat;
	filter: saturate(0.75);
	animation: kt2-kenburns 20s ease-in-out infinite alternate;
}
.kaz-hero-sec::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(6, 11, 34, 0.94) 0%, rgba(6, 11, 34, 0.62) 42%, rgba(6, 11, 34, 0.9) 100%),
		radial-gradient(ellipse 55% 50% at 50% 50%, rgba(4, 8, 24, 0.55) 0%, transparent 100%);
}
.kaz-hero-sec > .zn_section_size,
.kaz-hero-sec > .container { position: relative; z-index: 5; }

/* "A-Z" wordmark, drawn in CSS so the page carries no borrowed art */
.kaz-mark {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-size: clamp(56px, 11vw, 108px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-bottom: 6px;
	background: linear-gradient(120deg, #f2f5ff 10%, var(--kaz-green) 50%, #b7dcff 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 8px 40px rgba(126, 217, 87, 0.28));
	animation: kt2-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.kaz-mark i {
	font-style: normal;
	font-size: 0.5em;
	opacity: 0.55;
	padding: 0 0.06em;
	-webkit-text-fill-color: #9fb4e8;
}
.kaz-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.42em;
	padding-left: 0.42em;
	color: #c2d0f2;
	text-shadow: 0 2px 18px rgba(2, 6, 20, 0.95);
	margin: 0 0 26px;
	animation: kt2-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s both;
}
.kaz-hero-sec .kt2-hero-title {
	background: none;
	-webkit-text-fill-color: #f2f5ff;
	color: #f2f5ff !important;
	font-size: clamp(30px, 4.4vw, 46px);
	text-shadow: 0 6px 40px rgba(2, 6, 20, 0.9);
	animation: kt2-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both;
}
.kaz-hero-sec .kt2-hero-sub { color: #c6d4f7; text-shadow: 0 3px 22px rgba(2, 6, 20, 0.95); }
.kaz-hero-sec .kt2-chip { background: rgba(19, 28, 60, 0.72); backdrop-filter: blur(3px); }

/* ---------- screenshot stage ---------- */
.kaz-stage {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	border: 1px solid #35478a;
	border-radius: 16px;
	overflow: hidden;
	background: #050a1c;
	box-shadow: 0 28px 70px rgba(3, 8, 26, 0.7);
	transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.kaz-stage:hover { border-color: #4d6dcc; box-shadow: 0 34px 80px rgba(3, 8, 26, 0.85); }
.kaz-stage img { display: block; width: 100%; height: auto; }
.kaz-stage-cap {
	display: block;
	max-width: 900px;
	margin: 14px auto 0;
	text-align: center;
	font-size: 13.5px;
	color: #7d8cbd !important;
}

/* ---------- alphabet row, as a motion diagram ----------
   Not a screenshot: a bare strip that shows the highlight walking
   the row the way Left and Right move it. Shape follows the real
   selector, which packs the keys tight with no separators. */
.kaz-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 0;
	max-width: 900px;
	margin: 30px auto 0;
	padding: 22px 10px;
	font-weight: 400;
	line-height: 1;
	user-select: none;
}
.kaz-key {
	display: inline-block;
	color: rgba(226, 236, 255, 0.34);
	font-size: clamp(11px, 1.9vw, 26px);
	padding: 0 0.06em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
	transition: color 0.25s ease, transform 0.25s ease;
}
.kaz-key.is-on {
	color: #ffffff;
	transform: scale(1.5);
	padding: 0 0.22em;
	text-shadow: 0 0 22px rgba(126, 217, 87, 0.75), 0 3px 14px rgba(0, 0, 0, 0.9);
}

/* Sweeping highlight: each key carries an inline animation-delay and
   the cycle length here keeps the "on" window one key wide. No
   fill-mode on purpose - with backwards fill every key that has not
   started yet would sit on the highlighted first keyframe, lighting
   up the whole tail of the row at once. */
.kaz-row--sweep .kaz-key {
	animation: kaz-sweep 14s linear infinite;
}
@keyframes kaz-sweep {
	0%, 3.2% {
		color: #ffffff;
		transform: scale(1.5);
		text-shadow: 0 0 22px rgba(126, 217, 87, 0.75), 0 3px 14px rgba(0, 0, 0, 0.9);
	}
	6.4%, 100% {
		color: rgba(226, 236, 255, 0.34);
		transform: scale(1);
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
	}
}

/* ---------- controller button glyphs ---------- */
.kaz-btn-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	margin: 0 2px;
	border-radius: 999px;
	background: #26325e;
	border: 1px solid #4a5da3;
	color: #eaf0ff !important;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	vertical-align: baseline;
	line-height: 1;
	white-space: nowrap;
}
.kaz-btn-glyph--a { background: #1d4a22; border-color: #3f9247; color: #b8f5bf !important; }
.kaz-btn-glyph--accent { background: rgba(126, 217, 87, 0.14); border-color: var(--kaz-green-dim); color: #cdf3b6 !important; }

/* ---------- monospace paths and the folder tree ---------- */
.kaz-path {
	font-family: Consolas, "SFMono-Regular", Menlo, monospace;
	font-size: 0.92em;
	background: #101a3d;
	border: 1px solid #35478a;
	border-radius: 6px;
	padding: 2px 8px;
	color: #9fd9ff !important;
	white-space: nowrap;
}
.kaz-tree {
	background: #0b1330;
	border: 1px solid #35478a;
	border-radius: 14px;
	padding: 20px 22px;
	margin: 0;
	overflow-x: auto;
	font-family: Consolas, "SFMono-Regular", Menlo, monospace;
	font-size: 14px;
	line-height: 1.85;
	color: #9fb4e8 !important;
	box-shadow: 0 10px 34px rgba(4, 10, 32, 0.45);
}
.kaz-tree b { color: var(--kaz-green); font-weight: 700; }
.kaz-tree span { color: #5c6ea6; }

/* ---------- callouts ---------- */
.kaz-note {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	max-width: 820px;
	margin: 26px auto 0;
	padding: 16px 20px;
	border-radius: 14px;
	border: 1px solid #6b5a1f;
	background: rgba(255, 204, 51, 0.07);
	/* Callouts stay left-aligned inside centered sections. */
	text-align: left;
}
.kaz-note--info { border-color: #35478a; background: rgba(105, 182, 255, 0.07); }
/* Direct child only: bold words inside the body paragraph must stay inline. */
.kaz-note > div > b { color: #ffcc33; display: block; margin-bottom: 4px; font-size: 15.5px; }
.kaz-note--info > div > b { color: #69b6ff; }
.kaz-note p { margin: 0; font-size: 15px; color: #aebbe6 !important; }
.kaz-note-ico { font-size: 20px; line-height: 1.3; flex: 0 0 auto; }

/* ---------- plain bullet / numbered lists ----------
   Used where a card row would be decoration rather than structure. */
.kaz-list {
	max-width: 780px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: left;
}
.kaz-list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 14px;
	font-size: 16.5px;
	line-height: 1.6;
	color: #aebbe6 !important;
}
.kaz-list li:last-child { margin-bottom: 0; }
.kaz-list li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #69b6ff;
}
.kaz-list li b { color: #f2f5ff; font-weight: 600; }

.kaz-list--num { counter-reset: kaz-step; }
.kaz-list--num li { padding-left: 30px; }
.kaz-list--num li::before {
	counter-increment: kaz-step;
	content: counter(kaz-step) ".";
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: #69b6ff;
	font-weight: 700;
}

/* Control list, balanced over two columns so it does not run long. */
.kaz-uses { columns: 2; column-gap: 46px; }
.kaz-uses li { break-inside: avoid; }
@media (max-width: 900px) { .kaz-uses { columns: 1; } }

/* ---------- two operating modes ---------- */
.kaz-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: 0 auto; }
.kaz-mode {
	position: relative;
	background: #1a244a;
	border: 1px solid #35478a;
	border-radius: 18px;
	padding: 26px 24px;
	box-shadow: 0 10px 34px rgba(4, 10, 32, 0.45);
	transition: transform 0.35s ease, border-color 0.35s ease;
}
.kaz-mode:hover { transform: translateY(-6px); border-color: #4d6dcc; }
.kaz-mode--default { border-color: var(--kaz-green-dim); }
.kaz-mode h4 { font-size: 21px; margin: 0 0 6px; }
.kaz-mode p { color: #aebbe6 !important; font-size: 15.5px; margin: 0; }
.kaz-mode-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 12px;
	background: #26325e;
	border: 1px solid #4a5da3;
	color: #c2d0f2;
}
.kaz-mode--default .kaz-mode-tag {
	background: rgba(126, 217, 87, 0.14);
	border-color: var(--kaz-green-dim);
	color: #cdf3b6;
}

/* ---------- download block ---------- */
.kaz-dl {
	max-width: 620px;
	margin: 0 auto;
	background: #131e46;
	border: 1px solid #35478a;
	border-radius: 20px;
	padding: 30px 28px 26px;
	box-shadow: 0 18px 50px rgba(3, 8, 26, 0.6);
}
.kaz-dl-file {
	font-family: Consolas, "SFMono-Regular", Menlo, monospace;
	font-size: 19px;
	font-weight: 700;
	color: #f2f5ff !important;
	margin: 0 0 6px;
}
.kaz-dl-meta { font-size: 14px; color: #7d8cbd !important; margin: 0 0 22px; }
.kaz-dl-meta span { color: var(--kaz-green); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.kaz-modes { grid-template-columns: 1fr; }
	/* The mobile header is a solid block above the page rather than a
	   transparent overlay, so the desktop clearance is dead space. */
	.kaz-hero-sec { padding-top: 70px !important; padding-bottom: 70px !important; }
	.kaz-key.is-on { transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
	.kaz-hero-sec::before,
	.kaz-mark,
	.kaz-eyebrow,
	.kaz-row--sweep .kaz-key { animation: none !important; }
	.kaz-row--sweep .kaz-key:first-child {
		color: #ffffff;
		transform: scale(1.85);
	}
	.kaz-mode { transform: none !important; }
}