/*
File: assets/css/pages/commissioned-art/motion.css
Description: Commissioned Art page motion layer.

MAGIDA COMMISSIONED ART MOTION/GRAPHICS PASS 13.4:
- Adds scoped reveal motion and gentle art-board movement.
- Uses transform/opacity animations only to avoid layout shift and scroll drag.
- Respects prefers-reduced-motion.
*/

/* PASS 13.4: Reveal states are added by assets/js/pages/commissioned-art/motion.js. */
.magida-template--commissioned-art.magida-commission-motion-ready
	.magida-commission-reveal {
	opacity: 0;
	transform: translate3d(0, 2rem, 0);
	transition:
		opacity 0.72s ease,
		transform 0.72s cubic-bezier(0.2, 0.78, 0.26, 1);
	transition-delay: var(--magida-commission-delay, 0ms);
	will-change: opacity, transform;
}

.magida-template--commissioned-art.magida-commission-motion-ready
	.magida-commission-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

/* PASS 13.4: Hero illustration breathes gently without changing the hero height. */
.magida-template--commissioned-art .magida-commission-art-board {
	animation: magida-commission-board-float 7.5s ease-in-out infinite;
}

.magida-template--commissioned-art .magida-commission-hero__orb--one {
	animation: magida-commission-orb-drift-one 8s ease-in-out infinite;
}

.magida-template--commissioned-art .magida-commission-hero__orb--two {
	animation: magida-commission-orb-drift-two 9s ease-in-out infinite;
}

.magida-template--commissioned-art .magida-commission-art-board__face {
	animation: magida-commission-face-breathe 4.8s ease-in-out infinite;
}

.magida-template--commissioned-art .magida-commission-art-board__face::before,
.magida-template--commissioned-art .magida-commission-art-board__face::after {
	animation: magida-commission-eye-glow 3.8s ease-in-out infinite;
}

.magida-template--commissioned-art .magida-commission-art-board__stroke--one {
	animation: magida-commission-stroke-draw-one 5.6s ease-in-out infinite;
}

.magida-template--commissioned-art .magida-commission-art-board__stroke--two {
	animation: magida-commission-stroke-draw-two 6.1s ease-in-out infinite;
}

.magida-template--commissioned-art .magida-commission-art-board__stroke--three {
	animation: magida-commission-stroke-draw-three 6.6s ease-in-out infinite;
}

.magida-template--commissioned-art .magida-commission-art-board__flow li {
	animation: magida-commission-chip-pulse 7.2s ease-in-out infinite;
	animation-delay: calc(var(--magida-chip-index, 0) * 180ms);
}

.magida-template--commissioned-art
	.magida-commission-art-board__flow
	li:nth-child(1) {
	--magida-chip-index: 1;
}

.magida-template--commissioned-art
	.magida-commission-art-board__flow
	li:nth-child(2) {
	--magida-chip-index: 2;
}

.magida-template--commissioned-art
	.magida-commission-art-board__flow
	li:nth-child(3) {
	--magida-chip-index: 3;
}

.magida-template--commissioned-art
	.magida-commission-art-board__flow
	li:nth-child(4) {
	--magida-chip-index: 4;
}

.magida-template--commissioned-art
	.magida-commission-art-board__flow
	li:nth-child(5) {
	--magida-chip-index: 5;
}

.magida-template--commissioned-art
	.magida-commission-art-board__flow
	li:nth-child(6) {
	--magida-chip-index: 6;
}

/* PASS 13.4: Gallery placeholder art moves subtly so the section feels alive. */
.magida-template--commissioned-art .magida-commission-gallery-card__media span {
	animation: magida-commission-gallery-portrait 7.5s ease-in-out infinite;
}

.magida-template--commissioned-art .magida-commission-gallery-card__media i {
	animation: magida-commission-gallery-orb 8.4s ease-in-out infinite;
}

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

	50% {
		transform: translate3d(0, -0.6rem, 0);
	}
}

@keyframes magida-commission-orb-drift-one {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.72;
	}

	50% {
		transform: translate3d(0.85rem, -0.65rem, 0) scale(1.06);
		opacity: 1;
	}
}

@keyframes magida-commission-orb-drift-two {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.58;
	}

	50% {
		transform: translate3d(-0.7rem, 0.75rem, 0) scale(1.08);
		opacity: 0.9;
	}
}

@keyframes magida-commission-face-breathe {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
	}

	50% {
		transform: translate(-50%, -50%) scale(1.035);
	}
}

@keyframes magida-commission-eye-glow {
	0%,
	100% {
		opacity: 0.88;
	}

	46% {
		opacity: 1;
	}

	50% {
		opacity: 0.48;
	}

	54% {
		opacity: 1;
	}
}

@keyframes magida-commission-stroke-draw-one {
	0%,
	100% {
		transform: rotate(-14deg) translate3d(0, 0, 0);
		opacity: 0.55;
	}

	50% {
		transform: rotate(-10deg) translate3d(0.35rem, -0.25rem, 0);
		opacity: 0.9;
	}
}

@keyframes magida-commission-stroke-draw-two {
	0%,
	100% {
		transform: rotate(11deg) translate3d(0, 0, 0);
		opacity: 0.45;
	}

	50% {
		transform: rotate(7deg) translate3d(-0.25rem, 0.25rem, 0);
		opacity: 0.82;
	}
}

@keyframes magida-commission-stroke-draw-three {
	0%,
	100% {
		transform: rotate(-6deg) translate3d(0, 0, 0);
		opacity: 0.48;
	}

	50% {
		transform: rotate(-2deg) translate3d(0.3rem, 0.2rem, 0);
		opacity: 0.86;
	}
}

@keyframes magida-commission-chip-pulse {
	0%,
	100% {
		border-color: rgba(255, 255, 255, 0.11);
		box-shadow: none;
	}

	45%,
	55% {
		border-color: rgba(5, 223, 254, 0.3);
		box-shadow: 0 0 1.25rem rgba(5, 223, 254, 0.1);
	}
}

@keyframes magida-commission-gallery-portrait {
	0%,
	100% {
		transform: translate(-50%, -50%) rotate(-2deg) scale(1);
	}

	50% {
		transform: translate(-50%, -50%) rotate(2deg) scale(1.025);
	}
}

@keyframes magida-commission-gallery-orb {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(-0.45rem, -0.35rem, 0) scale(1.05);
	}
}

@media (prefers-reduced-motion: reduce) {
	/* PASS 13.4: Keep the page fully readable when motion is disabled. */
	.magida-template--commissioned-art.magida-commission-motion-ready
		.magida-commission-reveal,
	.magida-template--commissioned-art .magida-commission-art-board,
	.magida-template--commissioned-art .magida-commission-hero__orb,
	.magida-template--commissioned-art .magida-commission-art-board__face,
	.magida-template--commissioned-art
		.magida-commission-art-board__face::before,
	.magida-template--commissioned-art
		.magida-commission-art-board__face::after,
	.magida-template--commissioned-art .magida-commission-art-board__stroke,
	.magida-template--commissioned-art .magida-commission-art-board__flow li,
	.magida-template--commissioned-art
		.magida-commission-gallery-card__media
		span,
	.magida-template--commissioned-art
		.magida-commission-gallery-card__media
		i {
		animation: none;
		transition: none;
		transform: none;
		opacity: 1;
	}

	.magida-template--commissioned-art .magida-commission-art-board__face {
		transform: translate(-50%, -50%);
	}

	.magida-template--commissioned-art
		.magida-commission-gallery-card__media
		span {
		transform: translate(-50%, -50%);
	}
}