/* =============================================
   LaundDry — Sectie-overgangen
   ============================================= */

/* Vanaf 981px breed en 560px hoog. Daaronder (tablet en mobiel) scrolt
   de pagina gewoon. Tussen 981 en 1080px staat het tabletmenu met de
   onderbalk; zie het blok "981–1080px" verderop. */
@media (min-height: 560px) and (min-width: 981px) {

	/* --- Gestapelde panelen ---
	   De panelen liggen vast op het scherm. We scrollen niet,
	   we verschuiven ze met transform. Dat is puur GPU-werk,
	   dus even soepel omhoog als omlaag. */
	body.ld-paged {
		overflow: hidden;
		height: 100svh;
	}

	/* Elke sectie met data-ld-panel, plus de footer als laatste paneel.
	   De stapelvolgorde (z-index) zet main.js. */
	body.ld-paged [data-ld-panel],
	body.ld-paged .ld-footer {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100svh;
		min-height: 0;
		display: flex;
		align-items: center;
		overflow: hidden;
		transform: translate3d(0, 100%, 0);
		transition: transform 1s cubic-bezier(.65, .02, .18, 1);
		will-change: transform;
		backface-visibility: hidden;
	}

	/* Actief en gepasseerd staan allebei op hun plek;
	   het volgende paneel schuift er simpelweg overheen. */
	body.ld-paged .is-active,
	body.ld-paged .is-past {
		transform: translate3d(0, 0, 0);
	}

	/* Bedekte panelen zakken iets weg: geeft diepte */
	body.ld-paged .is-past {
		transform: translate3d(0, -6%, 0) scale(.96);
	}

	/* Elk paneel na het eerste: ronde bovenhoeken met schaduw */
	[data-ld-panel] ~ [data-ld-panel],
	.ld-footer {
		border-radius: 26px 26px 0 0;
	}

	[data-ld-panel] ~ [data-ld-panel]::before,
	.ld-footer::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: -40px;
		height: 40px;
		pointer-events: none;
		background: linear-gradient(to top, rgba(34, 48, 42, .18), rgba(34, 48, 42, 0));
	}

	/* Inhoud blijft vrij van de zwevende header */
	[data-ld-panel] ~ [data-ld-panel] {
		padding-top: calc(var(--ld-pill-h) + var(--ld-pill-top) + 34px);
		padding-bottom: 44px;
	}

	.ld-services__inner,
	.ld-steps__inner,
	.ld-why__inner,
	.ld-find__inner,
	.ld-reviews__inner,
	.ld-cta__inner,
	.ld-footer__inner,
	.ld-hero__inner,
	.ld-tiers__inner,
	.ld-calc__inner,
	.ld-faq__inner {
		width: 100%;
	}

	.ld-header       { pointer-events: none; }
	.ld-header__pill { pointer-events: auto; }

	/* De footer is het laatste paneel: inhoud vrij van de header */
	body.ld-paged .ld-footer {
		display: flex;
		align-items: center;
		padding-top: calc(var(--ld-pill-h) + var(--ld-pill-top) + 44px);
		padding-bottom: 20px;
	}

	body.ld-paged .ld-footer .ld-footer__inner {
		padding-top: 0;
	}
}

/* --- 981–1080px met panelen ---
   Hier staat het tabletmenu. De onderbalk (Machine Status / Book Now)
   zou onderaan over de panelen vallen; met panelen verdwijnt hij en
   staat "Book Now" bovenin naast het menu-icoon. De footer krijgt zijn
   desktop-kolommen, zodat hij in één scherm past. */
@media (min-height: 560px) and (min-width: 981px) and (max-width: 1080px) {
	body.ld-paged .ld-bottombar {
		display: none;
	}

	body.ld-paged .ld-header__cta {
		display: inline-flex;
		position: absolute;
		top: 50%;
		right: 62px;
		padding: 10px 20px;
		font-size: 15px;
		transform: translateY(-50%);
	}

	body.ld-paged .ld-header__cta:hover,
	body.ld-paged .ld-header__cta:focus-visible {
		transform: translateY(calc(-50% - 1px));
	}

	body.ld-paged .ld-footer__grid {
		grid-template-columns: 1.15fr 1.05fr 1.1fr .8fr;
		gap: 24px 26px;
	}

	body.ld-paged .ld-footer__col--brand {
		grid-column: auto;
	}

	body.ld-paged .ld-footer__bar {
		margin-top: 18px;
		padding: 12px 0 16px;
	}
}

/* =============================================
   Elementen vliegen in en uit
   Gestuurd door de klasse op de sectie, niet door
   de scrollpositie — zo eindigt alles altijd
   volledig zichtbaar.
   Precies dezelfde voorwaarden als de panelen in
   main.js. Werken de panelen niet (venster te laag,
   of bezoeker heeft "minder beweging" aan), dan
   blijft alle inhoud gewoon zichtbaar.
   ============================================= */
@media (min-width: 981px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {

	.ld-hero__eyebrow,
	.ld-hero__title,
	.ld-hero__text,
	.ld-hero__actions,
	.ld-hero__usps,
	.ld-hero__media,
	.ld-services__head .ld-eyebrow,
	.ld-services__title,
	.ld-service,
	.ld-steps__head .ld-eyebrow,
	.ld-steps__title,
	.ld-steps__list,
	.ld-steps__media,
	.ld-member,
	.ld-why__media,
	.ld-why .ld-eyebrow,
	.ld-why__title,
	.ld-why__item,
	.ld-find__media,
	.ld-find .ld-eyebrow,
	.ld-find__title,
	.ld-find__address,
	.ld-find__hours,
	.ld-find__list,
	.ld-find__contact,
	.ld-find__actions,
	.ld-reviews__head,
	.ld-quotes__photo,
	.ld-quotes__main,
	.ld-quotes__tabs,
	.ld-cta__inner,
	.ld-cta__shot {
		--ld-i: 0;
		--ld-x: 0px;
		--ld-y: 90px;
		--ld-r: 0deg;
		--ld-s: .94;
		opacity: 0;
		transform: translate3d(var(--ld-x), var(--ld-y), 0) rotate(var(--ld-r)) scale(var(--ld-s));
		transition:
			opacity .95s cubic-bezier(.16, 1, .3, 1),
			transform 1.05s cubic-bezier(.16, 1, .3, 1);
		transition-delay: calc(var(--ld-i) * 85ms);
	}

	/* Actieve sectie: alles komt tot rust op ware grootte */
	.is-active .ld-hero__eyebrow,
	.is-active .ld-hero__title,
	.is-active .ld-hero__text,
	.is-active .ld-hero__actions,
	.is-active .ld-hero__usps,
	.is-active .ld-hero__media,
	.is-active .ld-services__head .ld-eyebrow,
	.is-active .ld-services__title,
	.is-active .ld-service,
	.is-active .ld-steps__title,
	.is-active .ld-steps__list,
	.is-active .ld-steps__media,
	.is-active .ld-member,
	.is-active .ld-why__media,
	.is-active .ld-eyebrow,
	.is-active .ld-why__title,
	.is-active .ld-find__media,
	.is-active .ld-find__contact,
	.is-active .ld-find__title,
	.is-active .ld-find__address,
	.is-active .ld-find__hours,
	.is-active .ld-find__list,
	.is-active .ld-find__actions,
	.is-active .ld-reviews__head,
	.is-active .ld-quotes__photo,
	.is-active .ld-quotes__main,
	.is-active .ld-quotes__tabs,
	.is-active .ld-cta__inner,
	.is-active .ld-cta__shot,
	.is-active .ld-why__item {
		opacity: 1;
		transform: none;
	}

	/* Sectie is voorbij: alles vliegt de andere kant uit */
	.is-past .ld-hero__eyebrow,
	.is-past .ld-hero__title,
	.is-past .ld-hero__text,
	.is-past .ld-hero__actions,
	.is-past .ld-hero__usps,
	.is-past .ld-hero__media,
	.is-past .ld-services__head .ld-eyebrow,
	.is-past .ld-services__title,
	.is-past .ld-service,
	.is-past .ld-steps__title,
	.is-past .ld-steps__list,
	.is-past .ld-steps__media,
	.is-past .ld-member,
	.is-past .ld-why__media,
	.is-past .ld-eyebrow,
	.is-past .ld-why__title,
	.is-past .ld-find__media,
	.is-past .ld-find__contact,
	.is-past .ld-find__title,
	.is-past .ld-find__address,
	.is-past .ld-find__hours,
	.is-past .ld-find__list,
	.is-past .ld-find__actions,
	.is-past .ld-reviews__head,
	.is-past .ld-quotes__photo,
	.is-past .ld-quotes__main,
	.is-past .ld-quotes__tabs,
	.is-past .ld-cta__inner,
	.is-past .ld-cta__shot,
	.is-past .ld-why__item {
		opacity: 0;
		transform: translate3d(calc(var(--ld-x) * -1), calc(var(--ld-y) * -1), 0) rotate(calc(var(--ld-r) * -1)) scale(var(--ld-s));
	}

	/* --- Richting en volgorde per element --- */
	.ld-hero__eyebrow { --ld-i: 0; --ld-x: -110px; --ld-y: 30px; --ld-r: -3deg; }
	.ld-hero__title   { --ld-i: 1; --ld-y: 70px; }
	.ld-hero__text    { --ld-i: 2; --ld-y: 60px; }
	.ld-hero__actions { --ld-i: 3; --ld-y: 55px; }
	.ld-hero__usps    { --ld-i: 4; --ld-y: 45px; }
	.ld-hero__media   { --ld-i: 1; --ld-x: 90px; --ld-y: 50px; --ld-r: 3deg; --ld-s: 1.08; }

	.ld-services__head .ld-eyebrow { --ld-i: 0; --ld-y: 50px; }
	.ld-services__title            { --ld-i: 1; --ld-y: 65px; }
	.ld-service:nth-child(1)       { --ld-i: 2; --ld-x: -130px; --ld-y: 60px; --ld-r: -4deg; }
	.ld-service:nth-child(2)       { --ld-i: 3; --ld-y: 130px; }
	.ld-service:nth-child(3)       { --ld-i: 4; --ld-x: 130px; --ld-y: 60px; --ld-r: 4deg; }

	.ld-steps__head .ld-eyebrow { --ld-i: 1; --ld-y: 50px; }
	.ld-steps__title            { --ld-i: 2; --ld-y: 65px; }
	.ld-steps__list             { --ld-i: 0; --ld-x: -90px; --ld-y: 40px; }
	.ld-member                  { --ld-i: 3; --ld-y: 80px; --ld-r: 4deg; }
	.ld-steps__media            { --ld-i: 4; --ld-x: 90px; --ld-y: 50px; --ld-s: 1.06; }

	.ld-why__media             { --ld-i: 0; --ld-x: -110px; --ld-y: 50px; --ld-r: -3deg; --ld-s: 1.06; }
	.ld-why .ld-eyebrow        { --ld-i: 1; --ld-x: 70px; }
	.ld-why__title             { --ld-i: 2; --ld-x: 70px; }
	.ld-why__item:nth-child(1) { --ld-i: 3; --ld-x: 80px; --ld-y: 30px; }
	.ld-why__item:nth-child(2) { --ld-i: 4; --ld-x: 80px; --ld-y: 30px; }
	.ld-why__item:nth-child(3) { --ld-i: 5; --ld-x: 80px; --ld-y: 30px; }
	.ld-find__media            { --ld-i: 0; --ld-x: -100px; --ld-y: 50px; --ld-r: -2deg; }
	.ld-find .ld-eyebrow       { --ld-i: 1; --ld-x: 70px; }
	.ld-find__title            { --ld-i: 2; --ld-x: 70px; }
	.ld-find__address          { --ld-i: 3; --ld-x: 60px; }
	.ld-find__hours            { --ld-i: 4; --ld-x: 60px; }
	.ld-find__contact          { --ld-i: 5; --ld-x: 60px; }
	.ld-find__list             { --ld-i: 6; --ld-x: 60px; }
	.ld-find__actions          { --ld-i: 7; --ld-y: 50px; }

	.ld-reviews__head          { --ld-i: 0; --ld-y: 55px; }
	.ld-quotes__photo          { --ld-i: 0; --ld-x: -90px; --ld-y: 40px; --ld-r: -3deg; }
	.ld-quotes__main           { --ld-i: 1; --ld-y: 50px; }
	.ld-quotes__tabs           { --ld-i: 2; --ld-x: 70px; }

	.ld-cta__inner             { --ld-i: 1; --ld-y: 70px; }
	.ld-cta__shot--left        { --ld-i: 0; --ld-x: -110px; --ld-y: 50px; --ld-r: -7deg; }
	.ld-cta__shot--right       { --ld-i: 2; --ld-x: 110px; --ld-y: 50px; --ld-r: 7deg; }

	.ld-why__item:nth-child(4) { --ld-i: 6; --ld-x: 80px; --ld-y: 30px; }

	/* --- Algemeen, voor nieuwe pagina's: zet data-fly op een element.
	   Richting en volgorde per element met --ld-x/-y/-r/-s/-i in de
	   CSS van die pagina (de standaard hieronder telt niet mee in
	   specificiteit, dus elke klasse wint). --- */
	:where([data-fly]) {
		--ld-i: 0;
		--ld-x: 0px;
		--ld-y: 90px;
		--ld-r: 0deg;
		--ld-s: .94;
	}

	[data-ld-panel] [data-fly] {
		opacity: 0;
		transform: translate3d(var(--ld-x), var(--ld-y), 0) rotate(var(--ld-r)) scale(var(--ld-s));
		transition:
			opacity .95s cubic-bezier(.16, 1, .3, 1),
			transform 1.05s cubic-bezier(.16, 1, .3, 1);
		transition-delay: calc(var(--ld-i) * 85ms);
	}

	.is-active [data-fly] {
		opacity: 1;
		transform: none;
	}

	.is-past [data-fly] {
		opacity: 0;
		transform: translate3d(calc(var(--ld-x) * -1), calc(var(--ld-y) * -1), 0) rotate(calc(var(--ld-r) * -1)) scale(var(--ld-s));
	}

	/* --- Footer (altijd het laatste paneel): kolommen en onderbalk komen
	   na elkaar binnen. Alleen met panelen (body.ld-paged), want op
	   pagina's zonder panelen wordt de footer nooit "actief". --- */
	body.ld-paged .ld-footer .ld-footer__col,
	body.ld-paged .ld-footer .ld-footer__bar {
		--ld-i: 0;
		--ld-x: 0px;
		--ld-y: 70px;
		--ld-r: 0deg;
		--ld-s: .96;
		opacity: 0;
		transform: translate3d(var(--ld-x), var(--ld-y), 0) rotate(var(--ld-r)) scale(var(--ld-s));
		transition:
			opacity .95s cubic-bezier(.16, 1, .3, 1),
			transform 1.05s cubic-bezier(.16, 1, .3, 1);
		transition-delay: calc(var(--ld-i) * 85ms);
	}

	body.ld-paged .ld-footer .ld-footer__col:nth-child(1) { --ld-i: 0; --ld-x: -80px; --ld-y: 40px; --ld-r: -2deg; }
	body.ld-paged .ld-footer .ld-footer__col:nth-child(2) { --ld-i: 1; }
	body.ld-paged .ld-footer .ld-footer__col:nth-child(3) { --ld-i: 2; }
	body.ld-paged .ld-footer .ld-footer__col:nth-child(4) { --ld-i: 3; --ld-x: 80px; --ld-y: 40px; --ld-r: 2deg; }
	body.ld-paged .ld-footer .ld-footer__bar              { --ld-i: 4; --ld-y: 30px; --ld-s: 1; }

	body.ld-paged .ld-footer.is-active .ld-footer__col,
	body.ld-paged .ld-footer.is-active .ld-footer__bar {
		opacity: 1;
		transform: none;
	}
}

/* =============================================
   Terugval voor tablet en mobiel: gewone reveal
   ============================================= */
@media (max-width: 980px) {
	[data-reveal] {
		opacity: 0;
		transform: translateY(28px);
		transition:
			opacity .8s cubic-bezier(.16, 1, .3, 1),
			transform .8s cubic-bezier(.16, 1, .3, 1);
	}

	[data-reveal].is-visible {
		opacity: 1;
		transform: none;
	}

	[data-reveal-delay="1"] { transition-delay: .08s; }
	[data-reveal-delay="2"] { transition-delay: .16s; }
	[data-reveal-delay="3"] { transition-delay: .24s; }
	[data-reveal-delay="4"] { transition-delay: .32s; }
}

/* =============================================
   Reduced motion
   ============================================= */
@media (prefers-reduced-motion: reduce) {
	.ld-hero__eyebrow,
	.ld-hero__title,
	.ld-hero__text,
	.ld-hero__actions,
	.ld-hero__usps,
	.ld-hero__media,
	.ld-services__title,
	.ld-service,
	.ld-why__media,
	.ld-eyebrow,
	.ld-why__title,
	.ld-why__item,
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}



/* De ledenkaart staat in rust licht gekanteld.
   Zonder panelen zorgt home.css daar zelf voor. */
@media (min-width: 981px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
	.is-active .ld-member {
		transform: rotate(-1.6deg);
	}
}


/* De CTA-foto's houden hun kanteling in rust */
@media (min-width: 981px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
	.is-active .ld-cta__shot--left {
		transform: rotate(-3deg) translateY(14px);
	}

	.is-active .ld-cta__shot--right {
		transform: rotate(3deg) translateY(-14px);
	}
}