/* FlexiCharge hero — fototegels, werkplaatsfoto, paneel en het grote logo. */

.fc-hero {
	--fc-out: cubic-bezier(0.16, 1, 0.3, 1);
	--fc-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--fc-green: #00a889;
}

.fc-hero .fc-sq,
.fc-hero .fc-hero-photo,
.fc-hero-panel {
	position: relative;
	overflow: hidden;
}

/* ---------- Tegels ---------- */

.fc-hero .fc-sq img {
	transition: transform 0.7s var(--fc-out);
}

.fc-hero .fc-sq:hover img {
	transform: scale(1.06);
}

/* Groene flits bij het wisselen van collega. */
.fc-hero .fc-sq::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--fc-green);
	mix-blend-mode: multiply;
	opacity: 0;
	pointer-events: none;
}

.fc-hero .fc-sq.is-swapping::after {
	animation: fc-tint 1.2s ease both;
}

/* ---------- Werkplaatsfoto met ruimte voor parallax ---------- */

.fc-hero .fc-hero-photo img {
	top: -12%;
	bottom: auto;
	height: 124% !important;
	will-change: translate;
}

/* ---------- Paneel met laadbalk ---------- */

.fc-hero-panel::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--fc-green);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* ---------- Groot logo in het paneel ---------- */

.fc-logo--hero {
	--fc-ink: #fff;
	display: block;
	max-width: 450px;
	line-height: normal;
}

.fc-logo--hero .fc-logo__svg {
	width: 100%;
	height: auto;
}

.fc-logo--hero:not(.is-played) .fc-bolt,
.fc-logo--hero:not(.is-played) .fc-l,
.fc-logo--hero:not(.is-played) .fc-w > span {
	opacity: 0;
}

.fc-hero-tag {
	margin: 0.4em 0 0 14.3%;
	color: #fff;
	font-family: "Poppins Light", "Poppins", sans-serif;
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.2;
}

.fc-hero-tag .fc-w {
	display: inline-block;
	overflow: hidden;
	padding-bottom: 0.1em;
	vertical-align: top;
}

.fc-hero-tag .fc-w > span {
	display: inline-block;
}

.fc-logo--hero.is-played .fc-w > span {
	animation: fc-word-in 0.8s var(--fc-out, ease) calc(1.25s + var(--w) * 110ms) both;
}

/* ---------- Startstand: verborgen tot hero.js speelt ---------- */

.fc-hero-pending .fc-hero .fc-sq {
	clip-path: inset(100% 0 0 0);
}

.fc-hero-pending .fc-hero .fc-hero-photo {
	clip-path: inset(0 0 0 100%);
}

.fc-hero-pending .fc-hero-panel {
	clip-path: inset(0 100% 0 0);
}

/* ---------- Intro ---------- */

.fc-hero-play .fc-hero .fc-sq {
	animation: fc-tile-in 0.9s var(--fc-out) var(--fc-d, 0ms) both;
}

.fc-hero-play .fc-hero .fc-sq img {
	animation: fc-zoom-out 1.4s var(--fc-out) var(--fc-d, 0ms) both;
}

.fc-hero-play .fc-hero .fc-hero-photo {
	animation: fc-photo-in 1.1s var(--fc-out) 0.15s both;
}

.fc-hero-play .fc-hero .fc-hero-photo img {
	animation: fc-zoom-out 1.8s var(--fc-out) 0.15s both;
}

.fc-hero-play .fc-hero-panel {
	animation: fc-panel-in 0.8s var(--fc-inout) 0.35s both;
}

.fc-hero-play .fc-hero-panel::after {
	animation: fc-charge 2.6s var(--fc-inout) 0.9s both;
}

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

@keyframes fc-tile-in {
	from {
		clip-path: inset(100% 0 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes fc-photo-in {
	from {
		clip-path: inset(0 0 0 100%);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes fc-panel-in {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes fc-zoom-out {
	from {
		scale: 1.25;
	}
	to {
		scale: 1;
	}
}

/* De laadbalk loopt vol terwijl het logo binnenkomt en dooft daarna uit. */
@keyframes fc-charge {
	0% {
		transform: scaleX(0);
		opacity: 1;
	}
	75% {
		transform: scaleX(1);
		opacity: 1;
	}
	100% {
		transform: scaleX(1);
		opacity: 0;
	}
}

@keyframes fc-word-in {
	from {
		transform: translateY(110%);
	}
	to {
		transform: none;
	}
}

@keyframes fc-tint {
	0% {
		opacity: 0;
	}
	35% {
		opacity: 0.85;
	}
	100% {
		opacity: 0;
	}
}

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

	.fc-hero .fc-sq:hover img {
		transform: none;
	}
}