/*
|--------------------------------------------------------------------------
| EventFlow Design System — Motion
| EFDS-001
|--------------------------------------------------------------------------
*/

.ef-motion {
	transition:
		transform var(--ef-duration-base) var(--ef-ease-standard),
		opacity var(--ef-duration-base) var(--ef-ease-standard),
		box-shadow var(--ef-duration-base) var(--ef-ease-standard),
		border-color var(--ef-duration-base) var(--ef-ease-standard),
		background-color var(--ef-duration-base) var(--ef-ease-standard),
		color var(--ef-duration-base) var(--ef-ease-standard);
}

/* ==========================================================
   Reveal
   ========================================================== */

.ef-reveal {
	opacity: var(--ef-motion-opacity-hidden);
	transform: translateY(var(--ef-motion-distance-md));
	transition:
		opacity var(--ef-duration-slow) var(--ef-ease-standard),
		transform var(--ef-duration-slow) var(--ef-ease-standard);
}

.ef-reveal.is-visible {
	opacity: var(--ef-motion-opacity-visible);
	transform: translateY(0);
}

.ef-reveal--soft {
	transform:
		translateY(var(--ef-motion-distance-sm))
		scale(var(--ef-motion-scale-in));
}

.ef-reveal--soft.is-visible {
	transform: translateY(0) scale(1);
}

/* ==========================================================
   Hover
   ========================================================== */

.ef-hover-lift {
	transition:
		transform var(--ef-duration-base) var(--ef-ease-standard),
		box-shadow var(--ef-duration-base) var(--ef-ease-standard);
}

.ef-hover-lift:hover,
.ef-hover-lift:focus-within {
	transform: translateY(calc(var(--ef-motion-distance-sm) * -1));
	box-shadow: var(--ef-shadow-md);
}

.ef-hover-glow {
	transition:
		box-shadow var(--ef-duration-base) var(--ef-ease-standard),
		border-color var(--ef-duration-base) var(--ef-ease-standard);
}

.ef-hover-glow:hover,
.ef-hover-glow:focus-within {
	border-color: var(--ef-border-accent);
	box-shadow: var(--ef-glow-md);
}

/* ==========================================================
   Scale
   ========================================================== */

.ef-hover-scale {
	transition: transform var(--ef-duration-base) var(--ef-ease-standard);
}

.ef-hover-scale:hover,
.ef-hover-scale:focus-within {
	transform: scale(var(--ef-motion-scale-hover));
}

/* ==========================================================
   Stagger
   ========================================================== */

.ef-stagger > :nth-child(1) {
	transition-delay: var(--ef-motion-stagger-1);
}

.ef-stagger > :nth-child(2) {
	transition-delay: var(--ef-motion-stagger-2);
}

.ef-stagger > :nth-child(3) {
	transition-delay: var(--ef-motion-stagger-3);
}

.ef-stagger > :nth-child(4) {
	transition-delay: var(--ef-motion-stagger-4);
}

/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}

	.ef-reveal,
	.ef-reveal--soft {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================
   EFDS Animation Framework
   ========================================================== */

.ef-animate {
	opacity: 0;
	transition:
		opacity var(--ef-animation-reveal) var(--ef-ease-standard),
		transform var(--ef-animation-reveal) var(--ef-ease-standard),
		filter var(--ef-animation-reveal) var(--ef-ease-standard);
	will-change: opacity, transform;
}

.ef-animate.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Reveal directions */

.ef-animate--up {
	transform: translateY(var(--ef-animation-distance-md));
}

.ef-animate--down {
	transform: translateY(calc(var(--ef-animation-distance-md) * -1));
}

.ef-animate--left {
	transform: translateX(var(--ef-animation-distance-md));
}

.ef-animate--right {
	transform: translateX(calc(var(--ef-animation-distance-md) * -1));
}

.ef-animate--scale {
	transform: scale(var(--ef-motion-scale-in));
}

.ef-animate--blur {
	filter: blur(var(--ef-animation-blur));
	transform: translateY(var(--ef-animation-distance-sm));
}

/* ==========================================================
   Sequence
   ========================================================== */

.ef-sequence > * {
	opacity: 0;
	transform: translateY(var(--ef-animation-distance-sm));
	transition:
		opacity var(--ef-animation-reveal) var(--ef-ease-standard),
		transform var(--ef-animation-reveal) var(--ef-ease-standard);
}

.ef-sequence.is-visible > * {
	opacity: 1;
	transform: none;
}

.ef-sequence.is-visible > :nth-child(1) {
	transition-delay: var(--ef-motion-stagger-1);
}

.ef-sequence.is-visible > :nth-child(2) {
	transition-delay: var(--ef-motion-stagger-2);
}

.ef-sequence.is-visible > :nth-child(3) {
	transition-delay: var(--ef-motion-stagger-3);
}

.ef-sequence.is-visible > :nth-child(4) {
	transition-delay: var(--ef-motion-stagger-4);
}

/* ==========================================================
   Page Enter
   ========================================================== */

.ef-page-enter {
	animation:
		ef-page-enter
		var(--ef-animation-enter)
		var(--ef-ease-standard)
		both;
}

@keyframes ef-page-enter {

	from {
		opacity: 0;
		transform: translateY(var(--ef-animation-distance-sm));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================
   Emphasis
   ========================================================== */

.ef-pulse-glow {
	animation:
		ef-pulse-glow
		2.8s
		var(--ef-ease-standard)
		infinite;
}

@keyframes ef-pulse-glow {

	0%,
	100% {
		box-shadow: var(--ef-glow-sm);
	}

	50% {
		box-shadow: var(--ef-glow-md);
	}
}

/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.ef-animate,
	.ef-sequence > *,
	.ef-page-enter,
	.ef-pulse-glow {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================
   TCE Motion Runtime
   ========================================================== */

.ef-motion-disabled .ef-reveal,
.ef-motion-disabled .ef-animate,
.ef-motion-disabled .ef-sequence > *,
.ef-motion-disabled .ef-page-enter,
.ef-motion-disabled .ef-pulse-glow {
	opacity: 1;
	transform: none;
	filter: none;
	animation: none !important;
	transition: none !important;
}

/* ==========================================================
   C6.2R — Homepage Motion Composition
   Motion only. No typography or layout ownership.
   ========================================================== */

.ef-section__header.ef-animate {
	transition:
		opacity var(--ef-animation-reveal) var(--ef-ease-standard),
		transform var(--ef-animation-reveal) var(--ef-ease-standard);
}

.ef-card-grid.ef-sequence > * {
	transition:
		opacity var(--ef-animation-reveal) var(--ef-ease-standard),
		transform var(--ef-animation-reveal) var(--ef-ease-standard);
}

@media (prefers-reduced-motion: reduce) {

	.ef-section__header.ef-animate,
	.ef-card-grid.ef-sequence > * {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* ==========================================================
   C6.3 — Motion Calibration & Section Stagger
   ========================================================== */

/*
 * Institutional section headers:
 * short vertical travel, restrained timing.
 */
.ef-section__header.ef-animate--up {
	transform: translateY(calc(var(--ef-animation-distance-sm) * 0.75));
}

/*
 * Homepage card sequences:
 * preserve existing stagger system while keeping motion subtle.
 */
.ef-card-grid.ef-sequence > * {
	transform: translateY(var(--ef-animation-distance-sm));
}

.ef-card-grid.ef-sequence.is-visible > * {
	transform: translateY(0);
}

/*
 * Controlled stagger.
 */
.ef-card-grid.ef-sequence > :nth-child(1) {
	transition-delay: 0ms;
}

.ef-card-grid.ef-sequence > :nth-child(2) {
	transition-delay: var(--ef-motion-stagger-1);
}

.ef-card-grid.ef-sequence > :nth-child(3) {
	transition-delay: var(--ef-motion-stagger-2);
}

.ef-card-grid.ef-sequence > :nth-child(4) {
	transition-delay: var(--ef-motion-stagger-3);
}

.ef-card-grid.ef-sequence > :nth-child(n+5) {
	transition-delay: var(--ef-motion-stagger-4);
}

/*
 * Hover interaction remains independent from scroll reveal.
 */
.ef-card--interactive {
	transition:
		transform var(--ef-duration-fast) var(--ef-ease-standard),
		border-color var(--ef-duration-fast) var(--ef-ease-standard),
		box-shadow var(--ef-duration-base) var(--ef-ease-standard);
}

.ef-card--interactive:hover {
	transform: translateY(-3px) scale(var(--ef-motion-scale-hover));
}

/*
 * Do not accumulate reveal delay after animation completion.
 */
.ef-card-grid.ef-sequence.is-visible > * {
	transition-delay: 0ms;
}

/*
 * Accessibility remains authoritative.
 */
@media (prefers-reduced-motion: reduce) {

	.ef-section__header.ef-animate--up,
	.ef-card-grid.ef-sequence > *,
	.ef-card--interactive,
	.ef-card--interactive:hover {
		transform: none !important;
		transition-delay: 0ms !important;
		transition-duration: 0ms !important;
	}
}

/* ==========================================================
   C6.4 — Institutional Pages Motion Pass
   ========================================================== */

.ef-institutional-header.ef-animate--up,
.ef-institutional-single.ef-animate--up,
.ef-prose.ef-animate--up {
	transform: translateY(calc(var(--ef-animation-distance-sm) * 0.65));
	transition:
		opacity var(--ef-animation-reveal) var(--ef-ease-standard),
		transform var(--ef-animation-reveal) var(--ef-ease-standard);
}

.ef-panel.ef-panel--glass.ef-animate--scale {
	transform: scale(var(--ef-motion-scale-in));
	transition:
		opacity var(--ef-animation-reveal) var(--ef-ease-standard),
		transform var(--ef-animation-reveal) var(--ef-ease-standard);
}

.ef-card-grid.ef-sequence > * {
	transition:
		opacity var(--ef-animation-reveal) var(--ef-ease-standard),
		transform var(--ef-animation-reveal) var(--ef-ease-standard);
}

@media (prefers-reduced-motion: reduce) {

	.ef-institutional-header.ef-animate--up,
	.ef-institutional-single.ef-animate--up,
	.ef-prose.ef-animate--up,
	.ef-panel.ef-panel--glass.ef-animate--scale,
	.ef-card-grid.ef-sequence > * {
		transform: none !important;
		transition: none !important;
		opacity: 1 !important;
	}
}