/**
 * Motion System — Micro-interactions & Animation Tokens
 * Additive layer on top of premium-layer.css
 *
 * Philosophy: 80% static, 15% micro-interaction, 5% signature motion.
 * Only transform + opacity. Never animate layout properties.
 *
 * @package YCDesignSystem
 * @since 1.2.0
 */


/* ============================================
   1. COMPOSABLE MOTION TOKENS
   ============================================ */

:root {
	/* Durations — use independently or compose */
	--motion-instant: 80ms;
	--motion-fast: 120ms;
	--motion-medium: 200ms;
	--motion-slow: 320ms;
	--motion-reveal: 500ms;

	/* Easing curves — named by intent, not math */
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
	--ease-exit: cubic-bezier(0.4, 0, 1, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Elevation transitions — shadow + transform together */
	--lift-sm: translateY(-2px);
	--lift-md: translateY(-4px);
	--lift-reset: translateY(0);

	/* Stagger delays for grid children */
	--stagger-1: 0ms;
	--stagger-2: 60ms;
	--stagger-3: 120ms;
	--stagger-4: 180ms;
	--stagger-5: 240ms;
	--stagger-6: 300ms;
}


/* ============================================
   2. BUTTON PRESS FEEDBACK
   Already has hover translateY(-1px) in buttons.css.
   Adding tactile active state + WP block buttons.
   ============================================ */

/* Custom buttons — enhance existing active state */
.bouw-btn:active {
	transform: translateY(0) scale(0.97);
}

/* WordPress native block buttons — same treatment */
.wp-block-button__link:active {
	transform: translateY(0) scale(0.97);
}

/* CTA break buttons — press feedback */
.bouw-cta-break .wp-block-button__link:active {
	transform: translateY(0) scale(0.97);
	box-shadow: var(--shadow-sm);
}


/* ============================================
   3. CARD HOVER REFINEMENT
   Premium-layer has translateY(-4px) + shadow-xl.
   Adding image zoom timing fix + content shift.
   ============================================ */

/* Service card content — subtle upward nudge on hover */
.bouw-services-grid .bouw-service-card .bouw-card-body {
	transition: transform var(--motion-medium) var(--ease-standard);
}

.bouw-services-grid .bouw-service-card:hover .bouw-card-body {
	transform: translateY(-2px);
}

/* Realization card overlay — fade in on hover */
.bouw-realizations-gallery .bouw-project-card .bouw-card-overlay {
	opacity: 0;
	transition: opacity var(--motion-slow) var(--ease-standard);
}

.bouw-realizations-gallery .bouw-project-card:hover .bouw-card-overlay {
	opacity: 1;
}


/* ============================================
   4. GRID STAGGER — Cards reveal one by one
   Works with the scroll-driven animation in
   premium-layer.css. Children get delay offsets.
   ============================================ */

@supports (animation-timeline: view()) {
	/*
	 * Override premium-layer container-level animation
	 * for blocks that get child-level stagger instead.
	 */
	.bouw-services-grid,
	.bouw-workflow-steps,
	.bouw-testimonials-grid {
		animation: none;
	}

	/* Service grid children */
	.bouw-services-grid .bouw-service-card {
		animation: motion-fade-up var(--motion-reveal) var(--ease-emphasized) both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}

	.bouw-services-grid .bouw-service-card:nth-child(1) { animation-delay: var(--stagger-1); }
	.bouw-services-grid .bouw-service-card:nth-child(2) { animation-delay: var(--stagger-2); }
	.bouw-services-grid .bouw-service-card:nth-child(3) { animation-delay: var(--stagger-3); }
	.bouw-services-grid .bouw-service-card:nth-child(4) { animation-delay: var(--stagger-4); }
	.bouw-services-grid .bouw-service-card:nth-child(5) { animation-delay: var(--stagger-5); }
	.bouw-services-grid .bouw-service-card:nth-child(6) { animation-delay: var(--stagger-6); }

	/* Workflow steps — sequential reveal */
	.bouw-workflow-steps .bouw-workflow-step {
		animation: motion-fade-up var(--motion-reveal) var(--ease-emphasized) both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}

	.bouw-workflow-steps .bouw-workflow-step:nth-child(1) { animation-delay: var(--stagger-1); }
	.bouw-workflow-steps .bouw-workflow-step:nth-child(2) { animation-delay: var(--stagger-2); }
	.bouw-workflow-steps .bouw-workflow-step:nth-child(3) { animation-delay: var(--stagger-3); }
	.bouw-workflow-steps .bouw-workflow-step:nth-child(4) { animation-delay: var(--stagger-4); }
	.bouw-workflow-steps .bouw-workflow-step:nth-child(5) { animation-delay: var(--stagger-5); }

	/* Testimonial cards — stagger */
	.bouw-testimonials-grid .bouw-testimonial-card {
		animation: motion-fade-up var(--motion-reveal) var(--ease-emphasized) both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}

	.bouw-testimonials-grid .bouw-testimonial-card:nth-child(1) { animation-delay: var(--stagger-1); }
	.bouw-testimonials-grid .bouw-testimonial-card:nth-child(2) { animation-delay: var(--stagger-2); }
	.bouw-testimonials-grid .bouw-testimonial-card:nth-child(3) { animation-delay: var(--stagger-3); }
	.bouw-testimonials-grid .bouw-testimonial-card:nth-child(4) { animation-delay: var(--stagger-4); }

	@keyframes motion-fade-up {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}


/* ============================================
   5. FAQ ACCORDION — Smooth open/close
   Replaces the display:none hard toggle with
   grid-based height animation.
   ============================================ */

.bouw-faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--motion-slow) var(--ease-standard),
	            opacity var(--motion-medium) var(--ease-standard);
	opacity: 0;
}

.bouw-faq-answer > * {
	overflow: hidden;
}

.bouw-faq-open .bouw-faq-answer,
.bouw-faq-answer:not([hidden]) {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Override the hard display:none from faq-accordion.css */
.bouw-faq-answer[hidden] {
	display: grid;
	visibility: hidden;
	grid-template-rows: 0fr;
	opacity: 0;
	padding: 0;
}

.bouw-faq-open .bouw-faq-answer[hidden] {
	visibility: visible;
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Chevron rotation — smoother */
.bouw-faq-icon {
	transition: transform var(--motion-medium) var(--ease-spring);
}


/* ============================================
   6. CONTENT TABS — Crossfade panel switch
   ============================================ */

.bouw-content-tabs .bouw-tab-panel {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--motion-medium) var(--ease-standard),
	            transform var(--motion-medium) var(--ease-standard);
}

.bouw-content-tabs .bouw-tab-panel-active,
.bouw-content-tabs .bouw-tab-panel[aria-hidden="false"] {
	opacity: 1;
	transform: translateY(0);
}

/* Tab underline slide — active indicator */
.bouw-content-tabs .bouw-tab-button {
	position: relative;
}

/* Underline animation for tab-style (non-pill) buttons only.
   Content-tabs use pill styling (rounded bg) — underline disabled. */
.bouw-content-tabs .bouw-tab-button::after {
	display: none;
}


/* ============================================
   7. LINK & TEXT INTERACTIONS
   ============================================ */

/* In-content links — underline grow from left */
.entry-content a:not(.wp-block-button__link):not(.bouw-btn) {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0% 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size var(--motion-medium) var(--ease-standard);
}

.entry-content a:not(.wp-block-button__link):not(.bouw-btn):hover {
	background-size: 100% 1px;
}


/* ============================================
   8. FORM FOCUS — Smooth border glow
   ============================================ */

input:not([type="submit"]),
textarea,
select {
	transition: border-color var(--motion-fast) var(--ease-standard),
	            box-shadow var(--motion-fast) var(--ease-standard);
}


/* ============================================
   9. SECTION INTRO — Accent line entry
   ============================================ */

.bouw-section-intro::after {
	transition: width var(--motion-slow) var(--ease-emphasized);
}

@supports (animation-timeline: view()) {
	.bouw-section-intro::after {
		animation: accent-grow var(--motion-reveal) var(--ease-emphasized) both;
		animation-timeline: view();
		animation-range: entry 10% entry 40%;
	}

	@keyframes accent-grow {
		from { width: 0; }
		to { width: 48px; }
	}
}


/* ============================================
   10. GLOBAL REDUCED MOTION
   Covers ALL animation in this file + overrides
   premium-layer scroll reveals.
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Ensure content is always visible */
	.bouw-faq-answer {
		transition: none;
	}

	.bouw-content-tabs .bouw-tab-panel {
		transition: none;
		opacity: 1;
		transform: none;
	}

	/* Kill stagger delays */
	:root {
		--stagger-1: 0ms;
		--stagger-2: 0ms;
		--stagger-3: 0ms;
		--stagger-4: 0ms;
		--stagger-5: 0ms;
		--stagger-6: 0ms;
	}
}