/* ===================================================================
 * Motion
 *
 * The page was static. The previous site had a scrolling claims bar and it
 * was one of the few things on it with any life, so that idea comes across
 * — plus a mascot that breathes rather than stands.
 *
 * Everything here is decoration. Every animation is switched off under
 * prefers-reduced-motion, and nothing depends on motion to be readable.
 * ================================================================= */

/* ---- Claims ticker ----
   One navy bar that both carries the weight under the hero and moves. The
   static trust strip that used to sit beneath it has gone: two full-width
   bars stacked read as two attempts at the same job. */
.sm-ticker {
	padding-block: 1.05rem;
	overflow: hidden;
	/*
	 * LTR on the CONTAINER, not just the track.
	 *
	 * In an RTL container an over-wide child is anchored to its RIGHT edge,
	 * so the track began already scrolled to the end of the second copy;
	 * translating -50% then ran off the end and snapped back, which reads as
	 * a typewriter carriage return. Anchored left, -50% lands the duplicate
	 * exactly where the original began and the loop is invisible.
	 *
	 * Each claim is still rendered in its own script by the <span> inside.
	 */
	direction: ltr;
}
.sm-ticker__mask {
	/* Claims arrive and leave rather than being cut at the edges. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.sm-ticker__track {
	display: flex;
	inline-size: max-content;
	animation: sm-marquee 46s linear infinite;
}
.sm-ticker:hover .sm-ticker__track,
.sm-ticker:focus-within .sm-ticker__track { animation-play-state: paused; }

.sm-ticker__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sm-ticker__list li {
	display: flex;
	align-items: center;
	white-space: nowrap;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--paper);
	/* Half the separation on each side, so the space between the last item
	   of one copy and the first of the next matches every other gap. */
	padding-inline: 1.5rem;
}
.sm-ticker__list li > span {
	/*
	 * plaintext, not isolate.
	 *
	 * isolate uses the CONTAINER's direction, which is ltr here, so a
	 * claim opening with a digit — "3 لتر تعادل 6.5 كجم بودرة" — had the
	 * 3 placed at the left and it read as "لتر تعادل … بودرة 3". A digit
	 * is a weak character; plaintext infers the direction from the first
	 * STRONG character instead, which is the Arabic letter after it.
	 */
	unicode-bidi: plaintext;
}
/* A magenta dot before each claim, drawn rather than typed. */
.sm-ticker__list li::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	margin-inline-end: .85rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	flex: 0 0 auto;
}

@keyframes sm-marquee {
	from { transform: translate3d(0, 0, 0); }
	/* Exactly half: the second copy lands where the first began. */
	to   { transform: translate3d(-50%, 0, 0); }
}
/* ---- Mascot ---- */
.sm-mascot img {
	animation: sm-float 6.5s ease-in-out infinite;
	will-change: transform;
}
@keyframes sm-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -12px, 0); }
}

/* ---- Hero CTA: a slow pulse that stops once it has been noticed ---- */
.sm-cta-lg .wp-element-button {
	transition: transform .18s ease, box-shadow .18s ease;
}
.sm-cta-lg .wp-element-button:hover,
.sm-cta-lg .wp-element-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(216, 39, 136, .34);
}

/* ---- Sections arrive as they are reached ----
   From a visible resting state: the section is readable with no JavaScript
   and with motion switched off. The class is only added by the observer. */
.sm-reveal {
	opacity: 1;
	transform: none;
	transition: opacity .55s ease, transform .55s ease;
}
.js-motion .sm-reveal:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
}

@media (prefers-reduced-motion: reduce) {
	.sm-ticker__track,
	.sm-mascot img { animation: none !important; }
	.sm-cta-lg .wp-element-button { transition: none; }
	.sm-reveal,
	.js-motion .sm-reveal:not(.is-in) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media (max-width: 781px) {
	.sm-ticker__list { gap: 1.8rem; }
	.sm-ticker__list li { font-size: .95rem; }
}

/* ---- Homepage FAQ ---- */
.sm-faqhome { text-align: start; }
.sm-faqhome__h {
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
	margin: .15em 0 0;
}
.sm-faq--two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	align-items: start;
	margin-block-start: var(--wp--preset--spacing--40);
}
.sm-faqhome__more { margin-block-start: var(--wp--preset--spacing--40); }
.sm-faqhome__more a {
	font-weight: 700;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}
.sm-faqhome__more a:hover { color: var(--wp--preset--color--navy); }

@media (max-width: 860px) {
	.sm-faq--two { grid-template-columns: 1fr; }
}