/* =========================================================================
   Breon Hero (de achtergrond-fade staat los in style.css + main.js)
   Pas de kleuren/fonts aan via de variabelen hieronder (of in je thema).
   ========================================================================= */
:root {
	--breon-mint: rgb(199, 210, 201);
	--breon-wit: rgb(255, 255, 255);
	--breon-beige: rgb(240, 235, 225);
	--breon-paars: rgb(47, 43, 82);
	--breon-groen: rgb(174, 201, 55);

	--breon-ink: var(--breon-paars);
	--breon-font-display: "Quincy CF", Georgia, serif;
	--breon-font-sans: "Causten", -apple-system, "Segoe UI", sans-serif;
	--breon-header-offset: 120px; /* ruimte boven de hero voor een vaste header */
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */
.breon-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: var(--breon-header-offset) 0 80px;
	color: var(--breon-ink);
	font-family: var(--breon-font-sans);
}
.breon-hero--full { min-height: 100vh; min-height: 100svh; }

.breon-hero__wrap {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: clamp(20px, 5.56vw, 80px);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: center;
}
.breon-hero__copy {
	grid-column: 1 / 7;
	display: flex;
	flex-direction: column;
	gap: 40px;
	position: relative;
	z-index: 3;
}

/* Titel: elke regel schuift omhoog in beeld */
.breon-hero__title {
	margin: 0;
	font-family: var(--breon-font-display);
	font-weight: 400;
	font-size:5rem;
	line-height: .94;
	letter-spacing: -.02em;
	color: inherit;
}
.breon-hero__ln { display: block; overflow: hidden; padding-bottom: .06em; }
.breon-hero__ln > span {
	display: block;
	transform: translateY(105%);
	transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
	transition-delay: calc(var(--i, 0) * .12s);
}
.breon-hero.is-ready .breon-hero__ln > span { transform: none; }

/* Intro en knoppen faden na de titel in */
.breon-hero__fade {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .9s .5s, transform .9s .5s cubic-bezier(.2, .7, .2, 1);
}
.breon-hero__fade + .breon-hero__fade { transition-delay: .65s; }
.breon-hero.is-ready .breon-hero__fade { opacity: 1; transform: none; }

.breon-hero__lead { max-width: 40ch; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; }
.breon-hero__lead p { margin: 0 0 1em; }
.breon-hero__lead p:last-child { margin-bottom: 0; }

/* Knoppen */
.breon-hero__ctas { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; }
.breon-btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-size: 18px;
	color: inherit;
	text-decoration: none;
}
.breon-btn:hover, .breon-btn:focus { color: inherit; text-decoration: none; }
.breon-btn__dot {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px currentColor;
	display: grid;
	place-items: center;
	font-size: 20px;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, background-color .3s;
}
.breon-btn:hover .breon-btn__dot {
	transform: scale(1.1);
	box-shadow: inset 0 0 0 0 transparent;
	background: var(--breon-groen);
	color: var(--breon-paars);
}
.breon-btn:focus-visible { outline: 2px solid var(--breon-groen); outline-offset: 4px; }

/* Beeld: foto in ellips → krul → uitsnede erbovenop */
.breon-hero__vis { grid-column: 7 / 13; position: relative; }
.breon-hero__bol {
	position: relative;
	width: 100%;
	aspect-ratio: 708 / 720;
	transform: scale(.9);
	opacity: 0;
	transition: transform 1.6s cubic-bezier(.2, .7, .2, 1), opacity 1.2s;
}
.breon-hero.is-ready .breon-hero__bol { transform: none; opacity: 1; }

.breon-hero__ph {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	clip-path: ellipse(50% 49.17% at 50% 50%);
}
.breon-hero__krul {
	position: absolute;
	left: 0;
	top: 0;
	width: 136.72%;
	height: auto;
	overflow: visible;
	pointer-events: none;
}
.breon-hero__krul path {
	fill: none;
	stroke: var(--breon-groen);
	stroke-width: 72;
	stroke-miterlimit: 10;
	stroke-dasharray: var(--L, 3000);
	stroke-dashoffset: var(--L, 3000);
}
.breon-hero.is-ready .breon-hero__krul path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2.6s cubic-bezier(.55, 0, .25, 1) .7s;
}
.breon-hero__los {
	position: absolute;
	height: auto !important;
	max-width: none;
	pointer-events: none;
	z-index: 2;
}

/* Scroll-indicator */
.breon-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 28px;
	width: 1.5px;
	height: 56px;
	background: rgba(47, 43, 82, .25);
	overflow: hidden;
}
.breon-hero__cue::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--breon-ink);
	animation: breon-cue 2.2s cubic-bezier(.6, 0, .2, 1) infinite;
}
@keyframes breon-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* In de WPBakery front-end editor direct alles tonen */
.vc_editor .breon-hero__ln > span,
.vc_editor .breon-hero__fade,
.vc_editor .breon-hero__bol { transform: none; opacity: 1; }
.vc_editor .breon-hero__krul path { stroke-dashoffset: 0; }

/* Mobiel / tablet */
@media (max-width: 1000px) {
	.breon-hero__copy, .breon-hero__vis { grid-column: 1 / -1; }
	.breon-hero__vis { width: min(560px, 90%); margin: 48px 0 0 auto; }
	.breon-hero__cue { display: none; }
}

/* Minder beweging */
@media (prefers-reduced-motion: reduce) {
	.breon-hero__ln > span, .breon-hero__fade, .breon-hero__bol { transform: none !important; opacity: 1 !important; transition: none !important; }
	.breon-hero__krul path { stroke-dashoffset: 0 !important; transition: none !important; }
	.breon-hero__cue::after { animation: none; }
}