/*!
 * MV hero replica v2, 2026-05-16
 * Drie correcties t.o.v. v1 obv video- en image-audit:
 *   1. Leaves komen vanuit OUTSIDE de hero (translate ±100-150%)
 *   2. Stem-anchored positioning: anker op edge, leaf-blade naar binnen
 *   3. Mouse-parallax + scroll-out fade via lightweight JS
 *
 * Architectuur: fixed 1920x700 inner container, scaled met CSS transform
 * naar viewport. Zo blijven leaf-overlaps op de randen byte-exact zoals
 * de huidige revslider, ongeacht viewport-breedte.
 */

/* ============================================================
   Container, fixed-pixel inner met scale-to-fit
   ============================================================ */
.mv-hero {
	position: relative;
	/* Full-bleed: breekt uit Salient/WPBakery content-container via 100vw + neg margin.
	   Werkt ongeacht of de parent een max-width heeft. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	background: #232220;
	font-family: "Luckiest Guy", "Impact", sans-serif;
	/* Iets hoger dan 1920:700 voor meer presence */
	aspect-ratio: 1920 / 820;
	min-height: 420px;
	transition: opacity 400ms ease-out;
}

/* Mobile alleen bij echte telefoon-viewports.
   Tablet/narrow-desktop houdt desktop layout (sized down proportioneel).
   Max-height cap voorkomt dat hero het hele scherm vult. */
@media (max-width: 600px) {
	.mv-hero {
		aspect-ratio: 500 / 553;
		max-height: 75vh;
	}
}

/* Inner = 100% van outer met aspect-ratio. Leaves zijn % positioned,
   schalen daardoor automatisch met viewport, geen transform-scale nodig. */
.mv-hero__inner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ============================================================
   Leaf-base + parallax-hook
   ============================================================ */
/* Outer: positioning + scale + parallax. Scale anchored aan een edge via
   transform-origin per leaf, zodat shrinken naar de outside-edge gaat ipv center. */
.mv-hero__leaf {
	position: absolute;
	display: block;
	pointer-events: none;
	user-select: none;
	will-change: transform, opacity;
	transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1));
	transform-origin: 50% 50%;
	transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
	animation: 1100ms cubic-bezier(0.32, 0.72, 0.24, 1) both;
}

/* Inner img: rotation only, anchored aan center (zodat image-content correct rendert). */
.mv-hero__leaf-img {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(var(--rotation, 0deg));
	transform-origin: 50% 50%;
}

/* Power4.inOut equivalent voor de banaan-bladeren */
.mv-hero__leaf--snap {
	animation-duration: 1300ms;
	animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

/* ============================================================
   Entry animations, allemaal vanaf OUTSIDE de hero
   ============================================================ */
@keyframes mv-enter-from-top {
	from { transform: translate(var(--parallax-x, 0px), calc(var(--parallax-y, 0px) - 110%)) scale(var(--leaf-scale, 1)); opacity: 0; }
	to   { transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 1; }
}
@keyframes mv-enter-from-bottom {
	from { transform: translate(var(--parallax-x, 0px), calc(var(--parallax-y, 0px) + 110%)) scale(var(--leaf-scale, 1)); opacity: 0; }
	to   { transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 1; }
}
@keyframes mv-enter-from-left {
	from { transform: translate(calc(var(--parallax-x, 0px) - 110%), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 0; }
	to   { transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 1; }
}
@keyframes mv-enter-from-right {
	from { transform: translate(calc(var(--parallax-x, 0px) + 110%), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 0; }
	to   { transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 1; }
}
@keyframes mv-enter-from-tl {
	from { transform: translate(calc(var(--parallax-x, 0px) - 80%), calc(var(--parallax-y, 0px) - 80%)) scale(var(--leaf-scale, 1)); opacity: 0; }
	to   { transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 1; }
}
@keyframes mv-enter-from-tr {
	from { transform: translate(calc(var(--parallax-x, 0px) + 80%), calc(var(--parallax-y, 0px) - 80%)) scale(var(--leaf-scale, 1)); opacity: 0; }
	to   { transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 1; }
}
@keyframes mv-enter-from-bl {
	from { transform: translate(calc(var(--parallax-x, 0px) - 80%), calc(var(--parallax-y, 0px) + 80%)) scale(var(--leaf-scale, 1)); opacity: 0; }
	to   { transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 1; }
}
@keyframes mv-enter-from-br {
	from { transform: translate(calc(var(--parallax-x, 0px) + 80%), calc(var(--parallax-y, 0px) + 80%)) scale(var(--leaf-scale, 1)); opacity: 0; }
	to   { transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(var(--leaf-scale, 1)); opacity: 1; }
}

/* ============================================================
   Per-leaf positioning (FIXED pixels op 1920x700 inner)
   x/y/w/h uit chrome devtools audit op 1920x1080 viewport.
   Stem-edge entry per leaf bepaald uit image-audit.
   ============================================================ */

/* Posities omgezet van px (op 1920x700 grid uit live-audit) naar %
   zodat ze automatisch schalen met viewport. Plus rotation uit revslider
   wrap-matrix. */

/* Per leaf: rotation (op img via --rotation) + scale-origin (op outer via --scale-origin)
   gericht naar de outside-edge zodat shrinken stem aan rand houdt. */

/* z=9: lianen-home.svg, top edge (hoger zodat geen zweef-effect) */
.mv-hero__leaf--lianen {
	left: -1.46%; top: -16%; width: 103.18%; height: 64.14%;
	z-index: 9;
	--rotation: 0deg;
	--parallax-factor: 0.05;
	animation-name: mv-enter-from-top;
	animation-delay: 100ms;
}

/* z=10: blad5, top-right edge (hoger zodat aan top hangt) */
.mv-hero__leaf--blad5 {
	left: 71.35%; top: -19%; width: 41.67%; height: 35.57%;
	z-index: 10;
	--rotation: 180deg;
	--parallax-factor: 0.10;
	animation-name: mv-enter-from-tr;
	animation-delay: 200ms;
}

/* z=11: blad1-tl, top-left edge */
.mv-hero__leaf--blad1-tl {
	left: -3.96%; top: -30.71%; width: 21.88%; height: 72.29%;
	z-index: 11;
	--rotation: 110deg;
	--parallax-factor: 0.14;
	animation-name: mv-enter-from-bl;
	animation-delay: 250ms;
	animation-duration: 1300ms;
	animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

/* z=12: blad1e, right edge */
.mv-hero__leaf--blad1e {
	left: 87.03%; top: 42.29%; width: 17.50%; height: 57.86%;
	z-index: 12;
	--rotation: -50deg;
	--parallax-factor: 0.14;
	animation-name: mv-enter-from-br;
	animation-delay: 300ms;
	animation-duration: 1300ms;
	animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

/* z=13: blad3-tr, top edge */
.mv-hero__leaf--blad3-tr {
	left: 51.04%; top: -42.86%; width: 41.67%; height: 71.29%;
	z-index: 13;
	--rotation: 0deg;
	--parallax-factor: 0.08;
	animation-name: mv-enter-from-top;
	animation-delay: 150ms;
}

/* z=14: blad3-tl, top-left edge */
.mv-hero__leaf--blad3-tl {
	left: 7.81%; top: -28.57%; width: 28.96%; height: 49.57%;
	z-index: 14;
	--rotation: -150deg;
	--parallax-factor: 0.08;
	animation-name: mv-enter-from-tl;
	animation-delay: 150ms;
}

/* z=15: sprietjes, left edge */
.mv-hero__leaf--sprietjes {
	left: -6.51%; top: 13.71%; width: 17.08%; height: 59.57%;
	z-index: 15;
	--rotation: -160deg;
	--parallax-factor: 0.18;
	animation-name: mv-enter-from-tl;
	animation-delay: 350ms;
}

/* z=16: bladlinks, bottom-left edge */
.mv-hero__leaf--bladlinks {
	left: -5.21%; top: 71.00%; width: 41.67%; height: 36.14%;
	z-index: 16;
	--rotation: 0deg;
	--parallax-factor: 0.20;
	animation-name: mv-enter-from-left;
	animation-delay: 400ms;
}

/* z=17: dikrechts-br, bottom-right edge */
.mv-hero__leaf--dikrechts-br {
	left: 78.13%; top: 72.43%; width: 26.98%; height: 44.00%;
	z-index: 17;
	--rotation: -20deg;
	--parallax-factor: 0.22;
	animation-name: mv-enter-from-br;
	animation-delay: 450ms;
}

/* z=18: dikrechts-bl, bottom-left edge */
.mv-hero__leaf--dikrechts-bl {
	left: -7.45%; top: 61.14%; width: 24.43%; height: 39.86%;
	z-index: 18;
	--rotation: 130deg;
	--parallax-factor: 0.24;
	animation-name: mv-enter-from-bl;
	animation-delay: 500ms;
}

/* z=19: bladgroen, right edge (hoger anchored, eerst zweefde) */
.mv-hero__leaf--bladgroen {
	left: 84.22%; top: -8%; width: 20.57%; height: 60.86%;
	z-index: 19;
	--rotation: 150deg;
	--parallax-factor: 0.30;
	animation-name: mv-enter-from-right;
	animation-delay: 550ms;
}

/* ============================================================
   Content overlay (heading + CTA)
   ============================================================ */
.mv-hero__content {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 1rem;
	text-align: center;
}

.mv-hero__heading {
	margin: 0;
	/* max-width in em zodat de wrap consistent is met font-size:
	   13em ≈ 780px op 60px font (matcht live wrap "VAN" naar regel 2). */
	max-width: min(13em, 85%);
	font-family: "Luckiest Guy", "Impact", sans-serif;
	font-weight: 400;
	/* Fluid scale: 32px op kleine viewports tot 60px op 1920+ */
	font-size: clamp(32px, calc(32px + 28 * (100vw - 375px) / 1545), 60px);
	line-height: 1.2;
	color: #ffffff;
	animation: mv-text-pop 1000ms cubic-bezier(0.4, 0, 0.2, 1) 600ms both;
}

.mv-hero__cta {
	display: inline-block;
	/* Iets groter dan header button (hero needs presence) */
	padding: 16px 26px 11px;
	font-family: "Luckiest Guy", "Impact", sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 22px;
	letter-spacing: 1px;
	color: #ffffff;
	background-color: #fe9000;
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.07);
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s, color 0.2s;
	animation: mv-text-pop 1000ms cubic-bezier(0.4, 0, 0.2, 1) 700ms both;
}

.mv-hero__cta:hover,
.mv-hero__cta:focus-visible {
	background-color: #e68300;
	outline: none;
}

@keyframes mv-text-pop {
	from { transform: scale(0.9); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

/* ============================================================
   Mobile breakpoint, kleinere leaves direct via %-waarden,
   geen scale-transform (die was problematisch met edge-anchoring).
   Posities zo gekozen dat leaves visible IN hero blijven met
   stem maximaal ~20% off-screen per kant.
   ============================================================ */
@media (max-width: 600px) {
	.mv-hero__heading {
		line-height: 1.1;
		max-width: 90%;
	}
	.mv-hero__cta { font-size: 17px; padding: 16px 26px 11px; }

	/* Mobile leaves: ~50% kleiner dan audit, edges gehouden binnen ±20% van hero-rand */
	.mv-hero__leaf--lianen      { left: -50%;   top: -5%;  width: 200%; height: 40%; }
	.mv-hero__leaf--blad5       { left: 60%;    top: -7%;  width: 50%;  height: 14%; }
	.mv-hero__leaf--blad1-tl    { left: -8%;    top: -20%; width: 30%;  height: 32%; }
	.mv-hero__leaf--blad1e      { left: 72%;    top: 32%;  width: 30%;  height: 33%; }
	.mv-hero__leaf--blad3-tr    { left: 40%;    top: -25%; width: 60%;  height: 45%; }
	.mv-hero__leaf--blad3-tl    { left: -8%;    top: -18%; width: 50%;  height: 32%; }
	.mv-hero__leaf--sprietjes   { left: -15%;   top: 10%;  width: 35%;  height: 30%; }
	.mv-hero__leaf--bladlinks   { left: -10%;   top: 75%;  width: 70%;  height: 25%; }
	.mv-hero__leaf--dikrechts-br{ left: 55%;    top: 75%;  width: 55%;  height: 30%; }
	.mv-hero__leaf--dikrechts-bl{ left: -12%;   top: 60%;  width: 45%;  height: 28%; }
	.mv-hero__leaf--bladgroen   { left: 70%;    top: 5%;   width: 35%;  height: 38%; }
}

/* ============================================================
   Scroll-out fade, controlled door .is-in-view class via JS
   Transition zit op de BASE selector zodat fade beide kanten op werkt.
   ============================================================ */
.mv-hero__leaf,
.mv-hero__heading,
.mv-hero__cta {
	transition: opacity 500ms ease;
}
.mv-hero:not(.is-in-view) .mv-hero__leaf,
.mv-hero:not(.is-in-view) .mv-hero__heading,
.mv-hero:not(.is-in-view) .mv-hero__cta {
	opacity: 0;
}

/* ============================================================
   Reduced motion support
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.mv-hero__leaf,
	.mv-hero__heading,
	.mv-hero__cta {
		animation: none !important;
		opacity: 1 !important;
		transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) !important;
	}
}