/* FlexiCharge Logo — intro, stroom en compact icoon bij scrollen. */

.fc-logo {
	--fc-h: clamp(28px, 2.6vw, 36px);
	--fc-ink: #353638;
	--fc-green: #00a889;
	--fc-spark: #8dffe6;
	--fc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fc-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}

.fc-logo__svg {
	display: block;
	width: auto;
	height: var(--fc-h);
	overflow: visible;
}

.fc-logo__icon {
	transform-box: fill-box;
	transform-origin: 0% 50%;
	transition: transform 0.5s var(--fc-back);
}

.fc-bolt__shape {
	fill: var(--fc-green);
}

.fc-bolt__glow {
	fill: var(--fc-spark);
	opacity: 0;
}

.fc-bolt__spark {
	fill: none;
	stroke: var(--fc-spark);
	stroke-width: 0.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 16 84;
	stroke-dashoffset: 100;
	opacity: 0;
}

.fc-arc {
	fill: none;
	stroke: var(--fc-spark);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
}

.fc-arc--core {
	stroke: #fff;
	stroke-width: 0.8;
}

.fc-l {
	fill: var(--fc-ink);
	transform-box: fill-box;
	transform-origin: 0% 50%;
	transition: opacity 0.35s var(--fc-ease), transform 0.45s var(--fc-ease);
	transition-delay: calc(var(--i) * 30ms);
}

/* ---------- Bij scrollen: tekst weg, icoon blijft ---------- */

.fc-scrolled .fc-logo--header .fc-l {
	opacity: 0;
	transform: translateX(-10px);
	transition-delay: calc((10 - var(--i)) * 22ms);
}

.fc-scrolled .fc-logo--header .fc-logo__icon {
	transform: scale(1.18);
}

/* ---------- Intro bij het laden ---------- */

.fc-logo--intro .fc-bolt--top {
	animation: fc-in-top 0.8s var(--fc-ease) 0.1s both;
}

.fc-logo--intro .fc-bolt--bottom {
	animation: fc-in-bottom 0.8s var(--fc-ease) 0.1s both;
}

.fc-logo--intro .fc-bolt__glow {
	animation: fc-glow 0.7s ease-out 0.75s;
}

.fc-logo--intro .fc-bolt__spark {
	animation: fc-spark 0.7s ease-in-out 0.75s;
}

.fc-logo--intro .fc-arc {
	animation: fc-arc 0.45s linear 0.8s;
}

.fc-logo--intro .fc-l {
	animation:
		fc-letter-in 0.6s var(--fc-ease) calc(0.7s + var(--i) * 45ms) both,
		fc-current 0.5s ease-in-out calc(1.35s + var(--i) * 40ms);
}

/* ---------- Opladen bij elke scrollwissel ---------- */

.fc-logo--zap .fc-bolt--top {
	animation: fc-recharge-top 0.6s var(--fc-ease);
}

.fc-logo--zap .fc-bolt--bottom {
	animation: fc-recharge-bottom 0.6s var(--fc-ease);
}

.fc-logo--zap .fc-bolt__glow {
	animation: fc-glow 0.6s ease-out 0.15s;
}

.fc-logo--zap .fc-bolt__spark {
	animation: fc-spark 0.6s ease-in-out 0.15s;
}

.fc-logo--zap .fc-arc {
	animation: fc-arc 0.4s linear 0.2s;
}

:root:not(.fc-scrolled) .fc-logo--zap .fc-l {
	animation: fc-current 0.5s ease-in-out calc(0.35s + var(--i) * 40ms);
}

/* ---------- Sticky header ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--wp--preset--color--base, #fff);
	transition: box-shadow 0.3s ease;
}

.fc-scrolled .wp-site-blocks > header.wp-block-template-part {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 10px 24px -14px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* ---------- Koppen (GSAP, zie headings.js) ---------- */

/* Tot de regels gesplitst zijn: koppen verbergen, zodat ze niet flitsen. */
.fc-gsap :is(.elementor-widget-heading .elementor-heading-title, main .wp-block-heading, main .wp-block-post-title) {
	visibility: hidden;
}

/* Ruimte voor descenders (g, p, j) binnen het regelmasker. */
[class*="line-mask"] {
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}

.fc-mask {
	overflow: hidden;
	padding-bottom: 0.1em;
}

/* ---------- Menu en telefoonknop in de header ---------- */

.fc-nav {
	font-size: 14px;
}

.fc-phone .wp-block-button__link {
	padding: 0.6em 1em;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	color: #fff;
	background: var(--wp--preset--color--primary, #00a889);
	border-radius: 0;
}

.fc-phone .wp-block-button__link:hover,
.fc-phone .wp-block-button__link:focus {
	background: var(--wp--preset--color--secondary, #343638);
}

@media (max-width: 781px) {
	header .wp-block-buttons.fc-phone {
		display: none;
	}
}

/* ---------- Keyframes ---------- */

/* De strepen glijden langs hun eigen as langs elkaar heen en klikken vast. */
@keyframes fc-in-top {
	0% {
		opacity: 0;
		transform: translate(-13px, 27px);
	}
	20% {
		opacity: 1;
	}
	72% {
		transform: translate(0.8px, -1.6px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes fc-in-bottom {
	0% {
		opacity: 0;
		transform: translate(13px, -27px);
	}
	20% {
		opacity: 1;
	}
	72% {
		transform: translate(-0.8px, 1.6px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes fc-recharge-top {
	0%,
	100% {
		transform: none;
	}
	35% {
		transform: translate(1.6px, -3.2px);
	}
	65% {
		transform: translate(-0.5px, 1px);
	}
}

@keyframes fc-recharge-bottom {
	0%,
	100% {
		transform: none;
	}
	35% {
		transform: translate(-1.6px, 3.2px);
	}
	65% {
		transform: translate(0.5px, -1px);
	}
}

@keyframes fc-glow {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0.95;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fc-spark {
	0% {
		opacity: 1;
		stroke-dashoffset: 100;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		stroke-dashoffset: -100;
	}
}

/* Flikkerende boog tussen de strepen. */
@keyframes fc-arc {
	0%,
	18%,
	36%,
	60% {
		opacity: 1;
	}
	10%,
	28%,
	48%,
	100% {
		opacity: 0;
	}
}

@keyframes fc-letter-in {
	0% {
		opacity: 0;
		transform: translateX(-14px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* Stroomgolf door de letters. */
@keyframes fc-current {
	0%,
	100% {
		fill: var(--fc-ink);
	}
	45% {
		fill: var(--fc-green);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fc-logo *,
	.fc-logo {
		animation: none !important;
	}

	.fc-l,
	.fc-logo__icon {
		transition: opacity 0.2s linear !important;
	}

	.fc-scrolled .fc-logo--header .fc-l,
	.fc-scrolled .fc-logo--header .fc-logo__icon {
		transform: none;
	}
}