/* =========================================================================
   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 cirkel → groene lijn → uitsnede erbovenop.
   Het beeldvlak (1700 × 1095) is breder dan de kolom: de lijn steekt links uit naar de tekst. */
.breon-hero__vis { grid-column: 7 / 13; position: relative; }
.breon-hero__bol {
	position: relative;
	width: 128%;
	margin-left: -28%;
	aspect-ratio: 1700 / 1095;
	/* foto, lijn en uitsnede bewegen als één geheel, zodat de uitsnede altijd precies op de foto valt */
	transform: scale(.94);
	transform-origin: 62% 50%;
	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;
	left: 25.459%;
	top: .488%;
	width: 63.529% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}
.breon-hero__lijn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
/* De groene lijn is één lijn die zich tekent (stroke-dashoffset), net als de oorspronkelijke krul */
.breon-hero__pen {
	fill: none;
	stroke: var(--breon-groen);
	stroke-width: 98;
	stroke-linecap: butt;
	stroke-linejoin: round;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
}
.breon-hero.is-ready .breon-hero__pen {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2.4s cubic-bezier(.65, 0, .35, 1) .6s;
}
.breon-hero__los {
	position: absolute;
	height: auto !important;
	max-width: none !important;
	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__pen { stroke-dashoffset: 0; }

/* Smallere desktops: lijn minder ver de tekstkolom in, zodat hij niet over de knoppen valt */
@media (max-width: 1360px) {
	.breon-hero__bol { width: 114%; margin-left: -14%; }
}

/* Mobiel / tablet */
@media (max-width: 1000px) {
	.breon-hero__copy, .breon-hero__vis { grid-column: 1 / -1; }
	.breon-hero__vis { width: min(560px, 88%); margin: 48px 0 0 auto; }
	.breon-hero__bol { width: 115%; margin-left: -15%; }
	.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__pen { stroke-dashoffset: 0 !important; transition: none !important; }
	.breon-hero__cue::after { animation: none; }
}