/**
 * Textielhuis — animaties & micro-interacties.
 *
 * Subtiel en site-breed: hover-effecten op kaarten/tegels/knoppen/afbeeldingen,
 * een load-in voor hero/banner, en scroll-reveal (JS zet .is-visible) voor secties
 * en kaarten. Alle beweging zit in `prefers-reduced-motion: no-preference`, zodat
 * bezoekers met "verminderde beweging" een rustige, statische site krijgen.
 *
 * Kleur/achtergrond-overgangen (geen beweging) staan hier apart en altijd aan.
 */

/* ---------- Kleurovergangen (geen beweging, altijd aan) ---------- */
a { transition: color .18s ease; }
.th-merken__brand-link, .th-nav__flist a, .th-nav__link {
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
/* Knoppen: soepele beweging — transform/schaduw mét zachte veer-easing. */
.th-btn, .button, .single_add_to_cart_button, .th-card__cart,
.th-newsletter__btn, .th-blog__more, .th-contact__submit {
	/* Zachte ease-out (géén overshoot): een vloeiende lift zonder "veer/knal". */
	transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease,
		background-color .22s ease, color .22s ease, opacity .22s ease, border-color .22s ease;
}

/* ================================================================
   Bewegende effecten — alleen als de bezoeker beweging toestaat.
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {

	/* ---------- Hover: liften + schaduw ---------- */
	li.th-card,
	.th-blog__card,
	.th-review-card,
	.th-merken__group {
		transition: transform .28s ease, box-shadow .28s ease;
	}
	/* Tegels: hover zoomt de foto in (zoals de productkaarten). De transform zit op
	   de aparte media-laag binnen de overflow:hidden tegel → compositor-only,
	   geen reflow en geen repaint van het beeld (dus soepel, geen hapering). */
	.th-tile__media { transition: transform .5s ease; }
	.th-tile:hover .th-tile__media { transform: scale(1.06); }
	li.th-card:hover { transform: translateY(-5px); box-shadow: 0 16px 28px -18px rgba(0,0,0,.35); }
	.th-blog__card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px -18px rgba(0,0,0,.28); }
	.th-review-card:hover { transform: translateY(-4px); box-shadow: 0 14px 24px -16px rgba(0,0,0,.22); }

	/* ---------- "Laad meer / Laad minder": kaarten soepel in-/uitfaden ---------- */
	/* De AJAX-toegevoegde kaarten (theme.js initLoadMore) faden gestaggerd in i.p.v.
	   hard te "poppen"; bij "Laad minder" faden ze eerst uit vóór ze verdwijnen.
	   Zit in no-preference → bij reduced-motion verschijnen/verdwijnen ze direct. */
	@keyframes thLoadIn  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
	@keyframes thLoadOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px); } }
	.th-load-in  { animation: thLoadIn .5s cubic-bezier(.22,.61,.36,1) both; will-change: opacity, transform; }
	.th-load-out { animation: thLoadOut .3s cubic-bezier(.4,0,.2,1) both; pointer-events: none; will-change: opacity, transform; }

	/* ---------- Hover: afbeeldingen zoomen (binnen overflow:hidden media) ---------- */
	li.th-card .th-card__media img,
	.th-blog__media img,
	.single-product .woocommerce-product-gallery__image img {
		transition: transform .5s ease;
	}
	li.th-card:hover .th-card__media img,
	.th-blog__card:hover .th-blog__media img { transform: scale(1.05); }
	.single-product .woocommerce-product-gallery__image { overflow: hidden; border-radius: 14px; }
	.single-product .woocommerce-product-gallery__image:hover img { transform: scale(1.05); }

	/* ---------- Hover: knoppen subtiel omhoog ---------- */
	.th-btn:hover, .button:hover, .single_add_to_cart_button:hover,
	.th-card__cart:hover, .th-newsletter__btn:hover, .th-blog__more:hover,
	.th-contact__submit:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -10px rgba(0,0,0,.35); }
	/* Ingedrukt: even terugveren voor een tactiel gevoel. */
	.th-btn:active, .button:active, .single_add_to_cart_button:active,
	.th-card__cart:active, .th-blog__more:active, .th-contact__submit:active {
		transform: translateY(-1px) scale(.98); transition-duration: .08s;
	}

	/* ---------- Nieuwsbrief-knop: eigen animatie ---------- */
	/* Deze knop staat vast tegen het invoerveld gedrukt → GÉÉN lift (die zou hem
	   losmaken van het veld). In plaats daarvan een shine-sweep (lichtstreep die
	   over de gouden knop veegt) + subtiele kleurverdieping. Hogere specificiteit
	   dan de algemene knop-regels, dus die worden hier overschreven. */
	.th-newsletter__form .th-btn { overflow: hidden; }
	.th-newsletter__form .th-btn::before {
		content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
		background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
		transform: skewX(-18deg); pointer-events: none; transition: left .6s ease;
	}
	.th-newsletter__form .th-btn:hover::before { left: 125%; }
	.th-newsletter__form .th-btn:hover,
	.th-newsletter__form .th-btn:active { transform: none; box-shadow: none; background: var(--th-gold-deep, #b8923f); }

	/* ---------- Hover: mega-menu-pijlen & filterlinks ---------- */
	.th-nav__flist a:hover, .th-nav__fmore:hover { transform: translateX(2px); }
	.th-nav__flist a, .th-nav__fmore { transition: color .18s ease, transform .18s ease; }

	/* ---------- Load-in: hero + paginakop-banner (pure CSS, flash-vrij) ---------- */
	@keyframes thFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
	.th-hero__inner > * { animation: thFadeUp .7s cubic-bezier(.22,.61,.36,1) both; }
	.th-hero__inner > *:nth-child(2) { animation-delay: .12s; }
	.th-hero__inner > *:nth-child(3) { animation-delay: .22s; }
	.th-hero__inner > *:nth-child(4) { animation-delay: .30s; }
	.th-banner__title { animation: thFadeUp .7s cubic-bezier(.22,.61,.36,1) both; }

	/* ---------- Scroll-reveal (JS voegt .is-visible toe) ---------- */
	.th-reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
	.th-reveal.is-visible { opacity: 1; transform: none; }
}

/* Verminderde beweging: mega-menu direct tonen/verbergen (geen fade/slide). */
@media (prefers-reduced-motion: reduce) {
	.th-nav__list > .menu-item > .sub-menu,
	.th-nav__filters { transition: none !important; transform: none !important; }
}