/**
 * File: assets/css/pages/pricing/motion.css
 * Description: Pricing page reveal, hover, and decorative motion.
 *
 * MAGIDA PRICING PAGE PASS 11:
 * - Adds section reveals, hero card float, scan motion, and package hover lift.
 *
 * MAGIDA PRICING GLOBAL HERO MIGRATION PASS 22.3:
 * - Retains the Pricing motion hooks after the page moves into the global inner hero shell.
 * - Disables decorative hero card floating on smaller screens to avoid edge clipping.
 *
 * MAGIDA PRICING HERO MOTION PASS 23.3.4:
 * - Restores safe decorative motion to the Pricing hero visual on tablet/mobile.
 * - Keeps the approved hero layout intact and still respects reduced-motion preferences.
 */

[data-magida-pricing-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}

[data-magida-pricing-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

.magida-pricing-hero__visual-scan {
	animation: magida-pricing-scan 7s ease-in-out infinite;
}

.magida-pricing-hero__panel {
	animation: magida-pricing-float 7s ease-in-out infinite;
}

.magida-pricing-hero__panel--growth {
	animation-delay: -2.2s;
}

.magida-pricing-hero__panel--custom {
	animation-delay: -4s;
}

.magida-pricing-package,
.magida-pricing-addon,
.magida-pricing-payment__card,
.magida-pricing-custom__media {
	transition:
		transform 0.28s ease,
		border-color 0.28s ease,
		box-shadow 0.28s ease;
}

.magida-pricing-package:hover,
.magida-pricing-addon:hover,
.magida-pricing-payment__card:hover,
.magida-pricing-custom__media:hover {
	transform: translateY(-6px);
	border-color: rgba(0, 216, 255, 0.28);
	box-shadow: 0 26px 70px rgba(0, 216, 255, 0.11);
}

@keyframes magida-pricing-scan {
	0%,
	100% {
		transform: translateX(-58%);
		opacity: 0.2;
	}

	45% {
		transform: translateX(58%);
		opacity: 0.9;
	}

	70% {
		transform: translateX(58%);
		opacity: 0;
	}
}

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

	50% {
		transform: translate3d(0, -10px, 0);
	}
}

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

	50% {
		/* MAGIDA PASS 23.3.4: Smaller travel keeps mobile/tablet pricing panels safely inside the approved frame. */
		transform: translate3d(0, -5px, 0);
	}
}

@media (max-width: 1100px) {
	[data-magida-pricing-reveal],
	[data-magida-pricing-reveal].is-visible {
		/* MAGIDA PASS 23.3.4: Keep mobile/tablet content immediately readable while restoring only the hero artwork motion. */
		opacity: 1;
		transform: none;
		transition: none;
	}

	.magida-pricing-hero__visual-scan {
		/* MAGIDA PASS 23.3.4: Restore the moving scan layer on tablet/mobile. */
		animation: magida-pricing-scan 8.5s ease-in-out infinite;
	}

	.magida-pricing-hero__panel {
		/* MAGIDA PASS 23.3.4: Restore a gentler card float on tablet/mobile to avoid clipping. */
		animation: magida-pricing-float-compact 7.5s ease-in-out infinite;
	}

	.magida-pricing-hero__visual.magida-pricing-tilt {
		/* MAGIDA PASS 23.3.4: Tilt remains desktop-only; mobile/tablet keeps scroll stable. */
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-magida-pricing-reveal],
	[data-magida-pricing-reveal].is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.magida-pricing-hero__visual-scan,
	.magida-pricing-hero__panel {
		/* MAGIDA PASS 23.3.4: Accessibility override must win over all viewport motion rules. */
		animation: none !important;
	}

	.magida-pricing-hero__visual.magida-pricing-tilt {
		transform: none !important;
	}
}