/* Gedeelde animasielaag. Net transform/opacity (GPU-vriendelik). */
/* Haakplekke vir die kunsstyl-filter (assets/lae.json, beweging): --tb-easing, --tb-tempo, --tb-ingang-vervaag, --tb-ingang-draai. */
.tb-anim { --tb-easing: cubic-bezier(.22,.61,.36,1); --tb-tempo: 1; }

@media (prefers-reduced-motion: no-preference) {
	/* Versteek eers net as JS beskikbaar is, anders bly inhoud sigbaar. */
	@media (scripting: enabled) {
		[data-tb-ingang], [data-tb-ingang] .tb-stagger-item {
			opacity: 0;
		}
		[data-tb-ingang] {
			filter: var(--tb-ingang-vervaag, none);
			rotate: var(--tb-ingang-draai, 0deg);
			transition: filter calc(var(--tb-duur, 600ms) * var(--tb-tempo, 1)) var(--tb-easing) var(--tb-vertraging, 0ms),
				rotate calc(var(--tb-duur, 600ms) * var(--tb-tempo, 1)) var(--tb-easing) var(--tb-vertraging, 0ms),
				clip-path calc(var(--tb-duur, 600ms) * var(--tb-tempo, 1)) var(--tb-easing) var(--tb-vertraging, 0ms),
				opacity calc(var(--tb-duur, 600ms) * var(--tb-tempo, 1)) var(--tb-easing) var(--tb-vertraging, 0ms),
				transform calc(var(--tb-duur, 600ms) * var(--tb-tempo, 1)) var(--tb-easing) var(--tb-vertraging, 0ms);
		}
		[data-tb-ingang="gly-op"]    { transform: translateY(2rem); }
		[data-tb-ingang="gly-links"] { transform: translateX(-2rem); }
		[data-tb-ingang="gly-regs"]  { transform: translateX(2rem); }
		[data-tb-ingang="pop"]       { transform: scale(.9); transition-timing-function: cubic-bezier(.34,1.56,.64,1); }
		[data-tb-ingang="flip"]      { transform: perspective(800px) rotateX(-18deg); transform-origin: top; }
		[data-tb-ingang="vloei"]     { transform: translateY(1rem); --tb-ingang-vervaag: blur(12px); }
		[data-tb-ingang="swaai"]     { transform: translateY(1.5rem); --tb-ingang-draai: -4deg; }
		[data-tb-ingang="uitrol"]    { clip-path: inset(0 100% 0 0); }
		[data-tb-ingang].tb-sigbaar, .tb-sigbaar .tb-stagger-item { opacity: 1; transform: none; }
		[data-tb-ingang].tb-sigbaar { filter: none; rotate: 0deg; clip-path: inset(0); }
	}

	/* Items in 'n blok: ingang gebruik opacity/transform (met vertraging), hover gebruik translate/scale/rotate (sonder vertraging). */
	[data-tb-hover] .tb-stagger-item, [data-tb-ingang] .tb-stagger-item {
		transition: opacity calc(var(--tb-duur, 600ms) * var(--tb-tempo, 1)) var(--tb-easing) var(--tb-vertraging, 0ms),
			transform calc(var(--tb-duur, 600ms) * var(--tb-tempo, 1)) var(--tb-easing) var(--tb-vertraging, 0ms),
			translate .25s var(--tb-easing), scale .25s var(--tb-easing), rotate .25s var(--tb-easing), box-shadow .25s var(--tb-easing);
	}

	/* Hover */
	[data-tb-hover] { transition: transform .25s var(--tb-easing), box-shadow .25s var(--tb-easing), filter .25s; }
	[data-tb-hover="lig"]:not(:has(.tb-stagger-item)).tb-aktief    { transform: translateY(-6px); }
	[data-tb-hover="skaal"]:not(:has(.tb-stagger-item)).tb-aktief  { transform: scale(1.03); }
	[data-tb-hover="gly"]:not(:has(.tb-stagger-item)).tb-aktief    { transform: translateX(6px); }
	[data-tb-hover="gloed"]:not(:has(.tb-stagger-item)).tb-aktief  { box-shadow: 0 0 0 3px var(--wp--preset--color--primary, #1e6fd9), 0 8px 30px color-mix(in srgb, var(--wp--preset--color--primary, #1e6fd9) 45%, transparent); }
	[data-tb-hover="kantel"]:not(:has(.tb-stagger-item)).tb-aktief { transform: perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(-4px); }
	[data-tb-hover="pols"]:not(:has(.tb-stagger-item)).tb-aktief   { animation: tb-pols calc(.5s * var(--tb-tempo, 1)) var(--tb-easing); }
	[data-tb-hover="wip"]:not(:has(.tb-stagger-item)).tb-aktief    { animation: tb-wip calc(.5s * var(--tb-tempo, 1)) var(--tb-easing); }

	/* Hover op die items self (diensterooster, pryse, ...) */
	[data-tb-hover="lig"] .tb-stagger-item.tb-aktief    { translate: 0 -6px; }
	[data-tb-hover="skaal"] .tb-stagger-item.tb-aktief  { scale: 1.03; }
	[data-tb-hover="gly"] .tb-stagger-item.tb-aktief    { translate: 6px 0; }
	[data-tb-hover="gloed"] .tb-stagger-item.tb-aktief  { box-shadow: 0 0 0 3px var(--wp--preset--color--primary, #1e6fd9), 0 8px 30px color-mix(in srgb, var(--wp--preset--color--primary, #1e6fd9) 45%, transparent); }
	[data-tb-hover="kantel"] .tb-stagger-item.tb-aktief { translate: 0 -4px; rotate: -1deg; }
	[data-tb-hover="pols"] .tb-stagger-item.tb-aktief   { animation: tb-pols calc(.5s * var(--tb-tempo, 1)) var(--tb-easing); }
	[data-tb-hover="wip"] .tb-stagger-item.tb-aktief    { animation: tb-wip calc(.5s * var(--tb-tempo, 1)) var(--tb-easing); }

	/* Hover net met 'n muis; aanraak gebruik .tb-aktief (animasie.js), nie tik nie. */
	@media (hover: hover) {
		[data-tb-hover="lig"]:not(:has(.tb-stagger-item)):hover    { transform: translateY(-6px); }
		[data-tb-hover="skaal"]:not(:has(.tb-stagger-item)):hover  { transform: scale(1.03); }
		[data-tb-hover="gly"]:not(:has(.tb-stagger-item)):hover    { transform: translateX(6px); }
		[data-tb-hover="gloed"]:not(:has(.tb-stagger-item)):hover  { box-shadow: 0 0 0 3px var(--wp--preset--color--primary, #1e6fd9), 0 8px 30px color-mix(in srgb, var(--wp--preset--color--primary, #1e6fd9) 45%, transparent); }
		[data-tb-hover="kantel"]:not(:has(.tb-stagger-item)):hover { transform: perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(-4px); }
		[data-tb-hover="pols"]:not(:has(.tb-stagger-item)):hover   { animation: tb-pols calc(.5s * var(--tb-tempo, 1)) var(--tb-easing); }
		[data-tb-hover="wip"]:not(:has(.tb-stagger-item)):hover    { animation: tb-wip calc(.5s * var(--tb-tempo, 1)) var(--tb-easing); }
		[data-tb-hover="lig"] .tb-stagger-item:hover    { translate: 0 -6px; }
		[data-tb-hover="skaal"] .tb-stagger-item:hover  { scale: 1.03; }
		[data-tb-hover="gly"] .tb-stagger-item:hover    { translate: 6px 0; }
		[data-tb-hover="gloed"] .tb-stagger-item:hover  { box-shadow: 0 0 0 3px var(--wp--preset--color--primary, #1e6fd9), 0 8px 30px color-mix(in srgb, var(--wp--preset--color--primary, #1e6fd9) 45%, transparent); }
		[data-tb-hover="kantel"] .tb-stagger-item:hover { translate: 0 -4px; rotate: -1deg; }
		[data-tb-hover="pols"] .tb-stagger-item:hover   { animation: tb-pols calc(.5s * var(--tb-tempo, 1)) var(--tb-easing); }
		[data-tb-hover="wip"] .tb-stagger-item:hover    { animation: tb-wip calc(.5s * var(--tb-tempo, 1)) var(--tb-easing); }
	}

	/* Agtergrond: blokke merk hul prent met .tb-agt-doel */
	[data-tb-agtergrond] { position: relative; overflow: hidden; isolation: isolate; }
	[data-tb-agtergrond="zoem"] .tb-agt-doel { animation: tb-zoem 24s ease-in-out infinite alternate; }
	[data-tb-agtergrond="gradient"]::before,
	[data-tb-agtergrond="swewend"]::before,
	[data-tb-agtergrond="swewend"]::after {
		content: ""; position: absolute; pointer-events: none; z-index: 0;
	}
	[data-tb-agtergrond="gradient"]::before {
		inset: -50%;
		background: conic-gradient(from 0deg, var(--wp--preset--color--primary, #1e6fd9), var(--wp--preset--color--accent, #f59e0b), var(--wp--preset--color--secondary, #0f3d7a), var(--wp--preset--color--primary, #1e6fd9));
		opacity: .35; filter: blur(80px);
		animation: tb-draai 30s linear infinite;
	}
	[data-tb-agtergrond="swewend"]::before, [data-tb-agtergrond="swewend"]::after {
		width: 40vmax; height: 40vmax; border-radius: 50%; filter: blur(70px); opacity: .35;
	}
	[data-tb-agtergrond="swewend"]::before { background: var(--wp--preset--color--primary, #1e6fd9); top: -10%; left: -5%; animation: tb-sweef 18s ease-in-out infinite alternate; }
	[data-tb-agtergrond="swewend"]::after  { background: var(--wp--preset--color--accent, #f59e0b); bottom: -15%; right: -5%; animation: tb-sweef 22s ease-in-out infinite alternate-reverse; }
}

/* Pouse-knoppie (pouse.js): vries die agtergrond-animasies; agtergrond.js stop sy rame op data-tb-pouse. */
[data-tb-pouse] .tb-agt-doel, [data-tb-pouse]::before, [data-tb-pouse]::after { animation-play-state: paused !important; }
.tb-pouse-knop {
	position: absolute; right: .75rem; bottom: .75rem; z-index: 5;
	min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 1px solid currentColor; border-radius: 50%;
	background: rgb(0 0 0 / .45); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; opacity: .7;
}
.tb-pouse-knop:hover, .tb-pouse-knop:focus-visible { opacity: 1; }
.tb-pouse-knop:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@keyframes tb-pols  { 50% { scale: 1.05; } }
@keyframes tb-wip   { 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
@keyframes tb-zoem  { to { transform: scale(1.12); } }
@keyframes tb-draai { to { transform: rotate(360deg); } }
@keyframes tb-sweef { to { transform: translate(8vmax, 6vmax) scale(1.15); } }

/* Oppervlak (patroon/toneel): die prent self kom van die gekose oppervlak-laag (includes/lae.php, assets/lae.json). Agter die inhoud via ::before. */
[data-tb-oppervlak] { position: relative; overflow: hidden; isolation: isolate; }
[data-tb-oppervlak]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; image-rendering: pixelated; }