/*
 * Scroll-reveal- en Ikigai-animatieregels — 1:1 poort van het
 * motion-gedrag in infynique-web/src/app/globals.css (het
 * .reveal/.hero-in/.scroll-block/.scroll-block-in/.ikigai-*-blok),
 * met --infynique-*-tokens i.p.v. de Next.js-variabelenamen. De klassen
 * hier worden toegevoegd door assets/js/scroll-reveal.js (of, voor
 * .hero-in, gewoon direct in de PHP-markup gezet — dat is puur CSS, geen
 * JS-hook nodig).
 */

/* Zachte, premium sectie-reveal — puur CSS, zonder JS. Alleen actief waar
   browserondersteuning voor animation-timeline: view() bestaat; elders
   blijft content standaard zichtbaar (geen risico op onzichtbare tekst). */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.reveal {
			animation: reveal-up linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
		@keyframes reveal-up {
			from {
				opacity: 0;
				transform: translateY(22px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}

	.hero-in {
		animation: hero-fade 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	@keyframes hero-fade {
		from {
			opacity: 0;
			transform: translateY(16px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Zachte, doorlopende "lees verder"-hint onder de headervideo-caption. */
	.scroll-hint {
		animation: scroll-hint-bounce 2400ms ease-in-out infinite;
	}
	@keyframes scroll-hint-bounce {
		0%,
		100% {
			transform: translateY(0);
			opacity: 0.55;
		}
		50% {
			transform: translateY(6px);
			opacity: 0.9;
		}
	}
}

/* Scroll-tekstonthulling — één rustige fade-in met een kleine translateY
   per kop/tekstblok. Klassen worden toegevoegd door scroll-reveal.js zodra
   het blok voor het eerst in beeld scrolt (of bij laden voor de hero-kop). */
@media (prefers-reduced-motion: no-preference) {
	.scroll-block {
		opacity: 0;
		transform: translateY(14px);
		transition:
			opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: opacity, transform;
	}
	.scroll-block-in {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Ikigai-bloem — subtiele hover per gebied + rustige stagger-onthulling bij
   scroll. Nooit sneller of drukker maken dan dit. */
@media (prefers-reduced-motion: no-preference) {
	.ikigai-petal,
	.ikigai-center {
		transform-box: fill-box;
		transform-origin: center;
		transition:
			transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
			filter 260ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.ikigai-petal:hover,
	.ikigai-petal:focus-visible {
		transform: scale(1.045);
		filter: brightness(1.035);
	}
	.ikigai-center:hover {
		transform: scale(1.03);
	}
	/* Los van elkaar (niet als samengestelde selector) zodat beide dezelfde
	   specificiteit houden als elkaar, maar allebei LAGER dan
	   .ikigai-petal:hover hierboven — anders wint de "aangekomen"-status na
	   de intro-animatie altijd van de hover-scale. */
	.ikigai-petal-enter {
		opacity: 0;
		transform: scale(0.82);
		transition:
			opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.ikigai-petal-in {
		opacity: 1;
		transform: scale(1);
	}

	/* Whole-flower "pop" bij hover/focus. De parelmoer-gradients en gelaagde
	   drop-shadow-filters in inc/ikigai.php zijn statische styling en
	   blijven, los van deze media query, altijd zichtbaar — ook bij
	   reduced motion. */
	.ikigai-stage {
		perspective: 1200px;
	}
	.ikigai-stage svg {
		transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.ikigai-stage:hover svg,
	.ikigai-stage:focus-within svg {
		transform: scale(1.025) rotateX(2.5deg) rotateY(-2deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}