/*
 * Motion layer of the 2026-10-13 home redesign (inc/home-2026-10.php).
 *
 * Every rule is scoped to html.sy-motion, a class set by a 3-line script in <head>
 * when the visitor does not ask for reduced motion (or when the URL carries
 * ?sy-motion=1, for testing on machines that report reduced motion). Without the
 * class nothing here applies and the page is the static design.
 *
 * Only transform and opacity are animated (composited, no layout work):
 *  - slow floating of the mascots (7-9s loops, 10-14px);
 *  - one-shot choreography when the 网站建设流程 row enters the screen (steps fade up
 *    one after the other, the orange segment draws from the left, the rocket slides
 *    into place) and when the 关于我们 figure cards enter (slide in from the right);
 *    js/home-2026-10-motion.js adds .is-in once with an IntersectionObserver;
 *  - a light shine on the blue buttons, on hover only.
 */

@keyframes sy-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -12px, 0); }
}

@keyframes sy-float-small {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -6px, 0); }
}

@keyframes sy-drift {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(8px, -14px, 0) rotate(2deg); }
}

/* ---------- Floating mascots ---------- */
.sy-motion .sy-video__deco--astro-left,
.sy-motion .sy-video__deco--astro-right,
.sy-motion .sy-steps__deco--top,
.sy-motion .sy-about__deco--saturn,
.sy-motion .sy-cta__art--right {
	animation: sy-float 7s ease-in-out infinite;
}

.sy-motion .sy-video__deco--astro-right {
	animation-duration: 8.5s;
	animation-delay: -3s;
}

.sy-motion .sy-steps__deco--top {
	animation-duration: 9s;
	animation-delay: -5s;
}

.sy-motion .sy-about__deco--saturn {
	animation-duration: 6s;
	animation-delay: -1s;
}

.sy-motion .sy-cta__art--right {
	animation-delay: -4s;
}

.sy-motion .sy-video__deco--rocket,
.sy-motion .sy-about__deco--astro,
.sy-motion .sy-cta__art--left {
	animation: sy-drift 9s ease-in-out infinite;
}

.sy-motion .sy-about__deco--astro {
	animation-duration: 8s;
	animation-delay: -2s;
}

.sy-motion .sy-cta__art--left {
	animation-delay: -6s;
}

/* ---------- 网站建设流程: one-shot choreography ---------- */
.sy-motion .sy-steps__list li {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sy-motion .sy-steps__list li:nth-child(2) { transition-delay: 0.12s; }
.sy-motion .sy-steps__list li:nth-child(3) { transition-delay: 0.24s; }
.sy-motion .sy-steps__list li:nth-child(4) { transition-delay: 0.36s; }

.sy-motion .sy-steps__list.is-in li {
	opacity: 1;
	transform: none;
}

/* Orange segment: drawn from the left edge once the steps are up */
.sy-motion .sy-steps__list::after {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.55s;
}

.sy-motion .sy-steps__list.is-in::after {
	transform: scaleX(1);
}

/* Rocket: arrives with the segment, then floats a little */
.sy-motion .sy-steps__rocket {
	opacity: 0;
	transform: translate(-50%, -50%) translateX(-130px);
	transition: opacity 0.4s ease 0.6s, transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.55s;
}

.sy-motion .sy-steps__list.is-in .sy-steps__rocket {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.sy-motion .sy-steps__list.is-in .sy-steps__rocket img {
	animation: sy-float-small 4s ease-in-out 1.9s infinite;
}

/* ---------- 关于我们: figure cards slide in from the right ---------- */
.sy-motion .sy-about__stats li {
	opacity: 0;
	transform: translateX(70px);
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sy-motion .sy-about__stats li:nth-child(2) { transition-delay: 0.15s; }
.sy-motion .sy-about__stats li:nth-child(3) { transition-delay: 0.3s; }

.sy-motion .sy-about__grid.is-in .sy-about__stats li {
	opacity: 1;
	transform: none;
}

/* ---------- Buttons: shine on hover ---------- */
.sy-motion .sy-btn {
	position: relative;
	overflow: hidden;
}

.sy-motion .sy-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -70%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	transition: left 0.65s ease;
	pointer-events: none;
}

.sy-motion .sy-btn:hover::before {
	left: 130%;
}

/* Phones: the floats stay (cheap), the hover shine has no hover */
@media (max-width: 699px) {
	.sy-motion .sy-btn::before {
		display: none;
	}
}