/* Calm motion (2026-10-16). One orchestrated moment (the hero scene), then quiet reveals while scrolling.
   Nothing moves when the visitor asks the system to reduce motion. */

/* ---------- Layered hero scene ---------- */
.t-scene { position: relative; block-size: 520px; overflow: hidden; background: #E9DFF6; }
.t-scene-in { position: absolute; inset: 0; }
[dir="rtl"] .t-scene-in { transform: scaleX(-1); } /* mirror the whole picture in Arabic */
.t-scene .l { position: absolute; display: block; max-inline-size: none; pointer-events: none; user-select: none; will-change: translate; }
.t-scene .l-sky { inset: -6% 0 auto; inline-size: 100%; block-size: 112%; object-fit: cover; object-position: 50% 30%; }
.t-scene .l-clouds { top: 4%; left: -4%; inline-size: 108%; block-size: 46%; object-fit: contain; object-position: 50% 0; }
.t-scene .l-village { bottom: -4%; left: 0; inline-size: 100%; block-size: 86%; object-fit: cover; object-position: 50% 0; }
.t-scene .l-people { bottom: 3%; left: clamp(4%, 24%, 30%); block-size: 86%; inline-size: auto; }
.t-scene .l-foliage-left { bottom: -3%; left: -1%; block-size: 66%; inline-size: auto; }
.t-scene .l-foliage-right { bottom: -2%; right: -1%; block-size: 44%; inline-size: auto; }

@media (max-width: 781px) {
	.t-scene { block-size: 300px; }
	.t-scene .l-people { left: 18%; block-size: 84%; }
	.t-scene .l-foliage-left { block-size: 56%; }
}

@media (prefers-reduced-motion: no-preference) {
	/* entrance: the picture assembles from the back to the front */
	.t-scene.is-on .l { animation: t-rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
	.t-scene.is-on .l-sky { animation-name: t-fade; animation-duration: .8s; }
	.t-scene.is-on .l-village { animation-delay: .1s; }
	.t-scene.is-on .l-people { animation-delay: .3s; }
	.t-scene.is-on .l-foliage-left, .t-scene.is-on .l-foliage-right { animation-delay: .45s; }
	.t-scene.is-on .l-clouds { animation: t-fade 1.2s .15s both, t-drift 48s 1.4s ease-in-out infinite alternate; }
	.t-scene.is-on .l-foliage-left { transform-origin: 0 100%; animation: t-rise 1.1s .45s cubic-bezier(.2, .7, .2, 1) both, t-sway 7s 1.6s ease-in-out infinite alternate; }
	.t-scene.is-on .l-foliage-right { transform-origin: 100% 100%; animation: t-rise 1.1s .5s cubic-bezier(.2, .7, .2, 1) both, t-sway 8s 1.7s ease-in-out infinite alternate-reverse; }
	.t-scene .l { translate: calc(var(--px, 0) * var(--d) * 1px) calc(var(--sy, 0) * var(--d) * 1px); transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
	.d-photo .d-float { animation: t-rise .9s .7s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes t-drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
@keyframes t-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }

/* ---------- Quiet reveals while scrolling (only once JS has marked the page) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.t-motion .t-rv { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1), translate .25s ease, box-shadow .25s ease; transition-delay: calc(var(--i, 0) * 70ms); }
	.t-motion .t-rv.is-in { opacity: 1; transform: none; }

	/* progress bars fill from empty when they come into view */
	.t-motion .bar > span { transition: inline-size 1.2s cubic-bezier(.2, .7, .2, 1) .15s; }
	.t-motion .bar:not(.is-in) > span { inline-size: 0 !important; }

	/* cards lift a little under the pointer */
	@media (hover: hover) {
		.card, .d-way { transition: translate .25s ease, box-shadow .25s ease; }
		.card:hover, .d-way:hover { translate: 0 -3px; box-shadow: 0 2px 4px rgba(18,34,79,.06), 0 16px 36px rgba(18,34,79,.12); }
		.card .ph img { transition: transform .6s ease; }
		.card:hover .ph img { transform: scale(1.03); }
	}
}