/* Section 4 — motion, short version (Figma «Landing · Motion lite» 1440 wide, «Mobile · Motion lite» 390 wide).
   The strip's frames are --fw wide (150px on a computer, 110px on tablets, 93px on phones, which show three). */

.motion { padding: 80px 0 120px; } /* .sec: the frame (base.css). */

.motion__inner {
	width: var(--container);
	margin: 0 auto;
	padding: 70px 40px 0;
}

.motion__title {
	font-size: clamp(26px, 3.61vw, 52px);
	font-weight: 900;
	line-height: 1.35;
}
.motion__title span { color: var(--subtle); }

/* The filmstrip ------------------------------------------------------------------------------------------------- */

.motion__strip {
	--fw: 150px;
	margin: 64px 0 0;
	padding: 39px 72px 24px;
	border: 1px solid rgba(21, 19, 31, 0.08);
	border-radius: 36px;
	background: var(--white);
}

.motion__frames,
.motion__timeline,
.motion__ends {
	display: flex;
	justify-content: space-between;
}

.motion__frame {
	width: var(--fw);
	height: auto;
	aspect-ratio: 150 / 316;
}

/* Under each frame its dot, on a line from the first frame's centre to the last's. */
.motion__timeline {
	position: relative;
	height: 12px;
	margin-top: 25px;
}

.motion__line {
	position: absolute;
	top: 5px;
	right: calc(var(--fw) / 2);
	left: calc(var(--fw) / 2);
	height: 2px;
	border-radius: 1px;
	background: linear-gradient(to right, var(--coral), rgba(255, 107, 74, 0.25));
	transform-origin: right;
}

.motion__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--fw);
}
.motion__dot i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--coral);
}
.motion__dot--1 i { width: 12px; height: 12px; }
.motion__dot--2 i { opacity: 0.85; }
.motion__dot--3 i { opacity: 0.7; }
.motion__dot--4 i { opacity: 0.55; }
.motion__dot--5 i { width: 12px; height: 12px; opacity: 0.4; }

.motion__ends {
	margin-top: 7px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 17px;
}

/* In view, once: the frames light up one by one from the right and the timeline fills (motion.js arms it). */
.motion__strip.is-armed .motion__frame,
.motion__strip.is-armed .motion__dot i {
	transition: opacity 0.5s, transform 0.5s var(--ease-out);
	transition-delay: calc(var(--d, var(--i)) * 0.22s);
}
.motion__strip.is-armed .motion__frame { opacity: 0.25; transform: translateY(6px); }
.motion__strip.is-armed .motion__dot i { transform: scale(0); }
.motion__strip.is-armed .motion__line { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }

.motion__strip.is-playing .motion__frame { opacity: 1; transform: none; }
.motion__strip.is-playing .motion__dot i { transform: none; }
.motion__strip.is-playing .motion__line { transform: none; }

/* Three short claims (.points, base.css) ----------------------------------------------------------------------- */

.motion__points { gap: 14px 48px; margin-top: 44px; }

@media (max-width: 1180px) {
	.motion__inner { padding-inline: 0; }
}

@media (max-width: 1023px) {
	.motion__strip { --fw: 110px; padding-inline: 31px; }
}

/* Phones: frames 1, 3 and 5; the claims one under the other. */
@media (max-width: 767px) {
	.motion { padding: 36px 0 32px; }
	.motion__inner { padding-top: 48px; }
	.motion__title { font-size: 26px; line-height: 1.4; }

	.motion__strip {
		--fw: 93px;
		margin-top: 28px;
		padding: 21px 21px 16px;
	}
	.motion__frame--2,
	.motion__frame--4,
	.motion__dot--2,
	.motion__dot--4 { display: none; }
	.motion__timeline { margin-top: 19px; }
	.motion__ends { margin-top: 9px; }
	.motion__ends span { width: var(--fw); text-align: center; } /* Under the end dots. */
	/* Three frames: a shorter wait between them. */
	.motion__frame--3,
	.motion__dot--3 { --d: 1; }
	.motion__frame--5,
	.motion__dot--5 { --d: 2; }

	.motion__points { margin-top: 28px; }
}