/**
 * File: assets/css/pages/projects/motion.css
 * Description: Motion states for Projects archive and Project case-study pages.
 *
 * MAGIDA PROJECTS MOTION/GRAPHICS PASS 10.1:
 * - Adds scroll reveal, subtle floating graphics and desktop-only tilt states.
 * - Respects prefers-reduced-motion.
 *
 * MAGIDA PROJECTS FIX PASS 10.1.1:
 * - Makes the restored Projects cards visibly animated.
 * - Keeps hover motion soft and avoids fighting the hero-card positioning fix.
 *
 * MAGIDA PROJECTS HERO MOTION RESTORE PASS 22.6.7:
 * - Restores motion after the global inner hero migration by matching the current JS hooks.
 * - Adds motion for the new readable Projects hero visual classes without changing card height.
 * - Keeps old class support for the Project case-study pages and older project sections.
 */

/* CHANGE PASS 22.6.7: Match the current Projects JS hooks: is-projects-motion-ready + data-magida-projects-reveal + is-visible. */
.is-projects-motion-ready [data-magida-projects-reveal],
.magida-projects-motion-ready [data-projects-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0) scale(0.985);
	transition:
		opacity 0.75s ease,
		transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--magida-projects-reveal-delay, 0ms);
}

/* CHANGE PASS 22.6.7: Support both the new .is-visible class and the older .is-projects-revealed class. */
.is-projects-motion-ready [data-magida-projects-reveal].is-visible,
.is-projects-motion-ready [data-magida-projects-reveal].is-projects-revealed,
.magida-projects-motion-ready [data-projects-reveal].is-visible,
.magida-projects-motion-ready [data-projects-reveal].is-projects-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* CHANGE PASS 22.6.7: Add will-change only to animated/interactive elements so motion feels smooth but controlled. */
.magida-projects-hero__visual,
.magida-projects-hero-visual,
.magida-projects-feature-board,
.magida-projects-feature-device,
.magida-projects-hero-visual__ambient,
.magida-projects-flagship__media,
.magida-projects-preview__card,
.magida-projects-categories__card,
.magida-case-hero__summary,
.magida-case-screenshot__frame {
	will-change: transform;
}

/* CHANGE PASS 22.6.7: The hero board can now carry a soft sheen without touching the fixed card dimensions. */
.magida-projects-feature-board {
	overflow: hidden;
}

.magida-projects-feature-board::after {
	content: "";
	position: absolute;
	inset: -30% auto -30% -48%;
	z-index: 1;
	width: 38%;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.16),
		transparent
	);
	transform: translateX(-130%) rotate(18deg);
	mix-blend-mode: screen;
	opacity: 0;
}

.magida-projects-hero__feature-card,
.magida-projects-preview__card,
.magida-projects-categories__card,
.magida-case-hero__summary > div,
.magida-case-screenshot__frame,
.magida-projects-feature-board,
.magida-projects-feature-board__chips span,
.magida-projects-feature-device {
	transition:
		transform 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

@media (hover: hover) {
	.magida-projects-hero__feature-card:hover,
	.magida-projects-preview__card:hover,
	.magida-projects-categories__card:hover,
	.magida-case-hero__summary > div:hover,
	.magida-case-screenshot__frame:hover,
	.magida-projects-feature-board:hover {
		transform: translate3d(0, -6px, 0);
		border-color: rgba(5, 223, 254, 0.22);
		box-shadow: 0 24px 72px rgba(5, 223, 254, 0.08);
	}

	.magida-projects-feature-board__chips span:hover {
		transform: translate3d(0, -3px, 0);
		border-color: rgba(5, 223, 254, 0.24);
	}
}

/* CHANGE PASS 22.6.7: Restore desktop tilt on the migrated global hero visual. */
@media (hover: hover) and (pointer: fine) {
	[data-magida-projects-tilt].is-tilting {
		transform: perspective(1100px)
			rotateX(var(--magida-projects-tilt-x, 0deg))
			rotateY(var(--magida-projects-tilt-y, 0deg)) translate3d(0, -2px, 0);
	}
}

/* CHANGE PASS 22.6.7: New Projects hero visual motion hooks. These affect motion only, not card height. */
@media (prefers-reduced-motion: no-preference) {
	.magida-template--projects:not(.prefers-reduced-projects-motion)
		.magida-projects-hero-visual {
		animation: magida-projects-hero-frame-breathe 8s ease-in-out infinite
			alternate;
	}

	.magida-template--projects:not(.prefers-reduced-projects-motion)
		.magida-projects-feature-board {
		animation: magida-projects-feature-board-float 6.8s ease-in-out infinite
			alternate;
	}

	.magida-template--projects:not(.prefers-reduced-projects-motion)
		.magida-projects-feature-board::after {
		animation: magida-projects-feature-board-sheen 5.8s ease-in-out infinite;
	}

	.magida-template--projects:not(.prefers-reduced-projects-motion)
		.magida-projects-feature-device {
		animation: magida-projects-device-drift 7.4s ease-in-out infinite
			alternate;
	}

	.magida-template--projects:not(.prefers-reduced-projects-motion)
		.magida-projects-hero-visual__ambient--one {
		animation: magida-projects-ambient-one 8.4s ease-in-out infinite
			alternate;
	}

	.magida-template--projects:not(.prefers-reduced-projects-motion)
		.magida-projects-hero-visual__ambient--two {
		animation: magida-projects-ambient-two 9.2s ease-in-out infinite
			alternate;
	}

	.magida-template--projects:not(.prefers-reduced-projects-motion)
		.magida-projects-feature-board__chips
		span:nth-child(2n) {
		animation: magida-projects-chip-pulse 5.6s ease-in-out infinite
			alternate;
	}

	.magida-template--projects:not(.prefers-reduced-projects-motion)
		.magida-projects-feature-board__chips
		span:nth-child(2n + 1) {
		animation: magida-projects-chip-pulse 6.2s ease-in-out infinite
			alternate-reverse;
	}
}

.magida-template--projects:not(.prefers-reduced-projects-motion)
	.magida-projects-hero__feature-card {
	animation: magida-project-card-float 6.8s ease-in-out infinite alternate;
}

.magida-template--projects:not(.prefers-reduced-projects-motion)
	.magida-projects-preview__card::after,
.magida-template--projects:not(.prefers-reduced-projects-motion)
	.magida-projects-categories__card::after {
	animation: magida-project-card-glow 7.2s ease-in-out infinite alternate;
}

.magida-template--projects:not(.prefers-reduced-projects-motion)
	.magida-projects-hero__orb--one,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-projects-hero__orb--one {
	animation: magida-project-orb-one 8s ease-in-out infinite alternate;
}

.magida-template--projects:not(.prefers-reduced-projects-motion)
	.magida-projects-hero__orb--two,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-projects-hero__orb--two,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-case-hero__summary-glow--two {
	animation: magida-project-orb-two 9s ease-in-out infinite alternate;
}

.magida-template--projects:not(.prefers-reduced-projects-motion)
	.magida-projects-hero__flow,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-projects-hero__flow {
	animation: magida-project-flow 11s ease-in-out infinite alternate;
}

.magida-template--projects:not(.prefers-reduced-projects-motion)
	.magida-projects-flagship__sheen,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-case-screenshot__shine {
	animation: magida-project-sheen 7.5s ease-in-out infinite;
}

.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-case-hero__summary-glow--one {
	animation: magida-project-case-glow 8s ease-in-out infinite alternate;
}

@keyframes magida-projects-hero-frame-breathe {
	0% {
		box-shadow:
			0 26px 90px rgba(0, 0, 0, 0.32),
			0 0 54px rgba(0, 216, 255, 0.12);
	}

	100% {
		box-shadow:
			0 30px 96px rgba(0, 0, 0, 0.36),
			0 0 68px rgba(0, 216, 255, 0.17);
	}
}

@keyframes magida-projects-feature-board-float {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(0, -7px, 0);
	}
}

@keyframes magida-projects-device-drift {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		transform: translate3d(10px, -10px, 0) scale(1.02);
	}
}

@keyframes magida-projects-ambient-one {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.72;
	}

	100% {
		transform: translate3d(14px, -12px, 0) scale(1.08);
		opacity: 0.96;
	}
}

@keyframes magida-projects-ambient-two {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.72;
	}

	100% {
		transform: translate3d(-18px, 14px, 0) scale(0.94);
		opacity: 0.92;
	}
}

@keyframes magida-projects-feature-board-sheen {
	0% {
		transform: translateX(-130%) rotate(18deg);
		opacity: 0;
	}

	38% {
		opacity: 0.36;
	}

	100% {
		transform: translateX(330%) rotate(18deg);
		opacity: 0;
	}
}

@keyframes magida-projects-chip-pulse {
	0% {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	}

	100% {
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.1),
			0 0 22px rgba(5, 223, 254, 0.07);
	}
}

@keyframes magida-project-card-float {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(0, -8px, 0);
	}
}

@keyframes magida-project-card-glow {
	0% {
		opacity: 0.28;
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		opacity: 0.72;
		transform: translate3d(-8px, -8px, 0) scale(1.08);
	}
}

@keyframes magida-project-orb-one {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		transform: translate3d(18px, -14px, 0) scale(1.08);
	}
}

@keyframes magida-project-orb-two {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		transform: translate3d(-16px, 16px, 0) scale(0.94);
	}
}

@keyframes magida-project-flow {
	0% {
		transform: rotate(-14deg) translate3d(-2%, 0, 0);
		opacity: 0.5;
	}

	100% {
		transform: rotate(-8deg) translate3d(4%, -8%, 0);
		opacity: 0.88;
	}
}

@keyframes magida-project-sheen {
	0% {
		transform: translateX(-130%) rotate(18deg);
		opacity: 0;
	}

	40% {
		opacity: 0.35;
	}

	100% {
		transform: translateX(130%) rotate(18deg);
		opacity: 0;
	}
}

@keyframes magida-project-case-glow {
	0% {
		transform: scale(0.92) translate3d(0, 0, 0);
		opacity: 0.45;
	}

	100% {
		transform: scale(1.08) translate3d(18px, -18px, 0);
		opacity: 0.8;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-projects-motion-ready [data-magida-projects-reveal],
	.magida-projects-motion-ready [data-projects-reveal],
	.magida-template--projects .magida-projects-hero-visual,
	.magida-template--projects .magida-projects-feature-board,
	.magida-template--projects .magida-projects-feature-board__chips span,
	.magida-template--projects .magida-projects-feature-device,
	.magida-template--projects .magida-projects-hero-visual__ambient,
	.magida-template--projects .magida-projects-hero__orb,
	.magida-template--projects .magida-projects-hero__flow,
	.magida-template--projects .magida-projects-hero__feature-card,
	.magida-template--projects .magida-projects-preview__card::after,
	.magida-template--projects .magida-projects-categories__card::after,
	.magida-template--projects .magida-projects-flagship__sheen,
	.magida-template--project-case-study .magida-projects-hero__orb,
	.magida-template--project-case-study .magida-projects-hero__flow,
	.magida-template--project-case-study .magida-case-hero__summary-glow,
	.magida-template--project-case-study .magida-case-screenshot__shine {
		animation: none !important;
		opacity: 1;
		transform: none !important;
		transition: none !important;
	}

	/* CHANGE PASS 22.6.7: Hide sheen in reduced motion instead of leaving a static stripe on the board. */
	.magida-template--projects .magida-projects-feature-board::after {
		animation: none !important;
		opacity: 0;
		transform: none !important;
		transition: none !important;
	}
}

/* MAGIDA PROJECTS SINGLE MOTION SELECTOR FIX PASS 22.7.6:
 * - Fixes the missing single Project hero motion by targeting the actual root element.
 * - The template root already has .magida-template--project-case-study, and JS adds .is-projects-motion-ready to that SAME element.
 * - Previous selectors looked for .magida-template--project-case-study INSIDE .is-projects-motion-ready, so they never matched.
 * - Keeps all movement transform-only so desktop/tablet alignment and mobile containment stay intact.
 */
.magida-project-case-card,
.magida-project-case-card__frame,
.magida-project-case-card__screen,
.magida-project-case-card__screen::after,
.magida-project-case-card__orb,
.magida-project-case-card__meta span {
	will-change: transform, opacity;
}

/* CHANGE PASS 22.7.5: Restore the soft living-card motion without changing the unified hero layout contract. */
/* CHANGE PASS 22.7.6: Root class selector fixed so motion starts on the real single Project template root. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card {
	animation: magida-project-single-card-aura 8.5s ease-in-out infinite
		alternate;
}

/* CHANGE PASS 22.7.5: Float the inner browser frame only; the outer card keeps its fixed height. */
/* CHANGE PASS 22.7.6: Frame float now targets the same root element JS marks as motion-ready. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card__frame,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card__frame {
	animation: magida-project-single-frame-float 7.5s ease-in-out infinite;
	transform-origin: center;
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

/* CHANGE PASS 22.7.5: When desktop tilt is active, pause the float so JS tilt and CSS animation do not fight each other. */
/* CHANGE PASS 22.7.6: Tilt pause now works because selector matches the actual marked root. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card__frame.is-tilting,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card__frame.is-tilting {
	animation-play-state: paused;
	transform: perspective(1000px) rotateX(var(--magida-projects-tilt-x, 0deg))
		rotateY(var(--magida-projects-tilt-y, 0deg)) translate3d(0, -2px, 0);
}

/* CHANGE PASS 22.7.5: Give the screen/card content a visible arrival and gentle pulse. */
/* CHANGE PASS 22.7.6: Screen reveal/pulse restored with corrected root selector. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card__screen,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card__screen {
	animation:
		magida-project-single-screen-in 0.78s cubic-bezier(0.16, 1, 0.3, 1) both,
		magida-project-single-screen-pulse 8s ease-in-out 0.9s infinite
			alternate;
}

/* CHANGE PASS 22.7.5: Restore the moving sheen over the hero browser screen. */
/* CHANGE PASS 22.7.6: Screen sheen restored with corrected root selector. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card__screen::after,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card__screen::after {
	animation: magida-project-single-sheen 7s ease-in-out 1.1s infinite;
}

/* CHANGE PASS 22.7.5: Keep the background grid subtly alive. */
/* CHANGE PASS 22.7.6: Grid drift restored with corrected root selector. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card__frame::before,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card__frame::before {
	animation: magida-project-single-grid-drift 18s linear infinite;
}

/* CHANGE PASS 22.7.5: Restore ambient orb movement. */
/* CHANGE PASS 22.7.6: First ambient orb restored with corrected root selector. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card__orb--one,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card__orb--one {
	animation: magida-project-single-orb-one 9s ease-in-out infinite alternate;
}

/* CHANGE PASS 22.7.6: Second ambient orb restored with corrected root selector. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card__orb--two,
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card__orb--two {
	animation: magida-project-single-orb-two 10.5s ease-in-out infinite
		alternate;
}

/* CHANGE PASS 22.7.5: Add a tiny stagger to the info pills; no margin or height changes. */
/* CHANGE PASS 22.7.6: First info pill float restored with corrected root selector. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card__meta
	span:nth-child(1),
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card__meta
	span:nth-child(1) {
	animation: magida-project-single-pill-float 6.8s ease-in-out 0.2s infinite
		alternate;
}

/* CHANGE PASS 22.7.6: Second info pill float restored with corrected root selector. */
.magida-template--project-case-study.is-projects-motion-ready:not(
		.prefers-reduced-projects-motion
	)
	.magida-project-case-card__meta
	span:nth-child(2),
.magida-template--project-case-study:not(.prefers-reduced-projects-motion)
	.magida-project-case-card__meta
	span:nth-child(2) {
	animation: magida-project-single-pill-float 7.4s ease-in-out 0.7s infinite
		alternate-reverse;
}

@keyframes magida-project-single-card-aura {
	0% {
		box-shadow:
			0 28px 88px rgba(0, 0, 0, 0.28),
			0 0 38px rgba(5, 223, 254, 0.06);
	}

	100% {
		box-shadow:
			0 34px 104px rgba(0, 0, 0, 0.34),
			0 0 58px rgba(101, 82, 255, 0.12);
	}
}

@keyframes magida-project-single-frame-float {
	0%,
	100% {
		transform: perspective(1000px)
			rotateX(var(--magida-projects-tilt-x, 0deg))
			rotateY(var(--magida-projects-tilt-y, 0deg)) translate3d(0, 0, 0);
	}

	50% {
		transform: perspective(1000px)
			rotateX(var(--magida-projects-tilt-x, 0deg))
			rotateY(var(--magida-projects-tilt-y, 0deg)) translate3d(0, -6px, 0);
	}
}

@keyframes magida-project-single-screen-in {
	0% {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.97);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes magida-project-single-screen-pulse {
	0% {
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.04),
			0 18px 48px rgba(0, 0, 0, 0.2);
	}

	100% {
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.07),
			0 24px 68px rgba(5, 223, 254, 0.08);
	}
}

@keyframes magida-project-single-sheen {
	0% {
		opacity: 0;
		transform: translateX(-130%) rotate(18deg);
	}

	38% {
		opacity: 0.25;
	}

	100% {
		opacity: 0;
		transform: translateX(130%) rotate(18deg);
	}
}

@keyframes magida-project-single-grid-drift {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 78px 78px;
	}
}

@keyframes magida-project-single-orb-one {
	0% {
		opacity: 0.55;
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		opacity: 0.84;
		transform: translate3d(16px, -18px, 0) scale(1.08);
	}
}

@keyframes magida-project-single-orb-two {
	0% {
		opacity: 0.42;
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		opacity: 0.74;
		transform: translate3d(-14px, 14px, 0) scale(0.96);
	}
}

@keyframes magida-project-single-pill-float {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(0, -4px, 0);
	}
}

/* CHANGE PASS 22.7.5: Reduced-motion safety for both browser preference and the JS-added root class. */
/* CHANGE PASS 22.7.6: Reduced-motion root selector fixed for the same-element class setup. */
.magida-template--project-case-study.prefers-reduced-projects-motion
	.magida-project-case-card,
.magida-template--project-case-study.prefers-reduced-projects-motion
	.magida-project-case-card__frame,
.magida-template--project-case-study.prefers-reduced-projects-motion
	.magida-project-case-card__frame::before,
.magida-template--project-case-study.prefers-reduced-projects-motion
	.magida-project-case-card__screen,
.magida-template--project-case-study.prefers-reduced-projects-motion
	.magida-project-case-card__screen::after,
.magida-template--project-case-study.prefers-reduced-projects-motion
	.magida-project-case-card__orb,
.magida-template--project-case-study.prefers-reduced-projects-motion
	.magida-project-case-card__meta
	span {
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.magida-template--project-case-study .magida-project-case-card,
	.magida-template--project-case-study .magida-project-case-card__frame,
	.magida-template--project-case-study
		.magida-project-case-card__frame::before,
	.magida-template--project-case-study .magida-project-case-card__screen,
	.magida-template--project-case-study
		.magida-project-case-card__screen::after,
	.magida-template--project-case-study .magida-project-case-card__orb,
	.magida-template--project-case-study .magida-project-case-card__meta span {
		animation: none !important;
		transition: none !important;
	}
}