/*
 * Beweging: alle animaties van de site op één plek
 * ------------------------------------------------------------------------
 * Rustig en kort, zoals een goede kapper werkt: niets springt, niets
 * knippert. Alles staat uit voor wie op het apparaat "minder beweging" heeft
 * ingesteld (onderaan dit bestand, en in base.css voor de hele site).
 *
 * 1. Verschijnen bij scrollen
 *    Koppen, kaarten en blokken schuiven zacht omhoog als ze in beeld
 *    komen, kaarten in een rij net na elkaar. Het script (site.js, onderdeel
 *    "Verschijnen") zet de klasse .mc-reveal op <html> en .is-in op wat in
 *    beeld komt. Zonder script, of als het misgaat, is alles gewoon
 *    zichtbaar: er wordt alleen iets verborgen als het script draait.
 * 2. Barbierspaal
 *    Een smalle streep in teal, papier en messing die langzaam schuift,
 *    als de draaiende paal voor de deur. Bovenaan de footer.
 * 3. Head spa
 *    De messing ring rond het embleem draait heel langzaam (één rondje per
 *    minuut).
 * 4. Hero
 *    De foto's in de bewegende achtergrond zoomen langzaam een klein beetje
 *    in (Ken Burns) terwijl ze in beeld zijn.
 * 5. Kleine dingen
 *    Knoppen en kaarten komen iets omhoog als je eroverheen gaat.
 */

/* ==========================================================================
   1. Verschijnen bij scrollen
   ========================================================================== */

.mc-reveal [data-mc-reveal]:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 1.25rem, 0);
}

.mc-reveal [data-mc-reveal] {
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform 700ms var(--ease-out);
	/* Kaarten in een rij: elk 70 ms later dan de vorige (index via het script). */
	transition-delay: calc(var(--mc-i, 0) * 70ms);
}

/* ==========================================================================
   2. Barbierspaal
   ========================================================================== */

@keyframes mc-pole {
	to { background-position: 67.88px 0; }
}

/* Bovenaan de footer, over de volle breedte. */
.mc-footer::before {
	content: "";
	display: block;
	block-size: 6px;
	margin-block: calc(var(--sp-8) * -1) var(--sp-8);
	background-image: repeating-linear-gradient(
		-45deg,
		var(--night-accent) 0 12px,
		var(--paper-bg) 12px 24px,
		var(--night-brass) 24px 36px,
		var(--paper-bg) 36px 48px
	);
	/* 48px * wortel 2 = 67,88px: één volledig patroon horizontaal, dan loopt de lus naadloos. */
	background-size: 67.88px 100%;
	animation: mc-pole 3.5s linear infinite;
}

/* ==========================================================================
   3. Head spa: de ring draait
   ========================================================================== */

.mc-spa__ring {
	animation: mc-spin 60s linear infinite;
}

@keyframes mc-spin {
	to { transform: rotate(1turn); }
}

/* Het icoon "ademt" heel licht mee. */
.mc-spa__icon {
	animation: mc-breathe 6s ease-in-out infinite;
}

@keyframes mc-breathe {
	0%, 100% { transform: scale(1); opacity: 0.92; }
	50%      { transform: scale(1.04); opacity: 1; }
}

/* ==========================================================================
   4. Hero
   ========================================================================== */

/* ---- Hero: de foto's in de bewegende achtergrond zoomen langzaam in -------
   De duur komt uit het script (--mc-hero-time = seconden per beeld plus de
   overvloei), zodat het inzoomen doorloopt tot het volgende beeld er is. */
.mc-hero__slide[data-type="image"] img {
	transform: scale(1);
	transition: transform var(--mc-hero-time, 8s) linear;
	transform-origin: 50% 45%;
}

.mc-hero__slide.is-active[data-type="image"] img {
	transform: scale(1.08);
}

/* ==========================================================================
   5. Kleine dingen
   ========================================================================== */

.mc-btn {
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.mc-btn:hover {
	transform: translate3d(0, -1px, 0);
}

.mc-btn:active {
	transform: none;
}

.mc-usps__item .mc-icon {
	transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.mc-usps__item:hover .mc-icon {
	transform: rotate(-8deg) scale(1.08);
}

/* ==========================================================================
   Minder beweging: alles stil, alles meteen zichtbaar
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mc-reveal [data-mc-reveal]:not(.is-in),
	.mc-reveal [data-mc-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.mc-footer::before,
	.mc-spa__ring,
	.mc-spa__icon {
		animation: none;
	}

	.mc-hero__slide[data-type="image"] img {
		transform: none !important;
		transition: none;
	}

	/* De foto's in de hero wisselen wel, maar alleen met een langzame overvloei
	   (geen zoom). base.css zet bij "minder beweging" alle overgangen op 0; deze
	   ene zetten we bewust terug. */
	.mc .mc-hero__slide {
		transition-duration: 2.4s !important;
	}

	.mc-btn:hover {
		transform: none;
	}
}

/* Afdrukken: alles zichtbaar, niets beweegt. */
@media print {
	.mc-reveal [data-mc-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}