/* ================================================================
   Chancery Finance Calculator — finance-calculator.css v1.1.1
   CSS variables · Light/dark themes · Mobile-first
   Wise Digital Marketing © 2026
================================================================ */

/* ── CSS Variables ───────────────────────────────────────────── */
.cfc-section {
	--cfc-primary:   #A62461;
	--cfc-secondary: #7ABFB8;
	--cfc-text:      #0D0D0D;
	--cfc-bg:        #ffffff;
}

/* ── Reset ───────────────────────────────────────────────────── */
.cfc-section *,
.cfc-section *::before,
.cfc-section *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Section ─────────────────────────────────────────────────── */
.cfc-section {
	background-color: var(--cfc-bg);
	padding: 88px 40px;
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* Dark theme */
.cfc-theme-dark {
	--cfc-bg:   #0d0d10;
	--cfc-text: #ffffff;
}

/* SVG background */
.cfc-bg-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

/* ── Orb animations ──────────────────────────────────────────── */
@keyframes cfc-orb1 {
	0%, 100% { transform: translate(0, 0)    scale(1);    }
	50%      { transform: translate(30px, -20px) scale(1.08); }
}
@keyframes cfc-orb2 {
	0%, 100% { transform: translate(0, 0)      scale(1);    }
	50%      { transform: translate(-25px, 15px) scale(1.05); }
}
.cfc-orb1 { animation: cfc-orb1 8s  ease-in-out infinite; }
.cfc-orb2 { animation: cfc-orb2 10s ease-in-out infinite; }

/* ── Inner grid ──────────────────────────────────────────────── */
.cfc-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 72px;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
}

/* ── LEFT column ─────────────────────────────────────────────── */
.cfc-left {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ── Entrance animations ─────────────────────────────────────── */
@keyframes cfc-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes cfc-slide-right {
	from { opacity: 0; transform: translateX(-18px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes cfc-scale-in {
	from { opacity: 0; transform: scale(0.88); }
	to   { opacity: 1; transform: scale(1); }
}

/* Before visible — hidden */
.cfc-badge,
.cfc-headline,
.cfc-desc,
.cfc-stats,
.cfc-cta-group,
.cfc-card { opacity: 0; }

/* Triggered by JS adding .cfc-visible */
.cfc-visible .cfc-badge     { animation: cfc-slide-right 500ms cubic-bezier(0.34,1.1,0.64,1) 0ms    forwards; }
.cfc-visible .cfc-headline  { animation: cfc-rise         550ms cubic-bezier(0.34,1.1,0.64,1) 80ms   forwards; }
.cfc-visible .cfc-desc      { animation: cfc-rise         500ms ease                           180ms  forwards; }
.cfc-visible .cfc-stats     { animation: cfc-rise         500ms ease                           280ms  forwards; }
.cfc-visible .cfc-cta-group { animation: cfc-rise         500ms ease                           380ms  forwards; }
/* Card entrance — opacity explicitly set so float animation can't revert it */
.cfc-visible .cfc-card      { animation: cfc-scale-in     600ms cubic-bezier(0.34,1.1,0.64,1) 200ms  forwards; opacity: 1; }

/* ── Badge ───────────────────────────────────────────────────── */
.cfc-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px 7px 12px;
	background: linear-gradient(135deg, rgba(166,36,97,0.1), rgba(122,191,184,0.1));
	border: 1px solid rgba(166,36,97,0.2);
	border-radius: 100px;
	width: fit-content;
}

.cfc-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cfc-primary);
	flex-shrink: 0;
	position: relative;
}

@keyframes cfc-pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(2.4); opacity: 0; }
}
.cfc-badge-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--cfc-primary);
	animation: cfc-pulse 2s ease-out infinite;
}

.cfc-badge-text {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cfc-primary);
}

/* ── Headline ────────────────────────────────────────────────── */
.cfc-headline {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(30px, 3.5vw, 46px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--cfc-text);
}

.cfc-hl {
	display: block;
	color: var(--cfc-primary);
}

/* ── Description ─────────────────────────────────────────────── */
.cfc-desc {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: #4b5563;
	max-width: 420px;
}
.cfc-theme-dark .cfc-desc { color: rgba(255,255,255,0.6); }

/* ── Stat cards ──────────────────────────────────────────────── */
.cfc-stats {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.cfc-stat {
	flex: 1;
	min-width: 130px;
	padding: 20px 22px;
	background: #f8f8f8;
	border-radius: 14px;
	border-left: 3px solid var(--cfc-secondary);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.cfc-stat:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.cfc-stat--2 { border-left-color: var(--cfc-primary); }

.cfc-theme-dark .cfc-stat {
	background: rgba(255,255,255,0.05);
}
.cfc-theme-dark .cfc-stat:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.cfc-stat-val {
	font-family: 'Raleway', sans-serif;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	margin-bottom: 6px;
	color: var(--cfc-text);
}
.cfc-stat--1 .cfc-stat-val { color: var(--cfc-secondary); }
.cfc-stat--2 .cfc-stat-val { color: var(--cfc-primary); }

.cfc-stat-label {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
}
.cfc-theme-dark .cfc-stat-label { color: rgba(255,255,255,0.45); }

/* ── CTA group ───────────────────────────────────────────────── */
.cfc-cta-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.cfc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 30px;
	background-color: var(--cfc-primary);
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 4px 20px rgba(166,36,97,0.3);
	transition: background-color 200ms ease, transform 180ms ease, box-shadow 200ms ease;
}
.cfc-btn:hover {
	background-color: #8c1d52;
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(166,36,97,0.45);
}
.cfc-btn svg {
	flex-shrink: 0;
	transition: transform 180ms ease;
}
.cfc-btn:hover svg { transform: translateX(3px); }

.cfc-disclaimer {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	color: #9ca3af;
	font-style: italic;
}
.cfc-theme-dark .cfc-disclaimer { color: rgba(255,255,255,0.35); }

/* ── RIGHT column ────────────────────────────────────────────── */
.cfc-right {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px 0;
}

/* ── Floating animation ──────────────────────────────────────── */
@keyframes cfc-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

/* ── Calculator card ─────────────────────────────────────────── */
.cfc-card {
	position: relative;
	z-index: 1;
	background: linear-gradient(160deg, #fafafa, #f5f5f5);
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: 22px;
	padding: 44px 36px 36px;
	width: 100%;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
	text-align: center;
}

/* Float starts after entrance animation completes (600ms + 200ms delay = ~900ms) */
.cfc-float-on.cfc-visible .cfc-card {
	animation: cfc-scale-in 600ms cubic-bezier(0.34,1.1,0.64,1) 200ms forwards,
	           cfc-float    5s    ease-in-out                    1100ms infinite;
	opacity: 1;
}

.cfc-theme-dark .cfc-card {
	background: linear-gradient(160deg, #1a1a22, #111116);
	border-color: rgba(255,255,255,0.08);
	box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

/* ── Icon box ────────────────────────────────────────────────── */
.cfc-icon-box {
	width: 80px;
	height: 80px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--cfc-primary), var(--cfc-secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 24px rgba(166,36,97,0.25);
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

@keyframes cfc-shimmer {
	0%        { transform: translateX(-130%) skewX(-15deg); }
	60%, 100% { transform: translateX(200%)  skewX(-15deg); }
}
.cfc-icon-box::after {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
	animation: cfc-shimmer 3.5s ease-in-out infinite;
}

@keyframes cfc-icon-glow {
	0%, 100% { box-shadow: 0 6px 24px rgba(166,36,97,0.25); }
	50%      { box-shadow: 0 8px 32px rgba(166,36,97,0.45), 0 0 0 8px rgba(166,36,97,0.06); }
}
.cfc-visible .cfc-icon-box {
	animation: cfc-icon-glow 3s ease-in-out infinite;
}

/* ── Card text ───────────────────────────────────────────────── */
.cfc-card-title {
	font-family: 'Raleway', sans-serif;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cfc-text);
}
.cfc-theme-dark .cfc-card-title { color: #ffffff; }

.cfc-card-desc {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #6b7280;
	line-height: 1.6;
	max-width: 240px;
}
.cfc-theme-dark .cfc-card-desc { color: rgba(255,255,255,0.5); }

/* ── Calculator button ───────────────────────────────────────── */
.cfc-calc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	width: 100%;
	background: #ffffff;
	color: var(--cfc-primary);
	border: 1.5px solid var(--cfc-primary);
	border-radius: 9px;
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 200ms ease, box-shadow 200ms ease, transform 180ms ease;
	position: relative;
	overflow: hidden;
}
.cfc-calc-btn:hover {
	background: rgba(166,36,97,0.05);
	box-shadow: 0 4px 16px rgba(166,36,97,0.15);
	transform: translateY(-1px);
}
.cfc-calc-btn svg { flex-shrink: 0; }

.cfc-theme-dark .cfc-calc-btn {
	background: transparent;
}
.cfc-theme-dark .cfc-calc-btn:hover {
	background: rgba(166,36,97,0.1);
}

/* Ripple */
.cfc-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(166,36,97,0.15);
	transform: scale(0);
	pointer-events: none;
	animation: cfc-ripple-anim 600ms linear forwards;
}
@keyframes cfc-ripple-anim {
	to { transform: scale(4); opacity: 0; }
}

/* ── Credit line ─────────────────────────────────────────────── */
.cfc-credit {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	color: #9ca3af;
	font-weight: 500;
}
.cfc-credit svg { flex-shrink: 0; }
.cfc-theme-dark .cfc-credit { color: rgba(255,255,255,0.3); }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.cfc-badge-dot::after,
	.cfc-orb1, .cfc-orb2,
	.cfc-icon-box::after,
	.cfc-card { animation: none !important; }

	.cfc-badge,
	.cfc-headline,
	.cfc-desc,
	.cfc-stats,
	.cfc-cta-group,
	.cfc-card { opacity: 1 !important; }
}

/* ── MOBILE — stacked, centred ───────────────────────────────── */
@media (max-width: 768px) {
	.cfc-section { padding: 64px 24px; }
	.cfc-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.cfc-left {
		align-items: center;
		text-align: center;
		gap: 28px;
	}
	.cfc-desc,
	.cfc-headline { text-align: center; max-width: 100%; }
	.cfc-cta-group { align-items: center; width: 100%; }
	.cfc-btn { width: 100%; justify-content: center; }
	.cfc-stats { justify-content: center; gap: 12px; }
	.cfc-stat { min-width: 140px; padding: 18px 20px; }
	.cfc-right { padding: 0; }
	.cfc-card {
		max-width: 100%;
		padding: 36px 28px 28px;
		gap: 18px;
		animation: none !important;
	}
}