/* ── Garuda Sustained Cutting Comparison block ──────────────────────────────── */

#view-garuda-cutting {
	background: linear-gradient(160deg, #0b2a4a 0%, #164a6e 50%, #0f3352 100%);
	position: relative;
}

#view-garuda-cutting::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/assets/img/knum_bg.jpg') center / cover no-repeat;
	opacity: 0;
	transition: opacity 1.2s ease;
	pointer-events: none;
}

#view-garuda-cutting.gc-bright::after {
	opacity: 1;
}

#view-garuda-cutting > * {
	position: relative;
	z-index: 1;
}

#view-garuda-cutting h3.flyer-quote-header,
#view-garuda-cutting span.flyer-quote-subtext {
	color: #fff;
}

/* Chart wrapper */
.gc-chart-wrap {
	max-width: 680px;
	width: 100%;
	margin: 30px auto 0;
	position: relative;
}

.gc-chart {
	width: 100%;
	height: auto;
	display: block;
}

/* Axis styling */
.gc-axis-label {
	fill: rgba(255,255,255,0.7);
	font-size: 13px;
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gc-axis-line {
	stroke: rgba(255,255,255,0.35);
	stroke-width: 1.5;
}

.gc-axis-arrow {
	fill: rgba(255,255,255,0.35);
}

.gc-grid {
	stroke: rgba(255,255,255,0.08);
	stroke-width: 1;
}

/* Lines — hidden until JS sets up stroke-dash, then revealed via .gc-ready */
.gc-line {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	visibility: hidden;
	filter: drop-shadow(0 0 0px transparent);
	transition: stroke 0.8s ease, filter 0.8s ease;
}

/* JS sets visibility:visible at animation start via GSAP timeline */

.gc-line-hero {
	stroke-width: 5;
}

/* ── Bright state: glow on Garuda hero line only ──────────────────────────── */
.gc-bright .gc-line-hero {
	stroke: #0070b3;
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1.0))
	        drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
}

/* Gleam — travelling highlight on the Garuda line (loops after animation) */
.gc-gleam {
	fill: none;
	stroke: rgba(255,255,255,0.5);
	stroke-width: 4;
	stroke-linecap: round;
	pointer-events: none;
	filter: blur(2px);
}

/* Brand label */
.gc-brand-label {
	fill: #5fd4f4;
	font-family: 'FuturaEagle', Arial, sans-serif;
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 1px;
	opacity: 0;
}

.gc-brand-label.show {
	opacity: 1;
	transition: opacity 0.8s ease;
}

/* Legend */
.gc-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 18px;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.gc-legend.show {
	opacity: 1;
}

.gc-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255,255,255,0.75);
	font-family: 'Roboto', Arial, sans-serif;
	font-style: italic;
}

.gc-legend-item i {
	display: inline-block;
	width: 20px;
	height: 4px;
	border-radius: 2px;
	flex-shrink: 0;
}

.gc-legend-garuda i {
	background: #5fd4f4;
}

.gc-legend-bench .gc-swatch {
	display: flex;
	gap: 3px;
	flex-shrink: 0;
}

.gc-legend-bench .gc-swatch i {
	width: 6px;
}

.gc-swatch-c1 { background: #f9ad7d; }
.gc-swatch-c2 { background: #e89a4c; }
.gc-swatch-c3 { background: #52ba6f; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media only screen and (min-width: 576px) {
	.gc-chart-wrap {
		margin-top: 5px;
	}
}

@media only screen and (max-width: 480px) {
	.gc-brand-label {
		font-size: 24px;
	}
	.gc-legend {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.gc-brand-label,
	.gc-legend {
		opacity: 1 !important;
		transition: none !important;
	}
}