/* Framer Kit for GreenShift -- design tokens & presets
   Everything is namespaced gsfk- / --gsfk- so nothing collides with
   GreenShift, your theme, or theme.json. */

:root {
	/* Neutrals: warm-tinted near-black, the Framer default feel */
	--gsfk-ink:        #0a0a0b;
	--gsfk-ink-2:      #17171a;
	--gsfk-muted:      #6b6b76;
	--gsfk-line:       rgba(10, 10, 11, 0.09);
	--gsfk-surface:    #ffffff;
	--gsfk-surface-2:  #f6f6f7;
	--gsfk-accent:     #2b6ef6;
	--gsfk-accent-2:   #9b5cf6;

	/* Fluid type scale */
	--gsfk-text-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
	--gsfk-text-sm:    clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
	--gsfk-text-base:  clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
	--gsfk-text-lg:    clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
	--gsfk-text-xl:    clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
	--gsfk-text-2xl:   clamp(2rem, 1.6rem + 2vw, 3.2rem);
	--gsfk-text-3xl:   clamp(2.6rem, 1.8rem + 3.6vw, 4.8rem);
	--gsfk-text-4xl:   clamp(3.2rem, 2rem + 5.4vw, 6.5rem);

	/* Tight tracking on display sizes is most of the "Framer look" */
	--gsfk-track-tight:  -0.022em;
	--gsfk-track-tighter:-0.038em;
	--gsfk-leading-tight: 1.06;
	--gsfk-leading-snug:  1.25;
	--gsfk-leading-body:  1.65;

	/* Radii */
	--gsfk-r-sm:  8px;
	--gsfk-r-md:  14px;
	--gsfk-r-lg:  22px;
	--gsfk-r-xl:  32px;
	--gsfk-r-pill: 999px;

	/* Layered shadows -- several soft passes rather than one hard drop */
	--gsfk-shadow-sm:
		0 1px 2px rgba(10, 10, 11, 0.04),
		0 2px 6px rgba(10, 10, 11, 0.04);
	--gsfk-shadow-md:
		0 1px 2px rgba(10, 10, 11, 0.04),
		0 4px 12px rgba(10, 10, 11, 0.05),
		0 12px 28px rgba(10, 10, 11, 0.05);
	--gsfk-shadow-lg:
		0 1px 2px rgba(10, 10, 11, 0.04),
		0 8px 24px rgba(10, 10, 11, 0.06),
		0 24px 56px rgba(10, 10, 11, 0.08);

	/* Spring-flavoured easings for pure-CSS transitions */
	--gsfk-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
	--gsfk-ease-soft:  cubic-bezier(0.32, 0.72, 0, 1);
	--gsfk-ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);

	--gsfk-space-section: clamp(4rem, 2rem + 8vw, 9rem);
}

/* Dark surfaces: opt in with .gsfk-dark on any wrapper */
.gsfk-dark {
	--gsfk-ink:       #f7f7f8;
	--gsfk-ink-2:     #d4d4dc;
	--gsfk-muted:     #8e8e9c;
	--gsfk-line:      rgba(255, 255, 255, 0.11);
	--gsfk-surface:   #0a0a0b;
	--gsfk-surface-2: #131316;
	color: var(--gsfk-ink);
	background: var(--gsfk-surface);
}

/* ------------------------------------------------------------ typography */

.gsfk-display,
.gsfk-h1 {
	font-size: var(--gsfk-text-4xl);
	line-height: var(--gsfk-leading-tight);
	letter-spacing: var(--gsfk-track-tighter);
	font-weight: 600;
	margin: 0 0 0.4em;
	text-wrap: balance;
}
.gsfk-h2 {
	font-size: var(--gsfk-text-3xl);
	line-height: 1.1;
	letter-spacing: var(--gsfk-track-tighter);
	font-weight: 600;
	margin: 0 0 0.4em;
	text-wrap: balance;
}
.gsfk-h3 {
	font-size: var(--gsfk-text-xl);
	line-height: var(--gsfk-leading-snug);
	letter-spacing: var(--gsfk-track-tight);
	font-weight: 600;
	margin: 0 0 0.5em;
}
.gsfk-lead {
	font-size: var(--gsfk-text-lg);
	line-height: var(--gsfk-leading-body);
	color: var(--gsfk-muted);
	margin: 0 0 1.4em;
	max-width: 58ch;
	text-wrap: pretty;
}
.gsfk-body {
	font-size: var(--gsfk-text-base);
	line-height: var(--gsfk-leading-body);
	margin: 0 0 1em;
}
.gsfk-eyebrow {
	display: inline-block;
	font-size: var(--gsfk-text-xs);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gsfk-muted);
	margin: 0 0 1.1em;
}
.gsfk-gradient-text {
	background: linear-gradient(96deg, var(--gsfk-ink) 12%, var(--gsfk-muted) 55%, var(--gsfk-ink) 92%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------------------------------------------------------------- layout */

.gsfk-section { padding-block: var(--gsfk-space-section); position: relative; }

/* Centred column inside a full-width section. Follows theme.json's wide size
   when the theme provides one, so it lines up with core blocks. */
.gsfk-wrap {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--custom--spacing--side, min(4vw, 24px));
}

.gsfk-stack   { display: flex; flex-direction: column; gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); }
.gsfk-row     { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.gsfk-center.gsfk-row, .gsfk-center > .gsfk-row { justify-content: center; }
.gsfk-cta     { padding: clamp(2.2rem, 1.4rem + 3vw, 4.5rem); }
.gsfk-center  { text-align: center; align-items: center; }
.gsfk-center .gsfk-lead { margin-inline: auto; }

.gsfk-grid {
	display: grid;
	gap: clamp(1rem, 0.5rem + 1.6vw, 1.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}
.gsfk-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }

/* ----------------------------------------------------------- components */

.gsfk-card {
	background: var(--gsfk-surface);
	border: 1px solid var(--gsfk-line);
	border-radius: var(--gsfk-r-lg);
	padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
	box-shadow: var(--gsfk-shadow-sm);
	transition: box-shadow 0.45s var(--gsfk-ease-out), border-color 0.45s var(--gsfk-ease-out);
}
.gsfk-card:hover { box-shadow: var(--gsfk-shadow-md); }

.gsfk-glass {
	background: rgba(255, 255, 255, 0.62);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	backdrop-filter: blur(18px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--gsfk-r-lg);
}
.gsfk-dark .gsfk-glass {
	background: rgba(22, 22, 26, 0.55);
	border-color: rgba(255, 255, 255, 0.09);
}

/* Gradient hairline border without a wrapper element */
.gsfk-border-gradient {
	position: relative;
	border-radius: var(--gsfk-r-lg);
	background-clip: padding-box;
}
.gsfk-border-gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, var(--gsfk-accent), var(--gsfk-accent-2), transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Soft radial spotlight behind a hero */
.gsfk-spotlight { position: relative; isolation: isolate; overflow: hidden; }
.gsfk-spotlight::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 70vh;
	z-index: -1;
	background:
		radial-gradient(50% 50% at 50% 40%, color-mix(in srgb, var(--gsfk-accent) 22%, transparent), transparent 70%),
		radial-gradient(40% 40% at 72% 20%, color-mix(in srgb, var(--gsfk-accent-2) 18%, transparent), transparent 70%);
	filter: blur(30px);
	pointer-events: none;
}

.gsfk-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.gsfk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.78em 1.5em;
	border-radius: var(--gsfk-r-pill);
	font-size: var(--gsfk-text-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	background: var(--gsfk-ink);
	color: var(--gsfk-surface);
	border: 1px solid transparent;
	box-shadow: var(--gsfk-shadow-sm);
	transition: transform 0.4s var(--gsfk-ease-back), box-shadow 0.4s var(--gsfk-ease-out), opacity 0.3s;
	will-change: transform;
}
.gsfk-btn:hover { box-shadow: var(--gsfk-shadow-md); opacity: 0.94; }
.gsfk-btn-ghost {
	background: transparent;
	color: var(--gsfk-ink);
	border-color: var(--gsfk-line);
	box-shadow: none;
}
.gsfk-btn-ghost:hover { background: var(--gsfk-surface-2); }

.gsfk-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.36em 0.85em;
	border-radius: var(--gsfk-r-pill);
	border: 1px solid var(--gsfk-line);
	background: var(--gsfk-surface);
	font-size: var(--gsfk-text-xs);
	font-weight: 500;
	color: var(--gsfk-muted);
}

.gsfk-stat-value {
	font-size: var(--gsfk-text-2xl);
	font-weight: 600;
	letter-spacing: var(--gsfk-track-tighter);
	line-height: 1;
	margin: 0 0 0.35em;
}
.gsfk-stat-label {
	font-size: var(--gsfk-text-sm);
	color: var(--gsfk-muted);
	margin: 0;
}

/* ------------------------------------------------------------ text split */

.gsfk-t-m {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* room for descenders so g/y/p are not clipped by the mask */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.gsfk-t-i { display: inline-block; will-change: transform; }
.gsfk-split { opacity: 1 !important; }

/* --------------------------------------------------------------- motion */

.gsfk-tilt-ctx { transform-style: preserve-3d; perspective: 900px; will-change: transform; }
.gsfk-magnetic, .gsfk-lift { will-change: transform; }

.gsfk-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.gsfk-marquee-track {
	display: flex;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	width: max-content;
	animation: gsfk-marquee 32s linear infinite;
}
.gsfk-marquee:hover .gsfk-marquee-track { animation-play-state: paused; }
@keyframes gsfk-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	.gsfk-marquee-track { animation: none; }
	.gsfk-card, .gsfk-btn { transition: none; }
}